vue中使用mock.js

673 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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文件,如下图

image.png

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)
    })
  }