Mock笔记,vue-element-admin中mock快速使用

104 阅读1分钟

安装mock.js 在根目录创建mock文件夹用于存放mock数据

    常用
 * ? @cword 汉字
 * ? @ctitle 标题
 * ? @csentence 句子
 * ? @cparagraph 段落
 * ? @cname 姓名
 * ? @id 身份证
 * ? @increment 随机生成标识
 * ? @city 地址   true: 省:市; fasle:市
 * ? @image 图片(大小,背景色,前景色,格式,文字)
 * ? @Date 生成指定格式时间:@Date(yyyy-MM-dd hh:mm:ss)
 * ? @paragraph 描述
 * ? @email 邮箱
 ......
    示例
    // 引入模块
    const Mock = require("mockjs");
    
    const data = Mock.mock({
        "data|100": [
            id:'@id',
            name:'@cname',
            date: '@date(yyyy-MMMM-dd)',
            email: '@email',
            'age|18-40': 0
            ......
        ]
    })
module.exports = [
  {
    url: '/table/list2',
    type: 'get',
    response: config => {
      const items = data.data
      return {
        code: 20000,
        data: {
          total: items.length,
          data: items
        }
      }
    }
  }
]

vue-element-admin-----mock 在mock文件夹下新建一个文件, image.png

定义好mock数据,导出mock数据 /mock/text.js image.png

尽量用require方式引入 在index.js文件中引入。 image.png

/vue.config.js

module.exports = {
 ....
  devServer: {
  ....
    before: require('./mock/mock-server.js')
  },