Vue开发时使用Mockjs模拟数据

　　在日常前后端分离的开发模式中，前端开发者时常需要等待后台接口的确定和完成，这样会处于一个被动的状态，工作效率也不高。
  因此此，我们一般采用模拟数据（mock）的方式去开发项目，这样会使我们的前后端同时进行，提高团队开发效率。同时，如果有了自主mock的能力，我们甚至可以拿着自己推测的数据结构，找后台同学对接，最起码，这个时候，我们有主动推进的资本，而不是完全被动等待。
  在进行下一步开发之前，需要安装axios，使用命令 npm install axios --save 即可。

一、请求本地静态mock数据

1、构造数据

  在 3.x 版本中，因为static目录被移除，新增了public目录，且这个目录下的静态资源不会经过webpack的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。
  因此，我们在 public目录 下创建一个 mock目录，然后在其中放置 .json格式的模拟数据文件。
　　一般建议本地mock数据的文件夹层级，与接口url相对应。这样可以通过文件夹名称，快速定位到指定接口返回的mock数据。
  这里简单处理，在public/mock/users.js 中写入以下内容：

{
    "users": [
      {
        "id": 1,
        "name": "tom",
        "age": "13",
        "email": "tom@qq.com"
      },
      {
        "id": 2,
        "name": "andy",
        "age": "18",
        "email": "andy@qq.com"
      },
      {
        "id": 3,
        "name": "rose",
        "age": "26",
        "email": "rose@qq.com"
      }
    ]
  }

2、配置文件

  vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
  因此，我们在根目录下新建一个 vue.config.js 文件，该文件是调整 webpack 配置最简单的方式，将会被 webpack-merge 合并入最终的 webpack 配置中。

  具体可参考vue.config.js配置说明

module.exports = {
    devServer: {
      proxy: {
        "/api": {
          target: "http://localhost:8081",//代理服务器
          changeOrigin: true, // 设置这个参数可以避免跨域
          pathRewrite: {
            "^/api/v4": "/mock"//虚拟路径重定向
          }
        }
      }
    }
  };

3、组件引用

<script>
import axios from "axios";

export default {
  name: "home",
  components: {},
  created() {
    axios.get("/api/v4/users.json").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  }
};
</script>

4、运行项目

　执行命令 npm run serve 启动项目，打开页面观察结果。

二、使用mock.js实现mock数据

mock.js是一款开发前端虚拟接口的插件，主要有两个功能

• 生成随机数据
• 拦截Ajax请求

1、安装

  首先安装 mock.js，由于只用于开发环境使用，所以执行如下命令安装：

npm install mockjs -D

2、编写模拟数据接口

  在src目录下，创建一个mock目录，然后再里面创建一个``index.js文件，作为mock各个模块的导出点，供src/main.js`使用。

bittype.js

import { Random } from "mockjs"; // 导出随机函数

  // 是一个请求对象，包含: url，type和body属性
function bittypeGet(request) {
    console.log("Request:"+request.url);
  return {
    code: 200,
    message: "Select successfully",
    data: {
        id:Random.integer(0,99999),
        name: Random.cword(3,6),
    }
  };
}
function bittypePost() {
    return {
        code: 200,
        message: "Add successfully",
        data: {
            id:Random.integer(0,99999),
            name: Random.cword(3,6),
        }
    };
  }
function bittypePut() {
  return {
    code: 200,
    message: "Update successfully",
  };
}

function bittypeDelete() {
  return {
    code: 200,
    message: "Delete successfully."
  };
}

export default {
    bittypeGet,
    bittypePost,
    bittypePut,
    bittypeDelete
};

index.js

/**
 * 定义本地测试接口，最好与正式接口一致，尽可能减少联调阶段修改的工作量
 */
// 引入mockjs
import Mock from "mockjs";
// 引入模板函数类
import bittype from "./modules/bittype";

const { mock } = Mock; // Mock函数

/**
 * 使用拦截规则拦截命中的请求
 *  mock( url, post/get, 返回的数据);
 * url这里可以是正则表达式 也可以是字符串
 * 第二个参数 是请求类型 get/post/put/delet
 * 第三个参数可以是模板，也可以是函数
 */

mock(/\/bittype\/[0-9]+/, "get", bittype.bittypeGet);
mock(/\/bittype/, "post", bittype.bittypePost);
mock(/\/bittype/, "put", bittype.bittypePut);
// mock(/\/bittype\/[0-9]+/, "delete", bittype.bittypeDelete);

//模板表示
var template = Mock.mock({
    "string|3-99": "★"
  })
mock(/\/bittype\/[0-9]+/, "delete", template);

3、axios函数

  在src目录下，创建一个restful目录，然后再里面创建一个``api.js文件，作为mock各个模块的导出点，供src/main.js`使用

