Mock

mock-demo

• 首先下载最新版vue

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

里面涉及的一些内容

使用axios发送ajax

使用mockjs产生随机数据

使用json5解决json文件无法添加注释问题

webpack相关

• vue.config.js

module.exports = {
    configureWebpack:{
        plugins:[
            new MyAwesomeWebpackPlugin()
        ]
    }
}

helloworld.vue里面加入监听

  mounted(){
    axios.get('/user/userinfo').then(res=>{
      console.log(res)
    })
    .catch(err => {
      console.error(err);
    })
  }

如何移除掉呢

• 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, filePath), 'utf-8')
    //解析进行返回
    return JSON5.parse(json);
}

module.exports = function (app) {
    if (process.env.MOCK == 'true') {
        //监听http请求
        app.get('/user/userinfo', function (rep, res) {
            //每次响应请求时读取mock data的json数据文件
            //getJsonFile方法定义了如何读取json文件并解析成数据对象
            var json = getJsonFile('./usejson.json5');
            //将json数据传入Mock.mock方法中,生成的数据返回给浏览器
            res.json(Mock.mock(json))
        })
    }
}

• 根目录加入环境变量
  • 创建.env.development文件

MOCK=true