mock 的简单使用

原理

它的原理是: 拦截了所有的请求并代理到本地，然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。所以mock只能通过console.log来调试

新的方案

在本地会启动一个mock-server来模拟数据，还是继续使用mockjs来进行模拟，同时也可以在多环境中使用。
该方案的好处是，由于是一个真正的server，所以你可以通过控制台中的network，清楚的知道接口返回的数据结构。
通过所有的请求都设置了一个baseURL，而这个baseURL读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的，这样方便我们做到不同环境使用不同的 api 地址（待定）

使用方法

介绍mock的两种使用方法，个人比较喜欢第二种

第一种

第一种比较简单， 没有走网络，
vue 代码

<template>
    <div>
        <p> mock 它的原理是: 拦截了所有的请求并代理到本地 然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。</p>
        <div>
            没有进行封装的简单 mock （没有网络请求）
            <button @click="login">login</button>
            <button @click="list">list</button>
        </div>
        <div>
            封装后接口的 mock （有网络请求）
            <button @click="getUserInfo">获取用户信息</button>
        </div>
    </div>
</template>

<script>
    import mock from './mock/mock.js'
    //import mock2 from './mock2/index.js'
    import axios from 'axios'
    export default {
        methods: {
            login(){
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            },
            getUserInfo() {
               axios.get("/user/userinfo").then(({ data }) => {
                //打印mock data
                if (data.error === 0) {
                this.userInfo = data.data;
                 } else {
                this.userInfo = {};
               }
            });
          }
        }
    }
</script>

<style>
</style>

mock 代码

//引入mock模块
import Mock from 'mockjs';

Mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});

第二种

第二种: 走了网络请求
vue 代码

<template>
    <div>
        <p> mock 它的原理是: 拦截了所有的请求并代理到本地 然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。</p>
        <div>
            没有进行封装的简单 mock （没有网络请求）
            <button @click="login">login</button>
            <button @click="list">list</button>
        </div>
        <div>
            封装后接口的 mock （有网络请求）
            <button @click="getUserInfo">获取用户信息</button>
        </div>
    </div>
</template>

<script>
    //import mock from './mock/mock.js'
    import mock2 from './mock2/index.js'
    import axios from 'axios'
    export default {
        methods: {
            login(){
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            },
            getUserInfo() {
               axios.get("/user/userinfo").then(({ data }) => {
                //打印mock data
                if (data.error === 0) {
                this.userInfo = data.data;
                 } else {
                this.userInfo = {};
               }
            });
          }
        }
    }
</script>

<style>
</style>

mock 代码

index 文件

const Mock = require('mockjs');//mockjs 导入依赖模块
const util = require('./utils');//自定义工具模块
//返回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //util.getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = util.getJsonFile('./userInfo.json');
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
}

userInfo.json 文件

{
    "error":0,
    "data":{
        "userid": "@id()",
        "username": "@cname()",
        "date": "@date()",
        "avatar": "@image('200x200','red','#fff','avatar')",
        "description": "@paragraph()",
        "ip": "@ip()",
        "email": "@email()"
    }
}

utils.js文件

const fs = require('fs');//引入文件系统模块
const path = require('path');//引入path模块

module.exports = {
    //读取json文件
    getJsonFile:function (filePath) {
        //读取指定json文件
        var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
        //解析并返回
        return JSON.parse(json);
    }
};

最后需要在dev 环境中进行拦截
在webpack.dev.conf.js文件 中的devserver 中加入
** before: require('../src/components/mock/mock2/index') **

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    //before: require('../mockServer/mock-server.js'),//引入mock/index.js
   before: require('../src/components/mock/mock2/index') // 加入这一行
  },

结果截图

最后附上链接 github地址