mock数据

使用mock简单做到数据的本地模拟访问

---

前言

mock是什么？

Mock简单来理解，就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试。而这个虚拟的对象就是mock对象。mock对象就是真实对象在调试期间的代替品。

---

一、准备工作

首先需要准备一个vue的项目

1.先打开需要创建项目的文件夹下方输入cmd打开窗口
2.在窗口输入vue create 项目的名称
3.选择使用vue2.x版本
4.等待创建，完成后进入文件夹内部在控制台输入npm run serve

二、使用步骤

1.初步配置文件

找到package.json文件，找到parserOptions选项，添加"requireConfigFile": false，解决一部分的报错

	"parserOptions": {
      "parser": "@babel/eslint-parser",
      "requireConfigFile": false
    },

2.简单编写页面

在App.vue的template编写如下代码（做简单的测试）

<template>
  <div>
    <button @click="profile">测试一</button>
    <button @click="logout">测试二</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    profile() {
      console.log('ok')
    },
    logout() {
      console.log('ok')
    }
  }
}
</script>

3.引入相关的包并简单使用

在终端输入

npm i mockjs@1.1.0 --save

新建一个mock的文件，在该文件下创建index.js

在里面书写:

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

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

// 使用拦截规则拦截命中的请求
// mock( url, post/get, 返回的数据);
mock(/\/api\/users\/login/, "post", user.login);
mock(/\/api\/users\/profile/, "get", user.profile);
mock(/\/api\/users\/logout/, "post", user.logout);

在mock文件下面创建文件夹modules管理一部分的模块，创建文件user.js

书写以下的内容：

import { Random } from 'mockjs' // 导入随机函数
//下面注释是关闭一部分的eslint的检查
// eslint-disable-next-line no-unused-vars
function login(req) {
  // req是一个请求对象，包含: url，type和body属性
  return {
    code: 200,
    data: {
      username: Random.cname(),
      token: Random.guid(),
      message: 'Login successfully.'
    }
  }
}
// eslint-disable-next-line no-unused-vars
function profile(req) {
  return {
    code: 200,
    data: {
      username: Random.cname(),
      age: Random.integer(10, 30),
      date: Random.date(),
      message: ''
    }
  }
}

// eslint-disable-next-line no-unused-vars
function logout(req) {
  return {
    code: 200,
    data: {
      message: 'Logout successfully.'
    }
  }
}

export default {
  login,
  profile,
  logout
}

在main.js添加代码

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

Vue.config.productionTip = false

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

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

我们需要引入axios来发送请求

在终端输入

npm i axios@0.26.1

修改App.vue的文件内容

<script>
import axios from 'axios'
export default {
  data() {
    return {
      username: 'admin',
      password: 'password'
    }
  },
  created() {
    let params = { username: this.username, password: this.password }
    axios
      .post('/api/users/login', params)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    profile() {
      axios
        .get('/api/users/profile')
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    logout() {
      axios
        .post('/api/users/logout')
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

运行npm run serve我们打开网页和控制台就可以看见返回的数据了，两个测试的按钮也可以收到数据的返回

三、跨域的代理

在处理数据的请求的时候可能会遇到一些跨越的问题

我们需要在vue.config.json进行代理

书写以下代码：

module.exports = {
  lintOnSave: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

详细见webpack对代理参数的配置：https://webpack.docschina.org/configuration/dev-server/

见内容的DevServe下方的proxy选项

系列代码见https://gitee.com/the_betterest/mockStudy