1.安装依赖
npm install axios --save
npm install mockjs --save-dev
npm install json5 --save-dev
2.创建文件夹引入mock
创建mock文件夹存放testMock.js文件
const Mock = require('mockjs')
let id = Mock.mock('@id')//随机生成id
let obj = Mock.mock({
id:'@id',//随机生成一个id
username:'@cname',//随机生成一个中文名称
date:'@date()',//随机生成日期
avatar:"@image('200x200','red','#fff','avatar')",//随机生成一个图片(图片长宽,背景颜色,字体颜色,内容)
ip:"@ip()",//随机生成一个ip
email:"@email()"//随机生成一个email
})//随机生成一个对象
console.log(id)
console.log(obj)
3.新建userInfo.json
文件会报错,报错原因:json文件不允许出现注释,并且变量名应用“”括起来
此时将文件后缀改为json5并安装json5依赖,重新打开就没事了
{
id:'@id',//随机生成一个id
username:'@cname',//随机生成一个中文名称
date:'@date()',//随机生成日期
avatar:"@image('200x200','red','#fff','avatar')",//随机生成一个图片(图片长宽,背景颜色,字体颜色,内容)
ip:"@ip()",//随机生成一个ip
email:"@email()"//随机生成一个email
}
4.新建testJSON5.js文件
const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')
// path.join(当前文件,相对于当前文件的json文件路径,编码格式)
var json = fs.readFileSync(path.join(__dirname,'./userInfo.json5'),'utf-8')
console.log(json)
var obj = JSON5.parse(json)
console.log(obj)
5.创建vue.config.js文件
module.exports = {
devServer: {
before:require('./mock/index.js')
}
}
mock文件夹下 新建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.join(__dirname,'./userInfo. json5'),'utf-8')
//解析并返回
return JSON5.parse(json)
}
//返回一个函数
module.exports = function(app) {
//监听请求
app.get('/user/userinfo',function(rep,res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile('./userInfo.json5')
//将json传入Mock.mock方法中,生成数据返回给浏览器
res.json(Mock.mock(json))
})
}
6.在页面引入axios
import axios from 'axios'
axios.get('/user/userinfo').then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
7.接口完成/未完成,什么时间应用mock
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.join(__dirname,'./userInfo. json5'),'utf-8')
//解析并返回
return JSON5.parse(json)
}
//返回一个函数
module.exports = function(app) {
//此时用到环境变量来控制是否应用mock
if(process.env.Mock == 'true') {
//监听请求
app.get('/user/userinfo',function(rep,res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile('./userInfo.json5')
//将json传入Mock.mock方法中,生成数据返回给浏览器
res.json(Mock.mock(json))
})
}
使用环境变量来控制是否使用mock
.env在所有的环境中被载入
.env.local所有的环境中被载入,但会被.git忽略
.env.[mode]只在指定的模式中被载入
.env.[mode].local只在指定的模式中被载入,但会被.git忽略
模式是VueCLI中一个重要的概念
development模式用于vue-cli-service serve
production模式用于vue-cli-service build和vue-cli-service test:e2e
test模式用于vue-cli-service test:unit
项目是用npm run serve运行的所以使用development
新建.env.development文件
MOCK = true
接口完成后,将MOCK改为false即可