Javascript
vue-admin-template解决跨域问题详解
本文主要是介绍vue-admin-template解决跨域问题详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis)
自&如
2020-05-10 23:25:09
1232
收藏 10
原力计划
分类专栏：
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': '' // 替换target中的请求地址
}
}
}
12345678910
# 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
跨域配置完了 1
后端接口
我们这里的后端是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'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
<span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token comment">// let each request carry token</span>
<span class="token comment">// ['X-Token'] is a custom headers key</span>
<span class="token comment">// please modify it according to the actual situation</span>
<span class="token comment">// config.headers['X-Token'] = getToken()</span>
config<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'Authorization'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
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
<span class="token comment">// if the custom code is not 20000, it is judged as an error.</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">!=</span><span class="token operator">=</span> <span class="token number">203</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">202</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
message<span class="token operator">:</span> res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
duration<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">201</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
message<span class="token operator">:</span> res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
duration<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">204</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
message<span class="token operator">:</span> res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
duration<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">205</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token comment">// to re-login</span>
MessageBox<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'You have been logged out, you can cancel to stay on this page, or log in again'</span><span class="token punctuation">,</span> <span class="token string">'Confirm logout'</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
confirmButtonText<span class="token operator">:</span> <span class="token string">'Re-Login'</span><span class="token punctuation">,</span>
cancelButtonText<span class="token operator">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">'warning'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{<!-- --></span>
store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'user/resetToken'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{<!-- --></span>
location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> res
<span class="token punctuation">}</span>
},
error => {
console.log(‘err’ + error) // for debug
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
}
})
}
123456789101112131415161718192021
总结
到这我们就告一段落，希望对您有帮助
SpringBoot+Security+Vue前后端分离开发权限管理系统 04-10 <div style="color:#444444;">
适用人群 <p style="color:#666666;"> 所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士 </p>
</div>
<p>
</p>
课程概述
<p> 该互联网实战项目是基于 Spring Boot 2<em>+</em> Spring<em>Security</em>5<em>+</em>Element UI<em>+</em><em>Vue</em> <em>Admin</em> <em>Template</em><em>+</em>蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前<em>后端</em>分离开发。包括图形展示、权限管理、用户管理等功能。<br />
【后端技术】<br />
技术 说明<br />
Spring Boot2 MVC框架 开发的一站式解决方案<br />
Spring Security5 认证和授权框架<br />
MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架<br />
MyBatisCode工具 生成 MyBatis 相关代码<br />
Jackson 提供了处理 JSON 数据的工具<br />
Lombok 简化对象封装工具 <br />
Druid 数据库连接池 <br />
【前端技术】<br />
Vue 互联网最火的前端框架<br />
Vue Router 路由框架<br />
Vuex 全局状态管理框架<br />
Axios 前端 HTTP 框架<br />
Element UI 前端 UI 框架<br />
Vue Element Admin 前端模板<br />
Antv 蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV<br />
【开发工具】<br />
IntelliJ IDEA 开发 IDE<br />
SQLyog 数据库连接客户端<br />
Postman HTTP 请求工具<br />
【开发环境】<br />
工具 版本<br />
JDK 1.8
</p>
<p>
MySQL 5.7
</p>
<p>
<img src=“https://img-bss.csdn.net/202004100922276928.png” alt="" /><img src=“https://img-bss.csdn.net/202004100922434479.png” alt="" /><img src=“https://img-bss.csdn.net/202004100922566924.png” alt="" /><img src=“https://img-bss.csdn.net/202004100923062693.png” alt="" /></p>
<p>
<br /></p>
<p>
<br /></p>
<textarea class="comment-content" name="comment_content" id="comment_content" placeholder="优质评论可以帮助作者获得更高权重" maxlength="1000"></textarea>
<div class="comment-emoticon"><img class="comment-emoticon-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/emoticon.png" alt="表情包"></div>
<span class="comment-emoticon-tip">插入表情</span>
<div class="comment-emoticon-box" style="display: none;">
<div class="comment-emoticon-img-box">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:001.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/001.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:002.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/002.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:003.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/003.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:004.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/004.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:005.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/005.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:006.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/006.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:007.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/007.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:008.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/008.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:009.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/009.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:010.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/010.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:011.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/011.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:012.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/012.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:013.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/013.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:014.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/014.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:015.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/015.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:016.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/016.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:017.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/017.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:018.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/018.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:019.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/019.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:020.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/020.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:021.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/021.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:022.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/022.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:023.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/023.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:024.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/024.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:025.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/025.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:026.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/026.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:027.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/027.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:028.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/028.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:029.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/029.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:030.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/030.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:031.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/031.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:032.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/032.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:033.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/033.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:034.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/034.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:035.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/035.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:036.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/036.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:037.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/037.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:038.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/038.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:039.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/039.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:040.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/040.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:041.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/041.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:042.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/042.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:043.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/043.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:044.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/044.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:045.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/045.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:046.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/046.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:047.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/047.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:048.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/048.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:049.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/049.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:050.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/050.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:051.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/051.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:052.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/052.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:053.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/053.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:054.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/054.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:055.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/055.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:056.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/056.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:057.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/057.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:058.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/058.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:059.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/059.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:060.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/060.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:061.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/061.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:062.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/062.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:063.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/063.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:064.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/064.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:065.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/065.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:066.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/066.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:067.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/067.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:068.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/068.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:069.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/069.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:070.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/070.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:071.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/071.png">
<img class="emoticon-monkey-img" data-emoticon="[face]emoji:072.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/072.png">
</div>
</div>
<div class="opt-box">
<div id="ubbtools" class="add_code">
<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
</div>
<input type="hidden" id="comment_replyId" name="comment_replyId">
<input type="hidden" id="article_id" name="article_id" value="106042557">
<input type="hidden" id="comment_userId" name="comment_userId" value="">
<input type="hidden" id="commentId" name="commentId" value="">
<div class="dropdown" id="myDrap">
<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<div class="txt-selected text-truncate">添加代码片</div>
<svg class="icon d-block" width="200px" height="100.00px" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.33333292 298.666667h853.333334L1023.99999992 725.333333 597.33333292 298.666667z"></path></svg>
</a>
<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
<li><a data-code="html">HTML/XML</a></li>
<li><a data-code="objc">objective-c</a></li>
<li><a data-code="ruby">Ruby</a></li>
<li><a data-code="php">PHP</a></li>
<li><a data-code="csharp">C</a></li>
<li><a data-code="cpp">C++</a></li>
<li><a data-code="javascript">JavaScript</a></li>
<li><a data-code="python">Python</a></li>
<li><a data-code="java">Java</a></li>
<li><a data-code="css">CSS</a></li>
<li><a data-code="sql">SQL</a></li>
<li><a data-code="plain">其它</a></li>
</ul>
</div>
<div class="right-box" id="rightBox" data-type="2">
<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
<a data-report-click="{"mod":"1582594662_003","spm":"1001.2101.3001.4227","ab":"new"}"><input type="submit" class="btn btn-sm btn-comment" value="发表评论"></a>
</div>
</div>
</form>
<input type="button" class="bt-comment-show" value="评论">
</div>
<div class="comment-list-container" style="display: block;">
<a id="comments"></a>
<div class="comment-list-box"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="16337118" data-replyname="weixin_43585245"><div style="display: flex;width: 100%;"> <a target="_blank" href="https://blog.csdn.net/weixin_43585245"><img src="https://profile.csdnimg.cn/1/9/6/3_weixin_43585245" username="weixin_43585245" alt="weixin_43585245" class="avatar"></a> <div class="right-box "> <div class="new-info-box clearfix"> <a target="_blank" href="https://blog.csdn.net/weixin_43585245"><span class="name ">weixin_43585245</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">时隔整整一年，我今天也在干这个了<img src="//g.csdnimg.cn/static/face/emoji/010.png" alt="表情包"></span><span class="date" title="2021-05-10 18:21:43">11 天前</span><span class="new-opt-floating"><a class="btn-bt btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="16337118"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul></div>
<div id="commentPage" class="pagination-box d-none" style="display: block;"><div id="Paging_0686590698820668" class="ui-paging-container"><ul><li class="js-page-first js-page-action ui-pager ui-pager-disabled"></li><li class="js-page-prev js-page-action ui-pager ui-pager-disabled"><</li><li data-page="1" class="ui-pager focus">1</li><li class="js-page-next js-page-action ui-pager ui-pager-disabled">></li><li class="js-page-last js-page-action ui-pager ui-pager-disabled"></li></ul></div></div>
</div>
相关推荐
基于
Vue
-
admin
-
template
+ SpringCloud
+SpringAlibaba
+...
5-10
基于
Vue
-
admin
-
template
+ SpringCloud
+SpringAlibaba
+Spring
Security 搭建的权限框架 系统采用现在最流行的微服务架构,SpringCloud
+SpringAlibaba搭建,使用nacos作为注册中心,配置中心, 使用gateway作为网关,采用sentinel作为断路器。OpenFeign服务...
...
Vue的个人博客系统12——使用
vue
-
admin
-
template展...
5-4
3、可见
vue
-
admin
-
template 给我们提供了一些常见的例子,我们这里只做文章管理部分,下面修改一下路由@/router/index.js import
Vuefrom'
vue'importRouterfrom'
vue
-router'
Vue.use
(Router
)/* Layout */importLayoutfrom'@/layout'export...
一个基于vueadmintemplate的hexo博客后台管理项目采用SpringBootVue开发
08-14
一个基于
vue
-
admin
-
template的hexo博客后台管理，项目采用
SpringBoot
Vue开发
详解使用vue-admin-template的优化历程
08-27
主要介绍了
详解使用
vue
-
admin
-
template的优化历程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue
-
admin
-
template 4.0
+ 设置baseUrl 使用
springboot...
5-12
vue
-
admin
-
template 4.0
+ 设置baseUrl 使用
springboot
后端数据 2020年5月 坑货,折腾了我不少时间,网上全是之前俩版本的设置方法。 第一个版本: 项目内有个 config 包,里面有对应的 dev 和 pro 俩环境的设置方法,里面地址用的...
SpringBoot
+
Vue前
后端分离,使用Spring
Security完美处理...
4-24
2.role是角色表,name字段表示角色的英文名称,按照Spring
Security的规范,将以ROLE_开始,nameZh字段表示角色的中文名称。 3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了
Vue来做,因此当用户登录成功之后,系统将根据用...
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法
08-28
主要介绍了
SpringBoot
+
Vue前
后端分离，使用Spring
Security完美处理权限问题,需要的朋友可以参考下
详细分析 vue-admin-template
cyt
08-02
3450
1、整体效果
2、目录分析
一、目录结构
二、配置信息
vue.config.js
这里面配置了项目的基本信息： 所使用的环境、端口号、对外路径、输入文件路径等信息 , 可以看到我们使用的dev开发环境，下面将查看开发环境的配置
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find i
1万+
文章目录
Vue学习笔记（一）初步印象子模块main.jsApp.
vuerouter总结参考
Vue学习笔记（一）
学习vue-admin-template
https://github.com/PanJiaChen/vue-admin-template
初步印象
src目录如下
.
├── App.vue
├── api
├── assets
├── components
├── icons
…
3677
忙乎了一天才改好，前端0基础还让我做这个，难顶，记录下备忘吧。 1.修改.env.development
2.修改vue.config.js
3.修改src/utils/request.js
可以修改code状态码，改为自己的，简单点直接全部注释掉，留个return res；即可。
修改main.js
注释掉图中内容，可以全部注释掉不用mock的假数据，但要自己在后台写登录的几个方法，有点麻…
8万+
当前
后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5
-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网
springboot整合security和vue
2010yhh
05-07
1万+
springboot整合
security和
vue 文章目录
springboot整合
security和
vue1.
security参考资料2.
springboot整合
security要点2.1获取登录用户信息2.2自定义登入登出url2.3自定义Handler返回json2.4记住我功能2.5验证码功能2.6限制登录次数2.7密码加密2.8后台提供接口，返回前端json,整合
vue做前端登入登出3.测...
vue-element-admin +Springboot 搭建后台管理系统，遇到的坑，持续更新
ynight5的博客
11-28
4647
遇天坑，就填坑前端：
vue
-element
-
admin的坑 前端：
vue
-element
-
admin的坑 从大神这里下载了https://github.com/PanJiaChen/
vue
-
admin
-
template模板（适合二次开发），第一步：npm install 就遇到了第一个坑。
错误大致就是：XXXXXgit ls-remote -h -t ssh://git@github.com/…
622
基于
vue
-
admin
-
template
+
SpringBoot
+
JWT实现登录 1、实现的具体步骤如下图，可能会有版本差异，但是大致相同如果需要帮助可以联系我扣扣号（3421793724）
2、具体实现代码（有改动）上面图片使用的是固定的，没有和数据库进行连接，实现动态认证。
代码如下（后端）：
第一步：引入依赖
<dependencies>
<!-- JWT-->
<dependency>
<groupId>io.jsonw
1205
vue
-
admin
-
template简介 前
后端分离开发模式越来越受开发人员的喜爱，开源项目
vue
-
admin
-
template 是一个后台前端解决方案，它基于
vue 和 element
-ui实现。更多详情请阅读
vue
-
template
-
admin官网，
vue
-
admin
-
template项目是其基础模板，本文基于
vue
-
admin
-
template实现与
SpringBoot的整合
SpringBoot整合
vue
-
admin
-
template
…
8279
Vue框架
vue
-
admin
-
template登陆问题解决
admin:基于vue-admin-template模板和SpringBoot框架实现的简易权限管理系统-源码
04-06
valuenet
-
admin前端基于
vue
-
admin
-
template模板、
后端基于
SpringBoot开发、前
后端分离 有部分细节还未完善 账号密码（
admin\123）
vue-springboot实现登录验证
浔者的博客
06-10
1485
首先做好准备工作，建好前
后端项目，配置好。可参考https://segmentfault.com/a/1190000014211773?utm_source=tag
-newest
前端：
1.发送登录请求，将后台返回的token保存进sessionStorage。
Login.vue
<template>
<el-row :gutter=“20”>
<el-col :span=“12” :offset=“6”><div cla…
- 关于我们
- 招贤纳士
- 广告服务
- 开发助手
-
400-660-0108 -
kefu@csdn.net -
在线客服 - 工作时间 8:30-22:00
公安备案号11010502030143- 京ICP备19004658号
- 京网文〔2020〕1039-165号
- 经营性网站备案信息
- 北京互联网违法和不良信息举报中心
- 网络110报警服务
- 中国互联网举报中心
- 家长监护
- Chrome商店下载
- ©1999-2021北京创新乐知网络技术有限公司
- 版权与免责声明
- 版权申诉
- 出版物许可证
- 营业执照
自&如
CSDN认证博客专家
CSDN认证企业博客
码龄3年
暂无认证
-
185
- 原创
-
17万+
- 周排名
-
3万+
- 总排名
-
9万+
- 访问
- 等级
-
2768
- 积分
-
50
- 粉丝
-
76
- 获赞
-
22
- 评论
-
253
- 收藏
私信
关注
热门文章
- 求奇数和：输入一批正整数(以零或负数为结束标志)，求其中的奇数和。试 编写相应程序 11271
- 使用函数输出一个整数的逆序数：输入一个整数，将它逆序输出。 要求定义并调用函数 reverse(number)，它的功能是返回 number 的逆序数。 6861
- 设字符型变量 x 的值是 064，表达式....的值是 4837
- 矩阵运算：读入 1 个正整数 n(1≤n≤6),再读入 n 阶方阵 a, 计算该矩阵除副对角线、 最后一列和最后一行以外的所有元素之和。副对角线为从矩阵的右上角至左下角的连线 4553
- 使用函数验证哥德巴赫猜想：任何一个不小于 6 的偶数均可表示为两个奇素数之和 3662
分类专栏
-
c语言基础 7篇 -
数据结构 7篇 -
编译原理与技术 5篇 -
汇编语言 10篇 -
计算机图形学 2篇 -
计算机组成原理 7篇 -
算法设计与分析基础 1篇 -
office -
学习方法 2篇 -
linux -
Redis -
项目 -
iBlog -
设计模式 -
面试 -
问题 14篇 -
js 10篇 -
axios -
ajax 1篇 -
jquery 1篇 -
工具 11篇 -
xshell -
json 1篇 -
git 2篇 -
swagger 1篇 -
idea 1篇 -
zookeeper 1篇 -
vue 7篇 -
thymeleaf 10篇 -
springboot 15篇 -
shiro 1篇 -
springsecurity 6篇 -
springcloud 3篇 -
springmvc 10篇 -
spring 3篇 -
mybatis 3篇 -
javaweb -
JSP 1篇 -
mysql 6篇 -
基础算法题 33篇 -
java基础知识 1篇 -
java基础知识 10篇 -
集合 7篇 -
特殊类 8篇 -
正则表达式 3篇 -
泛型 1篇 -
反射 1篇 -
多线程 4篇 -
io流与网络编程 5篇 -
软件安装 12篇
最新评论
最新文章
- 四、字符串、转移字符、注释
- 三、变量与常量
- 二、C语言的数据类型
这篇关于vue-admin-template解决跨域问题详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Vue CLI多环境配置学习：从入门到实践11-24
-
Vue CLI多环境配置学习：新手入门教程11-24
-
Vue CLI学习：初学者指南11-24
-
Vue CLI学习：从入门到上手的简单教程11-24
-
Vue3+Vite学习：从零开始的前端开发之旅11-24
-
Vue3阿里系UI组件学习入门教程11-24
-
Vue3的阿里系UI组件学习入门指南11-24
-
Vue3公共组件学习：新手入门教程11-24
-
Vue3公共组件学习入门指南11-24
-
vue3核心功能响应式变量学习11-24
-
Vue3学习：从入门到初级实战教程11-24
-
集成Ant Design Vue的图标入门11-24
-
集成Ant Design Vue图标入门教程11-24
-
Vue新手入门教程：从零开始学习Vue框架11-23
-
如何集成Ant Design Vue的图标11-23
栏目导航
weixin_43585245: 时隔整整一年，我今天也在干这个了
Lonely丶龙城: 你在实际开发中账号密码写在配置文件里面吗？
ctotalk: 学习
dududuck__: 你好这个问题解决了吗？我现在也遇到了
郑高兴。: