目录
一、Mock.js
1.什么是Mock.js
前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：
- 老大，接口文档还没输出，我的好多活干不下去啊！
- 后端小哥，接口写好了没，我要测试啊！
前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。
众所周知Mock.js因为两个重要的特性风靡前端:
- 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
更多内容，可查看Mockjs官方
2.安装与配置
1）安装mock.js
npm i mockjs -D
安装完成后,可以在package.json中的devDependencies中看到引入的依赖
2）引入mock.js
为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：
- dev.env.js
module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: 'true' }) - prod.env.js
module.exports = { NODE_ENV: '"production"', MOCK: 'false' } - main.js(在src目录下)
//开发环境下才会引入mockjs process.env.MOCK && require('@/mock')
3. mock.js使用
-
定义测试数据文件
为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。
创建src/mock/json目录，定义登录测试数据文件login-mock.js：
// const loginInfo = {
// code: -1,
// message: '密码错误'
// }
//使用mockjs的模板生成随机数据
const loginInfo = {
'code|-1-0': 0,
'message|3-10': 'msg'
}
export default loginInfo;
-
mock拦截ajax请求
在src/mock目录下创建index.js，定义拦截路由配置：
import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
// timeout: 400 //延时400ms请求到数据
timeout: 200 - 400 //延时200-400ms请求到数据
})
//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)
配置完成之后，直接使用axios配置post或get请求，模拟测试效果。
-
数据模板定义规则
在使用的Vue组件中，先导入Mock模块
import Mock from 'mockjs'
- 生成随机id值
使用Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])
let uid1 = Mock.Random.guid();
//使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);
- string
let obj1 = Mock.mock({ 'star|1-5':"★",//生成指定范围长度的字符串 info:'静态的字符串',//静态字符串 name:'@cname'//使用规定占位符@cname，随机生成中国人的名字 }) console.log(obj1); - number自增
+1 是指，在id的起始值每次调用+1
// +1 是指，在id的起始值每次调用+1
let temp = {
"id|+1":1000001
}
console.log(Mock.mock(temp)); // 1000001
console.log(Mock.mock(temp)); // 1000002
console.log(Mock.mock(temp)); // 1000003
console.log(Mock.mock(temp)); // 1000004
console.log(Mock.mock(temp)); // 1000005
console.log(Mock.mock(temp)); // 1000006
- number随机生成
小数生成 |min-max.dmin(小数最小位数)-dmax(小数最大位数)
let obj2 = Mock.mock({
'age|1-100':0,//随机生成0-100整数
'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
})
console.log(obj2);
- boolean值
let flag = { 'flag1|0':true, //模板规则：0数值是0时，表示布尔值恒定是false 'flag2|1':false,//值位>=1时，boolean随机取值 "flag3|1-2":true } console.log(Mock.mock(flag)); - 城市随机取值
let city = Mock.mock({ "city1|2":{//数字2表示随机取2个值 addr1:'@city',//占位符@city表示随机生成城市 addr2:'@city',//占位符@city表示随机生成城市 addr3:'@city',//占位符@city表示随机生成城市 addr4:'@city',//占位符@city表示随机生成城市 }, "city2|1-3":{//数字1-3表示随机取1-3个值 addr1:'@city',//占位符@city表示随机生成城市 addr2:'@city',//占位符@city表示随机生成城市 addr3:'@city',//占位符@city表示随机生成城市 addr4:'@city',//占位符@city表示随机生成城市 } }) console.log(city); - 枚举取值，从数组中随机取值
let gender = Mock.mock({ 'sex|1':['男','女','不知道'],//数字1表示随机取数组中的一个值 'sex2|+1':['男','女','不知道']//+1表示循环一次取数组中的值 }) console.log(gender); - 正则表达式规则
let obj7 = Mock.mock({ user:{ name:'@cname', }, tel:/1[0-9]{10}/, //正则表达式可以使用插件 email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, //函数表达式 info:function(){ //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值； return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}` }, // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符) // ==> / 表示在模板数据中的层级关系，上下级 message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId" }) console.log(obj7); - 日期生产
let timer = Mock.mock({ day1:'@date',// @date占位符表示随机生成mock默认格式的年月日 day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式, time1:'@time',//@time占位符可以随机生成mock格式的时分秒 time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式 daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间 nowTime:'@now' }) console.log(timer); - 图片生成
生成的是带参数的图片地址，可以根据地址获取图片
let imgs = Mock.mock({
img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
// mock占位符调用时，需要传递参数，参数也可以是占位符
img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
//可以使用随机生成图片的网址，但是注意，统一网址的请求图片地址时，如果不加参数，那么浏览器默认地址一样的会使用浏览器的缓存，那么所请求的图片只有一种；一般加一个时间戳作为参数，保持参数的唯一，图片可以请求到不同的值
img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
});
console.log(imgs);
-
登录与注册页面的跳转
效果：
1.在views中添加Register.vue
<template>
<div class="login-wrap">
<el-form class="login-container">
<h1 class="title">用户注册</h1>
<el-form-item label="">
<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
</el-form-item>
<el-row style="text-align: center;margin-top:-10px">
<el-link type="primary">忘记密码</el-link>
<el-link type="primary" @click="gotoLogin()">用户登录</el-link>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data: function () {
return {
username: "admin",
password: "123"
}
},
methods: {
doSubmit: function () {
},
gotoLogin(){
this.$router.push({path: '/login'})
}
}
}
</script>
<style scoped>
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
/* background-color: #112346; */
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
2.在Login.vue中的methods中添加gotoRegister方法
gotoRegister(){
this.$router.push({path: '/register'})
}
3.在router/index.js中添加内容
import Register from '@/views/Register'
//以下内容添加到routes中
{
path: '/register',
name: 'Register',
component: Register
}
4.注意
构建注册页面。使用this.$router.push({})实现路由跳转：
- 参数为字符串，即路径名称
// 路径/home对应router目录下index.js中定义的path属性值 this.$router.push('/home'); - 参数为对象
// 对应router目录下index.js中定义的path this.$router.push({path:'/home'}); - 参数为路由命名
// 对应router目录下index.js中定义的name this.$router.push({name:'Home'});
带参数
// 传递参数：params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});
// 查询参数：传递过去的内容会自动拼接变成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});
query语法与params语法的区别：
- **写法的不同：**query的语法用于path编写传参地址；params的语法用于name编写传参地址
- **接收方式不同：**query语法使用this.$route.params.name；params语法使用this.$route.query.name
- **刷新页面参数消失问题：**query在刷新页面时参数不会消失；params再刷新页面时参数会消失
- **参数显示不同：**query传递参数会显示在地址栏上，相当于get请求；params传递参数不会显示在地址栏上，相当于post请求
二、组件通信(总线)
- 在main.js的Vue实例中添加一个Vue作为总线
new Vue({ el: '#app', data() { BUS: new Vue({}) } router, components: { App }, template: '<App/>' }) - 导入AppMain.vue,LeftNav,TopNav到components
index.js添加路由{ path: '/appMain', name: 'AppMain', component: AppMain, children: [ { path: '/leftNav', name: 'LeftNav', component: LeftNav }, { path: '/topNav', name: 'TopNav', component: TopNav } ] } - TopNav.vue
将collapsed存入总线<script> export default { data() { return { collapsed: false, imgshow: require('@/assets/img/show.png'), imgsq: require('@/assets/img/sq.png') } }, methods: { doToggle: function() { this.collapsed = !this.collapsed; this.$root.BUS.$emit('doCollapsed', this.collapsed); }, exit: function() { this.$router.push('/') } } } </script> - LeftNav.vue
取出总线中的doCollapsed的值<script> export default { data() { return { collapsed: false } }, created() { this.$root.BUS.$on('doCollapsed', v => { // v 指的是TopNav传递过来的 this.collapsed = v; }) } } </script> - AppMain.vue
导入组件, 根据总线中doCollapsed的值动态改变样式<script> // 导入组件 import TopNav from '@/components/TopNav.vue' import LeftNav from '@/components/LeftNav.vue' // 导出模块 export default { components: {TopNav, LeftNav}, data() { return { asideClass: 'main-aside' } }, created() { this.$root.BUS.$on('doCollapsed', v => { // v 指的是TopNav传递过来的 this.asideClass = v ? 'main-aside-collapsed' : 'main-aside'; }) } }; </script>
三、退出功能实现
TopNav.vue
exit: function() {
this.$router.push('/')
}
1921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
