SPA项目实现页面跳转&mock.js拦截请求&vue组件之间传递数据

前言

上篇博客讲述了一遍SPA项目的登录，这篇博客讲一下SPA项目的跳转、使用mock.js拦截请求以及vue组件之间传递数据。

页面跳转

我就做一个注册界面8！首先需要一个注册界面：

我是copy我的登录界面再做修改的

代码：

显示效果：

界面配置好后我们配置其路由：

我们为按钮绑定点击事件：

用户注册

goLogin:function(){
				this.$router.push({
					name:'Login'
				});
			}

mock.js拦截请求

什么是mock.js？

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

如何实现前后端原型分离？

因为mock.js可以模拟数据，假设我们登录需要后台返回一个字段来判断是否登录成功，这个字段mock.js可以传过去，由此我们可以不用等后台写完代码才开始测试我们自己的功能是否实现。

且支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

mock.js官网：http://mockjs.com/

我们需要在cmd窗口进入到项目下面下载mock.js的依赖

需执行：

npm install mockjs -D 

注：只在开发环境使用

下载成功后我们在package.json中会看到：

因为只有开发我们才会使用到，到生产环境下我们不需要使用，我们需要在env中做一个配置：

config==>dev.env（开发环境）：

配置：

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

config==>prod.env（生产环境）:

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

main.js：

//开发环境下才会引入mockjs
      process.env.MOCK && require('@/mock')

接下来在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置：

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

Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
      })
//引入mock文件
import login from '@/mock/json/login-mock.js'
//获取请求路径
let url=action.getFullPath('SYSTEM_USER_DOLOGIN');
//拦截ajax请求 同时拦截get/post请求，并对get和post请求大小写不敏感
Mock.mock(url,/post|get/i,login)

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

定义单独的xxx-mock.js文件

我这边用登录来做这个示例，我们需要在mock目录下新建一个json目录，然后新建login-mock.js（xxxlogin-mock.js）

如：/src/mock/json/login-mock.js

这个login-mock.js就主要是下面两点：

可以添加自定义的json数据
还可以通过mockjs的模板生成随机数据

然后要记得在mock下的index.js中引入！

定义拦截路由配置最简单的方式就是使用POST请求，并且不在URL中添加参数(推荐)

像我这边用登录做实例，返回1就是登陆成功，返回0就是登录失败。

我的login-mock.js：

const login={
	'code|1-0':0,
	'msg|3-10':'msg'
}

export default login;

post请求里增加了message方法

 axios.post(this.axios.urls.SYSTEM_USER_DOLOGIN,
				 params).then(resp =>{
					 let data=resp.data;
					 if(data.code=="1"){
						 this.$message({
							 message:data.msg,
							 type:'success'
						 });
						 this.$router.push({
						 	name:'Main'
						 });
					 }else{
						 this.$message({
						 	message:data.msg,
						 	type:'error'
						 });
					 }

实现效果：

成功：

失败：

由于0或者1为随机数据，所以点击登录也是随机登陆进去

vue组件之间传递数据

根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。

子组件往父组件传递数据(this.$emit)
	TopNav -> Main
	
父组件往子组件传递数据(props)
	Main -> LeftAside

思路：

登录进入main界面，main界面是导入了左侧菜单界面以及头部导航界面！

main.vue界面代码：

mainCollapsed接受了子组件TopNav传来的值

LeftAside.vue代码：

props:接收了’leftCollapsed’的值，作为左侧菜单是否展开的关键

TopNav.vue代码：

显示效果：

左侧菜单是main==》LeftAside

图标按钮：TopNav==>main