文章目录
前言
如今web开发大部分都采用前后端分离开发模式,那么我们可以使用mockjs来模拟后端数据,独立于后端开发,从而提高开发效率
本demo使用的为vue-cli 4.2.2版本
提示:以下是本篇文章正文内容,下面案例可供参考
一、mockjs是什么?
mockjs是基于js的一种可生成随机数据,拦截Ajax请求的工具,该工具是为了方便前端模拟后端接口数据。mockjs支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等,支持扩展更多数据类型,支持自定义函数和正则。
二、使用步骤
1.npm安装mockjs
在vue-cli根目录打开命令窗口,执行以下打码
代码如下(示例):
npm install --save-dev mockjs
其余安装方式,详见:mockjs安装Github
2.创建utils文件夹统一存放api
utils文件夹统一放置项目中要用到工具,比如api.js,它包含所有的请求地址,采用在vue原型绑定的方式。如http.js封装网络请求模块。
创建utils文件夹,并在其下创建api.js文件
api.js代码如下(示例):
export const CONTEXT = '/api/'
export const LIST = CONTEXT + 'list' + '?time=' + new Date().getTime()
api.js包含项目中所有使用的url请求地址,方便统一管理。
3.将api.js挂载到vue原型上
在main.js中添加如下代码
main.js代码如下(示例):
import * as api from './utils/api.js' //导入所有的url
Vue.prototype.api = api //在vue原型上绑定api
4.创建mock文件夹
在src文件夹下创建mock文件夹,并在其下创建index.js和userInfo.js。
index.js代码如下(示例):
const Mock = require("mockjs") //引入依赖包mockjs,一定要先安装
import * as api from '../utils/api.js' //导入所有的api url地址
import {
userInfo} from './userInfo.js' //所有的数据模板,这里方便演示所以只有一个
//可以设置响应的时间,模拟网络耗时,单位是ms
Mock.setup({
timeout: '2000 - 4000'
})
//参数: url, 请求方式, 数据模板(可以是对象或字符串)
Mock.mock(api.LIST,'get',userInfo)
userInfo.js代码如下(示例):
const Mock = require("mockjs")
const Random = Mock.Random; //mockjs对象的一个随机对象
let list = []
const userInfo = function () {
for (let i = 0; i < 10; i++) {
list.push({
id: i,
name: Random.cname(), //返回一个常见的中文名
age: Random.integer(20, 40) //返回一个数字,范围在20~40
})
}
return {
list}
}
export {
userInfo }
还想生成其他数据?请看mockjs官方使用文档
5.在开发环境下添加mockjs的依赖
由于mockjs只在开发环境中使用,添加依赖控制
main.js代码如下(示例):
if(process.env.NODE_ENV == 'development'){
require('./mock/index')
}
6.在vue文件中使用mockjs
在vue文件中添加代码如下(示例):
_this.http.get(_this.api.LIST).then( res => {
if(res.status === 200){
console.log('res---------',res)
//TODO
}
}).catch(err => {
})
控制台的结果如下:
注意:以上的网络请求我自己封装的,未封装的axios也可使用。