[Vue]Mock 数据，多种方式

一、不启服务，mockjs模拟接口 [F12看不到网络请求]

基于vue2.x下测试通过。

1、安装mockjs

npm install mockjs --save-dev

2、在src目录中创建mock -> index.js

3、mock -> index.js文件中定义接口，填充数据

import Mock from 'mockjs'
// 接口地址
Mock.mock('/api/login', (req, res) => {
  return {
    data: [
      {username: 'zxc', password: '123456'}
    ]
  }
})

4、在main.js中导入mock->index.js文件

import '../src/mock'

5、在组件中使用

import axios from 'axios'
export default {
  name: 'test',
  data() {
    return {
      userId: 666,
      token: '',
    }
  },
  created() {
    // mockjs中定义的接口地址
    axios.get('/api/login').then(res => {
      console.log(res)
    })
    axios({
      method: 'post',
      url: '/getDataList',
      data:{    //这里是发送给后台的数据
        userId: this.userId,
        token: this.token,
      }
    }).then((response) => {          //这里使用了ES6的语法
      console.log(response)       //请求成功返回的数据
    }).catch((error) =>
      console.log(error)       //请求失败返回的数据
    ) 
  }
}

 6、浏览器控制台查看数据

 7、基本使用方法

import Mock from 'mockjs'
let Random = Mock.Random
// 1、Mock.mock
// url: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则
// type: 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
// template: 表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
// function : 表示用于生成响应数据的函数。

// 1.1、url, template
Mock.mock('/api/user/list', {
  'array|10': [
    {
      name: 'zxc',
      password: '*****',
      // Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
      email: '@email',
      age: '@integer(1, 100)',
      address: '@county(true)'
    }
  ]
})
// 1.2、url, function
Mock.mock('/api/login', (req, res) => {
  // 如果请求接口返回数据，那么可以在这里处理
  // let data = JSON.parse(JSON.stringify(res))
  // data.forEach((value, index) => {
  //   if (value === 'zxc') {
  //     value = 'hello' + value
  //   }
  // })
  // return {
  //   data
  // }
})
// 1.3、url, type, template
Mock.mock('/api/register', 'post', {
  'string|10': 'zxc'
})
// 1.4、url, type, function
Mock.mock('/api/register', 'post', (req, res) => {
  return {
    username: 'zxc',
    // 使用随机生成
    address: Random.county(true)
  }
})

// 2、Mock.setup
// 指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间
Mock.setup({
  timeout: 400
})

// 3、Mock.Random 随机生成数据
function setMsg(){
  let datalist= [];
  for (let i = 0; i < 10; i++) {
    let newData = {
      order: Random.natural(16),
      account:Random.name(),
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    datalist.push(newData)
  } 
  return {
    data: datalist
  }
}
const data1 = Mock.mock('/setMsg',setMsg)
const data = Mock.mock('/getDataList',getData2);

 官方文档：
http://mockjs.com

二、不启服务，mockjs模拟数据 [F12可看到网络请求]

1.编辑器安装JSON5扩展,(采用json5格式来让json格式可以存在注释)

2.新建mock文件夹 /userInfo.json5 文件 mock数据

{
    "error":0,//采用json5格式来让json格式可以存在注释
    "data":{
        "userid":"@id()", //随机生成id
        "username":"@cname()",//随机生成中文名
        "date":"@date()",//随机生成日期
        "avatar":"@image('200x200','red','#fff','avatar')",//生成图片
        "description":"@paragraph()",//描述
        "ip":"@ip()",//IP地址
        "email":"@email()",//email
    }
}

 3.在mock文件夹下,新建 index.js   引入mock的数据

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    let json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function(app){
 //if(process.env.MOCK == 'true'){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        let json = getJsonFile('./userInfo.json5'); // mock数据
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
    app.post('/...mock的url',(req,res)=>{
        let json = getJsonFile('./...mock的json5数据');
    })
  //}
}

4.vue.config.js中添加配置

module.exports = {
  devServer: {
    before: require('./src/mock/index.js'),//引入mock/index.js 或者
    //bafter: require('./mock/mock-server.js'),
  }
}

 5.发送ajax请求测试数据

import axios from 'axios'
export default {   
	mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	}
} 

三、其它方式：

现在很多前端项目都是前后分离的模式，开发时比较依赖接口数据，或者跑路后回顾项目也比较依赖接口数据。如果搭建一套后台系统来模拟数据接口又费时费力，因此mock数据比较方便快捷。

网上很多mock数据的方式,大体分为几种:

1.使用mockjs,优点是配置简单,缺点是在控制台看不到请求.只能console查看数据.Mockjs参考

2.使用express服务，模拟接口服务.优点是自由度高，可配置各种情况，能看到请求。缺点是配置较多，开发时多起了一套服务。express参考

3.使用json-server，模拟接口服务.优点是自由度高，可配置各种情况,能看到请求。缺点是开发时多起了一套服务。json-server参考

1.安装npm
下载node.js，地址：https://nodejs.org/zh-cn/
2.安装json-server
安装命令：npm install json-server --g
3.使用
新增目录：d:\json，并新建json文件：data.json，运行：json-server --watch data.json。
指定端口运行，在该目录执行命令：
第一步：json-server --watch --port 5001 data.json     
   注意：对数据的格式，需要严格按照要求，比如：必须是{}包起来，然后配置数据源。
第二步：浏览器，访问地址：http://localhost:5001/students
   这里是操作数据源：students，对于json文件的students，一一对应的。

4.使用easy-mock工具，优点是成体系的独立mock工具，模拟后端接口。缺点是成本略高，独立于项目之外。

5.使用vuecli配置拦截axios请求，模拟数据.优点是配置简单，可以看到请求。本文也是记录介绍这种方法。

vuecli2版本的mock实现，网上有很多配置分享，vuecli3版本的配置方法。