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

随机推荐

Linux07 查找文件（find、locate）
一.一般查找:find find PATH -name FILENAME 我们也可是使用 ‘*’ 通配符来模糊匹配要查找的文件名二.数据库查找:locate locate FILENAME ...
模型层之ORM、数据库和单表操作
一.ORM简介 ORM是“对象-关系-映射”的简称,一般指持久化数据和实体对象的映射 1.1 什么是“持久化” 持久(Persistence),即把数据(如内存中的对象)保存到可永久保存的存储设备中( ...
docker深入学习二
dicker:数据管理数据管理机制 docker使用union file system来管理数据,docker构建image和container也是采用了同样的技术. image层次 iamge由多 ...
创建包含CRUD操作的Web API接口3：实现Post方法
本节是前面两节的延续,前面我们为Web API创建了必要的基础设施,并实现了Get方法.在这里,我们将在Web API中实现POST方法. 在RESTful架构中,使用HTTP POST请求用来在数据 ...
Nginx惊群问题
Nginx惊群问题 "惊群"概念所谓惊群,可以用一个简单的比喻来说明: 一群等待食物的鸽子,当饲养员扔下一粒谷物时,所有鸽子都会去争抢,但只有少数的鸽子能够抢到食物, 大部分鸽子 ...
Spring Cloud Alibaba学习笔记（21） - Spring Cloud Gateway 自定义全局过滤器
在前文中,我们介绍了Spring Cloud Gateway内置了一系列的全局过滤器,本文介绍如何自定义全局过滤器. 自定义全局过滤需要实现GlobalFilter 接口,该接口和 GatewayFi ...
爬虫 HttpHelper
/// <summary> /// 类说明:HttpHelper类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理 /// 重要提 ...
Dubbo的10种集群容错模式
学习Dubbo源码的过程中,首先看到的是dubbo的集群容错模式,以下简单介绍10种集群容错模式 1.AvailableCluster 顾名思义,就是可用性优先,遍历所有的invokers,选择可用的 ...
flex 布局学习
flex 布局学习寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...
windows cmd下列出当前目录下的所有文件
使用的命令是dir 如,列出当前目录下的目录及文件名到1.txt: dir /b >1.txt 只列出某类文件 dir *.txt /b >1.txt

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