SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接

这篇具有很好参考价值的文章主要介绍了SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章:
SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计
SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接
SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接
SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现
SpringBoot + Vue前后端分离项目实战 || 五:用户管理功能后续

前后端对接

前端接口修改对接后端

src\api\user.js中修改请求地址,与后端保持一致
springboot和vue前后端连接,vue.js,前端,spring boot

记录下前端的src\utils\request.js中的X-Token字段
springboot和vue前后端连接,vue.js,前端,spring boot

改变开发环境中的请求地址,更改为后端地址http://localhost:9999
springboot和vue前后端连接,vue.js,前端,spring boot

将前端的模拟数据服务注释关闭
springboot和vue前后端连接,vue.js,前端,spring boot

后端总体配置

后端新建一个config包,包中新建两个类
springboot和vue前后端连接,vue.js,前端,spring boot

  • MyCorsConfig用于配置异步访问,对接前端的访问链接"http://localhost:8888",此配置可用Nginx代替
  • MyRedisConfig用于配置Redis序列化服务

MyCorsConfig中配置的代码如下:

package com.ums.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class MyCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();

        // 允许什么网址来异步访问
        configuration.addAllowedOrigin("http://localhost:8888");

        // 获取cookie
        configuration.setAllowCredentials(true);

        // 允许什么方法? POST、GET,此处为* 意味全部允许
        configuration.addAllowedMethod("*");

        // 允许所有的请求头
        configuration.addAllowedHeader("*");

        // 设置资源过滤器,过滤什么资源
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",configuration);

        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

MyRedisConfig中用于配置的代码如下:

package com.ums.config;

import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonTypeInfo;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.MapperFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.GenericJackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;

import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.TimeZone;

@Configuration
public class MyRedisConfig {

    @Resource
    private RedisConnectionFactory factory;

    @Bean
    public RedisTemplate redisTemplate(){
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(factory);

        // 设置键值序列化
        redisTemplate.setKeySerializer(new StringRedisSerializer());

        Jackson2JsonRedisSerializer serializer = new Jackson2JsonRedisSerializer<Object>(Object.class);
        redisTemplate.setValueSerializer(serializer);

        // 序列化,死代码
        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        om.setTimeZone(TimeZone.getDefault());
        om.configure(MapperFeature.USE_ANNOTATIONS, false);
        om.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
        om.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);
        om.activateDefaultTyping(LaissezFaireSubTypeValidator.instance ,ObjectMapper.DefaultTyping.NON_FINAL, JsonTypeInfo.As.PROPERTY);
        om.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        serializer.setObjectMapper(om);

        return redisTemplate;
    }
}

后端编写登录登出业务代码

前端VUE项目的登录接口请求方法为POST,之前介绍过
springboot和vue前后端连接,vue.js,前端,spring boot

UserController中新增代码,用于登录控制
springboot和vue前后端连接,vue.js,前端,spring boot

@PostMapping("/login")
public Result<Map<String,Object>> login(@RequestBody User user){
    // 因为 user传过来为json字符串,所以用@RequestBody 进行实体转换

    // 业务代码在userService里完成
    Map<String,Object> data = userService.login(user);

    if(data != null){
        return Result.success(data,"登录成功");
    }
    return Result.fail(2002,"用户名或密码错误");
}

如下图所示userService.login()方法会爆红,因为该方法没有被定义或实现,此时鼠标点击并按Alt+Enter
springboot和vue前后端连接,vue.js,前端,spring boot

选择第一项:
springboot和vue前后端连接,vue.js,前端,spring boot

IDEA会自动生成接口代码
springboot和vue前后端连接,vue.js,前端,spring boot

此时,接口上方有个提示1 related problem,鼠标左击,会跳转至接口的实现代码处UserServiceImpl
springboot和vue前后端连接,vue.js,前端,spring boot

springboot和vue前后端连接,vue.js,前端,spring boot

在整个类的定义之处,同样Alt + Enter,选择第一个,弹出的对话框再选第一个,会生成代码
springboot和vue前后端连接,vue.js,前端,spring boot
springboot和vue前后端连接,vue.js,前端,spring boot

生成的代码
springboot和vue前后端连接,vue.js,前端,spring boot

在该函数中写上下述代码

