SPA项目开发之登陆注册的跳转功能以及首页导航+左侧菜单

前言

上一章实现了登陆功能，但是未跳转，这章实现跳转以及首页导航和左侧菜单。

1. 介绍Mock.js

• Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

• 众所周知Mock.js因为两个重要的特性风靡前端:
  1.数据类型丰富

  2.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  3.拦截Ajax请求
  4.不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

  更多内容，可以云Mockjs官方查看“http://mockjs.com/”

注1：easy-mock，一个在线模拟后台的数据平台

2. Mock.js使用步骤

2.1 安装mockjs依赖

  npm install mockjs -D              只在开发环境使用

下载完后会显示在package.json文件中，进行引用。

2.2 引入
为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置。

**(1) 在dev.env中添加 MOCK: ‘true’ **

 module.exports = merge(prodEnv, {
   
	NODE_ENV: '"development"',
  	MOCK: 'true'
      })

**(2) 在prod.env中添加 MOCK: ‘false’ **

module.exports = {
   
	NODE_ENV: '"production"',
	MOCK: 'false'
      }

(3)在main.js中引入mock.js

process.env.MOCK && require('@/mock')

注1：import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案后者支持动态引入，也就require(${path}/xx.js)

2.3 目录和文件创建

• 在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置， /src/mock/index.js
• 导入公共模块及mockjs全局设置

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入封装的请求地址

• 全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时

Mock.setup({
   
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
      })

注1：index.js文件的作用很显然,就是将分散的xxx-mock文件集合起来.后面再添加新的mock文件,都需要在这里引入

mock/index.js总代码：

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入封装的请求地址
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
   
	// timeout: 400  //延时400s请求到数据
  timeout: 200 - 400 //延时200-400s请求到数据
})

登陆注册跳转，全代码：
Login.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="用户密码" v-model="password" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="doLogin()" style="width: 100%;">用户登录</el-button>
<!-- <el-button style="width: 48%;" @click="gotoRegister()">用户注册</el-button> -->
</el-form-item>
			<el-row style="text-align: center;">
				<el-link @click="gotoRegister">用户注册</el-link>
        <el-link>忘记密码</el-link>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	 import axios from 'axios'
	import qs from 'qs'

	export default{
   
		data:function(){
   
			return{
   
				username:null,
				password:null
			}
		},
		methods:{
   
			gotoRegister:function(){
   
        this.$router.push('/Register')
			},
			doLogin:function(){
   
				let params={
   
					username:this.username,
					password:this.password,
					methodName:'userLogin'
				};
				console.log(params);

			
 this.axios.get(this.axios.urls.SYSTEM_USER_DOLOGIN,{
   
    params:params
  }).then(resp=>{
   
    console.log(resp.data);
  }).catch(resp=>{
   });

//post方式
  /* this.axios.post(this.axios.urls.SYSTEM_USER_DOLOGIN,params).then(resp=>{
   
    console.log(resp.data);
  }).catch(resp=>{
   }); */


			}
		}
	}
</script>
//scoped="scoped" 表示样式仅仅规范当前VUE
<style scoped="scoped">
	.login-wrap {
   
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding-top: 10%;
			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02NC4yNzc1NTgyLDMzLjE3MDQ5NjMgTDExOS4xODU4MzYsMTYuNTY1NDkxNSIgaWQ9IlBhdGgtMTIiIHN0cm9rZT0iI0NGREFFNiIgc3Ryb2tlLXdpZHRoPSIxLjczOTEzMDQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDIuMTQzMTcwOCwyNi41MDAyNjgxIEw3LjcxMTkwMTYyLDE0LjU2NDA3MDIiIGlkPSJQYXRoLTE2IiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMC43MDI2Nzg5NjQiIG9wYWNpdHk9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLjQwNTM1Nzg5OTg3MzE1MywyLjEwODAzNjk1MzQ2OTk4MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBM