地址：https://github.com/PanJiaChen/vue-admin-template
我们这里不讲vue-element-admin，讲的是vue-admin-template
跨域配置分为两种，一种是cors方式在 vue-config.js 配置 proxy 代理，另外一种是通过 nginx 配置反向代理，这里我们用第一种，第二种 nginx 我还不会
Proxy
proxy: {
'/api' : {
target: process. env. VUE_APP_BASE_API,
changeOrigin: true ,
pathRewrite: {
'^/api' : ''
}
}
}
# just a flag
ENV = 'development'
= ‘/dev-api’ VUE_APP_BASE_API = ‘http://localhost:8080’
port = 9528
- cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable, - plugin- dynamic- import - node plugin is enabled. import ( ) to require ( ) . , . : https: / / github. com/ vuejs/ vue- cli/ blob/ dev/ packages/ @vue / babel- preset- app/ index. jsVUE_CLI_BABEL_TRANSPILE_MODULES = true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
跨域配置完了
我们这里的后端是java，使用的框架是springboot+springsecurity+jwt+redis
参考博客： https://blog.csdn.net/qq_42977003/article/details/106016161
因为之前我写请求的时候是直接把请求写在页面里面，请求和响应都是在一起，但是 vue-admin-template 对axios做了封装，例如我们这里的登陆请求是写在store里面的，页面调store的登陆，store调api的登陆请求，同时还有对请求和响应的拦截
request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
const service = axios. create ( { : process. env. VUE_APP_BASE_API, : 5000 } )
. interceptors. request. use ( = > {
<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
} , = > { . log ( error) return Promise. reject ( error) } )
. 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= > { 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>
} , = > { . log ( ‘err’ + error) Message ( { : error. message, : ‘error’ , : 5 * 1000 } ) return Promise. reject ( error) } ) 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: { : getToken ( ) , : ‘’ , : ‘’ } ,
mutations: { : ( state, token) = > { . token = token} , : ( state, name) = > { . name = name} , : ( state, avatar) = > { . avatar = avatar} } ,
actions: { Login ( { commit } , userInfo) { return new Promise ( ( resolve, reject) = > { login ( userInfo) . then ( response = > { . log ( ‘store’ ) const tokenValue = response. jwtTokensetToken ( tokenValue) commit ( ‘SET_TOKEN’ , tokenValue) resolve ( ) } ) . catch ( error = > { reject ( error) } ) } ) } } } 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
到这我们就告一段落，希望对您有帮助
<div style="color:#444444;">
适用人群
<p style="color:#666666;">
所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士
</p>
</div>
<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 />Security 5 认证和授权框架<br />Vue 互联网最火的前端框架<br />Vue Router 路由框架<br />Vue x 全局状态管理框架<br />Vue Element Admin 前端模板<br />- 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>
vue - admin - template 与 SpringBoot 前 后端 接口请求数据示例代码; vue - admin - template 与 SpringBoot 前 后端 接口请求数据示例代码
相关推荐
基于 Vue - admin - template + SpringCloud + SpringAlibaba + ...
基于 Vue - admin - template + SpringCloud + SpringAlibaba + Spring Security 搭建的权限框架 系统采用现在最流行的微服务架构,SpringCloud + SpringAlibaba搭建,使用nacos作为注册中心,配置中心, 使用gateway作为网关,采用sentinel作为断路器。OpenFeign服务...
... Vue 的个人博客系统12——使用 vue - admin - template 展...
3、可见 vue - admin - template 给我们提供了一些常见的例子,我们这里只做文章管理部分,下面修改一下路由@/router/index.js import Vue from' vue 'importRouterfrom' vue - router' Vue .use ( Router ) /* Layout */importLayoutfrom'@/layout'export...
一个基于 vue - admin - template 的hexo博客后台管理，项目采用 SpringBoot Vue 开发
主要介绍了 详解 使用 vue - admin - template 的优化历程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue - admin - template 4.0 + 设置baseUrl 使用 springboot ...
vue - admin - template 4.0 + 设置baseUrl 使用 springboot 后端 数据 2020年5月 坑货,折腾了我不少时间,网上全是之前俩版本的设置方法。 第一个版本: 项目内有个 config 包,里面有对应的 dev 和 pro 俩环境的设置方法,里面地址用的...
SpringBoot + Vue 前 后端 分离,使用Spring Security 完美处理...
2.role是角色表,name字段表示角色的英文名称,按照Spring Security 的规范,将以ROLE_开始,nameZh字段表示角色的中文名称。 3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了 Vue 来做,因此当用户登录成功之后,系统将根据用...
主要介绍了 SpringBoot + Vue 前 后端 分离，使用Spring Security 完美处理权限问题,需要的朋友可以参考下
08-02
2、目录分析
二、配置信息
vue .config.js
这里面配置了项目的基本信息： 所使用的环境、端口号、对外路径、输入文件路径等信息 , 可以看到我们使用的dev开发环境，下面将查看开发环境的配置
// All configuration item explanations can be find i
SpringBoot + Vue 前 后端 分离,使用Spring Security 完美处理...
2.role是角色表,name字段表示角色的英文名称,按照Spring Security 的规范,将以ROLE_开始,nameZh字段表示角色的中文名称。 3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了 Vue 来做,因此当用户登录成功之后,系统将根据用...
【 Springboot + Vue 】做一个权限管理后台 ( 一 ) :项目介绍...
【 Springboot + Vue 】系列采用了目前比较主流的 后端 框架—— SpringBoot ,前端采用前端三大框架之一的 Vue .js,本系列文章将教大家 入门 Web开发,了解前 后端 分离的结构。本系列文章适合具有一定JavaSE基础与JS基础的胖友 ( 能看懂代码 ) 。我将尽量还原...
12-08
文章目录 Vue 学习笔记（一）初步印象子模块main.jsApp. vue router总结参考 Vue 学习笔记（一）
学习vue - admin - template vue - admin - template
初步印象vue
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...
一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT 、Spring Security 、 Redis 、 Vue 的前 后端 分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 RBAC,支持数据字典与数据权限管理,支持一键生成前 后端 代码,支持动态路由!
03-14
忙乎了一天才改好，前端0基础还让我做这个，难顶，记录下备忘吧。 1.修改.env.development
2.修改vue .config.js
3.修改src/utils/request.js
修改main.js
vue - admin - template 前端页面开发框架，你可以把 vue - element - admin 当做工具箱或者集成方案仓库，在 vue - admin - template 的基础上进行二次开发，想要什么功能或者组件就去 vue - element - admin 那里复制过来。在开发后台管理项目时，多用户多角色不同权限的场景可以说是非常普遍的。从零开始手写一个后台，要考虑的东西很多，这里直接拿网上大家比较熟悉的 vue - admin - template 后台模版来进行改造。
vue - admin - template 极简后台模板以及 vue - element - admin 后台集成环境
01-09
当前 后端 分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5 - 6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网
05-07
springboot 整合 security 和 vue 文章目录 springboot 整合 security 和 vue 1. security 参考资料2. springboot 整合 security 要点2.1获取登录用户信息2.2自定义登入登出url2.3自定义Handler返回json2.4记住我功能2.5验证码功能2.6限制登录次数2.7密码加密2.8后台提供接口，返回前端json,整合 vue 做前端登入登出3.测...
11-28
遇天坑，就填坑前端： vue - element - admin 的坑 前端： vue - element - admin 的坑 从大神这里下载了https://github.com/PanJiaChen/ vue - admin - template 模板（适合二次开发），第一步：npm install 就遇到了第一个坑。
错误大致就是：XXXXXgit ls- remote - h - t ssh://git@github.com/…
06-14
基于 vue - admin - template + SpringBoot + JWT 实现登录 1、实现的具体步骤如下图，可能会有版本差异，但是大致相同如果需要帮助可以联系我扣扣号（3421793724）
2、具体实现代码（有改动）上面图片使用的是固定的，没有和数据库进行连接，实现动态认证。后端 ）：- - JWT - - >
11-04
vue - admin - template 简介 前 后端 分离开发模式越来越受开发人员的喜爱，开源项目 vue - admin - template 是一个后台前端解决方案，它基于 vue 和 element - ui实现。更多详情请阅读 vue - template - admin 官网， vue - admin - template 项目是其基础模板，本文基于 vue - admin - template 实现与 SpringBoot 的整合 SpringBoot 整合 vue - admin - template
…
04-21
Vue 框架 vue - admin - template 登陆问题解决
valuenet - admin 前端基于 vue - admin - template 模板、 后端 基于 SpringBoot 开发、前 后端 分离 有部分细节还未完善 账号密码（ admin \123）
06-10
首先做好准备工作，建好前 后端 项目，配置好。可参考https://segmentfault.com/a/1190000014211773?utm_source=tag - newest
前端：
1.发送登录请求，将后台返回的token保存进sessionStorage。
Login.vue
<template >- row :gutter=“20”>- col :span=“12” :offset=“6”><div cla…
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客
返回首页
自&如 CSDN认证博客专家 CSDN认证企业博客
185
原创
17万+
周排名
3万+
总排名
9万+
访问
等级
2768
积分
50
粉丝
76
获赞
22
评论
253
收藏
分类专栏
3450 
400-660-0108
已为社区贡献1条内容
weixin_43585245: 时隔整整一年，我今天也在干这个了
Lonely丶龙城: 你在实际开发中账号密码写在配置文件里面吗？
ctotalk: 学习
dududuck__: 你好这个问题解决了吗？我现在也遇到了
郑高兴。: