mock.js and 登录注册跳转

一、Mock.js是什么？？

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

二、Mock.js两个重要的特性风靡前端

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

三、Mock.js官网

http://mockjs.com/

四、Mock.js使用步骤（进行登录注册跳转实现）

1、 安装mockjs依赖

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

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

dev.env
prod.env
main.js

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

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

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

4 、为每个*.vue定义单独的xxx-mock.js文件
注1：可以添加自定义的json数据
注2：还可以通过mockjs的模板生成随机数据

5、 进行登录与注册的跳转，点击登录按钮跳出一个弹出框

login界面代码

<template>
	<div class="login-wrap">
		<el-form  class="login-container">
			<h1 class="title">登录界面</h1>
		  <el-form-item >
			<el-input type="text"  placeholder="用户账号" v-model="username" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item >
			<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 @click="gotoRegister" style="width: 48%;">注册</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:'admin',
				password:'123'
			}
		},
		methods:{
   
			gotoRegister:function(){
   
				this.$router.push({
   
					name:'Register'
				});
			},
			doLogin:function(){
   
				let params={
   
					username:this.username,
					password:this.password,
					 methodName:'userLogin'
				}
				console.log(params);
				
				/* axios.get('http://localhost:8080/j2eeVue/userAction.action', {
   //注意数据是保存到json对象的params属性
					params:params
				  }).then(function (response) {
   
					console.log(response.data);
				  }).catch(function (error) {
   
					console.log(error);
				  }); */
				  
				  
				  /* let str=qs.s