持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情
前言
由于现在大多项目都是前后端分离开发的,那前期前端开发人员就要自己来模拟数据进行一些模块的开发,这里的模拟数据可以通过直接在页面声明变量来完成,更高级的方法是模拟请求接口来获取数据,比如说jsonserver和mockjs,这两个都是模拟请求接口来获取数据,下面记录下mockjs在vue中的使用过程。
准备工作
首先要安装依赖,主要为下面的三个
- 安装axios用于发送请求
npm install axios --save
- 安装mockjs用于产生假数据
npm install mockjs --save-dev
- 安装json5,这里的作用主要是解决json文件不能注释的问题
npm install json5 --save-dev
使用步骤
以在vue中使用为例,上面依赖都安装完成后在项目跟目录下创建mock文件夹,mock文件夹主要用来放置json文件和js文件,如下图
index.js中的代码如下
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 = require('json5')
//读取json
function getJsonFile(filePath) {
//读取目标json文件
var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
//通过JSON5拿到json对象return出去
return JSON5.parse(json)
}
//返回一个函数
module.exports = function (app) {
if (process.env.MOCK === 'true') {
//当ajax请求'/user/userinfo'时就会被监听到
app.get('/user/userinfo', function (rep, res) {
//拦截到请求就会读取mock data的json5文件
//getJsonFile方法读取json5文件,并返回解析后的数据对象
var json = getJsonFile('./userInfo.json5')
//将json传入Mock.mock方法中,这时生成的数据就会返回给浏览器
res.json(Mock.mock(json))
})
}
}
userinfo.json5内容如下
{
id:'@id()',//生成随机的id
username:'@cname()',//随机名字
date:'@date()',//生成日期
avatar:"@image('200x200','red','#fff','avatar')",//生成图片url(在线的),参数:size,背景颜色,字体颜色,显示文字内容
description:"@paragraph()",//描述,也就是一段随机的文字
ip:"@ip()",//ip地址,如:19.149.181.234
email:"@email()"//随机的email,如:b.gmenxe@phovsmdsa.travel
}
重点在这里,在vue.config.js文件中要引入mock下的index.js,如下:
module.exports ={
devServer:{
//vue中的每一个请求再请求之前都会经过这里
before:require('./mock/index.js')
}
}
在vue中使用时直接请求接口/user/userinfo地址即可,如下
mounted(){
axios.get('/user/userinfo').then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
}