Spring boot Mybatis Thymeleaf Spring MVC（1） 实现简单的数据库增删查

1.创建maven项目

• 直接创建maven项目
• 在网上下载空的maven项目（本项目是采取从网上下载）网站链接

       我们先不用管配置文件，后面在统一配置

• 然后导入项目

---

2.配置项目

• 先创建相应的包，我们需要用到的东西有：数据库操作，MVC的映射，所以我们创建以下几个包
  • entity：存储数据库实例对象
  • dao：数据库操作
  • controller：控制
• 在resource文件夹下创建对应的mapper，pages文件夹
  • mapper：存储 mapper.xml文件
  • pages：存储.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 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.2.0.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>MavenDome_6</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>MavenDome_6</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-jdbc</artifactId>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.1.0</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
	</dependencies>


	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

• 配置application.properties文件

#数据库相关配置
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/student?characterEncoding=utf8&serverTimezone=GMT%2B8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root

#thymeleaf相关配置
spring.thymeleaf.prefix=classpath:/pages/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false

#mybatis相关配置
mybatis.typeAliasesPackage=com.example.MavenDome_6.entity
mybatis.mapper-locations=classpath:/mapper/*Mapper.xml

#网站端口配置 
server.port= 8080

• 创建数据库

我创建了一个user的表，主索引是id，字段有name，sex，password

---

3.数据库操作（使用mybatis）

• 根据数据库表的字段创建对应的java

在entity包下创建User.java

package com.example.MavenDome_6.entity;
/**
 * 

* <p>Title: User</p>  

* @author Qiuran  

* @date 2019年10月24日
 */
//用户实体类
public class User {
	// 数据库表中的属性
	private int id;
	private String name;
	private String sex;
	private String password;

	public User(String name, String sex, String password) {
		// 后面要用添加方法，所以写了一个构造函数
		this.name = name;
		this.sex = sex;
		this.password = password;
	}

	// 属性的相关的set/get方法
	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	// 生成的对应的toString方法
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", sex=" + sex + ", password=" + password + "]";
	}
}

• 创建具体的数据库操作类

这里我们使用接口的方式实现，使用在dao下面创建对应的UserDao.java的接口，接口中我们定义以下几个方法

• addUser：添加用户
• deleteUser：删除用户
• seletOne：查询某个用户
• seletAll：查询所有用户

package com.example.MavenDome_6.dao;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.example.MavenDome_6.entity.User;
/**
 * 

* <p>Title: UserDao</p>  

* @author Qiuran  

* @date 2019年10月24日
 */
//mapper 映射
@Mapper
public interface UserDao {
	int addUser(User u);

	int deleteUser(int id);

	User seletOne(int id);

	List<User> seletAll();
}

• 创建对应的xml文件

