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

随机推荐

poj 1095 题解（卡特兰数+递归
题目题意:给出一个二叉树的编号,问形态. 编号依据 1:如果二叉树为空,则编号为0: 2:如果二叉树只有一个节点,则编号为1: 3:所有含有m个节点的二叉树的编号小于所有含有m+1个节点的二叉树的编 ...
FIFO形成3x3矩阵
Verilog生成矩阵一般是使用shift_ip核,但其实用两个FIFO也行.最近刚好学到这种方法,把原理总结一下. 要求现在有10x5的数据和对应数据有效指示信号,数据为0~49,要用FPGA对其 ...
AX 2009中Set运用
Set运行: 例子: Set m_set = new Set(Types::String); m_set.add("AAA"); m_set.add("BBB" ...
SpringBoot 返回Json实体类属性大小写问题
今天碰到的问题,当时找了半天为啥前台传参后台却接收不到,原来是返回的时候返回小写,但是前台依旧大写传参. 查了很多后发现其实是json返回的时候把首字母变小写了,也就是Spring Boot中Jack ...
Vasya and Shifts CodeForces - 832E (高斯消元)
大意: 给定$4n$个$m$位的五进制数, $q$个询问, 每个询问给出一个$m$位的五进制数$b$, 求有多少种选数方案可以使五进制异或和为$b$. 高斯消元入门题每次询问相当于就是给定了$m$个 ...
玩转Spring全家桶笔记 04 Spring的事务抽象、事务传播特性、编程式事务、申明式事务
1.Spring 的事务抽象 Spring提供了一致的事务模型 JDBC/Hibernate/Mybatis 操作数据 DataSource/JTA 事务 2.事务抽象的核心接口 PlatformTr ...
Linux中shell字符串分隔、字符串替换、字符串拼接
1.从properties文件中读取变量 SERVER_NAME=`sed '/project.config/!d;s/.*=//' conf/dubbo.properties | tr -d '\r ...
网页包抓取工具Fiddler工具简单设置
当下载好fiddler软件后首先通过以下简单设置,或者有时候fiddler抓取不了浏览器资源了.可以通过以下设置. 设置完成后重启软件.打开网络看看有没有抓取到包.
1.1 文档PUT内部原理
文档更新原理: PUT 一条数据的时候,如果是全量替换,ES并不会覆盖原来的文档,而是新创建一个文档,并将version+1,原文档标记为deleted,不会立刻物理删除.ES会在集群的d ...
SQL Server修改表的模式schema
use myDBgo create schema myschema --先建立go alter schema myschema transfer dbo.myTable --移动对象至建立的schem ...

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