• SPA项目开发之首页导航+左侧菜单

    目录

    一、mock.js模拟响应ajax请求

    步骤

    安装mockjs依赖

    配置开发环境及生产环境

    mock的使用

    效果展示

    二、后台主界面搭建&左侧树收缩功能（vue总线的概念）

    效果：

     总线

    三、退出功能

    效果展示：

    一、mock.js模拟响应ajax请求

    步骤

    1.下载依赖 npm install mockjs -D  
    2.引入到main.js中使用
    3.添加默认接口数据
    4.绑定接口数据

    安装mockjs依赖

    npm install mockjs -D              #只在开发环境使用

    在项目的根目录输入cmd

    输入指令 npm install mockjs -D

     下载成功后在 package.json 文件 会多出下面该依赖

    配置开发环境及生产环境

    为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

    dev.env.js

    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   MOCK: 'true'
    8. })

    prod.env.js

    1. 'use strict'
    2. module.exports = {
    3.   NODE_ENV: '"production"',
    4.   MOCK: 'false'
    5. }

    main.js

    1. //开发环境下才会引入mockjs
    2. process.env.MOCK && require('@/mock')//process.env.MOCK  为false ，那么require('@/mock') 不执行的；require('@/mock') 在生产环境下为false

    注：import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案
       后者支持动态引入，也就是require(${path}/xx.js)

    mock的使用

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

     /src/mock/index.js

    1. import Mock from 'mockjs' //引入mockjs，npm已安装
    2. import action from '@/api/action' //引入请求地址
    3.  
    4. //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
    5. Mock.setup({
    6. 	// timeout: 400  //延时400s请求到数据
    7. 	timeout: 200 - 400 //延时200-400s请求到数据
    8. })
    9.  
    10. //引登陆的测试数据，并添加至mockjs
    11. import loginInfo from '@/mock/json/login-mock.js'
    12. let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
    13. Mock.mock(s1, "post", loginInfo)
    14. // Mock.mock(s1, /post|get/i, loginInfo)

    注：index.js文件的作用很显然,就是将分散的xxx-mock文件集合起来.后面再添加新的mock文件,都需要在这里引入

    效果展示

    二、后台主界面搭建&左侧树收缩功能（vue总线的概念）

    1.导入AppMain.vue/LeftNav.vue/TopNav.vue/LeftNav

    2.导入图片
    3.AppMain.vue中注册使用组件
    4.router/index.js中添加路由与组件的映射
    5.修改添加组件中需要用到的变量

    将以下文件拷入到主界面中

     

    导入图片

     

    AppMain.vue:

    2.  
    3. <script>
    4.   // 导入组件
    5.   import TopNav from '@/components/TopNav.vue'
    6.   import LeftNav from '@/components/LeftNav.vue'
    7.  
    8.   // 导出模块
    9.   export default {
    10.     components:{
    11.       TopNav,
    12.       LeftNav
    13.      },
    14.      data(){
    15.        return {
    16.          asideClass:'main-aside'
    17.        }
    18.      },
    19.     created(){
    20.       //从总线上取出 this.collapsed 变量
    21.       this.$root.Bus.$on("collapsed-side",v=>{
    22.         this.collapsed = v ? 'main-aside-collapsed' : 'main-aside';
    23.       });
    24.     }
    25.   };
    26. script>
    27. <style scoped>
    28.   .main-container {
    29.     height: 100%;
    30.     width: 100%;
    31.     box-sizing: border-box;
    32.   }
    33.  
    34.   .main-aside-collapsed {/* 收缩，折叠 */
    35.     /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    36.     width: 64px !important;
    37.     height: 100%;
    38.     background-color: #334157;
    39.     margin: 0px;
    40.   }
    41.  
    42.   .main-aside {/* 非收缩 */
    43.     width: 240px !important;
    44.     height: 100%;
    45.     background-color: #334157;
    46.     margin: 0px;
    47.   }
    48.  
    49.   .main-header,
    50.   .main-center {
    51.     padding: 0px;
    52.     border-left: 2px solid #333;
    53.   }
    54. style>

    LeftNav.vue: