ElementUI首页导航+左侧菜单

本节需要实现的效果

1.Mock.js

1.1.什么是Mock.js

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

• 老大，接口文档还没输出，我的好多活干不下去啊！
• 后端小哥，接口写好了没，我要测试啊！

前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。

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

众所周知Mock.js因为两个重要的特性风靡前端:

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

更多内容，可查看Mockjs官方

1.2.安装与配置

1.2.1.安装mock.js

npm i mockjs -D # -D表示只在开发环境中使用

安装完成后,可以在package.json中的devDependencies中看到引入的依赖

1.2.2.引入mock.js

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：

• dev.env.js

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

• prod.env.js

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

• main.js(在src目录下)

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

1.2.3.在src目录下目录及文件

创建mock目录,mock下创建index.js以及json文件夹,在JSON文件夹中创建login-mock.js

src
├── json
	├── login-mock.js
├── index.js

• index.js

  import Mock from 'mockjs' //引入mockjs，npm已安装
  import action from '@/api/action' //引入请求地址
  
  //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
  Mock.setup({
  	// timeout: 400  //延时400ms请求到数据
  	timeout: 200 - 400 //延时200-400ms请求到数据
  })
  
  //引登陆的测试数据，并添加至mockjs
  import loginInfo from '@/mock/json/login-mock.js'
  let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
  Mock.mock(s1, "post", loginInfo)
  // Mock.mock(s1, /post|get/i, loginInfo)
  
  

• login-lock.js

  // const loginInfo = {
  // 	code: -1,
  // 	message: '密码错误'
  // }
  
  //使用mockjs的模板生成随机数据
  const loginInfo = {
  	'code|-1-0': 0,
  	'message|3-10': 'msg'
  }
  export default loginInfo;
  

1.2.4. 启动项目

可以看到随机返回了数据

1.2.5.使用element-ui的信息提示

效果

代码

修改Login.vue中的doSubmit()的内容

doSubmit: function () {
    let params = {
        username: this.username,
        password: this.password
    };
    console.log(params);
    let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    this.axios.post(url, params).then(response => {
        console.log(response);
        if (response.data.code == 0) {
            this.$message({
                message: response.data.message,
                type: 'success'
            })
        } else {
            this.$message({
                message: response.data.message,
                type: 'error'
            })
        }
    }).catch(error => {
        console.log(error);
    });
}

1.2.6.数据模板定义规则

请在使用的Vue组件中，先导入Mock模块

import Mock from 'mockjs'

• 生成随机id值

使用Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])

let uid1 = Mock.Random.guid();
//使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);

• string

let obj1 = Mock.mock({
  'star|1-5':"★",//生成指定范围长度的字符串
  info:'静态的字符串',//静态字符串
  name:'@cname'//使用规定占位符@cname，随机生成中国人的名字
})
console.log(obj1);

• number 自增

+1 是指，在id的起始值每次调用+1

// +1 是指，在id的起始值每次调用+1
let temp = {
	"id|+1":1000001
}
console.log(Mock.mock(temp)); // 1000001
console.log(Mock.mock(temp)); // 1000002
console.log(Mock.mock(temp)); // 1000003
console.log(Mock.mock(temp)); // 1000004
console.log(Mock.mock(temp)); // 1000005
console.log(Mock.mock(temp)); // 1000006

• number随机生成

小数生成 |min-max.dmin(小数最小位数)-dmax(小数最大位数)

let obj2 = Mock.mock({
    'age|1-100':0,//随机生成0-100整数
    'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
    'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
    'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
})
console.log(obj2);

• boolean值

let flag = {
    'flag1|0':true, //模板规则：0数值是0时，表示布尔值恒定是false
    'flag2|1':false,//值位>=1时，boolean随机取值
    "flag3|1-2":true
}
console.log(Mock.mock(flag));

• 城市随机取值

let city = Mock.mock({
    "city1|2":{//数字2表示随机取2个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
    },
    "city2|1-3":{//数字1-3表示随机取1-3个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
    }
})
console.log(city);

• 枚举取值,从数组中随机取值

let gender = Mock.mock({
    'sex|1':['男','女','不知道'],//数字1表示随机取数组中的一个值
    'sex2|+1':['男','女','不知道']//+1表示循环一次取数组中的值
})
console.log(gender);

• 正则表达式规则

