在api文件夹下新建config.js文件，配置一些请求的通用选项，同时还对gei和post请求进一步封装。其实封装不封装都无所谓，我个人感觉封装后会省事一点。代码如下：
import axios from "axios" import { Message } from "element-ui" // 这个baseUrl要根据实际情况进行改变 axios.defaults.baseURL = "https://www.jb51.net/" axios.defaults.headers.common["Content-Type"] = "application/json; charset=UTF-8" axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*" // 请求拦截器 添加token axios.interceptors.request.use( config => { return config }, error => { return Promise.reject(error) } ) // 响应拦截器即异常处理 axios.interceptors.response.use( response => { return response }, error => { Message({ message: error.message, type: "error", duration: 5000, }) return Promise.resolve(error) } ) export default { // get请求 get(url, param) { return new Promise((resolve, reject) => { axios({ method: "get", url, params: param, }) .then(res => { resolve(res) }) .catch(error => { Message({ message: error, type: "error", duration: 5000, }) reject(error) }) }) }, // post请求 post(url, param) { return new Promise((resolve, reject) => { axios({ method: "post", url, data: param, }) .then(res => { resolve(res) }) .catch(error => { Message({ message: error, type: "error", duration: 5000, }) reject(error) }) }) }, // all get allGet(fnArr) { return axios.all(fnArr) }, }
在api的文件夹下新建login.js文件。这个函数的作用就是请求后台的login接口。
代码如下:
import service from './config' class Login { login(params) { return service.post('login', params) } } export default new Login()
axios不用特别配置的，引入就可以用。现在问题来了，有了接口了，但是我们没有后台啊。我们没法做登录的功能。不过不用担心，现在的我们的前端已经很强大了。没有后端，我们可以使用mock来模拟后端。
10.设置eslint在安装mock前，我们还有一个小问题要解决，就是设置eslint的规则，默认的eslint的规则很严格的，我们在页面甚至不能使用console.log() 这就会给我们的调试带来困难。因此我们要禁用一些eslint规则。
打开package.json，找到 eslintConfig 项，在找到其下的rules。配置 "no-console": "off" 。就可以关闭eslint对console的限制。
"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": { "no-console": "off" }, "parserOptions": { "parser": "babel-eslint" } },
好了，现在我们就可以愉快的在vue写console了。
11. mockmock是啥呢？mock是一个测试工具。mock会拦截ajax请求并可以按照一定规则返回数据。以前需要后台返回给我们的数据，现在我们可以使用mock返回了。mock的功能很强大，可以模拟出后端的增删改查等功能。非常方便我们前端进行测试.
安装
D:\test\book>yarn add mockjs
使用
在main.js的同级目录下新建mock.js。我们在mock.js里定义刚刚我们需要的login接口。代码如下：
import Mock from 'mockjs' Mock.mock('/login', 'post', (options) => { // console.log('options:', options) let data = JSON.parse(options.body) let name = data.name let password = data.password if (name === 'admin' && password === 'admin') { return { status: 1, message: '登录成功' } } else { return { status: 0, message: '账号或者密码错误' } } })
这段代码的作用即使拦截login接口请求，当账号和密码是admin的时候，就返回请求成功，否则返回‘账号密码错误'
现在问题来了？我们写好程序了，怎么使用mock呢，其实非常简单，简单到我都不敢相信。我们直接在main.js文件中引入mock.js既可。
配置
在main.js中添加如下代码。
// 引入mock import './mock.js'
ok，现在再打开我们的login页。输入账号和密码。如果不是admin，则弹窗报错.
如果账号密码正确，则跳转到index页面。
自此大体工作都完成了，接下来，我们继续完成项目（好累）。
12.vee-validate