说明

本次使用的到的数据均为假数据，并未使用数据库。
vue文件中的方法调用注意看文件的引入。
其中有些使用伪代码的方式。

前期准备

创建一个spring boot项目,
项目结构如下：

说明：
config：
GlobalCORSConfig：配置vue-element-admin与springboot之间的跨域请求
model：
vo: 返回给前端的实体对象。
po：service 与dao之前传递的对象。
service：接口层
impl：service接口的实现层，其下的类需要实现service中的接口。且顶部加入注解 @Service。
controller:控制器层，接收前端数据和响应数据到前端。

跨域请求解决：
GlobalCORSConfig代码如下：

package com.example.demo.config;import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Component
public class  GlobalCORSConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("POST","GET").allowCredentials(false).maxAge(30);}
}

或者在控制器的方法上加入注解 @CrossOrigin，如下:

 @CrossOrigin@PostMapping(value = "/doLogin")public String doLogin(@RequestParam(value = "username") String username,@RequestParam(value = "password") String password){if (StringUtils.isEmpty(username)) return ResponseUtil.error("用户名不能为空");if (StringUtils.isEmpty(password)) return ResponseUtil.error("密码不能为空");String resStr = "";  return resStr;}

导入下面的依赖。

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.57</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope><exclusions><exclusion><groupId>org.junit.vintage</groupId><artifactId>junit-vintage-engine</artifactId></exclusion></exclusions></dependency></dependencies>

准备返回数据的工具类ResponseUtil:

package com.example.demo.utils;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;import java.util.HashMap;
import java.util.Map;public class ResponseUtil {private static Map map = new HashMap();private final static Integer successCode = 20000;//成功private final static Integer failCode = 50000;//失败/*** 成功时返回* @param dataObj Object 成功返回的数据对象* @return json字符串* */public static String success(Object dataObj){map.put("code",successCode);map.put("message","成功");map.put("data",dataObj);return jsonString(map);}/*** 失败时返回* @param message String 失败返回的提示信息* @return json字符串* */public static String error(String message){map.put("code",failCode);map.put("message",message);map.put("data",null);return jsonString(map);}/*** 自定义返回数据* @param code Integer 返回码* @param message String 返回的提示信息* @param dataObj Object 返回的提示信息* @return json字符串* */public static String customResult(Integer code,String message,Object dataObj){map.put("code",code);map.put("message",message);map.put("data",dataObj);return jsonString(map);}private static String jsonString(Object object){return JSON.toJSONString(object, SerializerFeature.WriteMapNullValue, SerializerFeature.DisableCircularReferenceDetect, SerializerFeature.WriteDateUseDateFormat);}
}

在github中clone 下vue-element-admin，地址:
英文版地址：

https://github.com/PanJiaChen/vue-element-admin

中文版地址：

https://github.com/PanJiaChen/vue-element-admin/tree/i18n

克隆后使用淘宝的镜像 install

npm install --registry=https://registry.npm.taobao.org

运行vue 项目，且启动成功。

开始

在vue-element-admin的目录结构中，.env.development 和 .env.production两个文件分别为开发环境下的访问地址配置和生产环境下的地址配置

将成产环境下的配置进行修改，VUE_APP_BASE_API 的值为访问springboot项目的地址。修改结果如下：

# just a flag
ENV = 'development'# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8080'

在vue-element-admin的项目结构中，src/view/login/index.vue文件为登录界面的文件，在 js部分的methods方法中的handleLogin方法为执行登录的方法。

在 $store中会调用src/store/modules/user.js中的actions对象下的login方法。此方法会调用src/api/user.js下的login方法。如下：

此时，我们修改src/api/user.js下的login方法，将url属性填写为登录所请求的控制器和方法名称,如下;

在springboot项目中创建Login控制器。用于处理登录，退出等相关处理。

@CrossOrigin@PostMapping(value = "/doLogin")public String doLogin(@RequestParam(value = "username") String username,@RequestParam(value = "password") String password){if (StringUtils.isEmpty(username)) return ResponseUtil.error("用户名不能为空");if (StringUtils.isEmpty(password)) return ResponseUtil.error("密码不能为空");String resStr = "";try{User voUser = loginService.doLogin(username,password);if (voUser == null) return ResponseUtil.error("账号或密码不正确");JSONObject jsonObject = new JSONObject();jsonObject.put("token","a123456789"); //token在此先暂时随便定义resStr = ResponseUtil.success(jsonObject);}catch (Exception e){resStr = ResponseUtil.error("失败："+e.getMessage());e.printStackTrace();}return resStr;}

在 **LoginServiceImpl **中代码：（目前实验指定固定的账号和密码）

@Service
public class LoginServiceImpl implements LoginService {//private UserDao userDao;@Overridepublic User doLogin(String username, String password) throws Exception {if ("admin".equals(username) && "12345678".equals(password)) {return new User(1L,username,password);}else{return null;}}
}

到此登录逻辑完成，但是由于vue-element-admin的登录中发起了2次请求，分别是：login、info，如下：

且分别传递的参数和响应的数据格式如下：
login
传递参数：

响应参数：

{"code":20000,"data":{"token":"admin-token"}}

info
传递参数：

响应参数：

{"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}
}/*
avatar:用户头像url
code：成功状态码
roles：角色
introduction：简介
name：用户名称
*/

在后台接口中添加新方法：

@GetMapping("/info")public String getInfo(@RequestParam(value = "token") String token){if (StringUtils.isEmpty(token)) return ResponseUtil.error("token不能为空");String resStr = "";try{//验证token 有效合法if("a123456789".equals(token)){ //List<String> role, String introduction, String avatar, String nameVoUserInfo voUserInfo = new VoUserInfo();ArrayList<String> roleList = new ArrayList<>();roleList.add("admin");voUserInfo.setRoles(roleList);voUserInfo.setName("admin");voUserInfo.setIntroduction("testAdmin");voUserInfo.setAvatar("https://himg.bdimg.com/sys/portraitn/item/2377d3f9bda1bdadbafeb36e");resStr = ResponseUtil.success(voUserInfo);}else{resStr = ResponseUtil.error("token无效");}}catch (Exception e){resStr = ResponseUtil.error("失败："+e.getMessage());e.printStackTrace();}return resStr;}

在vue-element-admin中，修改src/api/user.js下的getInfo方法，将url属性填写为info所请求的控制器和方法名称,如下;

修改完成后重启项目。输入正确的账号密码，即可登录成功。

退出登录

点击退出登陆时，发起请求如下：

由此可知，退出登录中将token值存放在请求头中。源码如下：

从源码中得知，请求过滤器中会将token带入请求头里。

则从后台中获取数据时，从请求头中获取token。

修改vue-element-admin中的src/api/user,js文件中的login方法，如下：

此时，运行即可退出登录。

springboot - vue-element-admin 整合，修改原有的登录退出相关推荐

Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
搭建spring-boot+vue前后端分离框架并实现登录功能
一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 二.搭建后台spring-boot框架步骤: 1.new- project选择Spring Init ...
SpringBoot+Vue+CAS 前后端分离实现单点登录方案
点击关注公众号,利用碎片时间学习文章目录前言一.CAS是什么? 二.搭建客户端系统引入CAS 客户端后端搭建总结前言什么是单点登录?单点登录全称Single Sign On(以下简称SS ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
基于Java+SpringBoot+vue+element实现前后端分离蛋糕商城系统详细设计
前言介绍: 随着社会的快速发展,计算机的影响是全面且深入的.人们生活水平的不断提高,日常生活中用户对网上蛋糕商城方面的要求也在不断提高,网上蛋糕商城得到广大用户的青睐,使得网上蛋糕商城的开发成为必需而 ...

springboot - vue-element-admin 整合，修改原有的登录退出

说明

前期准备

开始

登录

退出登录

springboot - vue-element-admin 整合，修改原有的登录退出相关推荐

最新文章

热门文章