vue前后端分离后台管理系统（权限管理，登录），前端脚手架。对接后端基于SpringSecurity提供的后台接口

文章目录

• 前言(很重要哦)
• 一、概念和技术总结(重点，一定要搞懂)
• • 1. vue
  • 2. vue-admin-template模板文件解析
  • 3. 异步相关，前后端交互
  • 4. 导航守卫
  • 5. 路由解析
• 二、单点登录实现
• • 1. 后端接口和响应结果分析
  • 2. 解决跨域，以及请求头.几乎所有项目都需要的配置，背下来吧。
  • 3. 验证码展示
  • 4. 单点登录，退出登录，根据后端API实现
  • • 1. api接口
    • 2. 路由组件编写登录函数逻辑
    • 3. 修改store（vuex）异步逻辑
  • 5. 流程总结
• 三、后台管理系统实现

前言(很重要哦)

管理系统后端(java)请参考：https://blog.csdn.net/grd_java/article/details/121925792

本项目源码，码云：https://gitee.com/yin_zhipeng/vue-backstage-scaffolding.git

后台管理系统，一般都是内部人员使用，所以对界面要求不高，一般都使用模板开发。而前台系统，是给游客使用，要凸显个性，所以一般自己开发，不使用模板

1. 如果你想从头到尾写，可以参考我的前台系统，每个细节都会讲到(看完完全可以自己写个模板)：@TODO 日后再写
2. 这里是后台管理系统，我们使用模板"PanJiaChen的模板简洁版"

1. 简洁版:https://github.com/PanJiaChen/vue-admin-template
2. 加强版:https://github.com/PanJiaChen/vue-element-admin

3. 如果你GitHub进不去，可以到这里下载（码云）：https://gitee.com/panjiachen/vue-admin-template.git

下载完成后，我们用它来当做项目，执行npm install --save 来下载相关依赖，然后通过npm run dev启动项目，最后浏览器查看项目

项目最终成果展示@TODO

一、概念和技术总结(重点，一定要搞懂)

这里总结项目中用到的前端知识，后面将不再赘述

1. 大家最起码需要混个眼熟，后面代码中用到，不至于不知道这是干什么的（现在好多人，会用，但不知道为什么这么用，那你怎么优化和调优，调错呢？）
2. 如果这里有你不会或没见过的东西（看了我的介绍不懂的），可以参考官方文档（说明你压根没学过Vue的相关知识，直接百度Vue官网就行）

1. vue

组件通信的方式(最基础的6种)

1. props：适用于父子组件通信的场景，有一个容易混淆的点，如下：

1. 如果父组件利用props给子组件传递数据时，传递的是一个函数，其实就是子组件给父组件传递数据（因为调用的是父组件的函数）。
2. 如果传递的不是函数，那么才是真正的父组件给子组件传递了数据（子组件使用传来的数据）.
3. 可以指定父组件传输的类型，{type:Array},也可以指定默认值{type:Array,default:[]},也可以什么都不指定，[‘todos’]

2. 自定义事件：适用于子组件给父组件传递数据， $ on、和$ emit
3. 全局事件总线$bus：适用于任何场景，Vue.prototype. $bus = this;
4. pubsub-js发布和订阅：适用于任何场景，但是Vue用的不多，一般React框架经常使用
5. Vuex：适用于任何场景，用的非常多
6. solt插槽：使用于针对结构（标签）的父子组件通信，常用的有默认插槽，具名插槽和作用域插槽

2. vue-admin-template模板文件解析

文件目录解析(注意：以下所有文件夹和文件，你自己写效果也一样，并不是必须在这个模板文件中才能用)

build 
	--index.js webpack配置文件[我们基本不用修改]
mock
	--mock数据文件夹[模拟一些假数据，mock.js实现]，我们已经有后端和接口，基本不需要它
node_modules
	--项目依赖的模块
p ublic
	--存放ico图标，静态页面等静态资源，webpack打包时，不会编译此文件夹，原封不动打包到dist文件夹
src --我们写代码的地方
	--api文件夹：异步请求相关代码
	--assets文件夹：静态资源，一般是共享的，但是这里的静态资源，webpack打包是会编译
	--components文件夹：全局组件（非路由组件）
	--icons文件夹：svg矢量图
	--layout文件夹：放置一些组件和混入mixin
	--router文件夹：与路由相关的
	--store文件夹：vuex相关的
	--style文件夹：样式相关的
	--utils文件夹：工具类，其中request.js是axios的二次封装，比较常用
	--views文件夹：路由组件（不是全局组件）
App.vue
	--根组件
main.js
	--入口文件
permission.js
	--导航守卫，主要控制登录等相关事务
settings
	--对于项目的配置项（面向展示层），比如我们浏览器标签title显示什么，表头是否固定，导航栏logo是否显示

--剩下都是配置文件
.editorconfig
	--编程风格配置，比如缩进统一2个空格
-- 很重要的3个配置文件，可以通过webpack对外暴露的函数process获取
.env.development
	-- 开发环境的配置文件
.env.production
	-- 上线环境的配置文件
.env.staging
	-- 测试环境的配置文件

-- 重要但又不重要的3个配置文件
.eslintignore
	-- eslint检测的忽略文件，对于这些文件它会忽略࿰