由于网页端无法完成post之类的请求，所以增加需要手动增加,这个页面只能进行更改和删除，而且将源码中的端口号改为了8082，在访问网址的时候请注意一下
点击更改按钮
更改完毕后会继续回到index,html界面。点击删除按钮就直接删除所选信息。
创建SpringBoot项目
项目目录
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">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.2</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.csq</groupId>
<artifactId>csqtest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>csqtest</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mybatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.1</version>
</dependency>
<!-- mysql连接器-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!--阿里数据源-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.9</version>
</dependency>
<!-- 获取页面session对象request对象response对象 HttpServletXXX jar包-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
</dependency>
<!-- json转换工具包-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
<scope>runtime</scope>
</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>
<configuration>
<!-- 如果不配置fork，devtools就不会起作用,devtools是前端开发工具-->
<fork>true</fork>
</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">
<!-- form-control给input添加这个class后就会使用bootstrap自带的input框-->
用户名：<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>
<!-- 引入 Bootstrap -->
<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-boot</h1>
<!--table-striped:斑马线格式，table-bordered：带边框的表格，table-hover：鼠标悬停高亮的表格-->
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr style="text-align:center">
<!-- th标签定义html表格中的表头单元格-->
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<!--tr标签定义html表格中的所有行-->
<!-- 遍历集合，如果被遍历的变量users为null或者不存在，则不会进行遍历，也不会报错-->
<tr th:each="user:${users}">
<!-- td标签定义html表格中的标准单元格-->
<td th:text="${user.id}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
<td>
<!-- a标签用来定义超链接 href表示超链接-->
<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">
<!-- rest风格中的更新是put请求，
所以这块先使用post请求，然后隐藏起来改为put请求-->
<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即可，随后点击更新会自动跳转到更新界面
源码链接
源码
建表语句
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
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