我们在mapper文件中创建UserDaoMapper.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.MavenDome_6.dao.UserDao">
	<!--在配置文件中有mybatis.typeAliasesPackage=com.entity 所以resultType 中的User不需要写前面的包名 -->
	<select id="seletAll" resultType="User">
		select * from user
	</select>

	<select id="seletOne" parameterType="int" resultType="User">
		select *
		from user where id = #{id}
	</select>

	<delete id="deleteUser" parameterType="int">
		delete from user
		where id
		=#{id}
	</delete>

	<insert id="addUser" parameterType="User">
		insert into user(name,sex,
		password)
		values(#{name},#{sex} ,#{password})
	</insert>
</mapper>

注意：此处id需要与接口（UserDao）的方法名相同

注：如果需要在进行一次封装，则只需要对相应的Dao进行一次封装即可，这里我就不写了

---

4.创建controller，使用Thymeleaf模板，实现网站建设

• 创建对应的controller（实现后台控制）

在controller包下创建UserController.java

package com.example.MavenDome_6.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.MavenDome_6.dao.UserDao;
import com.example.MavenDome_6.entity.User;

/**
 * 

* <p>Title: UserController</p>  

* @author Qiuran  

* @date 2019年10月24日
 */
//控制器
@Controller
public class UserController {
	//自动注入Dao，用来实现数据库的相关操作
	@Autowired
	UserDao userDao;
	
	//网站的映射，创建相关的空的映射，实现网站的跳转
	@RequestMapping("/seletOne")
	public String seletOne() {
		return "seletOne";
	}

	@RequestMapping("/addUser")
	public String addUser() {
		return "addUser";
	}

	@RequestMapping("/deleteOne")
	public String deleteOne() {
		return "deleteOne";
	}
	
	//实现查询所有用户的操作
	@RequestMapping("/index")
	public String seletAll(Model model) {
		List<User> list = userDao.seletAll();
		model.addAttribute("list", list);//使用model保存，与前台进行交互
		return "index";
	}

	//实现查询某个用户
	@RequestMapping("/seletOnePages")
	public String seletOnePages(HttpServletRequest request, Model model) {
		int id = Integer.parseInt(request.getParameter("id"));
		User list = userDao.seletOne(id);
		model.addAttribute("list", list);
		return "seletOne";
	}
	
	//实现添加用户操作
	@RequestMapping("/addUserPages")
	public String addUserPages(HttpServletRequest request, Model model) {
		String name = request.getParameter("name");
		String password = request.getParameter("password");
		String sex = request.getParameter("sex");
		User u = new User(name, sex, password);
		int n = userDao.addUser(u);
		if (n > 0)
			model.addAttribute("message","添加成功");
		else
			model.addAttribute("message","添加失败");
		return "message";//此处返回到消息控制页面
	}
	
	//实现删除用户操作
	@RequestMapping("/deleteOnePages")
	public String deleteOnePages(HttpServletRequest request, Model model) {
		int id = Integer.parseInt(request.getParameter("id"));
		int n = userDao.deleteUser(id);
		if (n > 0)
			model.addAttribute("message","删除成功");
		else
			model.addAttribute("message","删除失败");
		return "message";
	}
}

• 创建相对应的网页前台（使用Thymeleaf）

我们需要以下几个页面：

• addUser：添加用户页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<ul class="nav nav-tabs">
					<li class="active"><a href="index">首页</a></li>
					<li><a href="seletOne">查询</a></li>
					<li class="disabled"><a href="addUser">添加</a></li>
					<li><a href="deleteOne">删除</a></li>
				</ul>
				<h3 class="text-center">添加用户</h3>
				<form class="form-horizontal" role="form" action="addUserPages">
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="name" name="name" />
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">Sex</label>
						<div class="col-sm-10">
							<input type="radio" id="sex" name="sex" value="男" />男 <input
								type="radio" id="sex" name="sex" value="女" />女
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="password"
								name="password" />
						</div>
					</div>

					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="submit" class="btn btn-default">注册</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column">
				<h2>查询用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="seletOne">查询 </a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>添加用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="addUser">添加</a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>删除用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="deleteOne">删除</a>
				</button>
			</div>
		</div>
	</div>
</body>
</html>

 

• deleteOne：删除用户页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
			<ul class="nav nav-tabs">
					<li class="active"><a href="index">首页</a></li>
					<li><a href="seletOne">查询</a></li>
					<li class="disabled"><a href="addUser">添加</a></li>
					<li><a href="deleteOne">删除</a></li>
				</ul>
				<h3 class="text-center">删除用户</h3>
				<form role="form" class="form-inline" action="/deleteOnePages">
					<div class="form-group">
						<label for="exampleInputEmail1">输入id</label> <input type="text"
							class="form-control" id="id" name="id" />
					</div>
					<button type="submit" class="btn btn-default">删除</button>
				</form>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column">
				<h2>查询用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="seletOne">查询 </a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>添加用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="addUser">添加</a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>删除用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="deleteOne">删除</a>
				</button>
			</div>
		</div>
	</div>
</body>
</html>

• index：主页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<ul class="nav nav-tabs">
					<li class="active"><a href="index">首页</a></li>
					<li><a href="seletOne">查询</a></li>
					<li class="disabled"><a href="addUser">添加</a></li>
					<li><a href="deleteOne">删除</a></li>
				</ul>
				<h3 class="text-center">查寻所有用户</h3>
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>密码</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="list:${list}"
							th:class="${list.id%2==0 ? 'success':'info'}">
							<td th:text="${list.id}"></td>
							<td th:text="${list.name}"></td>
							<td th:text="${list.sex}"></td>
							<td th:text="${list.password}"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column">
				<h2>查询用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="seletOne">查询 </a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>添加用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="addUser">添加</a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>删除用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="deleteOne">删除</a>
				</button>
			</div>
		</div>
	</div>
</body>
</html>

• message：消息通知页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<ul class="nav nav-tabs">
					<li class="active"><a href="index">首页</a></li>
					<li><a href="seletOne">查询</a></li>
					<li class="disabled"><a href="addUser">添加</a></li>
					<li><a href="deleteOne">删除</a></li>
				</ul>
				<h3 class="text-center">消息页面</h3>
				<div class="jumbotron">
					<p th:text="${message}"></p>
				</div>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column">
				<h2>查询用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="seletOne">查询 </a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>添加用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="addUser">添加</a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>删除用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="deleteOne">删除</a>
				</button>
			</div>
		</div>
	</div>
</body>
</html>

• seletOne：查询某个用户页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.css"
	rel="stylesheet">
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<ul class="nav nav-tabs">
					<li class="active"><a href="index">首页</a></li>
					<li><a href="seletOne">查询</a></li>
					<li class="disabled"><a href="addUser">添加</a></li>
					<li><a href="deleteOne">删除</a></li>
				</ul>
				<h3 class="text-center">查寻用户</h3>
				<form role="form" class="form-inline" action="/seletOnePages">
					<div class="form-group">
						<label for="exampleInputEmail1">输入id</label> <input type="text"
							class="form-control" id="id" name="id" />
					</div>
					<button type="submit" class="btn btn-default">查询</button>
				</form>
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>密码</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="list:${list}"
							th:class="${list.id%2==0 ? 'success':'info'}">
							<td th:text="${list.id}"></td>
							<td th:text="${list.name}"></td>
							<td th:text="${list.sex}"></td>
							<td th:text="${list.password}"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column">
				<h2>查询用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="seletOne">查询 </a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>添加用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="addUser">添加</a>
				</button>
			</div>
			<div class="col-md-4 column">
				<h2>删除用户</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce
					dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
					ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
					magna mollis euismod. Donec sed odio dui.</p>
				<button type="button" class="btn btn-lg btn-block active">
					<a class="btn" href="deleteOne">删除</a>
				</button>
			</div>
		</div>
	</div>
</body>
</html>

对应的网页创建我使用的是可视化布局系统创建：可视化布局系统

这里我们需要使用的Thymeleaf标签有th:each,th:class,th:text;具体用法我这就不过多赘述，

需要注意的是使用Thymeleaf标签需要在html文件中声明：

<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

使用可视化布局系统，需要导入对应的css文件和Js文件

左边为版本号，右边为网站，进入网站后找到对应的版本号，点击复制然后添加到对应网页上就行了

注意：使用form表单时，action中的地址只需要填写controller文件中的对于的地址即可，像下面那样，直接与UserController的地址一样就能进入后台进行操作。

<form role="form" class="form-inline" action="/seletOnePages">
	<div class="form-group">
		<label for="exampleInputEmail1">输入id</label> 
        <input type="text" class="form-control" id="id" name="id" />
	</div>
	<button type="submit" class="btn btn-default">查询</button>
</form>

 

//实现查询某个用户
	@RequestMapping("/seletOnePages")
	public String seletOnePages(HttpServletRequest request, Model model) {
		int id = Integer.parseInt(request.getParameter("id"));
		User list = userDao.seletOne(id);
		model.addAttribute("list", list);
		return "seletOne";
	}

---

5.程序运行

• 最终的项目目录

• 项目运行，点击MavenDome6Application.java，选择java application运行
• 在网页上输入http://localhost:8080/index即可
• 最终截图