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

落日飞行

已于 2023-04-06 11:02:02 修改

阅读量589

点赞数

分类专栏： SPA单页面应用文章标签：前端 javascript vue.js

于 2021-11-10 21:40:34 首次发布

本文链接：https://blog.csdn.net/m0_53151031/article/details/121248960

版权

SPA单页面应用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

1、为什么会使用Mock.js来模拟响应ajax请求？

在当今时代，随着计算机技术的发展，公司收益也会日益增加，同时要求写项目的速度就会越来越快，这时，一个公司的前端工程师和后端工程师就会分开合作，前端工程师就不会因为等后端工程师的功能数据而停止项目的进程。

2、使用Mock.js模拟响应ajax请求的步骤：
2.1安装Mock.js的配置：

2.2配置开发环境及生产环境

开发环境：

(1)dev.env

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

MOCK: 'true'

})

生产环境：

(2)prod.env

module.exports = {

NODE_ENV: '"production"',

MOCK: 'false'

}

2.3main.js:

2.4导入mock文件夹：

3、解释mock文件夹中的json文件和index.js:

index.js:返回的json格式与对应的接口请求地址进行绑定

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
// timeout: 400 //延时400s请求到数据
timeout: 200 - 400 //延时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)

json文件中login.mock.js:定义接口调用返回的json格式，这里一共有十六种结果，0对应八种，1对应八种。

// const loginInfo = {
//    code: -1,
//    message: '密码错误'
// }

//使用mockjs的模板生成随机数据
const loginInfo = {
   'code|0-1': 0,
   'msg|3-10': 'msg'
}
export default loginInfo;

4、显示效果：这就成功的模拟响应ajax请求(不用等待后台数据，自己创造数据)

5、在模拟的过程中出现的错误：

原因：是没有找到src下的mock文件夹，导入mock文件夹即可

解决办法：导入mock文件夹

二、前台主界面的搭建

1、整个界面效果：

其中有三个界面，一个是Appmain.vue，另一个是Appmain.vue中包含着TopNav.vue和LeftNav.vue，当点击TopNav.vue中的箭头收缩时，就会带动LeftNav.vue也会收缩，同时向里箭头就会变成向外箭头。

2、开始布局：

2.1首先要将几个组件（Appmain.vue，TopNav.vue，LeftNav.vue）导入到内部组件中，

2.2将各个组件的导出依赖配置好，以及导出依赖

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
        }
      ]
    }

  ]
})

2.3把折叠的属性在各个组件中定义好，其中有两个属性要特别注意：

main-aside-collapsed（折叠）

main-aside（不折叠）

Appmain.vue:首先当我进入到主界面时，其样式是默认的

 export default {
    data() {
      return {
        asideClass: 'main-aside'
      }
    },

TopNav.vue:在这里还要配置图片样式。

LeftNav.vue:

	export default {
		data(){
      return {
        collapsed:false
      }
    },

写完以上代码，整个页面效果就出来了：

三、退出功能

退出功能很简单，就是在TopNav.vue中写一个exit方法就行了

  exit() {//退出功能
        this.$router.push({
          path: '/Login'
        })

运行效果：当我点击退出时，就会返回到登录界面。

四、左侧树收缩功能（vue总线的概念）

1、vue总线的由来（为什么会出现总线？）

要解释这个问题还是要返回到之前布局前端界面时的界面图（如下），当我要同时将三个组件（TopNav.vue、LeftNav.vue、中间的内容组件）的步伐一致（当我点击收缩按钮时，同时收缩，当我点击展示按钮时，同时展示），这里面是要相互进行传递数据的，以TopNav.vue为中心，当我点击收缩按钮时，我就要先将数据传递到AppMain.vue组件，然后再由AppMain.vue（父组件）将数据传递给LeftNav.vue组件，TopNav.vue和LeftNav.vue没有直接的关系（兄弟平级关系），随之总线（下图黄色的线）就诞生了。总线可以让TopNav.vue直接将数据传入进去，然后LeftNav.vue直接就可以在总线取出数据。就可以节约时间。

2、实现左侧树收缩功能：

1.步骤：

1、先在main.js中定义一个总线组件（名叫Bus）

2、之后到TopNav.vue组件中写好doToggle方法，并且注册一个触发事件，

3、到LeftNav.vue组件中注册一个监听事件

4、最后到AppMain.vue组件中也定义一个监听事件

1、先在main.js中定义一个总线组件（名叫Bus）

new Vue({
  el: '#app',
  data(){
    return{
      Bus:new Vue({//定义总线
      })
    }
  },

2、之后到TopNav.vue组件中写好doToggle方法，并且注册一个触发事件，

    methods: {
      doToggle() {
        this.collapsed = !this.collapsed;
        this.$root.Bus.$emit("collapsed-aside", this.collapsed);
      },

3、到LeftNav.vue组件中注册一个监听事件

    created(){
      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.collapsed=v;
      })

4、最后到AppMain.vue组件中也定义一个监听事件

  created() {
      this.$root.Bus.$on("collapsed-aside", (v) => {
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      })

3、总线的实现思路：

3.1在main.js中生成一条总线，在最开始的时候，我的图片是收起的一个图片（提醒顾客点击此处是这折叠），而最开始collapsed是为false就是不折叠，图片样式就为收起的样式

<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">

collapsed为true就显示为展示的样式，为false就为收起的样式

data() {
return {
collapsed: false,
imgshow: require('@/assets/img/show.png'),//这里是样式要被显示的图片
imgsq: require('@/assets/img/sq.png')
}
},

3.2当我点击收缩内容的图片时，就会触发TopNav中的doToggle点击事件，之前collapsed是为false的，点击之后就变为true，此时内容就已经折叠，所以样式也会变为展示的图片

    methods: {
      doToggle() {
        this.collapsed = !this.collapsed;//首先是没有折叠， false，点击之后折叠变为ture，
        this.$root.Bus.$emit("collapsed-aside", this.collapsed);这个collapsed就为true
      },

3.3这时就已经将数据传递到总线上去了，LeftNav.vue就可以到总线上去拿数据了，这里使用到了箭头函数，防止this指针变量的污染，此时collapsed为true内容收缩。

    created(){
      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.collapsed=v;
      })

3.4之后就回到AppMain.vue组件中，整个局面都要随之改变，大家看下面红色字体，我拿到手的collapsed是为true的，所以根据三元运算符的算法，整个内容就会折叠。

created() {
this.$root.Bus.$on("collapsed-aside", (v) => {
this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
})

所以总线的思路就实现了

今天的知识就分享到这了，希望能够对你有帮助！

落日飞行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SPA项目开发之首页导航+左侧菜单

目录一、Mock.js模拟响应ajax请求二、前台主界面的搭建三、退出功能四、左侧树收缩功能（vue总线的概念）一、Mock.js模拟响应ajax请求 1、为什么会使用Mock.js来模拟响应ajax请求？在当今时代，随着计算机技术的发展，公司收益也会日益增加，同时要求写项目的速度就会越来越快，这时，一个公司的前端工程师和后端工程师就会分开合作，前端工程师就不会因为等后端工程师的功能数据而停止项目的进程。 2...
复制链接

扫一扫