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

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

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

3. 如果你GitHub进不去&＃xff0c;可以到这里下载&＃xff08;码云&＃xff09;&＃xff1a;https://gitee.com/panjiachen/vue-admin-template.git

注意&＃xff1a;&＃xff1a;&＃xff1a;&＃xff1a;&＃xff1a;&＃xff1a;&＃xff1a;&＃xff1a;&＃xff1a;

一、概念和技术总结(重点&＃xff0c;一定要搞懂)

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

1. vue

1. props&＃xff1a;适用于父子组件通信的场景&＃xff0c;有一个容易混淆的点&＃xff0c;如下&＃xff1a;

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

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

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

build --index.js webpack配置文件[我们基本不用修改]
mock--mock数据文件夹[模拟一些假数据&＃xff0c;mock.js实现]&＃xff0c;我们已经有后端和接口&＃xff0c;基本不需要它
node_modules--项目依赖的模块
p ublic--存放ico图标&＃xff0c;静态页面等静态资源&＃xff0c;webpack打包时&＃xff0c;不会编译此文件夹&＃xff0c;原封不动打包到dist文件夹
src --我们写代码的地方--api文件夹&＃xff1a;异步请求相关代码--assets文件夹&＃xff1a;静态资源&＃xff0c;一般是共享的&＃xff0c;但是这里的静态资源&＃xff0c;webpack打包是会编译--components文件夹&＃xff1a;全局组件&＃xff08;非路由组件&＃xff09;--icons文件夹&＃xff1a;svg矢量图--layout文件夹&＃xff1a;放置一些组件和混入mixin--router文件夹&＃xff1a;与路由相关的--store文件夹&＃xff1a;vuex相关的--style文件夹&＃xff1a;样式相关的--utils文件夹&＃xff1a;工具类&＃xff0c;其中request.js是axios的二次封装&＃xff0c;比较常用--views文件夹&＃xff1a;路由组件&＃xff08;不是全局组件&＃xff09;
App.vue--根组件
main.js--入口文件
permission.js--导航守卫&＃xff0c;主要控制登录等相关事务
settings--对于项目的配置项&＃xff08;面向展示层&＃xff09;&＃xff0c;比如我们浏览器标签title显示什么&＃xff0c;表头是否固定&＃xff0c;导航栏logo是否显示--剩下都是配置文件
.editorconfig--编程风格配置&＃xff0c;比如缩进统一2个空格
-- 很重要的3个配置文件&＃xff0c;可以通过webpack对外暴露的函数process获取
.env.development-- 开发环境的配置文件
.env.production-- 上线环境的配置文件
.env.staging-- 测试环境的配置文件-- 重要但又不重要的3个配置文件
.eslintignore-- eslint检测的忽略文件&＃xff0c;对于这些文件它会忽略&＃xff0c;和我们没关系&＃xff0c;我们压根不用eslint检测
.eslintrc.js-- eslint配置文件
.gitignore-- 只和作者有关系&＃xff0c;上传git的忽略文件-- 不常用的配置文件
.travis.yml-- 一些语言&＃xff0c;开发版本的配置文件
babel.config.js-- babel的配置文件&＃xff0c;常用于配置按需加载&＃xff0c;比如element ui 按需加载
jest.config.js-- 测试框架的配置文件
LICENSE-- 版权声明的文件
-- 重点配置文件
jsconfig.json-- 配置src别名的文件
package.json-- 配置项目信息&＃xff0c;运行参数&＃xff0c;需要的依赖
postcss.config.js-- css配置文件&＃xff0c;不同浏览器的兼容问题&＃xff0c;可以在这里解决
vue.config.js-- 可以当成webpack.config.js&＃xff0c;做代理等操作&＃xff0c;我们经常使用这个文件


1. 首先&＃xff0c;将路由模块挂载到Vue&＃xff0c;然后将所有路由配置封装到常量constantRoutes中&＃xff0c;然后回调函数创建路由&＃xff0c;挂载了常量constantRoutes&＃xff0c;并将函数放置到常量createRouter&＃xff0c;随后&＃xff0c;将createRouter()这个函数常量&＃xff0c;换了个简单的名字router。最后对外暴露router和一个重置路由的函数resetRouter()
   
2. 这样做&＃xff0c;我们可以直接通过$router操作和获取路由相关信息

1. 我们看下开发环境的配置文件的配置内容&＃xff0c;测试是否能正确获取
   
2. main.js文件中输出process和process.env&＃xff0c;查看结果
   
   

console.log(process)
console.log(process.env)


1. 这里封装了对于权限的功能函数
   

1. index.js文件&＃xff0c;主要是掌控Vuex的大局&＃xff0c;挂载到Vue
   
2. getters.js文件&＃xff0c;封装getters操作&＃xff0c;这里统一使用lambda表达式&＃xff08;箭头函数&＃xff09;,使用了上面配置的modules中的app和user中内容&＃xff0c;例如state.app.*****

//lambda一个参数的表示形式, 我们传递的参数就是a&＃xff0c;箭头后面是执行逻辑
a &＃61;> return a;


3. user.js&＃xff0c;主要提供登录的state&＃xff0c;setter&＃xff08;action和mutations&＃xff09;&＃xff0c;并暴露他们.另外app.js、settings.js文件和user.js差不多
   
   

3. 异步相关&＃xff0c;前后端交互

1. 我们发现上面request.js中&＃xff0c;请求路径的封装&＃xff0c;使用的就是配置文件中的VUE_APP_BASE_API&＃xff0c;我们这里配置什么&＃xff0c;request.js发起的请求就会请求什么&＃xff0c;所以我们这里可以配置上我们的后端接口&＃xff0c;或者网关地址
2. 注意&＃xff0c;配置的地址&＃xff0c;一定要指定协议&＃xff0c;例如http://&＃xff0c;否则会无法正常请求转发
   

4. 导航守卫

1. 此文件主要控制路由跳转的业务&＃xff0c;像一个导航一样&＃xff0c;可以理解为路由的拦截器
2. 此文件主要完成的功能是&＃xff0c;拦截一个路由跳转&＃xff0c;判断用户是否有token&＃xff0c;如果有&＃xff0c;判断是否跳转路由为/login(登录路径)&＃xff0c;如果是&＃xff0c;不允许跳转&＃xff0c;从定向到"/"首页。如果不是登录路径&＃xff0c;尝试获取用户信息&＃xff0c;获取不到&＃xff0c;尝试重新获取&＃xff0c;重新获取失败&＃xff0c;删除token&＃xff0c;让用户进入登录页面重新登录
   

二、单点登录实现

1. 更换背景图片&＃xff0c;也可以使用&＃64;符号&＃xff0c;只是需要加一个~前缀

1. assets文件加放一张back.jpg图片
   
2. 修改css样式
   
   
   

1. 后端接口和响应结果分析

1. 验证码&＃xff1a;请求captcha这个url返回一张图片
   
2. 登录&＃xff0c;Post请求&＃xff0c;传输username&＃xff0c;password&＃xff0c;code3个参数&＃xff0c;全部正确&＃xff0c;登录成功&＃xff0c;返回tokenHead和token&＃xff0c;最终token规定格式为&＃xff0c;tokenHead &＃43; “空格” &＃43; token&＃xff0c;也就是Bearer eyJh…、成功状态码20000,失败状态码20001
   
   
3. 当前登录用户信息&＃xff0c;需要携带token&＃xff0c;注意&＃xff0c;token格式&＃xff0c;以及header的name为authorization
   

2. 解决跨域&＃xff0c;以及请求头.几乎所有项目都需要的配置&＃xff0c;背下来吧。

//配置代理跨域proxy: {[process.env.VUE_APP_BASE_API]: {target: &＃96;http://localhost:8001&＃96;, //修改后台接口地址// changeOrigin: true,pathRewrite: {[&＃39;^&＃39;&＃43;process.env.VUE_APP_BASE_API]: &＃39;&＃39;}}},


