MOCK记录

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即可