一、生成项目
二、代码实现
后端
build.gradle
新建UserController
业务层接口UserRepository
实现类
user实体类
前端
application.properties
footer.html
header.html
首页 list.html
详情页 view.html
修改新增页面 form.html
三、运行测试
一、生成项目
使用spring官方提供的spring initializr来生成项目,如图
然后导入到eclipse中,(前提是电脑安装配置了gradle,eclipse配置了gradle)
二、代码实现
后端
build.gradle
// buildscript 代码块中脚本优先执行
buildscript {
// ext 用于定义动态属性
ext {
springBootVersion = '1.5.2.RELEASE'
}
// 自定义 Thymeleaf 和 Thymeleaf Layout Dialect 的版本
ext['thymeleaf.version'] = '3.0.3.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.2.0'
// 使用了 Maven 的中央仓库(你也可以指定其他仓库)
repositories {
//mavenCentral()
maven {
url 'http://maven.aliyun.com/nexus/content/groups/public/'
}
}
// 依赖关系
dependencies {
// classpath 声明说明了在执行其余的脚本时,ClassLoader 可以使用这些依赖项
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
// 使用插件
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
// 打包的类型为 jar,并指定了生成的打包的文件名称和版本
jar {
baseName = 'thymeleaf-in-action'
version = '1.0.0'
}
// 指定编译 .java 文件的 JDK 版本
sourceCompatibility = 1.8
// 默认使用了 Maven 的中央仓库。这里改用自定义的镜像库
repositories {
//mavenCentral()
maven {
url 'http://maven.aliyun.com/nexus/content/groups/public/'
}
}
// 依赖关系
dependencies {
// 该依赖对于编译发行是必须的
compile('org.springframework.boot:spring-boot-starter-web')
// 添加 Thymeleaf 的依赖
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
// 该依赖对于编译测试是必须的,默认包含编译产品依赖和编译时依
testCompile('org.springframework.boot:spring-boot-starter-test')
}
新建UserController
@RestController //相当于@Controller 和 @ResponseBody
@RequestMapping("/users")
public class UserController {
@Autowired
private UserRepository userRepository;
/**
* 从 用户存储库 获取用户列表
* @return
*/
private List<User> getUserlist() {
return userRepository.listUser();
}
/**
* 查询所用用户
* @return
*/
@GetMapping //相当于 @RequestMapping(method={GET})
public ModelAndView list(Model model) {
model.addAttribute("userList", getUserlist());
model.addAttribute("title", "用户管理");
return new ModelAndView("users/list", "userModel", model);
}
/**
* 根据id查询用户
* @param message
* @return
*/
@GetMapping("{id}")
public ModelAndView view(@PathVariable("id") Long id, Model model) {
User user = userRepository.getUserById(id);
model.addAttribute("user", user);
model.addAttribute("title", "查看用户");
return new ModelAndView("users/view", "userModel", model);
}
/**
* 获取 form 表单页面
* @param user
* @return
*/
@GetMapping("/form")
public ModelAndView createForm(Model model) {
model.addAttribute("user", new User());
model.addAttribute("title", "创建用户");
return new ModelAndView("users/form", "userModel", model);
}
/**
* 新建用户
* @param user
* @param result
* @param redirect
* @return
*/
@PostMapping
public ModelAndView create(User user) {
user = userRepository.saveOrUpateUser(user);
return new ModelAndView("redirect:/users");
}
/**
* 删除用户
* @param id
* @return
*/
@GetMapping(value = "delete/{id}")
public ModelAndView delete(@PathVariable("id") Long id, Model model) {
userRepository.deleteUser(id);
model.addAttribute("userList", getUserlist());
model.addAttribute("title", "删除用户");
return new ModelAndView("users/list", "userModel", model);
}
/**
* 修改用户
* @param user
* @return
*/
@GetMapping(value = "modify/{id}")
public ModelAndView modifyForm(@PathVariable("id") Long id, Model model) {
User user = userRepository.getUserById(id);
model.addAttribute("user", user);
model.addAttribute("title", "修改用户");
return new ModelAndView("users/form", "userModel", model);
}
}
业务层接口UserRepository
public interface UserRepository {
/**
* 新增或者修改用户
* @param user
* @return
*/
User saveOrUpateUser(User user);
/**
* 删除用户
* @param id
*/
void deleteUser(Long id);
/**
* 根据用户id获取用户
* @param id
* @return
*/
User getUserById(Long id);
/**
* 获取所有用户的列表
* @return
*/
List<User> listUser();
}
实现类
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import java.util.concurrent.atomic.AtomicLong;
@Repository
public class UserRepositoryImpl implements UserRepository {
private static AtomicLong counter = new AtomicLong();
private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<Long, User>();
public UserRepositoryImpl(){
User user = new User();
user.setAge(30);
user.setName("mmall");
this.saveOrUpateUser(user);
}
@Override
public User saveOrUpateUser(User user) {
Long id = user.getId();
if (id <= 0) {
id = counter.incrementAndGet(); //如果没有id,说明是save操作,生成一个递增的id
user.setId(id);
}
this.userMap.put(id, user);
return user;
}
@Override
public void deleteUser(Long id) {
this.userMap.remove(id);
}
@Override
public User getUserById(Long id) {
return this.userMap.get(id);
}
@Override
public List<User> listUser() {
return new ArrayList<User>(this.userMap.values());
}
}
user实体类
public class User {
private long id; // 用户的唯一标识
private String name;
private int age;
public User() {
}
public User(String name, int age) {
this.name = name;
this.age = age;
}
前端
如图所示:ico图标发放在static目录下,命名为favicon.ico,html文件放在templates下
application.properties
# THYMELEAF
spring.thymeleaf.encoding=UTF-8
# 热部署静态文件
spring.thymeleaf.cache=false
# 使用HTML5标准
spring.thymeleaf.mode=HTML5
footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div data-th-fragment="footer">
<a href="https://www.baidu.com">Welcome to baidu</a>
</div>
</body>
</html>
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div data-th-fragment="header">
<h1>Thymeleaf in action</h1>
<a href="/users">首页</a>
</div>
</body>
</html>
首页 list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <!--引入thymeleaf名称空间 -->
<head>
<title th:text="${userModel.title}">welcome</title>
</head>
<body>
<!-- 引入header -->
<div th:replace="~{fragments/header :: header}">...</div>
<h3 th:text="${userModel.title}">Welcome</h3>
<div>
<a href="/users/form.html">创建用户</a>
</div>
<table border="1">
<thead>
<tr>
<td>ID</td>
<td>Age</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr th:if="${userModel.userList.size()} eq 0">
<td colspan="3">没有用户信息!!</td>
</tr>
<tr th:each="user : ${userModel.userList}"> <!--遍历-->
<td th:text="${user.id}">1</td>
<td th:text="${user.age}">11</td>
<td><a href="view.html" th:href="@{'/users/' + ${user.id}}"
th:text="${user.name}">mmall</a></td>
</tr>
</tbody>
</table>
<div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>
详情页 view.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title th:text="${userModel.title}">users : View</title>
</head>
<body>
<div th:replace="~{fragments/header :: header}">...</div>
<h3 th:text="${userModel.title}">Welcome</h3>
<div>
<a href="/users">返回主页</a>
</div>
<div>
<p><strong>ID:</strong><span id="id" th:text="${userModel.user.id}">123</span></p>
<p><strong>Name:</strong><span id="name" th:text="${userModel.user.name}">mmall</span></p>
<p><strong>Age:</strong><span id="age" th:text="${userModel.user.age}">30</span></p>
</div>
<div>
<a th:href="@{'/users/delete/' + ${userModel.user.id}}">删除 </a>
| <a th:href="@{'/users/modify/' + ${userModel.user.id}}">修改</a>
</div>
<div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>
修改新增页面 form.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title th:text="${userModel.title}">users : View</title>
</head>
<body>
<div th:replace="~{fragments/header :: header}">...</div>
<h3 th:text="${userModel.title}">Welcome</h3>
<div>
<a href="/users">返回主页</a>
</div>
<!-- form表单绑定对象属性,1、直接 th:value= ${userModel.user.id}
2、 th:value="*{name}" 配合 th:object="${userModel.user}" 使用 -->
<form action="/users" method="POST" th:object="${userModel.user}">
<input type="hidden" name="id" th:value="*{id}">
名称:<br>
<input type="text" name="name" th:value="*{name}">
<br>
年龄:<br>
<input type="text" name="age" th:value="*{age}">
<input type="submit" value="提交">
</form>
<div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>
三、运行测试
三种启动方式,
1、dos命令行,项目目录下,运行gradle build,
此时,项目目录下生成 .gradle和build文件夹,build文件夹下libs下有个可执行的jar文件,再用java -jar的命令运行
2、dos命令行,项目目录下运行 gradlew bootrun
3、通过eclipse 以java Application的方式启动运行主程序