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即可
• 最終截圖