Vue学习（八）——引入mock进行测试

前言

按照前后端分离的架构设计思路，通常前端通过axios调用后端接口。如果后端接口未写好，前端如何进行测试呢？这时候就要引入mock。mock会拦截前端请求，并生成测试数据。这样看起来就像调用了后端接口一样。虽然mock不能实现什么业务功能，但作为前端开发，引入mock也是必不可少的。

引入mock

由于mock的作用本来就是用于相应ajax调用，因此我们沿用《Vue学习（七）——引入Axios》建好的项目作为例子。在此之上引入mock并使用。

首先在项目内安装mock.js依赖

npm install mockjs --save

在src目录下新建mock目录，在mock目录下新建文件index.js

import Mock from 'mockjs';

Mock.mock('/api/hello', {
  'code': 200,
  'name': 'test helloController', 
});

Mock.mock('/api/hello/name', 'post', function(param){
  let data = param.body
  return 'hello ' + data
});

这里我们写上/hello和/hello/name这两个接口对应返回数据。这里仅展示简单的使用方法，其他使用方法请参考mockjs官网。

接着在main.js中引入

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

import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

require('./mock');

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

第8行引入mock。这样当我们通过axios发送请求给后台时，mock就会拦截这个请求并返回之前设置的数据。看起来就像前端真的调用了后端接口那样。方便我们后续开发和调试。

之后启动程序，点击按钮进行测试，点开f12查看输出。注意只看控制台输出，不要看网络那里，因为mock拦截了之后，网络请求没有发出去。这部分就不展示了。

mock的随机生成数据

mock的一大特点是随机生成数据。如果数据要一个一个自己写，尤其是字段多，测试需要的样本大的话，就很麻烦。例如测试分页的有效性，查询过滤的效果是否正确等等。

这里通过一个表格来展示，因此需要引入element ui的表格组件。在项目下增加对element ui的依赖：

npm install element-ui --save

在main.js中引入，修改main.js

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

import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

require('./mock');

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

第8-11行引入element-ui。

接下来新建api调用，在src/api目录下新建score.js

import request from '../utils/request'

export function all() {
  return request({
    url: '/score/all',
    method: 'get'
  })
}

这里我们定义一个api为all，意思是获取全部数据，为了和后面分页的list调用区分开来。

接下来是重点，添加mock随机数据，在src/mock目录下新建mockscore.js

import Mock from 'mockjs';

Mock.mock('/api/score/all', {
    'data|10': [
      {'id|+1':1, 'name':'@name', 'score|70-100':100}
    ]
});

上面充分反映了mock随机生成数据的特点。上面的意思是生成一个名为data的10个元素的数组，id字段起始为1，递增1；name字段随机生成名字；score字段随机生成70-100的数字。mock生成随机数据的玩法很多，具体的规则请参考官网。

我们新建一个页面，页面列表展示列表数据，在src/components下新建Score.vue

<template>
  <div>
     <template>
    <el-table :data="tableData" style="width: 50%">
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="score" label="分数" width="180"></el-table-column>
    </el-table>
  </template>
  </div>
</template>

<script>
import { all } from '@/api/score.js'
require('../mock/mockscore.js');


