第一个简单的SpringBoot实现增删改查（带前端界面,超详细）
点击更改按钮
更改完毕后会继续回到index,html界面。点击删除按钮就直接删除所选信息。
创建SpringBoot项目
项目目录
pom.xml文件
<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">
<modelVersion>4.0.0modelVersion>
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.6.2version>
<relativePath/>
parent>
<groupId>com.csqgroupId>
<artifactId>csqtestartifactId>
<version>0.0.1-SNAPSHOTversion>
<name>csqtestname>
<description>Demo project for Spring Bootdescription>
<properties>
<java.version>1.8java.version>
properties>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.mybatis.spring.bootgroupId>
<artifactId>mybatis-spring-boot-starterartifactId>
<version>2.2.1version>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>druidartifactId>
<version>1.1.9version>
dependency>
<dependency>
<groupId>javax.servletgroupId>
<artifactId>javax.servlet-apiartifactId>
<version>3.0.1version>
dependency>
<dependency>
<groupId>com.alibabagroupId>
<artifactId>fastjsonartifactId>
<version>1.2.47version>
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>org.springframework.bootgroupId>
<artifactId>spring-boot-devtoolsartifactId>
<optional>trueoptional>
<scope>runtimescope>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
<configuration>
<fork>truefork>
configuration>
plugin>
plugins>
build>
project>
application.yml文件
spring:
web:
resources:
static-locations: classpath:/static/,classpath:/templates/
datasource:
type: com.alibaba.druid.pool.DruidDataSource
url:地址
username: 账号
password: 密码
driver-class-name: com.mysql.cj.jdbc.Driver
#普通浏览器只能get和post请求，
#所以如果需要其他的请求方式，需要这个，然后隐藏起来
mvc:
hiddenmethod:
filter:
enabled: true
devtools:
restart:
enabled: true #设置开启热部署
freemarker:
cache: false #页面不加载缓存，修改即使生效
mybatis:
configuration:
map-underscore-to-camel-case: true #下划线驼峰设置
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 打印SQL语句
user表
User实体类
public class User {
private Integer id;
private String username;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public User(Integer id,String username,String password) {
this.id=id;
this.username=username;
this.password=password;
}
public User() {
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
Dao层（也就是mapper）
import com.csq.csqtest.pojo.User;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface UserMapper {
//查询全部
@Select("select * from user")
List<User> findAll();
//新增数据
@Insert("insert into user (username,password) values (#{username},#{password})")
public int save(User user);
//删除数据
@Delete("delete from user where id=#{id}")
public int delete(int id);
//根据id查找
@Select("select * from user where id=#{id}")
public User get(int id);
//更新数据
@Update("update user set username=#{username},password=#{password} where id=#{id}")
public int update(User user);
}
Service层
Service接口
import com.csq.csqtest.pojo.User;
import java.util.List;
public interface UserService {
//查询全部
List<User> findAll();
//新增数据
int save(User user);
//删除数据
Integer delete(int id);
//根据id查找
User get(int id);
//更新数据
int update(User user);
}
Service实现类
import com.csq.csqtest.mapper.UserMapper;
import com.csq.csqtest.pojo.User;
import com.csq.csqtest.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAll() {
return userMapper.findAll();
}
@Override
public int save(User user) {
return userMapper.save(user);
}
@Override
public Integer delete(int id) {
return userMapper.delete(id);
}
@Override
public User get(int id) {
return userMapper.get(id);
}
@Override
public int update(User user) {
return userMapper.update(user);
}
}
Controller层
import com.csq.csqtest.pojo.User;
import com.csq.csqtest.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;
//控制层，导入Service层
@Controller
public class UserControl {
@Autowired
private UserService userService;
@GetMapping("/index.html")
public String userList(Map<String,List> result) {
List<User> Users=userService.findAll();
result.put("users",Users);
return "index";
}
//新增数据
@PostMapping("/add")
public String save(User user) {
userService.save(user);
//表示重置index.html界面并且跳转到index.html界面
return "redirect:/index.html";
}
//删除数据,本来需要使用DeleteMapping，但是由于没有界面可以隐藏，所以这里就直接写了RequestMapping
@RequestMapping("/delete/{id}")
public String delete(@PathVariable Integer id, HttpServletResponse servletResponse) throws IOException {
userService.delete(id);
System.out.println("delete方法执行");
return "redirect:/index.html";
}
//根据id进行修改
@GetMapping("/updatePage/{id}")
public String updatePage(Model model,@PathVariable int id){
User users = userService.get(id);
model.addAttribute("users",users);
//表示跳转到modifie,html界面
return "modifie";
}
@PutMapping("/update")
public String updateUser(Model model,User user,HttpServletRequest request) {
String id = request.getParameter("id");
User userById = userService.get(Integer.parseInt(id));
userService.update(user);
System.out.println(user);
return "redirect:/index.html";
}
}
add.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加用户title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div style="width:600px;height:100%;margin-left:270px;">
<form action="/add" method="post">
用户名：<input class="form-control" type="text" th:value="${username}" name="username"><br>
密 码：<input class="form-control" type="text" th:value="${password}" name="password"><br>
<button class="btn btn-primary btn-lg btn-block">保存button>
form>
div>
body>
html>
index.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
head>
<style>
a{
color: #ffffff;
}
h1{
/*文字对齐*/
text-align: center;
}
style>
<body>
<h1>spring-booth1>
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr style="text-align:center">
<th>编号th>
<th>姓名th>
<th>密码th>
<th>操作th>
tr>
thead>
<tr th:each="user:${users}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:text="${user.password}">td>
<td>
<a class="btn btn-primary" th:href="@{'/updatePage/'+${user.id}}">更改a>
<a class="btn btn-danger" th:href="@{'/delete/'+${user.id}}">删除a>
td>
tr>
table>
<button class="btn btn-block" ><a href="/add.html">添加用户a>button>
body>
html>
modifie.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>修改用户title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div style="width:600px;height:100%;margin-left:270px;">
<form action="/update" method="post">
<input name="_method" type="hidden" value="put">
ID：<input class="form-control" type="text" th:value="${users.id}" name="id"><br>
用户名：<input class="form-control" type="text" th:value="${users.username}" name="username"><br>
密 码：<input class="form-control" type="text" th:value="${users.password}" name="password"><br>
<button class="btn btn-primary btn-lg btn-block" type="submit">提交button>
form>
div>
body>
html>
都敲完以后运行起来，直接在网址那里填localhost:8080/index.html即可，随后点击更新会自动跳转到更新界面
源码链接
csqtest
提取码6657
建表语句
CREATE TABLE `user` (
`id` int NOT NULL AUTO_INCREMENT,
`username` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
`password` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=50 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci