Vue开发时使用Mockjs模拟数据
在日常前后端分离的开发模式中，前端开发者时常需要等待后台接口的确定和完成，这样会处于一个被动的状态，工作效率也不高。
因此此，我们一般采用模拟数据（mock）的方式去开发项目，这样会使我们的前后端同时进行，提高团队开发效率。同时，如果有了自主mock的能力，我们甚至可以拿着自己推测的数据结构，找后台同学对接，最起码，这个时候，我们有主动推进的资本，而不是完全被动等待。
在进行下一步开发之前，需要安装axios，使用命令 npm install axios --save 即可。
一、请求本地静态mock数据
1、构造数据
在 3.x 版本中，因为static目录被移除，新增了public目录，且这个目录下的静态资源不会经过webpack的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。
因此，我们在 public目录 下创建一个 mock目录，然后在其中放置 .json格式的模拟数据文件。
一般建议本地mock数据的文件夹层级，与接口url相对应。这样可以通过文件夹名称，快速定位到指定接口返回的mock数据。
这里简单处理，在public/mock/users.js 中写入以下内容：
{
"users": [
{
"id": 1,
"name": "tom",
"age": "13",
"email": "tom@qq.com"
},
{
"id": 2,
"name": "andy",
"age": "18",
"email": "andy@qq.com"
},
{
"id": 3,
"name": "rose",
"age": "26",
"email": "rose@qq.com"
}
]
} 2、配置文件
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
因此，我们在根目录下新建一个 vue.config.js 文件，该文件是调整 webpack 配置最简单的方式，将会被 webpack-merge 合并入最终的 webpack 配置中。
具体可参考vue.config.js配置说明
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:8081",//代理服务器
changeOrigin: true, // 设置这个参数可以避免跨域
pathRewrite: {
"^/api/v4": "/mock"//虚拟路径重定向
}
}
}
}
}; 3、组件引用
<script>
import axios from "axios";
export default {
name: "home",
components: {},
created() {
axios.get("/api/v4/users.json").then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
}
};
</script> 4、运行项目
执行命令 npm run serve 启动项目，打开页面观察结果。
二、使用mock.js实现mock数据
mock.js是一款开发前端虚拟接口的插件，主要有两个功能
- 生成随机数据
- 拦截Ajax请求
1、安装
首先安装 mock.js，由于只用于开发环境使用，所以执行如下命令安装：
npm install mockjs -D
2、编写模拟数据接口
在src目录下，创建一个mock目录，然后再里面创建一个``index.js文件，作为mock各个模块的导出点，供src/main.js`使用。
bittype.js
import { Random } from "mockjs"; // 导出随机函数
// 是一个请求对象，包含: url，type和body属性
function bittypeGet(request) {
console.log("Request:"+request.url);
return {
code: 200,
message: "Select successfully",
data: {
id:Random.integer(0,99999),
name: Random.cword(3,6),
}
};
}
function bittypePost() {
return {
code: 200,
message: "Add successfully",
data: {
id:Random.integer(0,99999),
name: Random.cword(3,6),
}
};
}
function bittypePut() {
return {
code: 200,
message: "Update successfully",
};
}
function bittypeDelete() {
return {
code: 200,
message: "Delete successfully."
};
}
export default {
bittypeGet,
bittypePost,
bittypePut,
bittypeDelete
}; index.js
/**
* 定义本地测试接口，最好与正式接口一致，尽可能减少联调阶段修改的工作量
*/
// 引入mockjs
import Mock from "mockjs";
// 引入模板函数类
import bittype from "./modules/bittype";
const { mock } = Mock; // Mock函数
/**
* 使用拦截规则拦截命中的请求
* mock( url, post/get, 返回的数据);
* url这里可以是正则表达式 也可以是字符串
* 第二个参数 是请求类型 get/post/put/delet
* 第三个参数可以是模板，也可以是函数
*/
mock(/\/bittype\/[0-9]+/, "get", bittype.bittypeGet);
mock(/\/bittype/, "post", bittype.bittypePost);
mock(/\/bittype/, "put", bittype.bittypePut);
// mock(/\/bittype\/[0-9]+/, "delete", bittype.bittypeDelete);
//模板表示
var template = Mock.mock({
"string|3-99": "★"
})
mock(/\/bittype\/[0-9]+/, "delete", template); 3、axios函数
在src目录下，创建一个restful目录，然后再里面创建一个``api.js文件，作为mock各个模块的导出点，供src/main.js`使用
import Axios from 'axios';
//全局axios默认值
Axios.defaults.baseURL="http://127.0.0.1:8081/";
//通用请求头
Axios.defaults.headers.common["Content-Type"]="application/json";
const bittypeCURDUrl= "/bittype";
//查询
export function bittypeGet (id){
return Axios.get(`${bittypeCURDUrl}/${id}`).then((res)=>{
return res.data;
});
}
//增加
export function bittypePost(params){
return Axios.post(bittypeCURDUrl,params).then((res)=>{
return res.data;
});
}
//更新
export function bittypePut(params){
return Axios.put(bittypeCURDUrl,params).then((res)=>{
return res.data;
});
}
//删除
export function bittypeDelete (id){
return Axios.delete(`${bittypeCURDUrl}/${id}`).then((res)=>{
return res.data;
});
}
//测试静态数据
export function mockStaticTest (){
return Axios.get("/api/user.json").then((res)=>{
return res.data;
});
} 4、导入模拟数据接口
模拟好假数据接口之后，我们还要在 main.js 中将接口导入，这样在项目中任意组件内都可以请求这些接口了。
import Vue from 'vue'
import App from './App.vue'
//导入element-ui模块 并且导入全局的css样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//引入mock文件
import './mock';//mock方式，正式发布时，注释掉即可
Vue.config.productionTip = false
//引入restful api
import * as api from './restful/api';
Vue.prototype.$http=api;
new Vue({
render: h => h(App),
}).$mount('#app')
4、组件引用
<template>
<div class="mock">
<el-input
class="input"
placeholder="请输入id"
v-model="id"
clearable>
</el-input>
<br/>
<el-input
class="input"
placeholder="请输入名字"
v-model="bit_type_name"
clearable>
</el-input>
<el-row>
<el-button type="primary" @click="demoSelect()">查询</el-button>
<el-button type="primary" @click="demoPost()">添加</el-button>
<el-button type="primary" @click="demoPUT()">修改</el-button>
<el-button type="primary" @click="demoDELETE()">删除</el-button>
</el-row>
<br/>
返回信息：<pre>
{{resBody}}
</pre>
</div>
</template>
<script>
export default {
name: 'HelloMock',
data(){
return{
id:"",
bit_type_name:"",
resBody:{"id":"1","name":"钻头"}
}
},
methods: {
demoSelect(){
this.$http.bittypeGet(this.id)
.then(res=>{
console.log(res);
this.resBody = res;
})
},
demoPost(){
var params = {"id":this.id,"bitTypeName":this.bit_type_name};
this.$http.bittypePost(params)
.then(res=>{
console.log(res);
this.resBody = res;
})
},
demoPUT(){
var params = {"id":this.id,"bitTypeName":this.bit_type_name};
this.$http.bittypePut(params)
.then(res=>{
console.log(res);
this.resBody = res;
})
},
demoDELETE(){
this.$http.bittypeDelete(this.id)
.then(res=>{
console.log(res);
this.resBody = res;
})
}
}
}
</script>
<style lang="css" scoped>
.mock{
}
.input{
width: 30%;
margin: 20px 0 20px 0;
}
</style> 5、 启动项目
执行命令 npm run serve 启动项目，打开调试窗口，观察打印结果。
6. 注意事项
● mock.js依赖中保存着大量用于伪造假数据的静态数据，引入的时候打包得到的文件体积会明显增大，这是正常的。
● mock.js模拟数据后，会将命中配置规则（正则表达式）的请求拦截，这时候在浏览器的network面板是无法看到数据返回的，可以通过打印数据的方式观察。
● 当后端写好真实接口以后，不要忘记注释掉在 main.js 中引入mock文件的那行代码。你也可以选择删掉创建的 mock目录 和 main.js 中的那行代码。
7. mock.js补充知识点
mock.js内含各种内置的API，以及使用方法示例。主要包括以下几类：
● 基础数据类型 (Basic)
● 日期时间 (Date)
● 占位图片 (Image)
● 颜色 (Color)
● 文本 (Text)
● 姓名 (Name)
● 网络相关 (Web)
● 地址 (Address)
● 工具函数 (Helper)
● 等等
具体可以查阅Mockjs API 文档
京公网安备 11010502036488号