前言
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选项
