SPA项目开发--左侧树以及首页导航

1. Mock.js

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

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

   众所周知Mock.js因为两个重要的特性风靡前端:
   数据类型丰富
   支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
   拦截Ajax请求
   不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

   更多内容，可以云Mockjs官方查看“http://mockjs.com/”

注1：easy-mock，一个在线模拟后台的数据平台

2. Mock.js使用步骤

2.1 安装mockjs依赖
npm install mockjs -D #只在开发环境使用

注意：在项目所在文件加中shift+右键打开cmd命令窗口执行安装；

2.2 引入
为了只在开发环境使用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'

})

（2）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'

2.3 目录和文件创建

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

      导入公共模块及mockjs全局设置
      import Mock from 'mockjs' //引入mockjs，npm已安装
      import action from '@/api/action' //引入封装的请求地址

      //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
      Mock.setup({
// timeout: 400 //延时400s请求到数据
timeout: 200 - 400 //延时200-400s请求到数据
      })

如：

import Mock from 'mockjs' //引入mockjs，npm已安装

import action from '@/api/action' //引入请求地址

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时

Mock.setup({

    // timeout: 400  //延时400s请求到数据

    timeout:  -  //延时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)

2.4 为每个*.vue定义单独的xxx-mock.js文件
/src/mock/json/login-mock.js

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

如：

// const loginInfo = {

//     code: -1,

//     message: '密码错误'

// }

//使用mockjs的模板生成随机数据

const loginInfo = {

    'code|0-1': ,

    'msg|3-10': 'msg'

}

export default loginInfo;

3. 后台首页AppMain.vue的创建

3.1 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: %;

     width: %;

     box-sizing: border-box;

   }

   .main-aside-collapsed {

     /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */

     width: 64px !important;

     height: %;

     background-color: #;

     margin: 0px;

   }

   .main-aside {

     width: 240px !important;

     height: %;

     background-color: #;

     margin: 0px;

   }

   .main-header,

   .main-center {

     padding: 0px;

     border-left: 2px solid #;

   }

 </style>

3.2 TopNav

 <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="">处理中心</el-menu-item>

         <el-submenu index="">

             <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="" disabled>消息中心</el-menu-item>

         <el-menu-item index=""><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="" 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,

              imgsq:require('@/assets/img/sq.png'),

              imgshow:require('@/assets/img/show.png')

         }

       },

       methods:{

         doToggle(){

           this.collapsed =!this.collapsed;

           this.$root.Bus.$emit("collapsed-ly",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>

3.3 LeftNav

 <template>

     <el-menu default-active="" class="el-menu-vertical-demo" background-color="#334157"

      text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >

         <!-- <el-menu default-active="" :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="">

             <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="">

             <i class="el-icon-menu"></i>

             <span slot="title">导航二</span>

         </el-menu-item>

         <el-menu-item index="" disabled>

             <i class="el-icon-document"></i>

             <span slot="title">导航三</span>

         </el-menu-item>

         <el-menu-item index="">

             <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('collapsed-ly',(v)=>{

               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>

 <template>

     <el-menu default-active="" class="el-menu-vertical-demo" background-color="#334157"

      text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >

         <!-- <el-menu default-active="" :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="">

             <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="">

             <i class="el-icon-menu"></i>

             <span slot="title">导航二</span>

         </el-menu-item>

         <el-menu-item index="" disabled>

             <i class="el-icon-document"></i>

             <span slot="title">导航三</span>

         </el-menu-item>

         <el-menu-item index="">

             <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('collapsed-ly',(v)=>{

               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>

4、router/index.js路由配置

 import Vue from 'vue'

 import Router from 'vue-router'

 import HelloWorld from '@/components/HelloWorld'

 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

         }

       ]

     }

   ]

 })

5. vue Bus总线

5.1 在main.js中添加一个Bus总线

/* eslint-disable no-new */

new Vue({

  el: '#app',

  data(){

    return{

      Bus:new Vue({

      })

    }

  },

  router,

  components: { App },

  template: '<App/>'

})

5.2 组件触发事件--存入数据（参数）

methods:{

        doToggle(){

          this.collapsed =!this.collapsed;

          this.$root.Bus.$emit("collapsed-ly",this.collapsed);

        },

5.3 取出数据（参数）

created(){

            this.$root.Bus.$on('collapsed-ly',(v)=>{

              this.collapsed = v;

            })

          }

结果展示：

谢谢观看！！！

SPA项目开发--左侧树加首页导航的更多相关文章

SPA项目开发动态树、数据表格、分页功能
SPA项目开发 1.修改左侧动态树 LeftNav.vue <template> <el-menu router :" class="el-menu-vertic ...
SPA项目开发之动态树+数据表格+分页
SPA项目开发之动态树+数据表格+分页动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...
SPA项目开发之动态树、表格、分页
思路: 1.准备好后台(左侧树,带分页的文章查询) 2.将左侧树的数据绑定到elementui中的menu标签上 3.新增一个自定义组件用来展示文章列表的 4.绑定elementui提供的分页组件来完 ...
SPA项目开发登陆注册
使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 npm安装elementUI cd pro01 #进入新建项目的根目录安装: npm install a ...
SPA项目开发之首页导航+左侧菜单
Mock.js: 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的原型分离以及用 ...
SPA项目开发之首页导航左侧菜单栏
1. Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊! 2. 后端小哥,接口写好了没,我要测试啊! 前后端分离之后,前端 ...
SPA项目开发之动态树以及数据表格和分页
首先我们来看下数据库 t_vue_user t_vue_tree_node t_vue_articles 2. 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key=&qu ...
SPA项目开发之登录
前端首先安装开发模板 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios - ...
SPA项目开发之登录注册
CMD安装所需要的pom依赖 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axio ...

随机推荐

R学习笔记1 介绍R的使用
R脚本的一次执行叫做一个会话(Session),可以通过函数quit()退出当前的会话 quit(save = "default", status = 0, runLast = T ...
response letter
1.Firstly, we would like to thank you for your kind letter and for reviewers’ constructive commentsc ...
性能监控工具的配置及使用 - Spotlight On Oracle(oracle) 转：紫漪
一. Spotlight On Oracle(oracle) 1.1. 工具简介 Spotlight是一个强有力的Oracle数据库实时性能诊断工具,提供了一个直观的.可视化的数据库活动展现 ...
SpringBoot指定额外需要扫描的包
我们都知道,SpringBoot主启动类标注了@SpringBootApplication注解,该注解引入了@ComponentScan注解所以默认的包扫描规则是,程序会自动扫描主启动类所在包及其子 ...
全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下
KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 asyn ...
catch SocketException
https://stackoverflow.com/questions/32810051/cannot-catch-socketexception/32810079#32810079 https:// ...
SQL*Plus 与数据库的交互（SQL*Plus时什么）
Oracle 的 SQL*Plus 是与数据库进行交互的客户端工具,在 SQL*Plus中,可以运行 SQL*Plus 命令与 SQL*Plus 语句. SQL*Plus 时一个基于 C/S 两层 ...
C++遍历磁盘驱动器
#include <stdio.h> #include <windows.h> typedef struct tagDRIVER { // (1)磁盘盘符 wchar_t di ...
如何在SAP UI5应用里添加使用摄像头拍照的功能
昨天Jerry的文章纯JavaScript实现的调用设备摄像头并拍照的功能介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是, ...
解决问题 inner element must either be a resource reference or empty.
-Q: 错误<item>内部元素必须是资源引用或空升级Andriod Studio之后编译发现如下错误 Android resource compilation failed ***\a ...

SPA项目开发--左侧树加首页导航