Vue项目中如何使用Mock

Vue项目中如何使用Mock

当后端还未写完接口，但前端已经写完页面，这时候就可以与你的后端人员约定好接口字段，然后自己使用mock来模拟后台返回数据。

使用步骤

首先在Vue项目中安装 mockjs

  // 没有项目的  直接 vue create 项目名,有项目的安装mockjs

// 使用mockjs 产生随机数据
npm install mockjs
//  使用axios 发送 ajax
npm install axios --save
//  使用 json5 解决json文件，无法添加注释的问题
npm install json5 --save-dev(可以不要)

学习MOCKJS

在Vue根项目下新建 mock 文件夹，新建 index.js 文件

const Mock = require('mockjs')  // 引入mockjs依赖
let id = Mock.mock('@id')  // 得到随机id 类型为 字符串
var obj = Mock.mock({
    id:'@id()',  //得到随机的id,对象
    username:'@cname()',  //随机生成中文名字
    date:'@date()',  //随机生成日期
    avatar:"@image('200 * 200','red','#fff','avatar')", //生成图片,参数:size, background, foreground, text
    description:'@paragraph()',  // 描述
    ip:'@ip()', // IP地址
    email:'@email()' // email
})

学习JSON5（可不要）

json文件中，存在注释编辑器就会报错，采用json5格式可以让json存在注释

引如JSON5 库来解析JSON5格式（可不要）

在mock文件夹下新建 testJSON5.js 文件

const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')
var json = fs.readFileSync(path.join(__dirname,'./userInfo.json5'),'utf-8')
var obj = JSON5.parse(json)
console.log(obj);

在Vue项目中结合MOCK

在mock文件夹下新建 index.js

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

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

在main.js 种引入 mock文件夹

require('../mock')

新建vue.config.js

在项目根目录下，新建 vue.config.js 文件

module.exports ={
    devServer : {
        before : require('./mock/index.js')  // 引入 mock/index.js
    }
}

模拟一个接口数据，在mock文件夹下新建js文件demoList。

// mock 语法 http://mockjs.com/0.1/
let demoList = {
    status: 200,  // 状态码为200 则调用成功
    message: 'success',
    data: {
      total: 100,  // 一次返回100条数据
      'rows|10': [{  // 一组为10条
        id: '@guid',//得到随机的id,对象
        name: '@cname',//随机生成中文名字
        'age|20-30': 23,
        'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
        date:'@date()', // 随机生成日期
        avatar:"@image('200 * 200','red','#fff','avatar')", //生成图片,参数:size, background, foreground, text
        description:'@paragraph()',  // 描述
        ip:'@ip()', // IP地址
        email:'@email()' // email
      }]
    }
  };
  export default {
      'get|/user/userinfo': demoList  // (get 请求)
  }

在页面中发送AJAX请求

import axios from 'axios'
	export default {
	  name: 'HelloWorld',
	  props: {
	    msg: String
	  },
	  mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }
	}