@Override
public Map<String, Object> login(User user) {
    // 查询数据库
    LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    wrapper.eq(User::getUsername, user.getUsername());
    wrapper.eq(User::getPassword, user.getPassword());
    User loginUser = this.baseMapper.selectOne(wrapper);

    // 结果不为空,生成token,将用户信息存入redis
    if (loginUser != null) {
        // 用UUID,终极方案是jwt
        String key = "user:" + UUID.randomUUID();

        // 存入redis
        loginUser.setPassword(null);    // 设置密码为空,密码没必要放入
        redisTemplate.opsForValue().set(key, loginUser,30, TimeUnit.MINUTES);   // timeout为登录时间

        // 返回数据
        Map<String, Object> data = new HashMap<>();
        data.put("token",key);
        return data;
    }

    // 结果不为空,生成token,前后端分离,前端无法使用session,可以使用token
    // 并将用户信息存入redis
    return null;
}

返回UserController,此时代码正常
springboot和vue前后端连接,vue.js,前端,spring boot

按照上述方法如法炮制
UserController中写获取token的代码和logout代码
springboot和vue前后端连接,vue.js,前端,spring boot

其中,这两个接口均未实现
springboot和vue前后端连接,vue.js,前端,spring boot

代码如下

@GetMapping("/info")
public Result<Map<String,Object>> getUserInfo(@RequestParam("token") String token){
    // @RequestParam("token") 是从url中获取值
    // 根据token获取用户信息,信息存进了redis中
    Map<String,Object> data = userService.getUserInfo(token);
    if(data != null){
        return Result.success(data);
    }
    return Result.fail(2003,"登录信息无效,请重新登录");
}

