Mock.js使用

一、mockjs的安装、导入和使用

1、安装： npm install mockjs

2、导入： const Mock = require('mockjs')

3、使用：const data = Mock.mock({.....})

4、数据语法规范包括：数据模板和数据占位符

   数据模板："属性名|生成规则"：属性值

    数据占位符：

@id():随机id

@cname():随机中文名字

@date('yyyy-MM-dd'):随机生成日期

@paragraph():随机描述

@email():邮箱地址

..........

二、mock.js在vue中的使用

步骤：

1、定义接口路由，在接口中并返回mock模拟的数据

在全局创建mock/index.js

const Mock = require('mockjs')

const data = Mock.mock({
  // code: 200,
  id: '@id()',
  username: '@cname()',
  date: '@date(yyyy-MM-dd)',
  description: '@paragraph()',
  email: '@email()',
  'age|18-40': 0
})

console.log(data)

// 暴露出去
module.exports = function (app) {
  if (process.env.Mock === 'true') {
    app.app.use('/api/userinfo', (req, res) => {
      res.json(data)
    })
  }
}

2、在vue.config.js中配置devServer在before属性中引入接口路由函数

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // devServer在发送请求时，会先到before指定的函数中进行处理，如果before没有对应的接口路由，才会请求外网等
    onBeforeSetupMiddleware: require('./mock/index') // 引入mock文件
  }
})

3、使用axios调用该接口，获取数据

<script>
import axios from 'axios'
export default {
  created () {
    axios.get('/api/userinfo').then(res => {
      console.log(res)
    })
  }
}
</script>

三、当已经有写好的后端接口，不需要mock的时候 

创建文件.env.development

Mock=true

或

Mock=false

根据Mock判断是否需要mock数据

module.exports = function (app) {
  if (process.env.Mock === 'true') {  // 判读是否需要mock数据
    app.app.use('/api/userinfo', (req, res) => {
      res.json(data)
    })
  }
}