vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis)
分类专栏： vue # springsecurity
版权
文章目录
- vscode插件
- clone 项目
- 配置跨域
- 后端接口
- 前后端分离登陆
- 前后端分离登陆二
- 总结
vscode插件
clone 项目
地址：https://github.com/PanJiaChen/vue-admin-template
我们这里不讲vue-element-admin，讲的是vue-admin-template
配置跨域
跨域配置分为两种，一种是cors方式在 vue-config.js 配置 proxy 代理，另外一种是通过 nginx 配置反向代理，这里我们用第一种，第二种 nginx 我还不会
Proxy
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
# just a flag
ENV = 'development'
base api
VUE_APP_BASE_API = ‘/dev-api’
VUE_APP_BASE_API = ‘http://localhost:8080’
npm 启动端口号
port = 9528
vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
to control whether the babel-plugin-dynamic-import-node plugin is enabled.
It only does one thing by converting all import() to require().
This configuration can significantly increase the speed of hot updates,
when you have a large number of pages.
Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
VUE_CLI_BABEL_TRANSPILE_MODULES = true
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
跨域配置完了
后端接口
我们这里的后端是java，使用的框架是springboot+springsecurity+jwt+redis
如果你的后台跟我一样，继续往下看，登陆的时候可能会出现一个问题
参考博客： https://blog.csdn.net/qq_42977003/article/details/106016161
前后端分离登陆
因为之前我写请求的时候是直接把请求写在页面里面，请求和响应都是在一起，但是 vue-admin-template 对axios做了封装，例如我们这里的登陆请求是写在store里面的，页面调store的登陆，store调api的登陆请求，同时还有对请求和响应的拦截
request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
- If you want to get http information such as headers or status
- Please return response => response
*/
- Determine the request status by custom code
- Here is just an example
- You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
if (res.code !== 203) {
if (res.code === 202) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
}
if (res.code === 201) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
}
if (res.code === 204) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
}
if (res.code === 205) {
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log(‘err’ + error)
Message({
message: error.message,
type: ‘error’,
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
api的user.js
stored下的mosdules下的user.js
view下的login下的index.vue
基本上登陆要的东西都准备好了测试看看
看到这张图，不难发现一套流程虽然执行下来了，但是页面没跳转，又出现10个vue warn，心态炸了，我在网上找原因，没找到，如果有大佬知道怎么回事可以在下面评论区说一下！
前后端分离登陆二
之后用了另外一种方式在这里就要感谢一下知乎的一个作者了
博客地址： https://zhuanlan.zhihu.com/p/36148502
我们修改的是store下的modules下的user.js
import { login } from '@/api/user'
import { getToken, setToken } from '@/utils/auth'
const user = {
state: {
token: getToken(),
name: ‘’,
avatar: ‘’
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
},
actions: {
Login({ commit }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo)
.then(response => {
console.log(‘store’)
const tokenValue = response.jwtToken
setToken(tokenValue)
commit(‘SET_TOKEN’, tokenValue)
resolve()
})
.catch(error => {
reject(error)
})
})
}
}
}
export default user
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
views下的login下的index.vue请求
handleLogin() {
const _this = this
_this.$refs.loginForm.validate(valid => {
if (valid) {
_this.loading = true
_this.$store
.dispatch('Login', this.loginForm)
.then(() => {
_this.loading = false
console.log('login')
_this.$router.push({ path: this.redirect || '/' })
})
.catch((msg) => {
_this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
总结
到这我们就告一段落，希望对您有帮助
SpringBoot+Security+Vue前后端分离开发权限管理系统
适用人群
<p style="color:#666666;">
所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士
</p>
课程概述
<p>
该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br />
【后端技术】
技术 说明
Spring Boot2 MVC框架 开发的一站式解决方案
Spring Security5 认证和授权框架
MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架
MyBatisCode工具 生成 MyBatis 相关代码
Jackson 提供了处理 JSON 数据的工具
Lombok 简化对象封装工具
Druid 数据库连接池
【前端技术】
Vue 互联网最火的前端框架
Vue Router 路由框架
Vuex 全局状态管理框架
Axios 前端 HTTP 框架
Element UI 前端 UI 框架
Vue Element Admin 前端模板
Antv 蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV
【开发工具】
IntelliJ IDEA 开发 IDE
SQLyog 数据库连接客户端
Postman HTTP 请求工具
【开发环境】
工具 版本
JDK 1.8
MySQL 5.7
-bss.csdn.net/202004100922276928.png” alt="" />-bss.csdn.net/202004100922434479.png” alt="" />-bss.csdn.net/202004100922566924.png” alt="" />-bss.csdn.net/202004100923062693.png” alt="" />
vue-admin-template与SpringBoot前后端接口请求数据示例代码.rar
vue - admin - template与 SpringBoot前 后端接口请求数据示例代码; vue - admin - template与 SpringBoot前 后端接口请求数据示例代码
Login.vue
11 天前回复
举报
3450 
400-660-0108 
在线客服 
公安备案号11010502030143