// request interceptor
service.interceptors.request.use(config &＃61;> {// do something before request is sentif (store.getters.token) {// let each request carry token// [&＃39;X-Token&＃39;] is a custom headers key// please modify it according to the actual situationconfig.headers[&＃39;authorization&＃39;] &＃61; getToken()}return config},error &＃61;> {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)


3. 验证码展示

1. 响应类型必须是blob或file两种格式&＃xff08;responseType:‘blob’ 或者 responseType:‘file’&＃xff09;

1. 这样做的好处是&＃xff0c;所有请求如果出错&＃xff08;响应码不是20000&＃xff09;&＃xff0c;统一进行错误逻辑&＃xff0c;但这也同样是缺点。因为针对不同错误&＃xff0c;我们希望有不同的反馈&＃xff0c;而不是统一的一种
   
2. 所以我们要丰富其功能&＃xff08;一个if就搞定&＃xff09;&＃xff0c;对于不需要code状态码的响应&＃xff0c;如果有响应体&＃xff0c;表示响应成功&＃xff0c;否则表示响应失败
   

1. api/user.js添加验证码接口
   

export function captcha() {return request({url: &＃39;captcha&＃39;,method: &＃39;get&＃39;,responseType:&＃39;blob&＃39;})
}


1. 编写函数getImgCode&＃xff0c;通过window.URL.createObjectURL(response)封装图片为url
   
   

//异步获取验证码async getImgCode () {await captcha().then(response &＃61;> {this.codesrc &＃61; window.URL.createObjectURL(response)})},


2. 添加组件和样式&＃xff0c;指定函数回调(单击事件)&＃xff0c;以实现单击图片&＃xff0c;重新生成验证码
   
   

//html标签<el-form-item prop&＃61;"code" class&＃61;"code"><span class&＃61;"svg-container">
<!-- <svg-icon icon-class&＃61;"el-icon-s-flag" />--><i class&＃61;"el-icon-edit"></i></span><el-inputclass&＃61;"code-input"ref&＃61;"code"type&＃61;"text"v-model&＃61;"loginForm.code"placeholder&＃61;"验证码"name&＃61;"code"tabindex&＃61;"2"auto-complete&＃61;"on"&＃64;keyup.enter.native&＃61;"handleLogin"/></el-form-item><img :src&＃61;"codesrc" class&＃61;"code-img" &＃64;click&＃61;"getImgCode">
//sass样式.code{width: 70%;float: left;}.code-img{float: right;width: 29.6%;//height: 100%;}


4. 单点登录&＃xff0c;退出登录&＃xff0c;根据后端API实现

1. 登录后&＃xff0c;查看token
   
   
2. 退出登录&＃xff0c;查看token
   
   

1. api接口

2. 路由组件编写登录函数逻辑

handleLogin() {this.$refs.loginForm.validate(valid &＃61;> {if (valid) {//发生表单验证后this.loading &＃61; true//登录按钮可用//调用action监听&＃xff0c;user.js下面的loginthis.$store.dispatch(&＃39;user/login&＃39;, this.loginForm).then(() &＃61;> {this.$router.push({ path: this.redirect || &＃39;/&＃39; })//成功跳转路由&＃xff0c;触发permission.js导航守卫this.loading &＃61; false//异步过程中&＃xff0c;阻止登录按钮的使用}).catch(() &＃61;> {this.loading &＃61; false//异步过程中&＃xff0c;依然阻止登录按钮使用this.getImgCode()//登录失败&＃xff0c;刷新验证码})} else {console.log(&＃39;error submit!!&＃39;)this.getImgCode()//刷新验证码return false}})}


3. 修改store&＃xff08;vuex&＃xff09;异步逻辑

// user login//处理登录业务async login({ commit },userInfo) {//解构出用户名和密码const { username,password,code} &＃61; userInfo;//异步调用/api/user文件下的loginlet result &＃61; await login({username: username.trim(),password:password,code:code});if (result.code&＃61;&＃61;20000){//我们规定token为tokenHead &＃43; " " &＃43; token字符串const token &＃61; result.data.tokenHead&＃43;&＃39; &＃39;&＃43;result.data.token;//设置到statecommit("SET_TOKEN",token);//通过auth.js文件的函数&＃xff0c;设置到COOKIEsetToken(token)}else{//登录失败return Promise.reject(new Error(result.message));}},// get user infoasync getInfo({ commit, state }) {//异步调用/api/user文件下的loginlet result &＃61; await getInfo(state.token);if(result.code &＃61;&＃61;&＃61; 20000){const { loginInfo } &＃61; result.dataif (!loginInfo) {return reject(&＃39;验证失败&＃xff0c;请重新登录.&＃39;);}const {username} &＃61; loginInfo;commit(&＃39;SET_NAME&＃39;,username);commit(&＃39;SET_AVATAR&＃39;,&＃39;https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif&＃39;)}else{//登录失败return Promise.reject(new Error(result.message));}},// user logoutasync logout({ commit, state }) {let result &＃61; await logout(state.token);if(result.code &＃61;&＃61;&＃61; 20000){removeToken() // must remove token firstresetRouter()commit(&＃39;RESET_STATE&＃39;)}else{//退出登录失败return Promise.reject(new Error(result.message));}},


三、后台管理系统实现