【项目】手把手带你用 SpringBoot、Uniapp、MySql 开发一个简单的活动报名项目

一、前言和大致功能需求

📖 本篇文章记录一下开发一个简单的活动报名系统的过程。
本文主要介绍大致的过程，也会把代码粘贴出来，但不会教学如何一行一行的写代码。

🔧 需求 ①： 用户用手机扫描二维码后进入报名首页（如下图）

🔧 需求 ②：当用户点击报名通道按钮后跳转到信息填写页面（如下图）

🔧 需求 ③：当用户填写表单内容，并点击提交按钮后，向后台发送信息保存请求（向数据库插入一条数据）。后台把信息保存成功后，用户前端展示下图页面：

🔧 需求 ④：在后台管理系统中能够展示提交了报名资料的用户信息；有后台管理人员的登录和退出页面

🔧 需求 ⑤：同一微信用户报名成功后，第二次扫码的时候展示的是【报名成功页面】

---

❓ 上图罗列了功能中几个大的模块。实际项目中还有很多其他的小细节，我会在后续慢慢罗列。
❓ 该项目中需要获取到用户的 openid（openid 用于唯一标识一个微信用户）
❓ 这个项目不算难，但还是需要花点时间才能完成的。

二、用到的技术

(1) Java

📖 本项目使用 Java 作为主要后台开发语言。（介绍 Java 语言，此处省略5000字…）

(2) MySQL

📖 本项目使用 MySQL 数据库作数据持久化支持（介绍 MySQL 数据库，此处省略5000字…）

(3) Uniapp 前端开发

Uniapp 官网链接

📖 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

📖 博主认为只要会 Vue，使用 Uniapp 开发简直是手到擒来、小菜一碟。

(4) SSM 和 SpringBoot

📖 如果你是 Java 开发者，看到这个标题应该就会一目了然。
📖 SSM：Spring、SpringMVC、MyBatis

📖 本项目用 SpringBoot 开发 Java 后台

三、数据库搭建

📖 前面的都是扯淡😷，现在进行下面开发的第一步：数据库搭建
📖 项目需要一个用户表，用于记录用户需要提交的信息（包括：联系人姓名、联系电话、预约单位、预约人数、预约时间）
📖 在用户表（user）中还需要记录用户提交记录的时间（这在项目开发中是很有必要的）
📖 需要通过 openid 唯一标识某个微信用户

✏️ 获取用户的 openid 在微信公众号开发中还有一个高级的称呼：H5 页面授权（下面的两点是博主个人的理解）

⭐️ H5 网页授权的核心：获取 openid（openid 是每个用户针对每个公众号都会产生的一个安全的，识别用户的，唯一标识用户的字符串，由微信官方提供）
⭐️ 为什么要获取用户的 openid 呢？用于唯一识别一个用户，为了让系统管理员知道是那个微信用户在系统中操作（如：是那个微信用户提交了表单）
⭐️ 为了实现用户第二次登录可以看到【保存成功页面】的功能

📖 综上所述，user 表的字段有：

最终的 SQL 语句如下所示：

CREATE TABLE `bus_user` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'id 主键',
  `name` varchar(15) NOT NULL COMMENT '联系人姓名',
  `phone` char(11) NOT NULL COMMENT '联系人电话',
  `company` varchar(88) NOT NULL COMMENT '预约报名的单位',
  `count` int(3) NOT NULL COMMENT '预约报名的人数',
  `date_time` varchar(50) NOT NULL COMMENT '报名时间',
  `create_time` varchar(50) NOT NULL COMMENT '提交表单的时间',
  `openid` varchar(168) NOT NULL COMMENT '微信用户的唯一标识',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
1
2
3
4
5
6
7
8
9
10
11

❓ 其中涉及到的 date_time 和 create_time 我是按照 varchar 来处理的。后期通过 Java 中的 SimpleDateForamt 来获取当前时间
❓ 没有使用 SQL 中获取当前时间的功能是为了更好得适应不同的数据库版本

四、创建 SpringBoot 项目

(1) 创建

📖 1、在自己电脑上创建一个新的文件夹（用于存放 Java 后台项目的代码）如：pudongBus

📖 2、依次点击 File ➡️ New ➡️ Project（如下图所示），然后进入第3步

📖 3、完成第2步后会看到下图界面。在下图界面中点击 Spring Initializr ，然后按照图片操作即可。【国内镜像地址：https://start.aliyun.com】

📖 4、完成第3步后会进入下图页面，按照图片只是填写即可

📖 5、按照下图指示，只选择 Spring Web 即可

📖 6、第5步之后，选择 SpringBoot 项目所存放的文件夹

📖 7、等待下载 Maven 依赖

📖 8、Maven 依赖加载完毕后的项目文件夹结构如下图所示

📖 上图的一顿操作后，SpringBoot项目就创建完毕了
📖 假如依然有报错，可查看是否有导入（reimport）Maven依赖

(2) 测试

🌼 SpringBoot 项目创建完毕了，现在博主创建一个测试的 Controller，用于体验一下 SpringBoot 项目
🌼 同时判断项目是否真的创建完毕

---

☘️1、在 bus 目录下创建 controller 文件夹和 TestController.java 文件（如下图）

☘️2、在 TestController.java 文件夹中粘贴下面的代码

@RestController
@RequestMapping("/tests")
public class TestController {

    @GetMapping("/test")
    public String test() {
        return "创作不易，请您点赞！Thank you";
    }

}
1
2
3
4
5
6
7
8
9
10

☘️3、进入 BusApplication.java 文件夹中，并点击 main 方法左侧的绿色三角（如下图）此操作是在启动 SpringBoot 项目

☘️4、如有下图所示界面，表示项目启动成功（如果你没有成功，你就百度一下）

☘️5、如有下图所示界面，表示项目启动成功（如果你没有成功，你就百度一下）

☘️6、通过端口号和接口路径测试，如果您是按照我的步骤来的话，您可在浏览器地址栏输入 http://localhost:8080/tests/test进行测试。测试结果若如下图所示，则表示项目创建完全成功！！👏

五、在该项目中集成数据库相关环境

(1) MAVEN 大致介绍

🌾 如果您是初学者，如果您用 JDBC 连接过项目。您应该知道：用 JDBC 连接数据库需要导入 jar 包吧！
🌾 MAVEN 就是帮助开发者管理这些 jar 包的
🌾 您只需要在 pom.xml 文件夹中写上您所需要的 jar 包的名字，您的项目中就自动拥有了这个 jar 包
🌾 有了 MAVEN，妈妈再也不怕我找不到 jar 包了

(2) 覆盖 jar 包版本

📖 用下面的代码覆盖您的项目的 pom.xml 文件的 标签

<properties>
   <java.version>1.8java.version>
   <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
   <project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
   <spring-boot.version>2.3.7.RELEASEspring-boot.version>

   <druid.version>1.2.1druid.version>
   <mybatis-plus.version>3.4.1mybatis-plus.version>
   <mapStruct.version>1.4.1.FinalmapStruct.version>
   <captcha.version>1.6.2captcha.version>
   <commons-io.version>2.7commons-io.version>
properties>
1
2
3
4
5
6
7
8
9
10
11
12

📖 覆盖后如下图所示：

(3) 配置与数据库相关的 jar 包

📖 用下面的代码覆盖您的 pom.xml 文件的 标签

 <dependencies>
     <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-webartifactId>
     dependency>

     <dependency>
         <groupId>org.springframework.bootgroupId>
         <artifactId>spring-boot-starter-testartifactId>
         <scope>testscope>
         <exclusions>
             <exclusion>
                 <groupId>org.junit.vintagegroupId>
                 <artifactId>junit-vintage-engineartifactId>
             exclusion>
         exclusions>
     dependency>

     
     <dependency>
         <groupId>mysqlgroupId>
         <artifactId>mysql-connector-javaartifactId>
     dependency>
     
     <dependency>
         <groupId>com.alibabagroupId>
         <artifactId>druid-spring-boot-starterartifactId>
         <version>${druid.version}version>
     dependency>
     
     <dependency>
         <groupId>com.baomidougroupId>
         <artifactId>mybatis-plus-boot-starterartifactId>
         <version>${mybatis-plus.version}version>
     dependency>
 dependencies>
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

