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 ...

随机推荐

hdu 1022 Train Problem I【模拟出入栈】
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
【IDEA使用技巧】（1） —— 快捷键
1.InteliJ IDEA设置快捷键 1.1. IDEA快捷键修改—代码提示 IDEA中当现有的快捷键被系统中其他软件(比如输入法)占用时,我们可以自定义修改快捷键.比如,IDEA中的代码自动提示快 ...
promethus监控mysql
一.mysqld_exporter安装下载页面 https://github.com/prometheus/mysqld_exporter/releases 下载最新版本 https://githu ...
grafana部署安装
部署grafana 在prometheus& grafana server节点部署grafana服务. 1. 下载&安装 # 下载 [root@prometheus ~]# cd /u ...
redis客户端介绍及php客户端的下载安装
一.PHP客户端1.官方提供了几款PHP客户端,包括amphp/redis.phpredis.Predis.Rediska.推荐使用官方推荐的两款客户端,phpredis.Predis2.phpred ...
mpvue + vant + flyio 小程序项目总结
vant 的使用我开始是 npm 导入,然后 import,使用不了. 找了各种方法,最后还是下载文件,然后找到 dist 文件夹,复制到项目里,我是放在 static 文件夹,文件名 dist 重 ...
Windows server 2012 R2下安装sharepoint2013
• 安装windows server 2012 R2 系统,配置IP.系统打补丁,修改主机名.加域后重启.• 安装WEB服务器,勾选windows身份验证 • 安装应用程序服务器 • 安装.NET F ...
SASS系列之：!global VS !deafult
先脑补两组场景. 场景一: 同事们每天中午都会外出吃饭.通常情况下都会先问,去哪儿吃啊?不知道啊?下楼再说吧.到了楼下好不容易有个人站出来说,既然没人说我可就说了啊,咱们去吃香草香草吧.没人反对就去, ...
AJAX 初识
AJAX全称为 Asynchronous Javasript And XML,是在浏览器端进行网络编程(发送请求,接收响应)的技术方案.AJAX 也就是浏览器提供的一套API,可以供 Javascri ...
OC与swift混编 #import "项目名-Swift.h"失效问题
由于项目多个环境部署,每次改配置比较麻烦,所以线上环境一个TARGETS,内部环境一个TARGETS, 都知道oc和swift混编的时候,会生成一个'项目名-Swift.h'文件,这个文件是隐式的,需 ...

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