vue项目中使用mock.js模拟数据

创建

1、在vue项目的根目录下创建mock文件。

2、下载依赖

npm install mockjs --save     //下载mock.js

npm install json5 --save    //安装json5依赖

使用

1.在mock文件夹下创建index.js（入口文件）和json文件夹（用于存放模拟的数据）

2.在index.js引入相应模块，做读取模拟数据返回给前端

const fs = require('fs') //引入fs模块

const path = require('path') //引入path模块

const json5 = require('json5') //引入json5模块

const Mock = require('mockjs'); //引入mockjs

//公共函数，用来读取要模拟的数据模板

function getJSON(filepath) {

  //读取文件

  var json = fs.readFileSync(path.join(__dirname, filepath), 'utf-8')

  return json5.parse(json) //json5格式化

}

module.exports = function (app) {

  //设置请求路径

  app.get('/user/list', (req, res) => {

    console.log(req, query) //前端请求传过来的值

    var json = getJSON('./JSON/userinfo.json5'); //传入路径

    res.json(Mock.mock(json))

  })

}

3. json文件夹下的userinfo.json5。  不会mock.js的可自行去mock.js查看官方文档。

{  

      'list|5':[{

          id:'@id',

          name:'@cname',

          brithday:'@date',

          address:'@county(true)',

          createtime:'@datetime',

         // Random.image( size, background, foreground, text )

          aratar:"@image('200x200', '#50B347', '#FFF', 'Mock.js')"

      }]

}

拦截请求配置（最关键的一步）

根目录下build/webpack.dev.conf.js/中配置

拦截请求，将请求转发到mock文件夹下的index.js文件

在  devServer下配置    before:require('../mock/index.js'),

请求

baseUrl为vue项目的端口 默认一般都是   http://localhost:8080,

mounted(){

            axios.get(baseUrl+'/user/list').then(res=>{

                         console.log(res)

           })

  }

大功告成