---

📖 上面的代码都覆盖完毕后记得点击下图所示的【Import Changes】，该操作是下载并导入 jar 包

📖 到这儿，数据库相关的所有 jar 包都导入到我们的项目中了

(4) yaml 配置文件

📖 yaml 和 properties 一样，是一种配置文件，是 SpringBoot 非常推荐、和喜欢的一种配置文件
📖 yaml 和 properties 配置同样的内容的时候，yaml 所占用的空间比 properties 所占用的空间少
📖 我们现在创建的项目中默认使用的是 properties 作为配置文件（我不喜欢，SpringBoot 也不喜欢）， 所以我们把它修改一下

---

🌾 目前您的项目的src/main/resources/文件夹中有一个 application.properties 文件（如下图）

🌾 该配置文件中配置两个内容：① 应用名称；② 应用服务 WEB 访问端口（如下图所示）

🌾 第一步：把 application.properties 文件修改为 application.yml 文件。介绍一个简单地、修改文件名的方式：鼠标点击 application.properties 文件，然后按键盘上的【Shift】+【F6】

❓ yml 是 yaml 这种配置文件的文件拓展名

🌾 第二步：上一步完成后，会出现下图所示界面（修改后点击【Refactor】）

🌾 第三步：上面操作后，在 application.yml 配置文件中写代码是没有代码提示的，您需要在您的 pom.xml 文件的标签中加入下面的代码（添加后一定记得刷新 pom.xml 文件）

  
  <dependency>
      <groupId>org.springframework.bootgroupId>
      <artifactId>spring-boot-devtoolsartifactId>
      <scope>providedscope>
  dependency>
1
2
3
4
5
6

🌾 第四步：把下面的代码拷贝到 application.yml 文件中 如果没有学习过 SpringBoot 或 MyBatis，可不用管里面的内容的含义，直接拷贝粘贴即可

spring:
  application:
    name: bus # 配置应用名称
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource # 配置数据库连接池类型
    driver-class-name: com.mysql.cj.jdbc.Driver # 配置 jdbc 驱动
    username: root # 配置数据库用户名（按照你的填写哦）
    password: root # 配置数据库密码（按照你的填写哦）
    url: jdbc:mysql://localhost:3306/pudong_bus?serverTimezone=GMT%2B8&characterEncoding=UTF-8

# 配置服务 WEB 访问端口
server:
  port: 8080

# 配置 mybatis-plus 相关参数
mybatis-plus:
  type-aliases-package: com.handsome.bus.pojo # 配置哪些包下的类会产生别名
  configuration:
    use-generated-keys: true
  global-config:
    db-config:
      id-type: auto # id 自动生成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(5) 三层结构

✒️ 博主简单说明一下 Java Web 开发的三层结构，若有错误，请大佬指正。

📖 Java Web 项目开发有三层结构（如下图）

✏️ 分为3层：Controller（控制层）➡️ Service（服务层）➡️ Mapper（数据库操作层）
✏️客户端会发送请求（通过点击某个按钮、或浏览器输入连接）到服务器的 Controller 层，Controller 层调用 Service 层，Service 层调用 Mapper 层
✏️ Mapper 层操作完数据库后，把操作结果（查询到的数据、删除结果、增加结果等）返回到 Service 层，Service 层对 Mapper 层返回的数据做进一步操作（也可以不做）后把数据返回给 Controller 层，Controller 层对 Service 层返回的数据做进一步操作（也可以不做）后把数据返回到客户端
✏️ 客户端接收到服务器的 Controller 返回的数据后对数据进行美丽地包装，并展示到用户眼👓前

(6) 每一层用到的框架

✒️ 在第 (5) 节中，博主介绍了 Java Web 开发的三层结构：Controller、Service、Mapper
✒️ 国外的开发者们开发了好用的框架供我们在 Java Web 开发的三层中进行使用，下面说明一下 Java Web 开发的三层结构中大致用到了哪些框架。

