SPA项目开发–左侧树以及首页导航Mock.js前后端分离之后前端迫切需要一种机制不再需要依赖后端接口开发而今天的主角mockjs就可以做到这一点Mock.js是一个模拟数据的生成器用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求不需要修改既有代码就可以拦截Ajax请求返回模拟的响应数据。更多内容可以云Mockjs官方查看 网址点击注1easy-mock一个在线模拟后台的数据平台Mock.js使用步骤2.1 安装mockjs依赖npm install mockjs -D #只在开发环境使用注意在项目所在文件加中shift右键打开cmd命令窗口执行安装引入为了只在开发环境使用mock而打包到生产环境时自动不使用mock我们可以在env中做一个配置env在项目中的config目录下1dev.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//开发环境下才会引入mockjsprocess.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 //引入mockjsnpm已安装 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.vuetemplate el-container classmain-container el-aside v-bind:classasideClass LeftNav/LeftNav /el-aside el-container el-header classmain-header TopNav/TopNav /el-header el-main classmain-centerMain/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; } /styleTopNav1 template 2 !-- el-menu :default-activeactiveIndex2 classel-menu-demo modehorizontal selecthandleSelect background-color#545c64 3 text-color#fff active-text-color#ffd04b 4 el-menu-item index1处理中心/el-menu-item 5 el-submenu index2 6 template slottitle我的工作台/template 7 el-menu-item index2-1选项1/el-menu-item 8 el-menu-item index2-2选项2/el-menu-item 9 el-menu-item index2-3选项3/el-menu-item 10 el-submenu index2-4 11 template slottitle选项4/template 12 el-menu-item index2-4-1选项1/el-menu-item 13 el-menu-item index2-4-2选项2/el-menu-item 14 el-menu-item index2-4-3选项3/el-menu-item 15 /el-submenu 16 /el-submenu 17 18 el-menu-item index3 disabled消息中心/el-menu-item 19 el-menu-item index4a hrefhttps://www.ele.me target_blank订单管理/a/el-menu-item 20 /el-menu -- 21 el-menu classel-menu-demo modehorizontal background-color#334157 text-color#fff active-text-color#fff 22 el-button classbuttonimg 23 img classshowimg :srccollapsed?imgshow:imgsq clickdoToggle() 24 /el-button 25 el-submenu index2 classsubmenu 26 template slottitle超级管理员/template 27 el-menu-item index2-1设置/el-menu-item 28 el-menu-item index2-2个人中心/el-menu-item 29 el-menu-item clickexit() index2-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 /styleLeftNav1 template 2 el-menu default-active2 classel-menu-vertical-demo background-color#334157 3 text-color#fff active-text-color#ffd04b :collapsecollapsed 4 !-- el-menu default-active2 :collapsecollapsed collapse-transition router :default-active$route.path unique-opened classel-menu-vertical-demo background-color#334157 text-color#fff active-text-color#ffd04b -- 5 div classlogobox 6 img classlogoimg src../assets/img/logo.png alt 7 /div 8 el-submenu index1 9 template slottitle 10 i classel-icon-location/i 11 span导航一/span 12 /template 13 el-menu-item-group 14 template slottitle分组一/template 15 el-menu-item index1-1选项1/el-menu-item 16 el-menu-item index1-2选项2/el-menu-item 17 /el-menu-item-group 18 el-menu-item-group title分组2 19 el-menu-item index1-3选项3/el-menu-item 20 /el-menu-item-group 21 el-submenu index1-4 22 template slottitle选项4/template 23 el-menu-item index1-4-1选项1/el-menu-item 24 /el-submenu 25 /el-submenu 26 el-menu-item index2 27 i classel-icon-menu/i 28 span slottitle导航二/span 29 /el-menu-item 30 el-menu-item index3 disabled 31 i classel-icon-document/i 32 span slottitle导航三/span 33 /el-menu-item 34 el-menu-item index4 35 i classel-icon-setting/i 36 span slottitle导航四/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 /styleRouterimport 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, } ] }, ] })