地址：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__: 你好这个问题解决了吗？我现在也遇到了
郑高兴。: