前言
本教程需要你有已经安装好了mysql,maven,如果你不确定是否安装好,可以在命令行里输入指令查看
本项目只是跑通从前端web页到后端数据库的一个完整流程,可以作为一个初级框架便于后续扩张功能,和便于初学者理解整个过程是由那些最最基本的代码所实现的,效果如图所示:
当你在text文本框内输入数据时,能够存到本地的数据库。
1.那就从创建一个项目开始吧
打开Idea,选择new project->选择spring boot->创建一个项目(初学者推荐和我创建一样的名字demo3,否则代码中要改一些内容)
创建成功后来到这个界面,添依赖,我们这里选择三个依赖
Spring Web
Spring Data JPA
MySQL Driver
创建成功之后
2.我们在项目主界面org.example.demo3目录下创建如下的四个包(package)
然后我们依照下方图片创建好各种类和html文件(两个前端的html文件放在templates文件夹下面)
ps:service包是负责对前端传进来的数据进行处理再传给mapper层送入数据库的,但是这里不需要对数据进行处理,只需要原装保存数据就好了,所以service包里不需要添加任何内容。
3.依照下方的代码对新建的进行填充:InputController
package org.example.demo3.Controller;
import org.example.demo3.Mapper.InputMapper;
import org.example.demo3.Domain.Input; // 导入 Input 类,用于表示数据
import org.springframework.beans.factory.annotation.Autowired; // 导入 @Autowired 注解,用于自动注入依赖
import org.springframework.stereotype.Controller; // 导入 @Controller 注解,标识该类为 Spring MVC 控制器
import org.springframework.web.bind.annotation.GetMapping; // 导入 @GetMapping 注解,用于处理 GET 请求
import org.springframework.web.bind.annotation.PostMapping; // 导入 @PostMapping 注解,用于处理 POST 请求
import org.springframework.web.bind.annotation.RequestParam; // 导入 @RequestParam 注解,用于将请求参数绑定到方法参数
import org.springframework.web.servlet.ModelAndView; // 导入 ModelAndView 类,用于封装视图和模型数据
@Controller // 标识这是一个控制器类,Spring 会扫描并注册该类作为 MVC 控制器
public class InputController {
@Autowired // 自动注入 InputMapper 对象,Spring 会自动提供该对象的实例
private InputMapper inputMapper; // InputMapper 用于与数据库中的数据表进行操作
@GetMapping("/form") // 处理 /form 的 GET 请求,显示表单页面
public String showForm() {
// 返回视图名称 "form",视图解析器会将其映射到 form.html 页面
return "form"; // 返回表单页面的模板名称
}
@PostMapping("/submit") // 处理 /submit 的 POST 请求,处理表单提交数据
public ModelAndView submitForm(@RequestParam("text") String text) {
// 创建一个新的 Input 对象,表示用户提交的数据
Input input = new Input();
input.setText(text); // 设置 Input 对象的 text 属性为从表单中提交的值
// 调用 InputMapper 的 save 方法,将 Input 对象保存到数据库
inputMapper.save(input);
// 创建 ModelAndView 对象,指定返回的视图名称为 "result"
ModelAndView mav = new ModelAndView("result");
// 将提交成功的消息添加到模型中,消息将在视图中显示
mav.addObject("message", "Data submitted successfully!");
// 返回 ModelAndView 对象,Spring MVC 会渲染 result.html 页面,并显示模型数据
return mav;
}
}
Input
package org.example.demo3.Domain;
import lombok.Data; // 导入 Lombok 的 @Data 注解,用于自动生成 getter、setter、toString、equals、hashCode 方法
@Data // Lombok 注解,自动生成 getter、setter 方法以及其他常用方法
public class Input {
private int id; // 用户 ID,通常是数据库表中的主键,自动递增
private String text; // 用户文本,存储用户提交的文本信息
}
InputMapper
package org.example.demo3.Mapper;
import org.example.demo3.Domain.Input; // 导入 Input 类
import org.apache.ibatis.annotations.Insert; // 导入 @Insert 注解,用于定义插入操作
import org.apache.ibatis.annotations.Mapper; // 导入 @Mapper 注解,标识这是一个 MyBatis 的 Mapper 接口
import org.apache.ibatis.annotations.Select; // 导入 @Select 注解,用于定义查询操作
import java.util.List; // 导入 List 类,用于存储查询结果
@Mapper // 标识这是一个 MyBatis Mapper 接口,Spring 会自动扫描并注册该接口
public interface InputMapper {
@Select("SELECT * FROM input WHERE id = #{id}") // SQL 查询语句,按数据 ID 查询数据
Input getInputById(int id); // 根据数据 ID 查询数据
@Select("SELECT * FROM input") // SQL 查询语句,查询所有数据
List<Input> getAllInputs(); // 查询所有数据并返回一个数据列表
@Insert("INSERT INTO input (text) VALUES (#{text})") // SQL 插入语句,将数据的文本插入到数据库中
void save(Input input); // 保存一个 Input 对象到数据库//当save方法被调用的时候,执行的是上面的insert语句
}
Demo3Application
package org.example.demo3;
import org.springframework.boot.SpringApplication; // 导入 SpringApplication 类,用于启动 Spring Boot 应用
import org.springframework.boot.autoconfigure.SpringBootApplication; // 导入 @SpringBootApplication 注解,标识 Spring Boot 主应用类
@SpringBootApplication // 标识这是一个 Spring Boot 应用的主配置类
public class Demo3Application {
public static void main(String[] args) {
// 启动 Spring Boot 应用
SpringApplication.run(Demo3Application.class, args);
System.out.println("项目启动成功!!!!"); // 控制台输出启动成功的信息
}
}
form.html
<!DOCTYPE html>
<html>
<head>
<title>Submit Form</title> <!-- 网页的标题 -->
</head>
<body>
<!-- 创建一个表单,用于提交数据 -->
<form action="/submit" method="post"> <!-- 表单提交的 URL 和方法 -->
<label for="text">Text:</label> <!-- 输入框标签 -->
<!-- 输入框,用户输入文本,name 属性与表单字段名称匹配 -->
<input type="text" id="text" name="text" required><br><br>
<!-- 提交按钮,点击后提交表单数据 -->
<input type="submit" value="Submit">
</form>
</body>
</html>
result.html
<!DOCTYPE html>
<html>
<head>
<title>Result</title> <!-- 网页的标题 -->
</head>
<body>
<!-- 显示提交结果的消息,使用 Thymeleaf 表达式从模型中获取消息 -->
<h2 th:text="${message}"></h2> <!-- Thymeleaf 会将 ${message} 替换为模型中 "message" 的值 -->
</body>
</html>
application.properties
spring.application.name=demo3
server.port=8081
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yourdatabase?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=把这里改成你的mysql数据库密码!!!//这里填你的mysql数据库的密码
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
mybatis.configuration.map-underscore-to-camel-case=true
thymeleaf.prefix=classpath:/templates/
thymeleaf.suffix=.html
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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<!-- springboot父工程-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.4</version>
<relativePath/>
</parent>
<groupId>org.example</groupId>
<artifactId>springboot_demo2</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- lombok的依赖,能免除get和set方法 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.28</version>
</dependency>
<!-- mybatis的起步依赖 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.3.0</version>
</dependency>
<!-- mysql驱动包依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.7.4</version>
</plugin>
</plugins>
</build>
</project>
全部填充完毕之后直接运行会有一堆报错
4.我们要检查三个地方才能运行
1.修改maven
找到你的idea的系统设置(settings)
把use maven wrapper改成-> 你的maven,如图中蓝色框所示
2.修改你的jdk版本
我在这里需要改成1.8的版本
3.检查数据库
这里以名为yourdatabase里的input表为例
1.创建数据库
这里点击新建查询
输入下方语句
CREATE DATABASE yourdatabase;
就创建成功了yourdatabase表
选中yourdatabase后点击新建查询,输入下方语句
CREATE TABLE input (
id INT AUTO_INCREMENT PRIMARY KEY, -- 主键,自动递增
text VARCHAR(255) NOT NULL -- 文本字段,不允许为空
);
创建成功会如图所示出现input表
2.检查你的数据库连接语句
这里蓝色部分检查是不是yourdatabase,这是所连接的数据库的名字
spring.datasource.password=把这里改成你的mysql数据库密码!!!//这里填你的mysql数据库的密码
这里记得改你的mysql数据库的密码
5.当这些都完成之后就可以运行了。
切换到Demo3Application页面后在这里点击运行
任一浏览器输入端口localhost:8081/form
会出现如下界面
输入数据后
点击submit跳转成功result页面
在刚刚的input表里面检查
数据成功传入!
如果运行报错可以浏览器搜索报错信息,多半是环境配置问题,多多检查。。。尤其是pom.xml文件,后续代码的详细讲解我会整理好后发在另一篇文章。