首页 > 资讯 > 后端开发 > Python >springboot vue测试平台开发调通前后端环境实现登录

378

分享到

springboot vue测试平台开发调通前后端环境实现登录

2024-04-02 19:04:59 378人浏览泡泡鱼

Python 官方文档：入门教程 => 点击学习

摘要

目录基于 SpringBoot+Vue的测试平台开发一、前端环境搭建快速安装二、后端环境搭建创建应用配置 application.properties三、实现登录1. Mysql 建

基于 springboot+vue的测试平台开发

一、前端环境搭建

在前端框架vue-element-admin这个项目中，有一个简洁轻量型的项目vue-admin-template，这里面初始化的内容少，适合初学者，防止一上来就被那么多的代码弄晕。

快速安装

# 克隆项目
git clone https://GitHub.com/PanJiaChen/vue-admin-template.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 可以通过如下操作解决 npm 下载速度慢的问题
npm install --reGIStry=Https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev

2 个npm install的任意选择一个即可，下面的使用的是国内的淘宝镜像，速度会更快些。

启动之后就会看到登录页，说明安装成功。

点击登录进去，就可以看到首页了。

但是我们还没实现后端，怎么就登录了？这是因为前端框架里目前的请求都是走的它内置的 mock，所以等会要去开发后端接口替换掉这些 mock。

二、后端环境搭建

创建应用

直接使用 idea 创建一个 springboot 应用即可，可以使用Spring Initializr来快速创建。

完事之后就要在pom.xml里添加响应依赖即可。

我这里是创建的时候勾选了一些项目，自动会生成出来依赖。

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-WEB</artifactId>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.5</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.experimental</groupId>
            <artifactId>spring-native</artifactId>
            <version>${spring-native.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-core</artifactId>
            <version>3.0.5</version>
        </dependency>
    </dependencies>

重点是mybatis-plus-core这个依赖要添加好，后面要用它进行数据库交互。

配置 application.properties

这里目前主要配置数据库的连接信息。我的mysql安装在华为云上，系统是 Centos8。

# mysql
spring.datasource.url=jdbc:mysql://xxx.x.xx.101:3306/bloomtest?characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.passWord=xxxxxx
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.hikari.max-lifetime=1000000
# 上下文地址为
server.servlet.context-path=/bloomtest

spring.datasource.hikari.max-lifetime：默认数据源连接池，连接最大存活时间，设置长一些，防止长时间不操作断开连接，不方便调试。

server.servlet.context-path：配置上下文路径，比如我的登录接口路径为/user/login，请访问的时候就是localhost:8080/bloomtest/user/login。

三、实现登录

登录就涉及到用户，还会涉及到权限管理之类，但是这个不作为当前的重点，目前只是需要可以正常登录即可。

F12 可以查看 mock 登录时候的请求，共有 2 个接口，所以就参照 mock 返回的数据来返回对应真实的数据。

代码目前大致有如下的结构，先眼熟即可。

1. mysql 建表

登录的话，就是拿前端传参过来的用户名和密码，看下是否存在数据库用户表里，存在就可以登录，不存在就返回失败。

所以，在此之前还需要建张 user 表：

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `username` varchar(30) DEFAULT NULL COMMENT '用户名',
  `password` varchar(30) DEFAULT NULL COMMENT '年龄',
  `createTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '创建时间',
  `updateTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='用户表';

然后手动新增了 3 个用户：

2. 后端-实现 /login 接口

(1)创建实体类 User

package com.pingguo.bloomtest.pojo;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.util.Date;
@Data
public class User {
    @TableId(type = IdType.ID_WORKER)
    private Long id;
    private String username;
    private String password;
    @TableField(fill = FieldFill.INSERT)        // 新增的时候填充数据
    private Date createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE) // 新增或修改的时候填充数据
    private Date updateTime;
}

注解神马的在之前 spring 相关技术栈里已经有过介绍，有需要的可以去翻看或者直接百度即可。

(2)创建接口 UserDAO

package com.pingguo.bloomtest.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.pingguo.bloomtest.pojo.User;
import org.springframework.stereotype.Repository;
@Repository
public interface UserDAO extends BaseMapper<User> {
}

这里使用 mybatis-plus 框架，在文末会附上之前学习此框架的内容供学习参考。

(3)创建Service层 UserService

这里就是真正处理业务逻辑的地方，这里提供方法直接给后面的 controller 层调用。

package com.pingguo.bloomtest.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.pingguo.bloomtest.dao.UserDAO;
import com.pingguo.bloomtest.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
@Service
public class UserService {
    @Autowired
    private UserDAO userDAO;
    
    public boolean isUserExist(String username, String password) {
        //创建对象，泛型里加上实体对象
        QueryWrapper<User> wrapperUser = new QueryWrapper<>();
        // 先创建一个 hashmap，然后把多个条件put进去，再调用allEq
        Map<String, Object> map = new HashMap<>();
        map.put("username", username);
        map.put("password", password);
        // 设置查询的条件
        wrapperUser.allEq(map);
        // 调用方法查询一个返回记录
        int count = userDAO.selectCount(wrapperUser);
        if (count == 1) {
            return true;
        } else {
            return false;
        }
    }
}

这里就与 mysql 进行交互了，用到的就是 mybatis-plus 的语法，详见文末附上的文章链接。

这里方法返回 true 表示库里存在该用户，即可以登录。否则返回 false。

(4)创建Controller层 UserController

这里就是接收前端请求的地方了。

package com.pingguo.bloomtest.controller;
import com.pingguo.bloomtest.common.Result;
import com.pingguo.bloomtest.controller.request.UserRequest;
import com.pingguo.bloomtest.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("user")
public class UserController {
    @Autowired
    UserService userService;
    @PostMapping("/login")
    public Result login(@RequestBody UserRequest user) throws Exception {
        String username = user.getUsername();
        String password = user.getPassword();
        if (userService.isUserExist(username, password)) {
            Map<String, Object> userToken = new HashMap<>(4);
            userToken.put("token","admin-token");
            return Result.success(userToken);
        } else {
            return Result.fail("用户名或密码错误");
        }
    }
}

Controller 层调用 Service层，Service层再调用 dao 层与 DB进行交互。

这里返回了是一个Result类型的结果，这里是为了更好的返回数据，进行了一个类的封装。

在 common 包下新建了一个类Result：

package com.pingguo.bloomtest.common;
import lombok.Data;
@Data
public class Result {
    private static final int SUCCESS_CODE = 20000;
    private static final int FAIL_CODE = 20005;
    private int code;
    private String message;
    private Object data;
    private Result(int code, String message, Object data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }
    public static Result success() {
        return new Result(SUCCESS_CODE, "成功", null);
    }
    public static Result success(Object data) {
        return new Result(SUCCESS_CODE, "成功", data);
    }
    public static Result fail(String message) {
        return new Result(FAIL_CODE, message, null);
    }
    
    public static Result fail(int code, String message) {
        return new Result(code, message, null);
    }
}

另外，这里的传参UserRequest user，也是为了便于获取请求参数，而创建的类。

(5)启动应用，测试 /login 接口

直接使用 postman 进行调用。

换个不存在的传参。

接口正常。

3. 前端-修改代码实现登录

(1)修改 .env.development

这样前端请求访问的就是后端的http://127.0.0.1:8080地址和端口。

(2)修改 \src\api\user.js

这里就是前端请求的接口路径，替换成我们实现的 /login，

(3)\src\utils\request.js

至于我后端接口返回成功code 为什么是 20000呢？是因为前端框架里做了统一的封装，这里喜欢的话你自己也可以改成别的。

(4)\src\views\login\index.vue

这里就是存放页面的地方了，是后面前端代码的主要阵地。

从Login按钮的绑定的事件知道handleLogin就是用来处理登录的方法，不过这里暂时不需要进行改动。

重新构建后点击登录，可以看到请求了真正的后端接口。

可是报错了。

4. 解决跨域

报错是跨域问题，解决跨域，可以在后端进行处理，增加一个配置类。

package com.pingguo.bloomtest.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 CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1允许任何域名使用
        corsConfiguration.addAllowedOrigin("*");
        // 2允许任何头
        corsConfiguration.addAllowedHeader("*");
        // 3允许任何方法(post、get等)
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
}

重试一下，登录请求成功了，但是不能跳转，因为还有个接口没实现，那就是/useInfo。

5. 后端-实现 /useInfo 接口

套路跟上面一样，但是这里因为直接写一个与 mock 返回的一样的数据，所以直接在 controller 类下新增一个控制器方法直接处理返回。

@GetMapping("/useInfo")
    public Result useInfo(HttpServletRequest request) throws Exception {
        String token = request.getParameter("token");
        Map<String, Object> result = new HashMap<>(8);
        ArrayList roles = new ArrayList<>();
        String allowableToken = "admin-token";
        if (token.equals(allowableToken)) {
            roles.add("admin");
            result.put("roles", roles);
            result.put("introduction", "我是超级管理员");
            result.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        }
        return Result.success(result);
    }

重启应用，可以正常登录。

