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

随机推荐

Nmap使用总结
参考链接: https://nmap.org/man/zh/ http://www.360doc.com/content/18/0127/18/52402560_725574428.shtml 0X0 ...
iview 表格随着更改刷新
使用location.reload() 或者是路由的 this.$router.go(0) 进行刷新的时候,是会出现一阵的空白区域的,因为是整个页面的刷新 ,所以比较缓慢,因此使用了provide/ ...
2.4_Database Interface ODBC数据库驱动程序类型（单层与多层）
两大类:单层驱动程序和多层驱动程序 1.单层数据库驱动程序早期的xBASE数据库系统的驱动程序就属于单层驱动程序. 单层驱动程序不仅要处理ODBC函数调用,还要解释执行SQL语句,执行数据库管理系统 ...
Java Web 深入分析（11） JVM 体系结构与工作方式
jvm体系 jvm简介 java virtual machine jvm体系详解 jvm工作机制虚拟机怎么执行代码 jvm为何基于栈执行引擎执行引擎过程 java调用栈总结
webRTC client 源码环境工具配置
以下操作真实实验过,安卓,苹果均可成功环境 Mac 10.13.6 Xcode 11 翻墙代理:Lantern 专业版 Python 2.7.10 设置 git 代理 #设置git代理 $ git ...
pytest用例传参的多种方式
1.接收外部传参 *函数获取需要的参数,再传入 *函数获登录信息,直接使用 2.其它方式传参 *依据dict取值 *tuple数组
NameError: name “ ” is not defined
NameError: name “ ” is not defined 问题一:name ‘name’ is not defined "name"两端是双下划线"_&quo ...
oracle批量操作
https://stackoverflow.com/questions/39576/best-way-to-do-multi-row-insert-in-oracle 1 批量insert 方式一: ...
CRM-Q模糊查询
Q查询-模糊查询示例一 q=Q() # 实例化一个Q的对象q,我们可以给它加条件 q.children.append(("name","xxx")) # 添加 ...
学习python的日常4
偏函数: 偏函数是functools模块提供的一个功能,偏函数可以通过设定参数的默认值,降低函数调用的难度其中设定的参数默认值实际上是可以被传入为其他值的,最后创建偏函数时可接收函数对象.*args ...

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