import Axios from 'axios';

//全局axios默认值
Axios.defaults.baseURL="http://127.0.0.1:8081/";
//通用请求头
Axios.defaults.headers.common["Content-Type"]="application/json";
const bittypeCURDUrl= "/bittype";
//查询
export function bittypeGet (id){
    return Axios.get(`${bittypeCURDUrl}/${id}`).then((res)=>{
        return res.data;
    });
}
//增加
export function bittypePost(params){
    return Axios.post(bittypeCURDUrl,params).then((res)=>{
        return res.data;
    });
}
//更新
export function bittypePut(params){
    return Axios.put(bittypeCURDUrl,params).then((res)=>{
        return res.data;
    });
}
//删除
export function bittypeDelete (id){
    return Axios.delete(`${bittypeCURDUrl}/${id}`).then((res)=>{
        return res.data;
    });
}
//测试静态数据
export function mockStaticTest (){
    return Axios.get("/api/user.json").then((res)=>{
        return res.data;
    });
}

4、导入模拟数据接口

  模拟好假数据接口之后，我们还要在 main.js 中将接口导入，这样在项目中任意组件内都可以请求这些接口了。

import Vue from 'vue'
import App from './App.vue'

//导入element-ui模块 并且导入全局的css样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//引入mock文件
import  './mock';//mock方式，正式发布时，注释掉即可


Vue.config.productionTip = false

//引入restful api
import * as api from './restful/api';

Vue.prototype.$http=api;

new Vue({
  render: h => h(App),
}).$mount('#app')

4、组件引用

<template>
    <div class="mock">
          <el-input
           class="input"
            placeholder="请输入id"
            v-model="id"
            clearable>
            </el-input>
            <br/>
        <el-input
           class="input"
            placeholder="请输入名字"
            v-model="bit_type_name"
            clearable>
            </el-input>
        <el-row>
            <el-button type="primary" @click="demoSelect()">查询</el-button>
            <el-button type="primary" @click="demoPost()">添加</el-button>
            <el-button type="primary" @click="demoPUT()">修改</el-button>
            <el-button type="primary" @click="demoDELETE()">删除</el-button>
        </el-row>

        <br/>
        返回信息：<pre>
            {{resBody}}
        </pre>
    </div>
</template>

<script>
export default {
      name: 'HelloMock',
      data(){
          return{
              id:"",
              bit_type_name:"",
              resBody:{"id":"1","name":"钻头"}
          }
      },
      methods: {
          demoSelect(){
              this.$http.bittypeGet(this.id)
                .then(res=>{
                    console.log(res);
                    this.resBody = res;
                })
          },
        demoPost(){
            var params = {"id":this.id,"bitTypeName":this.bit_type_name};
            this.$http.bittypePost(params)
                .then(res=>{
                    console.log(res);
                      this.resBody = res;
                })
        },
        demoPUT(){
            var params = {"id":this.id,"bitTypeName":this.bit_type_name};
            this.$http.bittypePut(params)
                .then(res=>{
                    console.log(res);
                     this.resBody = res;
                })
        },
        demoDELETE(){
            this.$http.bittypeDelete(this.id)
                .then(res=>{
                    console.log(res);
                    this.resBody = res;
                })
        }
      }
}
</script>


<style lang="css" scoped>
.mock{
}
.input{
    width: 30%;
    margin: 20px 0 20px 0;
}
</style>

5、 启动项目

　　执行命令 npm run serve 启动项目，打开调试窗口，观察打印结果。

6. 注意事项

　　●　mock.js依赖中保存着大量用于伪造假数据的静态数据，引入的时候打包得到的文件体积会明显增大，这是正常的。

　　●　mock.js模拟数据后，会将命中配置规则（正则表达式）的请求拦截，这时候在浏览器的network面板是无法看到数据返回的，可以通过打印数据的方式观察。

　　●　当后端写好真实接口以后，不要忘记注释掉在 main.js 中引入mock文件的那行代码。你也可以选择删掉创建的 mock目录 和 main.js 中的那行代码。

7. mock.js补充知识点

　mock.js内含各种内置的API，以及使用方法示例。主要包括以下几类：

　　●　基础数据类型 (Basic)
　　●　日期时间 (Date)
　　●　占位图片 (Image)
　　●　颜色 (Color)
　　●　文本 (Text)
　　●　姓名 (Name)
　　●　网络相关 (Web)
　　●　地址 (Address)
　　●　工具函数 (Helper)
　　●　等等

　　具体可以查阅Mockjs API 文档

参考：Vue开发时配置使用mock数据