✒️ 从上图可以看到，在 Java Web 三层结构中，整个项目开发过程中都使用到了 Spring 框架；在 Controller 层额外使用到了 SpringMVC；在 Mapper 层使用到了 MyBatis-Plus 框架（MyBatis-Plus 中包含了 MyBatis）

✒️ 在该项目中，博主认为：您无需掌握具体 Spring、SpringMVC 和 MyBatis 的全部细节。您只需掌握大致流程即可，具体代码我都会提供给您，让您复制。在该项目中，您可以掌握整个报名活动项目的开发全过程，体会一下而已，代码无需完全掌握，当然我也会给予适当的注释，让您不至于特别特别懵。

六、在项目中使用 MyBatis-Plus

📌 再说一遍，读者您只需要在博主的文章中复制代码，把整个项目运行起来，跑起来即可，具体代码作用无需过多纠结。

🌼 接下来，我们在项目中使用 MyBatis-Plus 进行项目的大改变
🌼 这次改变之后，您可以通过在浏览器中输入地址【localhost:8080/users/list】，并回车，进而在浏览器中看到数据库中的数据
🌼 请一定按照我下面的顺序操作：

---

(1) 创建实体对象

📋 我们从数据库查询出来的数据需要被转换为 Java 实体对象
📋 只有转换为 Java 实体对象后，才可以把数据返回给客户端
📋 请在com/handsom/bus文件夹下创建文件夹pojo
📋 pojo文件夹中存放的就是各种实体对象
📋 在pojo文件夹下创建po文件夹，然后再在po文件夹下创建 BusUser.java 类
📋 然后把下面的代码拷贝到 BusUser.java 类中

// 该注解用于自动生成 BusUser 类的 Getter/Setter 等方法
@Data 
public class BusUser {
    private Integer id;
    private String name;
    private String phone;
    private String company;
    private String count;
    private String dateTime;
    private String createTime;
    private String openid;
}
1
2
3
4
5
6
7
8
9
10
11
12

🍉 该类中的属性需要和数据库表 bus_user 里面的自动一一匹配
🍉 数据库表的字段需要是【下划线】标识，在 Java 中需要是小驼峰标识，否则后期查询出来的数据库中的数据无法和实体类中的属性对应，会报错的

🍉 MyBatis（或 MyBatis-Plus）可以自动将从数据库中查询出来的数据的字段映射到实体类中（前提是：Java 实体类的属性是小驼峰命名法；数据库字段是下划线命名法）
🍉 这里进一步体现：Java 中属性的小驼峰命名法和数据库中字段的命名法已经受到了业界的认可

🍉 BusUser 类的顶部有一个@Data注解，它是 lombok 框架中的注解，可以帮助开发者自动生成实体类的构造方法、get 方法、set 方法、toString 方法等。该注解能够被正常使用的前提是：你导入了它的依赖
🍉 把下面的代码拷贝到您的 pom.xml 文件的 标签中即可（一定要记得刷新 MAVEN，不然等于没有导入）

  
  <dependency>
      <groupId>org.projectlombokgroupId>
      <artifactId>lombokartifactId>
      <scope>providedscope>
  dependency>
1
2
3
4
5
6

(2) 构建 MyBatis-Plus 继承实现体系

✏️ ① 创建 mapper 文件夹，然后在 mapper 文件夹创建 BusUserMapper.java 文件【记住 BusUserMapper.java 是一个接口】，并在BusUserMapper.java 文件中写入下面的代码

public interface BusUserMapper extends BaseMapper<BusUser> {
}
1
2

✒️ 上面代码中继承的 BaseMapper 接口来自于 MyBatis-Plus 框架【继承了 MyBatis-Plus 中的接口，则必然要提供一个实现类来实现该接口中的抽象方法（该接口的实现 MyBatis-Plus 也为我们写好了，我们白嫖即可）】

✒️ 在简单的项目中（如：该项目中）BusUserMapper.java文件创建完毕后一般都不会在里面编写代码

---

✏️ ② 在com/handsome/bus/ 文件夹下创建 service 文件夹，然后在 service 文件夹下创建 BusUserService.java 文件【记住 BusUserService.java 是一个接口】，并在BusUserService.java 文件中写入下面的代码

public interface BusUserService extends IService<BusUser> {
}
1
2