6. 后端-实现 /logout 接口

最后再补充一个退出登录的接口。

@PostMapping("/logout")
    public Result logout() throws Exception {
        return Result.success();
    }

重启测试，点击头像悬浮展示的logout，成功退出到登录页。

四、小结

本篇内容主要是前后环境调通，以及基础登录的实现，后续就可以正常先进行重要功能的开发了。

附上之前整理的 mybatis-plus 的学习笔记，简单明了易上手，仅供参考。

【mybatis-plus】CRUD必备良药，mybatis的好搭档

【mybatis-plus】主键id生成、字段自动填充

【mybatis-plus】什么是乐观锁？如何实现“乐观锁”

【mybatis-plus】分页、逻辑删除

【mybatis-plus】条件查询

希望大家以后多多支持编程网！

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: springboot vue测试平台开发调通前后端环境实现登录

本文链接: https://www.lsjlt.com/news/149956.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

springboot vue测试平台开发调通前后端环境实现登录

目录基于 springboot+vue的测试平台开发一、前端环境搭建快速安装二、后端环境搭建创建应用配置 application.properties三、实现登录1. mysql 建...

99+

2024-04-02
springboot vue测试平台接口定义前后端新增功能实现

目录基于 springboot+vue 的测试平台一、后端部分二、前端部分1. rest参数2. 请求体3. 请求参数4. 请求接口基于 springboot+vue 的测试平台开...

99+

2024-04-02
springboot vue测试平台接口定义前后端新增功能如何实现

这篇文章主要介绍“springboot vue测试平台接口定义前后端新增功能如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“springboot vue测试平台接口定义前后...

99+

2023-06-30
springboot vue测试平台接口定义前后端新增功能怎么实现

这篇文章主要讲解了“springboot vue测试平台接口定义前后端新增功能怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“springboot vue测试平台接...

99+

2023-07-06
测试平台开发vue组件化重构前端代码

目录基于 springboot+vue 的测试平台开发一、为什么重构二、如何拆分1. 补充对应知识2. 合理拆分三、关于项目基于 springboot+vue 的测试平台开发继续更...

99+

2024-04-02
springboot+VUE前后端分离实现疫情防疫平台JAVA

目录主要模块：系统主要实现如下：登录之后进入系统首页：目前系统主要功能如下用户管理模块：用户添加、修改、删除、查询等基本操作角色管理模块、通过用户绑定角色、角色控制菜单显示、灵活控制...

99+

2024-04-02
SpringBoot框架实现切换启动开发环境和测试环境

目录SpringBoot框架切换启动开发环境和测试环境目录结构1.在pom.xml文件中添加插件2.添加配置文件application.yml3.添加测试环境的配置文件applica...

99+

2024-04-02
springboot vue接口测试前后端实现模块树列表功能

目录基于 springboot+vue 的测试平台一、存放接口的js文件二、在vue文件中调用接口1. 触发接口2. 调用接口三、实现选择项目功能1. 后端增加获取所有项目接口2. ...

99+

2024-04-02
如何用SpringBoot框架实现切换启动开发环境和测试环境

本篇内容介绍了“如何用SpringBoot框架实现切换启动开发环境和测试环境”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！SpringBoo...

99+

2023-06-21
springboot vue测试平台接口定义及发送请求功能实现

目录基于 springboot+vue 的测试平台开发一、http客户端选型二、后端接口实现1. controller 层2. service 层三、前端实现四、修改遗留 bug基于...

99+

2024-04-02
vue+springboot前后端分离如何实现单点登录跨域问题

这篇文章主要介绍vue+springboot前后端分离如何实现单点登录跨域问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！代码如下：@Configuration public&nb...

99+

2024-04-02
springboot vue测试平台接口定义及发送请求功能如何实现

这篇文章主要介绍了springboot vue测试平台接口定义及发送请求功能如何实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇springboot vue测试平台接口定义及发送请求功能如...

99+

2023-06-30
基于Java+SpringBoot+Vue前后端分离剧本杀服务平台设计和实现

博主介绍：✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联...

99+

2023-09-01

java spring boot vue.js 剧本杀管理系统剧本杀平台原力计划
基于Java+SpringBoot+Vue前后端分离青年公寓服务平台设计和实现

博主介绍：✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获...

99+

2023-09-11

java spring boot vue.js 青年公寓服务平台原力计划
基于Java+SpringBoot+Vue前后端分离社区智慧养老监护管理平台设计和实现

博主介绍：✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联...

99+

2023-09-01

java spring boot vue.js 社区智慧养老监护管理平台原力计划