export default {
  name: 'MyTable',
  data() {
    return {
      tableData: [],
    }
  },
  created(){
    all().then(res => {
      this.tableData = res.data
    })
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

这里显示一个简单列表，页面加载时调用all方法，把调用返回的数据设置到tableData变量中。

最后在App.vue中，我们把引用HelloWord模块改为引用Score模块（只是测试展示效果，正常项目应该增加路由，访问对应的url）。修改App.vue

<template>
  <div id="app">
    <Score/>
  </div>
</template>

<script>
import Score from './components/Score.vue'

export default {
  name: 'App',
  components: {
    Score
  }
}
</script>

<style>
</style>

启动项目，访问localhost:8080：

可以看到我们的随机数据生成了。下一步就是增删查改的问题了。

mock的增删查改

mock数据增删查改相对来说还是比较麻烦，因为通常增删查改是交给数据库去做，一条指令就完事了。但mock里面，我们得自己去维护。尤其是查询时，我们得自行筛选数据，如果涉及到排序什么的，就更麻烦了。这里就展示简单一点的情况。由于代码量比较大，所以写得并不完善，仅展示如何使用。

首先做一些准备，写好增删查改功能的api。修改src/api下的score.js

import request from '../utils/request'

export function all() {
  return request({
    url: '/score/all',
    method: 'get'
  })
}

export function add(param) {
  return request({
    url: '/score/add',
    method: 'post',
    data: param
  })
}

export function update(param) {
  return request({
    url: '/score/update',
    method: 'post',
    data: param
  })
}

export function del(id) {
  return request({
    url: '/score/delete',
    method: 'post',
    data: id
  })
}

export function list(param) {
  return request({
    url: '/score/list',
    method: 'post',
    data: param
  })
}

然后修改src/mock/mockscore.js，添加增删查改方法

import Mock from 'mockjs';

const StudentData = Mock.mock({
    'data|10': [
      {'id|+1':1, 'name':'@name', 'score|70-100':100}
    ]
});

Mock.mock('/api/score/all', 'get', function(){
  const resMsg = {
    'code': 200,
    'data': StudentData.data,
    'msg': '获取成功'
  }
  return resMsg
})

Mock.mock('/api/score/add', 'post', function(data){
  let student = JSON.parse(data.body)
  student.id = parseInt(student.id)
  student.score = parseInt(student.score)
  StudentData.data.push(student)
  const resMsg = {
    'code': 200,
    'msg': '添加成功'
  }
  return resMsg
});

Mock.mock('/api/score/list', 'post', function(data){
  let resData = []
  let queryParam = JSON.parse(data.body)
  for(let index in StudentData.data){
    if(queryParam.id == undefined || queryParam.id == null || queryParam.id == ''){
      resData.push(StudentData.data[index])
    }else{
      if(StudentData.data[index].id == queryParam.id){
        resData.push(StudentData.data[index])
      }
    }
  }
  const resMsg = {
    'code': 200,
    'data': resData,
    'msg': '查询成功'
  }
  return resMsg
});

Mock.mock('/api/score/update', 'post', function(data){
  let student = JSON.parse(data.body)
  student.id = parseInt(student.id)
  student.score = parseInt(student.score)
  for(let index in StudentData.data){
    if(StudentData.data[index].id == student.id){
      StudentData.data[index] = student
    }
  }
  const resMsg = {
    'code': 200,
    'msg': '修改成功'
  }
  return resMsg
});

Mock.mock('/api/score/delete', 'post', function(data){
  let id = parseInt(JSON.parse(data.body))
  for(let index in StudentData.data){
    if(StudentData.data[index].id == id){
      StudentData.data.splice(index, 1)
      break
    }
  }
  const resMsg = {
    'code': 200,
    'msg': '删除成功'
  }
  return resMsg
});

思路很简单，对于新增，就是往数组里push；对于修改，就是找到对应的id的元素，然后替换；对于删除，就是找到对应id元素，使用splice函数删除；对于查询，就比较复杂了，得把符合条件的元素提取出来并返回。这里只对id查询进行处理，再多的话代码比较复杂，读者可自行尝试。

然后修改src/components/Score.vue：

<template>
  <div>
    <template>
      <el-form ref="form" :inline="true" :model="queryForm" label-width="80px">
        <el-form-item label="id">
          <el-input v-model="queryForm.id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
      
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-table :data="tableData" style="width: 50%">
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="score" label="分数" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="onUpdate(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :title="title" :visible.sync="dialogVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="id">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="分数">
            <el-input v-model="form.score"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { all, add, update, del, list } from '@/api/score.js'
require('../mock/mockscore.js');


export default {
  name: 'MyTable',
  data() {
    return {
      tableData: [],
      form: {
        id: null,
        name: '',
        score: null,
      },
      title: '',
      dialogVisible: false,
      queryForm: {
        
      }
    }
  },
  created(){
    all().then(res => {
      console.log(res)
      this.tableData = res.data
    })
  },
  methods: {
    onSearch(){
      list(this.queryForm).then(res => {
        this.tableData = res.data
      })
    },
    onAdd(){
      this.title = '新增'
      this.dialogVisible = true
    },
    onUpdate(row){
      this.title = '修改'
      this.dialogVisible = true
      this.form = row
    },
    onDelete(row){
      del(row.id).then(res =>{
        console.log(res)
        this.onSearch()
      })
    },
    onSubmit(){
      if(this.title == '新增'){
        add(this.form).then(res =>{
          console.log(res)
          this.dialogVisible = false
          this.onSearch()
        })
      }else if(this.title == '修改'){
        update(this.form).then(res => {
          console.log(res)
          this.dialogVisible = false
          this.onSearch()
        })
      }
    },
    onCancel(){
      this.dialogVisible = false
      this.resetForm()
    },
    resetForm(){
      this.form = {
        id: null,
        name: '',
        score: null
      }
    }
  }
}
</script>

<style scoped>
</style>

这里的代码不是重点，毕竟更多是涉及增删查改前端界面的处理逻辑，和mock本身无关，仅提供给读者参考。

小结

mock的使用不复杂，上手很快，一般是用来作为前端测试，不会搞得很复杂。希望读者通过这篇文章，能在项目中快速上手mock