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

2021/5/22 10:26:08

编程Tag： vue error 跨域 template admin springboot

本文主要是介绍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">&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
        }
      })
    }

 
 123456789101112131415161718192021

在这里插入图片描述
在这里插入图片描述

总结

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

SpringBoot+Security+Vue前后端分离开发权限管理系统 04-10 <div style="color:#444444;"> 
	适用人群

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

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

&lt;p&gt;
	该互联网实战项目是基于&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://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="{&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
收藏
新人勋章 签到达人 阅读者勋章Lv2 持之以恒 1024勋章 勤写标兵Lv4 学习力 原力新人 私信 关注

热门文章

  • 求奇数和：输入一批正整数(以零或负数为结束标志)，求其中的奇数和。试 编写相应程序 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篇

这篇关于vue-admin-template解决跨域问题详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程