@PostMapping("/logout")
public Result<?> logout(@RequestHeader("X-Token") String token){
    userService.logout(token);
    return Result.success();

接着就是Alt + Enter修复bug

UserServiceImpl中先定义一个redisTemplate
springboot和vue前后端连接,vue.js,前端,spring boot

然后在UserServiceImpl中写上下述代码

@Override
public Map<String, Object> getUserInfo(String token) {
    // 之前已将对象进行序列化处理存入redis,现在从redis中取出需要反序列化处理
    Object obj = redisTemplate.opsForValue().get(token);    // 此对象是map类型,稍后需要序列化为Json字符串
    if (obj!= null) {
        User loginUser = JSON.parseObject(JSON.toJSONString(obj), User.class);
        Map<String,Object> data = new HashMap<>();
        data.put("name",loginUser.getUsername());
        data.put("avatar",loginUser.getAvatar());

        // 先在xml里写SQL语句id=getRoleNameByUserId,然后去UserMapper里实现接口
        List<String> roleList = this.baseMapper.getRoleNameByUserId(loginUser.getId());
        data.put("roles",roleList);

        return data;
    }

    return null;
}

@Override
public void logout(String token) {
    redisTemplate.delete(token);    // 从redis中删除token
}

注意红圈中的代码,是联表查询,这是自定义的SQL查询,接下来定义它
springboot和vue前后端连接,vue.js,前端,spring boot

找到UserMapper然后写上代码:

public List<String> getRoleNameByUserId(Integer userId);

springboot和vue前后端连接,vue.js,前端,spring boot

然后去resources\mapper\sys\UserMapper.xml中写SQL语句
springboot和vue前后端连接,vue.js,前端,spring boot

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ums.sys.mapper.UserMapper">
    <select id="getRoleNameByUserId" parameterType="Integer" resultType="String">
        SELECT
               b.role_name
        FROM
             x_user_role a,x_role b
        WHERE
            a.role_id=b.role_id
          AND
            a.user_id = #{userId}
    </select>
</mapper>

测试

由于配置了redis,所以在启动SpringBoot之前先启动Redis

先找到redis的安装目录
springboot和vue前后端连接,vue.js,前端,spring boot

打开cmd定位到该目录
运行命令redis-server.exe redis.windows.conf,回车,出现下述界面,然后此窗口最小化,千万别关闭
springboot和vue前后端连接,vue.js,前端,spring boot

接着启动SprinfBoot后端
springboot和vue前后端连接,vue.js,前端,spring boot

然后启动Vue前端
springboot和vue前后端连接,vue.js,前端,spring boot

点击登录后,可以看到http://localhost:9999/user/login接口地址的变化
springboot和vue前后端连接,vue.js,前端,spring boot

后端生成的token也注册在redis
springboot和vue前后端连接,vue.js,前端,spring boot
springboot和vue前后端连接,vue.js,前端,spring boot

点击退出登录,redis中的token也被注销了
springboot和vue前后端连接,vue.js,前端,spring boot
springboot和vue前后端连接,vue.js,前端,spring boot

后端所有代码

防止笔记失误,附上所有代码文章来源地址https://www.toymoban.com/news/detail-656508.html

  1. UserController中的代码
    package com.ums.sys.controller;
    
    import com.ums.common.vo.Result;
    import com.ums.sys.entity.User;
    import com.ums.sys.service.IUserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.stereotype.Controller;
    
    import java.util.List;
    import java.util.Map;
    
    /**
     * <p>
     *  前端控制器
     * </p>
     *
     * @author anthony
     * @since 2023-06-16
     */
    @RestController
    @RequestMapping("/user")
    // @CrossOrigin  //处理跨域,因为前端和后端的IP一致但端口不一致,所以浏览器认为跨域,不给访问,可用Ngx来解决
    public class UserController {
        @Autowired
        private IUserService userService;
    
        @GetMapping("/all")
        public Result<List<User>> getAllUser() {
            List<User> list = userService.list();
            return Result.success(list,"查询成功");
        }
    
        @PostMapping("/login")
        public Result<Map<String,Object>> login(@RequestBody User user){
            // 因为 user传过来为json字符串,所以用@RequestBody 进行实体转换
    
            // 业务代码在userService里完成
            Map<String,Object> data = userService.login(user);
    
            if(data != null){
                return Result.success(data,"登录成功");
            }
            return Result.fail(2002,"用户名或密码错误");
        }
    
        @GetMapping("/info")
        public Result<Map<String,Object>> getUserInfo(@RequestParam("token") String token){
            // @RequestParam("token") 是从url中获取值
            // 根据token获取用户信息,信息存进了redis中
            Map<String,Object> data = userService.getUserInfo(token);
            if(data != null){
                return Result.success(data);
            }
            return Result.fail(2003,"登录信息无效,请重新登录");
        }
    
        @PostMapping("/logout")
        public Result<?> logout(@RequestHeader("X-Token") String token){
            userService.logout(token);
            return Result.success();
        }
    }
    
    
  2. mapper\UserMapper中的代码
    package com.ums.sys.mapper;
    
    import com.ums.sys.entity.User;
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    
    import java.util.List;
    
    /**
     * <p>
     *  Mapper 接口
     * </p>
     *
     * @author chenhao
     * @since 2023-06-16
     */
    public interface UserMapper extends BaseMapper<User> {
    
    
        public List<String> getRoleNameByUserId(Integer userId);
    }
    
  3. service\IUserService接口中的代码
    package com.ums.sys.service;
    
    import com.ums.sys.entity.User;
    import com.baomidou.mybatisplus.extension.service.IService;
    
    import java.util.Map;
    
    /**
     * <p>
     *  服务类
     * </p>
     *
     * @author chenhao
     * @since 2023-06-16
     */
    public interface IUserService extends IService<User> {
    
        // Map<String, Object> login(User user);
    
        Map<String, Object> getUserInfo(String token);
    
        void logout(String token);
    
        Map<String, Object> login(User user);
    }
    
  4. service\impl\UserServiceImpl中的代码
    package com.ums.sys.service.impl;
    
    import com.alibaba.fastjson2.JSON;
    import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    import com.ums.sys.entity.User;
    import com.ums.sys.mapper.UserMapper;
    import com.ums.sys.service.IUserService;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.redis.core.RedisTemplate;
    import org.springframework.stereotype.Service;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    import java.util.UUID;
    import java.util.concurrent.TimeUnit;
    
    /**
     * <p>
     *  服务实现类
     * </p>
     *
     * @author chenhao
     * @since 2023-06-16
     */
    @Service
    public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {
    
        @Autowired
        private RedisTemplate redisTemplate;
    
        @Override
        public Map<String, Object> login(User user) {
            // 查询数据库
            LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
            wrapper.eq(User::getUsername, user.getUsername());
            wrapper.eq(User::getPassword, user.getPassword());
            User loginUser = this.baseMapper.selectOne(wrapper);
    
            // 结果不为空,生成token,将用户信息存入redis
            if (loginUser != null) {
                // 用UUID,终极方案是jwt
                String key = "user:" + UUID.randomUUID();
    
                // 存入redis
                loginUser.setPassword(null);    // 设置密码为空,密码没必要放入
                redisTemplate.opsForValue().set(key, loginUser,30, TimeUnit.MINUTES);   // timeout为登录时间
    
                // 返回数据
                Map<String, Object> data = new HashMap<>();
                data.put("token",key);
                return data;
            }
    
            // 结果不为空,生成token,前后端分离,前端无法使用session,可以使用token
            // 并将用户信息存入redis
            return null;
        }
    
        @Override
        public Map<String, Object> getUserInfo(String token) {
            // 之前已将对象进行序列化处理存入redis,现在从redis中取出需要反序列化处理
            Object obj = redisTemplate.opsForValue().get(token);    // 此对象是map类型,稍后需要序列化为Json字符串
            if (obj!= null) {
                User loginUser = JSON.parseObject(JSON.toJSONString(obj), User.class);
                Map<String,Object> data = new HashMap<>();
                data.put("name",loginUser.getUsername());
                data.put("avatar",loginUser.getAvatar());
    
                // 先在xml里写SQL语句id=getRoleNameByUserId,然后去UserMapper里实现接口
                List<String> roleList = this.baseMapper.getRoleNameByUserId(loginUser.getId());
                data.put("roles",roleList);
    
                return data;
            }
    
            return null;
        }
    
        @Override
        public void logout(String token) {
            redisTemplate.delete(token);    // 从redis中删除token
        }
    
    }
    

到了这里,关于SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Boot+Vue前后端分离项目如何部署到服务器

    🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 🤖 洛可可白 :个人主页 🔥 个人专栏 :✅前端技术 ✅后端技术 🏠 个人

    2024年04月11日
    浏览(43)
  • Java之Spring Boot+Vue+Element UI前后端分离项目

    typeId : this.typeId, }).then((res) = { this.$router.push(“/”); this.$message.success(“文章发布成功!”); }).catch(() = { this.$message.error(“文章发布失败!”); }); }, handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); this.thumbnail = “http://localhost:9090/img/” + res; }, selectType(typename,id) { t

    2024年04月27日
    浏览(64)
  • SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月09日
    浏览(43)
  • 基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇

    如何高效学习Java? 毕业设计项目应该怎么做?入门实战项目应该怎么做? 做Java开发都应该学习哪些框架技术?到底应该往哪个方向努力? 📢 这是专栏的第一篇文章,我想来跟你聊聊 为什么要学习此专栏 ?我们经常说,看一个事儿千万不要直接陷入细节里,你应该 先鸟瞰

    2024年02月03日
    浏览(38)
  • Linux/openEuler系统部署spring boot+vue前后端分离项目(nginx均衡代理)

    可以看我前面的文章 华为openEuler系统安装openjdk并配置环境变量 openEuler系统安装nginx HUAWEI-OpenEuler系统安装MySQL服务器并使用详细步骤 Ubuntu安装MySQL服务器详细步骤 在确定项目可以正常运行的前提下,进行package打出jar包 npm run build 打包成功后在项目文件路径下出现dist文件夹

    2024年03月24日
    浏览(84)
  • SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月11日
    浏览(50)
  • SpringBoot + Vue前后端分离项目实战 || 五:用户管理功能后续

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月16日
    浏览(39)
  • SpringBoot + Vue前后端分离项目实战 || 六:Jwt加密整合配置

    在之前的系统中,我们利用 UUID 配合 Redis 以达到角色登录的功能。 当前整个系统存在一个问题:人为 修改token值 后,用户仍然能在前端进行数据库操作,后台没有校验当前用户 token 就允许一些请求,导致系统存在 安全漏洞 。 解决方法: Jwt签名验证 。整合 Jwt 后,前端发

    2024年02月15日
    浏览(38)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 项目概述

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 通过学习本项目,深刻理解前后端分离的思想,具备独立搭建前后端

    2024年02月12日
    浏览(47)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 官网:https://nodejs.org 注意,node可以比我稍低,但不要更高 https://p

    2024年01月17日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包