博客系统实战——SprintBoot 集成Thymeleaf 实现用户增删查改（含源码）

进来在学习SprintBoot +Thymeleaf +Maven搭建自己的博客系统，故在学习过程中在此记录一下，也希望能给广大正在学习SprintBoot和Thymeleaf的朋友们一个参考。

以下是目录结构：

效果：

 

 1、创建一个Springboot 工程，具体步骤这个网上例子一大把，选择WEB，thymeleaf框架就行了，以下是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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.spring.blog</groupId>
	<artifactId>myblog</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>myblog</name>
	<description>myblog project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<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>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>

	</build>
</project>

2、创建用户类（避免太长省去了get set方法，可下载完整项目）

package com.spring.boot.blog.blog.domain;

/**
 * Created by 龙烨 on 2018/7/16.
 */
public class User {
    private Long id; // 用户的唯一标识
    private String name;
    private String email;

    public User(){//无参数

    }
    public User(Long id,String name,String email){
        this.id=id;
        this.name=name;
        this.email=email;
    }
    
}

3、创建接口及实现方法，应为这里没有连接数据库，故使用内存

package com.spring.boot.blog.blog.repository;

import com.spring.boot.blog.blog.domain.User;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import java.util.concurrent.atomic.AtomicLong;

/**
 * Created by 龙烨 on 2018/7/16.
 */
@Service
public class UserRepositoryImpl implements UserRepository {

    private static AtomicLong counter=new AtomicLong();
    private final ConcurrentMap<Long,User> userMap=new ConcurrentHashMap<>();

    @Override
    public User saveOrUpateUser(User user) {
        Long id=user.getId();
        if(id==null){//新建
            id=counter.incrementAndGet();
            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());
    }
}

4 、创建控制类（避免太长，部分内容，下载源码可查看完整）

@RestController
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserRepository userRepository;
    /**
     * 查询所以用户
     * @param model
     * @return
     */
    @GetMapping
    public ModelAndView list(Model model){
        model.addAttribute("userList",userRepository.listUser());
        model.addAttribute("title","用户管理");
        return new ModelAndView("users/list","userModel",model);
    }

    /**
     * 查询单个用户
     * @param model
     * @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);
    }

    /**
     * 创建表达页面
     * @param model
     * @return
     */
    @GetMapping("/form")
    public ModelAndView createForm( Model model){
        model.addAttribute("user",new User());
        model.addAttribute("title","创建用户");
        return new ModelAndView("users/form","userModel",model);
    }

    @PostMapping
    public ModelAndView saveOrUpdateUser(User user){
        user=userRepository.saveOrUpateUser(user);
        return new ModelAndView("redirect:/users");
    }
}

 5、resources 下创建文件：

application.properties 增加以下内容：

# THYMELEAF
spring.thymeleaf.encoding=UTF-8
# 热部署静态文件
spring.thymeleaf.cache=false
# 使用HTML5标准
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

有点长，简单描述下，完整可自己下载代码：

header.html是公共头部部分

 footer.html 是公共底部部分

在其他页面引入，引用方法：th:replace="~{fragments/header :: header}"

比如form页面：

<!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}">Thymeleaf in  action</h3>
<div>
    <a href="/users">返回主页</a>
</div>
<form action="/users" th: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="email" th:value="*{email}">
    <input type="submit" value="提交">
</form>
<div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>

 

源码下载：源码