SPA项目开发–左侧树以及首页导航
Mock.js
前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。
众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
更多内容，可以云Mockjs官方查看 网址点击
注1：easy-mock，一个在线模拟后台的数据平台
Mock.js使用步骤
2.1 安装mockjs依赖
npm install mockjs -D #只在开发环境使用
注意：在项目所在文件加中shift+右键打开cmd命令窗口执行安装；
引入
为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置
env在项目中的config目录下，
（1）dev.env.js 开发环境
代码
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: 'true'
})
prod.env.js 生产环境
'use strict'
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}
(3)main.js
//开发环境下才会引入mockjs
process.env.MOCK && require(’@/mock’) #在main.js中添加
import Vue from 'vue'
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
目录和文件创建（定义拦截路由配置）
import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
// timeout: 400 //延时400s请求到数据
timeout: 200 - 400 //延时200-400s请求到数据
})
//引登陆的测试数据，并添加至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)
为每个.vue定义单独的xxx-mock.js文件*
//使用mockjs的模板生成随机数据
const loginInfo = {
'code|0-1': 0,
'msg|3-10': 'msg'
}
export default loginInfo;
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 {
data() {
return {
asideClass: 'main-aside'
}
},
components:{
TopNav,LeftNav
},
created() {
this.$root.Bus.$on('collapsed-ly',(v)=>{
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;
}
.main-aside {
width: 240px !important;
height: 100%;
background-color: #334157;
margin: 0px;
}
.main-header,
.main-center {
padding: 0px;
border-left: 2px solid #333;
}
</style>
TopNav
1 <template>
2 <!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
3 text-color="#fff" active-text-color="#ffd04b">
4 <el-menu-item index="1">处理中心</el-menu-item>
5 <el-submenu index="2">
6 <template slot="title">我的工作台</template>
7 <el-menu-item index="2-1">选项1</el-menu-item>
8 <el-menu-item index="2-2">选项2</el-menu-item>
9 <el-menu-item index="2-3">选项3</el-menu-item>
10 <el-submenu index="2-4">
11 <template slot="title">选项4</template>
12 <el-menu-item index="2-4-1">选项1</el-menu-item>
13 <el-menu-item index="2-4-2">选项2</el-menu-item>
14 <el-menu-item index="2-4-3">选项3</el-menu-item>
15 </el-submenu>
16 </el-submenu>
17
18 <el-menu-item index="3" disabled>消息中心</el-menu-item>
19 <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
20 </el-menu> -->
21 <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
22 <el-button class="buttonimg">
23 <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
24 </el-button>
25 <el-submenu index="2" class="submenu">
26 <template slot="title">超级管理员</template>
27 <el-menu-item index="2-1">设置</el-menu-item>
28 <el-menu-item index="2-2">个人中心</el-menu-item>
29 <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
30 </el-submenu>
31 </el-menu>
32 </template>
33
34 <script>
35 export default {
36 data(){
37 return{
38 collapsed:false,
39 imgsq:require('@/assets/img/sq.png'),
40 imgshow:require('@/assets/img/show.png')
41 }
42 },
43 methods:{
44 doToggle(){
45 this.collapsed =!this.collapsed;
46 this.$root.Bus.$emit("collapsed-ly",this.collapsed);
47 },
48 exit(){
49 this.$router.push({
50 path:'/login'
51 })
52 }
53 }
54
55 }
56 </script>
57
58 <style scoped>
59 .el-menu-vertical-demo:not(.el-menu--collapse) {
60 border: none;
61 }
62
63 .submenu {
64 float: right;
65 }
66
67 .buttonimg {
68 height: 60px;
69 background-color: transparent;
70 border: none;
71 }
72
73 .showimg {
74 width: 26px;
75 height: 26px;
76 position: absolute;
77 top: 17px;
78 left: 17px;
79 }
80
81 .showimg:active {
82 border: none;
83 }
84 </style>
LeftNav
1 <template>
2 <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
3 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
4 <!-- <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"> -->
5 <div class="logobox">
6 <img class="logoimg" src="../assets/img/logo.png" alt="">
7 </div>
8 <el-submenu index="1">
9 <template slot="title">
10 <i class="el-icon-location"></i>
11 <span>导航一</span>
12 </template>
13 <el-menu-item-group>
14 <template slot="title">分组一</template>
15 <el-menu-item index="1-1">选项1</el-menu-item>
16 <el-menu-item index="1-2">选项2</el-menu-item>
17 </el-menu-item-group>
18 <el-menu-item-group title="分组2">
19 <el-menu-item index="1-3">选项3</el-menu-item>
20 </el-menu-item-group>
21 <el-submenu index="1-4">
22 <template slot="title">选项4</template>
23 <el-menu-item index="1-4-1">选项1</el-menu-item>
24 </el-submenu>
25 </el-submenu>
26 <el-menu-item index="2">
27 <i class="el-icon-menu"></i>
28 <span slot="title">导航二</span>
29 </el-menu-item>
30 <el-menu-item index="3" disabled>
31 <i class="el-icon-document"></i>
32 <span slot="title">导航三</span>
33 </el-menu-item>
34 <el-menu-item index="4">
35 <i class="el-icon-setting"></i>
36 <span slot="title">导航四</span>
37 </el-menu-item>
38 </el-menu>
39 </template>
40 <script>
41 export default {
42 data(){
43 return {
44 collapsed:false
45 }
46 },
47 created(){
48 this.$root.Bus.$on('collapsed-ly',(v)=>{
49 this.collapsed = v;
50 })
51 }
52 }
53 </script>
54 <style>
55 .el-menu-vertical-demo:not(.el-menu--collapse) {
56 width: 240px;
57 min-height: 400px;
58 }
59
60 .el-menu-vertical-demo:not(.el-menu--collapse) {
61 border: none;
62 text-align: left;
63 }
64
65 .el-menu-item-group__title {
66 padding: 0px;
67 }
68
69 .el-menu-bg {
70 background-color: #1f2d3d !important;
71 }
72
73 .el-menu {
74 border: none;
75 }
76
77 .logobox {
78 height: 40px;
79 line-height: 40px;
80 color: #9d9d9d;
81 font-size: 20px;
82 text-align: center;
83 padding: 20px 0px;
84 }
85
86 .logoimg {
87 height: 40px;
88 }
89 </style>
Router
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Login',
name: 'Login',
component: Login
},
{
path: '/Reg',
name: 'Reg',
component: Reg
},
{
path: '/AppMain',
name: 'AppMain',
component: AppMain,
children: [{
path: '/LeftNav',
name: 'LeftNav',
component: LeftNav,
},
{
path: '/TopNav',
name: 'TopNav',
component: TopNav,
}
]
},
]
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
