使用Vue+Vuex+CSS3完成管理端响应式架构模板实战

前言

上节回顾

上一节我们通过引入md5，对密码进行了不可逆加密；然后对用户名和密码进行了数据整理，发送axios请求，同时引入了Vuex前端本地化数据管理，将用户名和token进行存储。还不明白上下文的同学可以回头去专栏看一下：使用Vue+axios+Vuex实现登录后前端数据本地化存储实战

本节介绍

这已经是本专栏的第9篇博客了，本小节我们通过获取Vuex中的store数据；然后使用CSS3完成一个管理端响应式的layout架构模板，包含顶部header头界面，左侧准备放置菜单的界面，以及中间主体content区域。在后续的章节中，我们将会不断在左侧添加菜单的维护，然后每次点击菜单，都会在中间区域开展对应的业务。

目录

前言

上节回顾

本节介绍

一、开发实战过程

1. 路由数据的补充

2.  顶部header头部分

3. 顶部username的Vuex值获取 

4. 顶部用户名以及退出登录 

5. logout的事件实现 

6. 退出登录接口请求过程

7. vuex做store数据的清除

8. 首页的实现

9. 本小节主要功能展示如下：

二、读完本文需要思考的几个问题

三、实战专栏介绍

---

一、开发实战过程

1. 路由数据的补充

在之前还没有组件化的时候，通常都是左侧的菜单，每次切换菜单相应内容的时候，主体部分其实是采用iframe的方式，每次都给iframe切换url来实现菜单的业务切换。

现在有了组件化，通过前端路由来切换主体内容，而每个页面呢，顶部header头和左侧菜单其实是不会有大的动静的。所以，这就需要开发一套layout模板架构，并且通过vue-router来切换content主体部分。

/src/router/routesData.js文件补充代码

{
    path: '/layout',
    component: () => import("@/views/Layout"),
    children: [
      {
        path: '/index',                     
        component: () => import("@/views/index/Index"),
        meta: {
          title: '首页'
        },
        fatherTitle: '首页',
        fatherTitleCode: 0,
      },

2.  顶部header头部分

我们希望实现一个顶部居上，一直居上，然后顶部header头以下又分左右布局，左侧用来布局系统菜单，右侧做为主体部分模板界面。

/src/views/layout.vue补充代码

3. 顶部username的Vuex值获取 

我们看到template模板处绑定了userName的值，这个值是通过我们登录的时候，通过dispatch调用action的方法，然后再commit到store中，这样整个Vue全局组件中便绑定上了这个username的值，但某个业务组件内如果要获取这个username变量，可以这样做：

/src/views/layout.vue补充代码

 至此，我们的本节的内容就全部实现完成了，顶部header头区域，顶部右侧的用户名，鼠标上移显示“退出登录”，首页的欢迎页布局。而左侧的菜单模块，我们会在下一节多添加一些路由数据，通过el-menu来做一个菜单组件，但el-memu的使用并非重点，重点是我们要自己实现一个tg-menu组件。

9. 本小节主要功能展示如下：

功能展示图：

vuex数据流转图：

二、读完本文需要思考的几个问题

按照惯例，没学完一小节，对于本小节的内容，我们都会提出几个需要思考的问题，对于这些问题的理解也许会在我们的工作生涯中不断去更新，而且这些问题，也绝对会是前端面试题的一部分。

1. 你在使用Vuex的时候，他的数据流转是什么样子的？
2. 你做过的项目中，layout模板界面都是什么样子的？
3. flex布局你都会在什么场景下使用？如果不用flex布局如何实现这些场景？

三、实战专栏介绍

我和天哥（天哥主页）最近在加紧更新实战项目专栏，专栏的优势：

手把手从0到1：从0开始，门槛低，每一步都有配套博文讲解，带你了解项目的完整生命周期;

技术主流：前后端分离，前端vue、后端SpringBoot、SpringCloudAlibaba微服务全家桶;

架构规范：项目结构规范、代码开发规范、Restful API设计规范、MySQL规范、Redis规范等等，均按企业级规范，带你养成一个好习惯;

适用范围靠谱：作为毕设项目、入门项目、或者准备进阶提升竞争力的小伙伴，可以【订阅本专栏】哦

前端部分： https://blog.csdn.net/xingyu_qie/category_12222258.html

服务端部分：https://blog.csdn.net/scm_2008/category_12236048.html

同时，我为大家准备了一个很有意思的投票，看过博客，手留鱼香（肉丝），狗哥再此感谢已订阅的小伙伴，我和天哥会加把劲儿的，希望不会让你们失望。