let obj7 = Mock.mock({
    user:{
    	name:'@cname',
    },
    tel:/1[0-9]{10}/,
    //正则表达式可以使用插件
    email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    //函数表达式
    info:function(){
        //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
        return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}`
    },
    // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
    //          ==>   / 表示在模板数据中的层级关系，上下级
    message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
})
console.log(obj7);

• 日期生成

let timer = Mock.mock({
    day1:'@date',// @date占位符表示随机生成mock默认格式的年月日
    day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式,
    time1:'@time',//@time占位符可以随机生成mock格式的时分秒
    time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式
    daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间
    nowTime:'@now'
})
console.log(timer);

• 图片生成

生成的是带参数的图片地址，可以根据地址获取图片

let imgs = Mock.mock({
    img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
    img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
    img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
    // mock占位符调用时，需要传递参数，参数也可以是占位符
    img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
    //可以使用随机生成图片的网址，但是注意，统一网址的请求图片地址时，如果不加参数，那么浏览器默认地址一样的会使用浏览器的缓存，那么所请求的图片只有一种；一般加一个时间戳作为参数，保持参数的唯一，图片可以请求到不同的值
    img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
});
console.log(imgs);

2.登录与注册页面的跳转

效果

2.1.在views中添加Register.vue

<template>
  <div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">用户注册</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoLogin()">用户登录</el-link>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data: function () {
    return {
      username: "admin",
      password: "123"
    }
  },
  methods: {
    doSubmit: function () {

    },
    gotoLogin(){
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

2.2.在Login.vue中的methods中添加gotoRegister方法

gotoRegister(){
    this.$router.push({path: '/register'})
}

2.3.在router/index.js中添加内容

import Register from '@/views/Register'

//以下内容添加到routes中
{
	path: '/register',
	name: 'Register',
	component: Register
}

2.4.小结

构建注册页面。使用this.$router.push({})实现路由跳转：

• 参数为字符串，即路径名称

//  路径/home对应router目录下index.js中定义的path属性值
this.$router.push('/home');

• 参数为对象

//  对应router目录下index.js中定义的path
this.$router.push({path:'/home'});

• 参数为路由命名

//  对应router目录下index.js中定义的name
this.$router.push({name:'Home'});

• 带参数

// 传递参数：params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});

// 查询参数：传递过去的内容会自动拼接变成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

query语法与params语法的区别：

• **写法的不同：**query的语法用于path编写传参地址；params的语法用于name编写传参地址
• **接收方式不同：**query语法使用this.$route.params.name；params语法使用this.$route.query.name
• **刷新页面参数消失问题：**query在刷新页面时参数不会消失；params再刷新页面时参数会消失
• **参数显示不同：**query传递参数会显示在地址栏上，相当于get请求；params传递参数不会显示在地址栏上，相当于post请求

3.组件通信（总线）

3.1.在main.js中添加内容

//在new Vue中添加
data(){
  return{
      Bus: new Vue({})
  }
}

3.2.在components中添加内容

TopNav.vue

<template>
  <!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
   text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
      <template slot="title">我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
      <el-submenu index="2-4">
        <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项1</el-menu-item>
        <el-menu-item index="2-4-2">选项2</el-menu-item>
        <el-menu-item index="2-4-3">选项3</el-menu-item>
      </el-submenu>
    </el-submenu>

    <el-menu-item index="3" disabled>消息中心</el-menu-item>
    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  </el-menu> -->
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    <el-button class="buttonimg">
      <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    </el-button>
    <el-submenu index="2" class="submenu">
      <template slot="title">超级管理员</template>
      <el-menu-item index="2-1">设置</el-menu-item>
      <el-menu-item index="2-2">个人中心</el-menu-item>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      imgshow: require('@/assets/img/show.png'),
      imgsq: require('@/assets/img/sq.png')
    }
  }, methods: {
    doToggle() {
      this.collapsed = !this.collapsed;
      this.$root.Bus.$emit('doCollapsed', this.collapsed);
    },
    exit(){
      this.$router.push({path:'/login'})
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}

.submenu {
  float: right;
}

.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}

.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}

.showimg:active {
  border: none;
}
</style>

AppMain.vue

<template>
  <el-container class="main-container">
    <el-aside v-bind:class="asideClass">
      <LeftNav></LeftNav>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <TopNav></TopNav>
      </el-header>
      <el-main class="main-center">Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入组件
import TopNav from '@/components/TopNav.vue'
import LeftNav from '@/components/LeftNav.vue'

// 导出模块
export default {
  components: {LeftNav, TopNav},
  data() {
    return {
      asideClass: 'main-aside'
    }
  },
  created() {
    this.$root.Bus.$on('doCollapsed', v => {
      //v指的是topNav传递过来的this.collapsed
      this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
    });
  }
};
</script>
<style scoped>
.main-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.main-aside-collapsed {
  /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
  width: 64px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
  transition: width 0.6s ease;
}

.main-aside {
  width: 240px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
  transition: width 0.6s ease;
}

.main-header,.main-center {
  padding: 0px;
  border-left: 2px solid #333;
}
</style>

LeftNav.vue

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false
    }
  },
  created() {
    this.$root.Bus.$on('doCollapsed', v => {
        //v指的是topNav传递过来的this.collapsed
      this.collapsed = v;
    });
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}
</style>

3.3.在router/index.js中添加内容

#写在routes中
{
	path: '/appMain',
	name: 'AppMain',
	component: AppMain,
	children: [{
			path: '/TopNav',
			name: 'TopNav',
			component: TopNav
		},{
			path: '/leftNav',
			name: 'LeftNav',
			component: LeftNav
        }
	]
}

4.登出

修改topNav的内容

//在methods中添加exit()方法
exit(){
	this.$router.push({path:'/login'})
}