阅读 3109

vue-admin 详细注释,必须手把手做项目系列之(二)

系列文章

前言

  • 这两天项目上线楼主要一大推的事要忙,要和产品撕逼,要和后台讨论一系列的问题要怎么处理,还要安抚团队小伙伴的情绪,更新的就比较慢,希望大家见谅。------- 之后的篇幅将会减少,加快更新速度
  • 系列二,将会和大家介绍,如何在后台跟不上我们前端的进度时,我们自己很快的编写接口数据,进行一些简单的增删改查,以及vue-cli 2.0和vue-cli 3.0的本地代理的配置,本系列用的是vue-cli 2.0,以及axios的拦截器的配置,还有设置token的一些注意事项
  • 其次,有同学提出为什么不使用 vuex,在此我想说那句老话,不要为了使用vuex而使用vuex、莫慌,你要理解他的作用,以及能给我们项目带来哪一些的方便的东西再去使用。

使用json-server

  • 对于选用json-server来做模拟数据,楼主就是觉得很快,学习成本比较低,可以模拟简单的sql语句,进行简单的增删查的一些操作,(ps)同时在我们前端进度比较快的时候,你不一定要全部的模拟真实接口返回的数据情况,这样非常耗时间,而且在我们项目中有时候会碰到,需求不明确的情况,你可以模拟一些,主要的操作,先解决主要,再看时间盈余解决次要,有人说怎么不使用mock,这个看个人喜好,

  • 安装json-server npm i --save json-server

  • 然后在项目的根目录下创建db.js文件,用于模拟json数据

  • 编写json格式的数据

{
	"login":[
		{
			"username": "why",
			"password": 123456
		}
	],
	"table":[
		{
			"date": "why",
			"name": 123456,
			"address": "上海市虹口区"
		}
	]
}
复制代码

然后我们就要测试数据,测试数据的准备:

  • 模拟服务器:使用node起一个简单的服务

图片中的代码

// json-server
const jsonServer = require('json-server')
/*搭建一个server*/
const apiJsonServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const jsonWares = jsonServer.defaults()
//全局使用
apiJsonServer.use(jsonWares)
apiJsonServer.use(apiRouter)
/*监听端口*/
apiJsonServer.listen(8888, () => {
  console.log('JSON Server is running')
  console.log('localhost:8888')
})
复制代码

在vue中配置本地代理(vue-cli 2.0和3.0的区别),

vue-cli 2.0中

vue-cli 3.0中要新建vue.config.js文件,在项目的更目录中 ##使用postman来测试接口数据 到官网下载:www.getpostman.com/apps,选择合适你电…

启动json-server,如果拉的是楼主的代码,直接npm run dev 你的项目和你的json-server 都会同时启动

或者,进入创建json所在的路径, 使用命令:json-server json文件名 (安装时要-g,在全局下安装)

启动成功之后,用postman测试数据,输入你定义的localhost:端口号/定义的json数组的名字

http://localhost:8888/table/id 获取指定id的数据

使用post方法新增数据

使用put更新指定id对象的数据

使用delete删除指定id的数据

分页查询 参数为 _start, _end, _limit,并可添加其它参数筛选条件 如:1到5条和只查询三条数据

排序 参数为_sort, _order

配合axios 请求接口数据

>使用axios :npm i --save axios

>引入axios 
```js
import axios from 'axios'
// 把axios对象绑定到Vue原型中全局使用
复制代码

Vue.prototype.axios = axios ```

不使用本地代理,配置拦截器,以及拦截器常用的操作(ps:看自己在项目中有什么需求,按自己的需求配置)

   // 添加请求拦截器,拦截器的作用:
   // 在拦截器中可以获取到axios的配置,在config中修改东西
   axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     // console.log('哈哈,我拦截到了请求', config)
     // 只需要给config配置baseURL 以及 headers
     config.baseURL = 'http://localhost:8888/'
     // 给每个http header都加上token,
     config.headers.Authorization = localStorage.getItem('myToken')
     return config
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error)
   })
   // 配置axios的通过配置
   // axios.defaults.baseURL = 'http://localhost:8888/'
   // axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
复制代码

token的设置,以及注意的事项

>在系列一中,有详细的代码注释,在导航钩子中配置,

>主要会涉及到,每次发送请求带上token,和给token设置过期时间
复制代码
  • 7、兼容性处理

    在我们后台管理系统中要慎用h5c3的属性,和方法,以免出现很麻烦的兼容性问题

    vue为啥会有兼容性问题,尤大大说的已经很明白了,在这里就不介绍了,啦啦啦

    安装 babel-polyfill (cnpm install babel-polyfill --save-dev) 在入口文件中引入 import "babel-polyfill" 或者 require("babel-polyfill") webpack.base.conf.js中配置

    
    entry: { 
     
    app: ["babel-polyfill","./src/main.js"],
     
    }
    复制代码

    也就是使用cdn的资源,以js的文件加入到html页面:例如:

    <script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
    复制代码

基本上把上面的所有东西搭建好,你就可以愉快地开发了,可以丰富自己的项目了

在系列三中,楼主会用node或阿帕奇做服务器,把我们项目放到服务器中,详解会出现种种的小问题,届时会做一些常用代码的封装,代码的优化等等