vue-admin-template解决跨域问题详解

vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis)

自&如 2020-05-10 23:25:09 1232 收藏 10 原力计划

分类专栏： vue # springsecurity

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_42977003/article/details/106042557

版权

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中的请求地址
        }
      }
    }

      
      

      
      
1
2
3
4
5
6
7
8
9
10

# 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">&gt;</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">&gt;</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
        }
      })
    }

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

总结

到这我们就告一段落，希望对您有帮助

---

• 点赞 3
• 评论 1
• 分享
  x

  海报分享

  

  扫一扫，分享海报

• 收藏 10
• 打赏

  打赏

  

  自&如

  你的鼓励将是我创作的最大动力

  C币 余额

  ¥2 ¥4 ¥6 ¥10 ¥20 ¥50

  您的余额不足，请先充值哦～去充值

• 举报
• 关注 关注

• 一键三连

SpringBoot+Security+Vue前后端分离开发权限管理系统

04-10

<div style="color:#444444;">

	适用人群

<p style="color:#666666;">
	所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士
</p>

</div>
<p>
</p>
课程概述

<p>
	该互联网实战项目是基于&nbsp;Spring&nbsp;Boot&nbsp;2<em>+</em>&nbsp;Spring<em>Security</em>5<em>+</em>Element&nbsp;UI<em>+</em><em>Vue</em>&nbsp;<em>Admin</em>&nbsp;<em>Template</em><em>+</em>蚂蚁可视化AntV&nbsp;等技术栈开发的项目，采用分布式，多模块，前<em>后端</em>分离开发。包括图形展示、权限管理、用户管理等功能。&lt;br /&gt;

【后端技术】<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>

vue-admin-template与SpringBoot前后端接口请求数据示例代码.rar

09-08

vue - admin - template与 SpringBoot前 后端接口请求数据示例代码; vue - admin - template与 SpringBoot前 后端接口请求数据示例代码

  <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://i-blog.csdnimg.cn/blog_migrate/9d0266bfaa3e93ba4dd8f71b58fc2d57.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="{&quot;mod&quot;:&quot;1582594662_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4227&quot;,&quot;ab&quot;:&quot;new&quot;}"><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">&lt;</li><li data-page="1" class="ui-pager focus">1</li><li class="js-page-next js-page-action ui-pager ui-pager-disabled">&gt;</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

SpringBoot + Vue前 后端分离,使用Spring Security完美处理...

4-23

2.role是角色表,name字段表示角色的英文名称,按照Spring Security的规范,将以ROLE_开始,nameZh字段表示角色的中文名称。 3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了 Vue来做,因此当用户登录成功之后,系统将根据用...

【 Springboot + Vue】做一个权限管理后台 (一 ):项目介绍...

4-29

【 Springboot + Vue】系列采用了目前比较主流的 后端框架—— SpringBoot,前端采用前端三大框架之一的 Vue.js,本系列文章将教大家 入门Web开发,了解前 后端分离的结构。本系列文章适合具有一定JavaSE基础与JS基础的胖友 (能看懂代码 )。我将尽量还原...

vue-admin-template笔记（一）

seedcup的专栏

12-08 1万+

文章目录 Vue学习笔记（一）初步印象子模块main.jsApp. vuerouter总结参考 Vue学习笔记（一）

学习vue-admin-template
https://github.com/PanJiaChen/vue-admin-template

初步印象
src目录如下
.
├── App.vue
├── api
├── assets
├── components
├── icons
…

vue-admin-template:vue管理模板-源码

03-07

vue管理模板 English | 具有Element UI，axios，iconfont，权限控制和lint的最小 vue管理员模板 现场演示： : 当前版本是在 vue -cli上构建的v4.0 + 。 如果要使用旧版本，可以将分支切换到 ，它不依赖于 vue -cli 构建设置 # clone the project git clone https://github.com/PanJiaChen/ vue - admin - template.git # enter the project directory cd vue - admin - template # install dependency npm install # develop npm run dev 这将自动打开 建造 # build for test environment npm run build:stage # build for

tp和 vue 管理后台管理系统_Spring Boot + Security +Red...

5-3

一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、 Redis、 Vue的前 后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 RBAC,支持数据字典与数据权限管理,支持一键生成前 后端代码,支持动态路由!

vue-admin-template新手使用简单指南

qq_41215420的博客

03-14 3677

忙乎了一天才改好，前端0基础还让我做这个，难顶，记录下备忘吧。 1.修改.env.development

2.修改vue.config.js

3.修改src/utils/request.js
可以修改code状态码，改为自己的，简单点直接全部注释掉，留个return res；即可。

修改main.js
注释掉图中内容，可以全部注释掉不用mock的假数据，但要自己在后台写登录的几个方法，有点麻…

vue-admin-template-3.8.0.zip

08-13

vue - admin - template前端页面开发框架，你可以把 vue -element - admin当做工具箱或者集成方案仓库，在 vue - admin - template 的基础上进行二次开发，想要什么功能或者组件就去 vue -element - admin 那里复制过来。在开发后台管理项目时，多用户多角色不同权限的场景可以说是非常普遍的。从零开始手写一个后台，要考虑的东西很多，这里直接拿网上大家比较熟悉的 vue - admin - template后台模版来进行改造。

vue-admin-template

03-05

vue - admin - template 极简后台模板以及 vue -element - admin后台集成环境

SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)

江南一点雨的专栏

01-09 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/…

基于vue-admin-template+SpringBoot+JWT实现登录

qq_42191033的博客

06-14 622

基于 vue - admin - template + SpringBoot + JWT实现登录 1、实现的具体步骤如下图，可能会有版本差异，但是大致相同如果需要帮助可以联系我扣扣号（3421793724）

2、具体实现代码（有改动）上面图片使用的是固定的，没有和数据库进行连接，实现动态认证。
代码如下（后端）：
第一步：引入依赖
<dependencies>
<!-- JWT-->
<dependency>
<groupId>io.jsonw

SpringBoot整合vue-admin-template实现登录

liu320yj的博客

11-04 1205

vue - admin - template简介 前 后端分离开发模式越来越受开发人员的喜爱，开源项目 vue - admin - template 是一个后台前端解决方案，它基于 vue 和 element -ui实现。更多详情请阅读 vue - template - admin官网， vue - admin - template项目是其基础模板，本文基于 vue - admin - template实现与 SpringBoot的整合 SpringBoot整合 vue - admin - template

…

Vue框架vue-admin-template登陆问题解决

scorpio的博客

04-21 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…

©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页

• 关于我们
• 招贤纳士
• 广告服务
• 开发助手
• 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篇

最新评论

• vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis)

  weixin_43585245: 时隔整整一年，我今天也在干这个了

• springboot整合springsecurity+jwt+redis

  Lonely丶龙城: 你在实际开发中账号密码写在配置文件里面吗？

• json

  ctotalk: 学习

• Error:(5, 43) java: 程序包org.springframework.data.redis.core不存在

  dududuck__: 你好这个问题解决了吗？我现在也遇到了

• 设字符型变量 x 的值是 064，表达式....的值是

  郑高兴。:

最新文章

• 四、字符串、转移字符、注释
• 三、变量与常量
• 二、C语言的数据类型

2021年5篇

2020年163篇

2019年46篇