✒️ 上面代码中的 IService 也是来自 MyBatis-Plus，白嫖即可

✏️ ③ 在com/handsome/bus/service 文件夹下创建 impl 文件夹，然后在 impl 文件夹下创建 BusUserServiceImpl.java 文件【记住 BusUserServiceImpl.java 是一个类】，并在BusUserServiceImpl.java 文件中写入下面的代码

@Service
public class BusUserServiceImpl extends ServiceImpl<BusUserMapper, BusUser>
        implements BusUserService {
}
1
2
3
4

✒️ ① 上代码中的@Service注解帮助创建 BusUserServiceImpl 对象（简单理解而已，不要深究）
✒️ ② ServiceImpl 类是 MyBatis-Plus 提供的，对 BaseMapper 接口的实现

(3) 创建 Controller，并调用 Service

✏️ 在controller文件夹中创建 BusUserController.java 文件，并在其中粘贴如下的代码

@RestController
@RequestMapping("/users")
public class BusUserController { 
    @Resource
    private BusUserService busUserService;

    @GetMapping("/list")
    public String list() {
        List<BusUser> busUserList = busUserService.list();
        return busUserList.toString();
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12

✒️ ① 粗略理解一下：上面代码中的@RestController用于标识 BusUserController 类的对象的创建和返回类型是 String【实在不知道就暂时死记】
✒️ ② @RequestMapping 指定客户端如何调用（访问）该接口。在浏览器输入【localhost:8080/users】则访问的是 BusUserController 接口；在浏览器输入【localhost:8080/users/list】则访问的是 BusUserController 接口的@GetMapping值是 list 的方法
✒️ ③ 在 BusUserControoler 中需要调用 BusUserService 的代码，通过@Resource注解就可拿到一个 BusUserService 的实现类的对象，就可以调用它里面的方法了
✒️ ④busUserService.list()调用的是 MyBatis-Plus 提供的方法（作用是：查询所有的 bus_user 表中的数据）类似【select * from bus_user】

---

0、首先，手动往 bus_user 表中添加一条测试数据（如下图）

1、OK！😊 全部写完了！现在进入 BusApplication.java 文件中，并点击左侧的绿色三角形运行程序【如果没有报错，则成功了😊】

2、如果无法启动成功，尝试在BusApplication 文件中加入@MapperScan("com.handsome.bus.mapper")

@MapperScan("com.handsome.bus.mapper")
@SpringBootApplication
public class BusApplication {

    public static void main(String[] args) {
        SpringApplication.run(BusApplication.class, args);
    }

}
1
2
3
4
5
6
7
8
9

3、如果运行之后没有报错，请在浏览器中进行测试（如下图），如果你的也有数据展示出来，你就可以得意😊一下了。

七、创建一个全新的前端项目

📖 前面几节中，我们创建了一个 SpringBoot 项目，并可以通过一个 URL 请求到数据库中的数据
📖 但是那个数据库中的数据是我在数据库软件（Navicat）中手动添加的
📖 现在我教您用 uniapp 创建一个简单且漂亮的表单提交页面（类似下图所示）

---

📖 在这里，需要通过 HBuildX 编译器创建一个 uniapp 项目
📖 您可通过https://www.dcloud.io/hbuilderx.html 链接下载 HBuildX【下载它的过程我就不演示了，您自己百度】

📖 您可按照下面的步骤创建一个 uniapp 项目

---

🔑1. 进入 HBuildX 软件，鼠标依次点击【文件】➡️ 【新建】➡️【1.项目】，然后进入步骤2

🔑2. 按照下图指示操作即可（一定要选择第一个【默认模板】，免得有额外的代码）

🔑3. 如看到类似下图的文件夹结构，则项目创建完成

🔑4. 点击编译器顶部的【运行】➡️【运行到浏览器】➡️【Chrome】，并选择一个浏览器查看效果。点击之后，编译器会对代码进行编译，请稍等一会儿，编译完成后，会自动跳转浏览器页面

🔑5. 如出现下图页面，则表示项目初始化成功

---

🍀 前端页面和其他功能，请看下一篇文章…

如有错误，请不吝赐教