一步步使用SpringBoot结合Vue实现登录和用户管理功能，2024大厂前端面试题精选

msg: ‘Hello Vue!’

}

}

}

vue-cli会我们的更改进行热更新，再次打开 http://localhost:8080/，界面发生改变：

2、后端项目搭建

---

2.1、后端项目创建

后端项目创建如下：

• 打开Idea, New Project ，选择 Spring Intializr

• 填入项目的相关信息

• SpringBoot版本选择了 2.3.8 , 选择了web 和 MySQL驱动依赖

• 创建完成的项目

• 项目完整pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns=“http://maven.apache.org/POM/4.0.0” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”

xsi:schemaLocation=“http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd”>

4.0.0

org.springframework.boot

spring-boot-starter-parent

2.3.8.RELEASE

cn.fighter3

demo-java

0.0.1-SNAPSHOT

demo-java

Demo project for Spring Boot

<java.version>1.8</java.version>

org.springframework.boot

spring-boot-starter-web

mysql

mysql-connector-java

runtime

org.springframework.boot

spring-boot-starter-test

test

org.junit.vintage

junit-vintage-engine

org.springframework.boot

spring-boot-maven-plugin

2.3、引入MybatisPlus

如果对MybatisPlus不熟悉，入门可以参考 SpringBoot学习笔记（十七：MyBatis-Plus ）

想了解更多可以直接查看官网。

2.3.1、引入MP依赖

com.baomidou

mybatis-plus-boot-starter

3.4.1

由于本实例的数据库表非常简单，只有一个单表，所以这里我们直接将基本的增删改查写出来

2.3.2、数据库创建

数据库设计非常简单，只有一张表。

建表语句如下：

DROP TABLE IF EXISTS user;

CREATE TABLE user (

id int(11) NOT NULL AUTO_INCREMENT,

login_name varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT ‘登录名’,

user_name varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT ‘用户名’,

password varchar(64) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT ‘密码’,

sex varchar(8) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT ‘性别’,

email varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT ‘邮箱’,

address varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT ‘地址’,

PRIMARY KEY (id) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

2.3.3、配置

在application.properties 中写入相关配置：

服务端口号

server.port=8088

数据库连接配置

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.datasource.url=jdbc:mysql://localhost:3306/demo?characterEncoding=utf-8&allowMultiQueries=true&serverTimezone=GMT%2B8

spring.datasource.username=root

spring.datasource.password=root

在启动类里添加 @MapperScan注解，扫描 Mapper 文件夹：

@SpringBootApplication

@MapperScan(“cn.fighter3.mapper”)

public class DemoJavaApplication {

public static void main(String[] args) {

SpringApplication.run(DemoJavaApplication.class, args);

}

}

2.3.3、相关代码

MP提供了代码生成器的功能，可以按模块生成Controller、Service、Mapper、实体类的代码。在数据库表比较多的情况下，能提升开发效率。官网给出了一个Demo，有兴趣的可以自行查看。

• 实体类

/**

• @Author: 三分恶

• @Date: 2021/1/17

• @Description: 用户实体类

**/

@TableName(value = “user”)

public class User {

@TableId(type = IdType.AUTO)

private Integer id;

private String loginName;

private String userName;

private String password;

private String sex;

private String email;

private String address;

//省略getter、setter等

}

• Mapper接口：继承BaseMapper即可

/**

• @Author: 三分恶

• @Date: 2021/1/17

• @Description: TODO

**/

public interface UserMapper extends BaseMapper {

}

OK，到此单表的增删改查功能已经完成了，是不是很简单。

可以写一个单元测试测一下。

2.3.4、单元测试

@SpringBootTest

class UserMapperTest {

@Autowired

UserMapper userMapper;

@Test

@DisplayName(“插入数据”)

public void testInsert(){

User user=new User(“test1”,“test”,“t123”,“男”,“test1@qq.com”,“满都镇”);

Integer id=userMapper.insert(user);

System.out.printf(id.toString());

}

@Test

@DisplayName(“根据id查找”)

public void testSelectById(){

User user=userMapper.selectById(1);

System.out.println(user.toString());

}

@Test

@DisplayName(“查找所有”)

public void testSelectAll(){

List userList=userMapper.selectObjs(null);

System.out.println(userList.size());

}

@Test

@DisplayName(“更新”)

public void testUpdate(){

User user=new User();

user.setId(1);

user.setAddress(“金葫芦镇”);

Integer id=userMapper.updateById(user);

System.out.println(id);

}

@Test

@DisplayName(“删除”)

public void testDelete(){

userMapper.deleteById(1);

}

}

至此前后端项目基本搭建完成，接下来开始进行功能开发。

三、登录功能开发

====================