Spa项目实现注册+首页导航+左侧菜单

前言

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

1. 老大，接口文档还没输出，我的好多活干不下去啊！
2. 后端小哥，接口写好了没，我要测试啊！
   前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点！

1、mock.js简介

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></