Spa项目实现注册+首页导航+左侧菜单
前言
前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景:
- 老大,接口文档还没输出,我的好多活干不下去啊!
- 后端小哥,接口写好了没,我要测试啊!
前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点!
1、mock.js简介
Mock.js是一个模拟数据的生成器,
用来帮助前端调试开发、进行前后端的原型分离
以及用来提高自动化测试效率
-
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
-
拦截Ajax请求
不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
2、Mock.js使用步骤
2.1、安装mock.js依赖
打开cmd窗口执行命令
npm install mockjs -D
仅开发环境使用
下载完mock.js的相关依赖之后,package.json中会多出,mock.js的版本号!
2.2、引入
为了只在开发环境使用mock,
而打包到生产环境时自动不使用mock,
我们可以在env中做一个配置
(1)dev.env(开发环境)
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: 'true'
})
图示
(2)prod.env(生产环境)
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}
图示
(3)main.js
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
2.3、目录和文件创建
在src目录下创建mock目录,定义mock主文件index.js,并在该文件中定义拦截路由配置
index.js
import Mock from 'mockjs' //引入mockjs,npm已安装
import action from '@/api/action' //引入封装的请求地址
Mock.setup({
// timeout: 400 //延时400s请求到数据
timeout: 200 - 400 //延时200-400s请求到数据
})
import login from '@/mock/json/login-mock.js'
//获取请求路径
let url=action.getFullPath('SYSTEM_USER_DOLOGIN');
//拦截ajax请求
//Mock.mock(url, "post", login)
Mock.mock(url, /post|get/i,login)
/* Mock.mock(url, "get", (options) =>{
// 最佳实践,
//debugger;
return Mock.mock(login);
}); */
注意:index.js文件的作用很显然,就是将分散的xxx-mock文件集合起来,后面再添加新的mock文件,都需要在这里引入!
2.4 、为每个*.vue定义单独的xxx-mock.js文件
- 可以添加自定义的json数据
- 还可以通过mockjs的模板生成随机数据
2.5、在index.js中导入xxx-mock.js,并添加拦截路由配置
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "post", {
...})
如何同时拦截get/post请求,并对get和post请求大小写不敏感呢?
解决方案:那就请使用正则表达式
Mock.mock(url, /post|get/i,{})
Mockjs如何拦截带参数的GET请求?
在实践过程中,发现mockjs对GET请求的支持并不是很友好。
解决方案:通过正则表达式实现
Mock.mock(RegExp(url + ".*"), /post|get/i, {
...});
定义拦截路由配置最简单的方式就是使用POST请求,并且不在URL中添加参数(推荐)
还可以通过控制台将将请求和参数都打印出来,以便调试
Mock.mock(url, "get", (options) =>{
// 最佳实践,
debugger;
return Mock.mock(mockUserInfo);
});
this.$message({
message:data.msg,
type:'error'
});
3、 登陆与注册页面的跳转
3.1 字符串
this.$router.push('/home/first')
3.2 对象
this.$router.push({
path: '/home/first' })
3.3 命名的路由
this.$router.push({
name: 'home', params: {
userId: wise }})
4、 后台首页Main.vue的创建
4.1 Container布局容器
4.2 TopNav
使用组件之间通信,完成左侧菜单折叠
4.3 LeftAside
5、 vue组件之间传递数据(总线)
根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。
5.1 子组件往父组件传递数据(this.$emit)
TopNav -> Main
5.2 父组件往子组件传递数据(props)
Main -> LeftAside
想要这种类似的图标,可以去element官网搜索icon图标!
element官网图标展示
记得在src下的assets中引入图标
6、最终代码展示
login-mock.js
存放文件的位置
这种方式已经不太用了
const login={
code:1,
msg:'登陆成功!'
}
一般使用正则表达式
const login={
'code|1-0':0,
'msg|3-10':'msg'
}
export default login;
Register.vue
在登录的基础上进行修改就好!
<template>
<div class="login-wrap">
<el-form class="login-container">
<h1 class="title">用户注册</h1>
<el-form-item label="">
<el-input type="text" placeholder="用户账号" v-model="username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="password" placeholder