Mock.js和axios在vue-cli创建项目中的使用
背景
由于大觅项目采用的是前后端完全分离的方式，实现前后端环境的分离开发，这样不仅能提高开发效率，还能减少服务器直接的互相影响，同时能保证数据安全等。但是随之而来的问题也比较明显，前端如何进行快速的开发，才能保证后期与后端交互的时候不受影响？在跟后端调试时，如何不需要修改太多的代码能实现与后端联调。
Mock.js是一个模拟数据生成器，可以使前端独立于后端开发。如果正在开发一个前端页面，但是后端还没有完成供前端页面调用的API，并且数据格式已经确定，这时候想要尽可能还原真实的数据，要么编写更多代码，要么手动模拟数据。如果遇到特殊的格式（比如IP、随机数、图片、地址等），前端工作量必然会剧增。为了解决这个问题，可以使用Mock.js来模拟，方便地生成各种类型的假数据来查看页面效果。
一、安装并导入mock.js
1.1 项目文件下安装mockjs
npm i mockjs
1.2 项目中新建mock文件
在mock文件夹下新建index.js文件并在js文件种引入mock模块：
// 引入mock模块
import Mock from 'mockjs'
1.3 将mock文件在main.js中导入
import Vue from 'vue'
import App from './App.vue'
import './mock/index.js'二、Mock.js语法规范
Mock.js语法规范包括两部分：
- 数据模板定义规范
- 数据占位符定义规范
2.1 数据模板定义规范
语法：
数据模板种的每一个属性由3部分构成：属性名、生成规则、属性值。
'name|rule':value
//name 属性名
//rule 生成规则
//value 属性值 （1）属性值是字符串（String）
//'name|min-max':string 通过重复string生成一个字符串，重复次数在min-max之间
const data = Mock.mock({ "string|1-4":"哈哈" })
//'name|count':string 通过重复string生成一个字符串，重复次数等于count
const data = Mock.mock({ "string|4":"哈哈" })（2）属性值是数字（Number）
//'name|89':number 生成一个固定的数
const data = Mock.mock({ "number|89":1 })
//'name|min-max':number 生成一个大于等于min，小于等于max的整数，属性值number只是用来确定类型
const data = Mock.mock({ "number|2-30":1 })
//'name|min-max.dmin-dmax':number 生成一个浮点数，整数部分介于min-max之间，小数保留位数介于dmin-dmax之间
const data = Mock.mock({ "number|2-30.1-4":1 })
示例代码：
Mock.mock({
'number1|1-100.1-10':1,
'number2|123.1-10':1,
'number3|123.3':1,
'number4|123.10':1,
})
（3）属性值是布尔值类型（Boolean）
const data=Mock.mock({"boolean|1": true}) //随机生成一个true或false（4）属性值是正则表达式（RegExp）
//'name':regexp 根据正则表达式反向生成可以匹配它的字符串，用于生成自定义格式字符串示例代码：
Mock.mock({
'regexp1':/[a-z][A-Z][0-9]/,
'regexp2':/\w\W\s\S\d\D/,
'regexp3':/\d{5,10}/,
'regexp4':/\d{18}/
})
最全常用正则表达式大全：最全常用正则表达式大全_赵英超的博客-CSDN博客_正则表达式一、校验数字的表达式1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d{n,}$4. m-n位的数字：^\d{m,n}$5. 零和非零开头的数字：^(0|[1-9][0-9]*)$6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7. 带1-2位小数的正数或负数：^(\-)?\d...https://blog.csdn.net/ZYC88888/article/details/98479629
2.2 数据占位符定义规范
占位符@只是在属性字符串中占个位置，并不出现在最终的属性值中。
示例代码：
const data=Mock.mock({
name:{
first:'@FIRST',
middle:'@FIRST',
last:'@LAST',
full:'@first @middle @last'
}
})
console.log(data);
常见的模拟数据类型语法规则：
2.2.1 生成文本
-
生成一个随机字符串
const data = Mock.mock({
string:"@cword"
}) -
生成指定长度和范围
const data = Mock.mock({
string:"@cword(1)"
})const data = Mock.mock({
string :"@cword(10,15)"
})2.2.2 生成标题和句子
-
生成标题和句子
const data = Mock.mock({
title:"@ctitle(8)",
sentence:"@csentence"
})-
生成指定长度的标题和句子
const data = Mock.mock({
title:"@ctitle(8)",
sentence:"@csentence(50)"
})-
生成指定范围的
const data = Mock.mock({
title:"@ctitle(5,8)",
sentence:"@csentence(50,100)"
})2.2.3 生成段落
-
随机生成段落
const data = Mock.mock({
content:"@cparagraph()"
})2.2.4 生成数字
-
生成指定数字
const data = Mock.mock({
"number|80":1
})-
生成范围数字
const data = Mock.mock({
"number|1-99":1
})2.2.5 生成自增id
-
随机生成标识
const data = Mock.mock({
id:"@increment"
})2.2.6 生成姓名-地址-身份证
-
随机生成姓名--身份证号--地址
const data = Mock.mock({
name:"@cname()",
"idCard":/\d{18}/,
address:"@city(true)"
})2.2.7 随机生成图片
-
生成图片：@image（“300*200”，‘#ff0000','#fff','gif','坤坤'）
const data = Mock.mock({
img_url:"@image('200x100', '#50B347', '#FFF','png','Mock.js')"
})
-
参数1：图片大小
[
'300*250','250*250','240*400','336*280'
'180*150','720*300','468*60','234*60'
'388*31','250*250','240*400','120*40'
'125*125','250*250','240*400','336*280'
]
-
参数2：图片背景色
-
参数3：图片前景色
-
参数4：图片格式
-
参数5：图片文字
2.2.8 生成时间
-
@Date
-
生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)
const data = Mock.mock({
time:"@date(yyyy-MM-dd hh:mm:ss)"
})指定数组返回的参数
-
指定长度：‘date|5’
-
指定范围:'data|5-10'
const data = Mock.mock({
'list|50-99':[
{
name:'@cname',
address:'@city(true)',
id:'@increment()'
}
]
})有兴趣深入mock.js可以去mock.js官网进行学习。
Mock.jsMock.jshttp://mockjs.com/examples.html#DPD
三、mock拦截请求
3.1 定义get请求
Mock.mock('/api/get/news','get',()=>{
return{
status:200,
message:"获取数据成功"
}
})
另一种写法（第三个参数写成对象）：
Mock.mock('/api/get/news','get',{
status:200,
message:"获取数据成功"
})- 第一个参数：接口地址（'/api/get/news'）；
- 第二个参数：请求方式（get）；
- 第三个参数：拦截的数据内容；
Axios发送对应的get请求获取mock定义的请求数据（App.vue)
created(){
axios.get('/api/get/news').then(res=>{
console.log(res)
})
}
等同于：
created(){
axios.get('/api/get/news').then(function(res){
console.log(res)
})
}3.2 定义post请求
Mock.mock('/api/post/news','post',()=>{
return{
status:200,
message:"获取数据成功"
}
})
第二种写法：第三个参数写成对象
Mock.mock('/api/post/news','post',{
status:200,
message:"获取数据成功"
})Axios发送对应的post请求获取moke定义的请求数据（App.vue)
created(){
axios.post('/api/post/news').then(res=>{
console.log(res)
})
}
等同于：
created(){
axios.post('/api/post/news').then(function(res){
console.log(res)
})
}四、安装Axios
Axios是一个基于Promise，用于浏览器和node.js的HTTP客户端，常用于处理AJAX请求，具有以下特征：
- 从浏览器中创建XMLHttpRequest
- 从node.js发出http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
4.1 安装axios命令
cnpm i axios
4.2 GET、POST请求方式
执行一个GET 请求
const axios = require('axios');
// 向具有给定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
// 响应 success
console.log(response);
})
.catch(function (error) {
// 响应 error
console.log(error);
});
// 上面的请求也可以通过下面params传递参数的方式实现
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行一个POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
4.3 请求配置
以下是用于发请求的可用配置项，只有 url 是必须的，默认的请求方式是GET 。
{
// `url` 是用来请求的服务器URL
url: '/user',
// `method` 是发请求时的请求方式
method: 'get', // 默认是get
// `baseURL` 会被加到`url`前面，除非`url`已经写全了。
// 它可以方便的为axios实例设置`baseURL`，然后传递相关联的URLs给实例对应的方法
baseURL: 'https://some-domain.com/api/',
// `transformRequest`允许请求数据在发送到服务器之前对其进行更改
// 仅适用于'PUT', 'POST', 'PATCH'
// 数组中的最后一个函数必须返回一个string或者Buffer、ArrayBuffer、FormData或Stream的实例
// 你可以修改headers对象.
transformRequest: [function (data, headers) {
// Do whatever you want to transform the data
return data;
}],
// `transformResponse` 允许数据在传到then/catch之前对其进行更改
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// `headers` 发送自定义headers
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` URL参数，必须做位一个普通对象或者URLSearchParams对象发送
params: {
ID: 12345
},
// `paramsSerializer` 负责序列化`params`的可选函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 作为请求主体发送的数据
// 仅适用于 'PUT', 'POST', 'PATCH'
// 当没有设置`transformRequest`时, 必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream, Buffer
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的时间，单位：毫秒
// 如果请求的时间超过`timeout`, 请求即被中止
timeout: 1000, // default is `0` (no timeout)
// `withCredentials` 跨站点访问是否适用证书
withCredentials: false, // 默认不使用
// `adapter` 允许自定义处理请求，这使得测试更容易。
// 返回一个promise并提供一个有效的响应 (see lib/adapters/README.md).
adapter: function (config) {
/* ... */
},
// `auth` 使用HTTP认证, 并提供凭据。
// 设置一个带`Authorization'的header，覆盖任何现有的用`headers`参数设置的`Authorization'自定义headers.
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 服务器将响应的数据类型，包括'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `responseEncoding` 用于解码响应的编码方式
// 注: 忽略`responseType`的'stream'，或者客户端请求
responseEncoding: 'utf8', // default
// `xsrfCookieName` 用作 xsrf 令牌的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` 携带xsrf令牌值的http header的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress` 允许处理上传的进度事件
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` 允许处理下载的进度事件
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `maxContentLength` 定义允许的http响应内容的最大bytes
maxContentLength: 2000,
// `validateStatus` 对于一个给定的HTTP响应状态码，是resolve 还是reject 这个promise。如果`validateStatus`返回`true` (或者 `null`,`undefined`), 这个promise will be resolved; 否则，这个promise will be rejected.
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` 在node.js中要遵循的重定向的最大数量。
// 如果设为0，不会有重定向，默认5
maxRedirects: 5, // default
// `socketPath` 定义一个在node.js里面用的UNIX Socket。
// e.g. '/var/run/docker.sock' 是发送请求到docker后台.
// 只能指定`socketPath`和`proxy`中的一个。
// 如果都被指定，按`socketPath`的生效。
socketPath: null, // default
// `httpAgent` and `httpsAgent` 在node.js中，分别执行http和https请求时使用的自定义代理。
// 允许配置类似`keepAlive`这样在默认情况下不启用的选项。
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定义代理服务器的主机名和端口。
// 你也可以用常规的`http_proxy`和`https_proxy`环境变量来定义你的代理。
// 如果给你的代理配置使用环境变量，你也可以定义一个不代理的`no_proxy`环境变量，内容是一个以逗号分隔的域名列表。
// 设成`false`就禁用代理，忽略环境变量。
// `auth`表示HTTP Basic auth会被用于连接到代理，并提供凭证。
// 这将设置一个`Proxy-Authorization` header，覆盖先前`headers`参数里面设置的`Proxy-Authorization` 自定义headers。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定可用于取消请求的取消令牌
// (详情参阅下面的消除部分)
cancelToken: new CancelToken(function (cancel) {
})
}
4.4 响应模式
请求的响应包含以下信息：
{
// `data` 提供服务器的响应
data: {},
// `status` 来自服务器响应的HTTP状态码
status: 200,
// `statusText` 来自服务器响应的HTTP状态消息
statusText: 'OK',
// `headers` 来自服务器响应的headers，所有header names都是小写
headers: {},
// `config` 提供了`axios`请求的配置
config: {},
// `request` 生成这个响应的请求
// 这是node.js中最后的客户端请求实例(重定向)和浏览器XMLHttpRequest实例
request: {}
}
4.5 拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
当你需要删除拦截器时就能删掉：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
你可以将拦截器添加到axios的自定义实例：
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});