springBoot学习（一）：初学Thymeleaf

　　这一部分的代码是基于大神的代码，只是原本的代码是有错的，只自己记录一下自己更改之后的代码和自己的理解。

　　使用Spring Initzal创建项目，最后代码结构如下，我对Spring及其相关之事还是全然陌生的，只按自己理解的话，UserController处定义了浏览器接口，resposity文件夹中的两个文件定义了User类的增删查改，这些增删查改的操作又会被前端通过接口访问，这段代码对于想偷懒的我稍稍有点复杂，但是可以看出比较多的知识点：

使用Thymeleaf的过程：

　　1、写代码前的配置

　　　　在pom.xml中添加依赖

<dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

　　　　在application.properties中添加对Thymeleaf的配置

#Thymeleaf

#指定编码方式

spring.thymeleaf.encoding=UTF-8

#热部署静态文件。能够在浏览器中及时看到修改后的效果（开发）

spring.thymeleaf.cache=false

#使用html5标准

spring.thymeleaf.mode=html5

　　2、编写User类和reponsitory里的代码

　　　　User类：这里的成员变量id、name、age都是私有的，但其实我在前端界面直接调用实例的id、name、age好像都可以，并不报错

public class User {

    private Long id;//唯一标识

    private  String name;

    private  Integer age;

    public User() {//无参默认构造器

    }

    public User(Long id, String name, Integer age) {

        this.id = id;

        this.name = name;

        this.age = age;

    }

    public Long getId() {

        return id;

    }

    public void setId(Long id) {

        this.id = id;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public Integer getAge() {

        return age;

    }

    public void setAge(Integer age) {

        this.age = age;

    }

    @Override

    public String toString() {

        return "User{" +

                "id=" + id +

                ", name='" + name + '\'' +

                ", age=" + age +

                '}';

    }

}

User类

　　　　UserRepository接口

import com.example.demo.domain.User;

import java.util.List;

public interface UserRepository {

    User saveOrUpdateUser(User user); //新增或者修改用户

    void deleteUsere(Long id); //删除用户

    User getUserById(Long id); //根据用户id获取用户

    List<User> userList (); //获取所有用户的列表

}

UserRepository接口

　　　　UserRepositoryImpl 类：这里增删查改只是模拟保存，没有涉及到真正的保存，重跑就会丢失数据

import com.example.demo.domain.User;

import org.springframework.stereotype.Repository;

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//用于标识UserRepositoryimpl 类是一个可注入的bean 。

public class UserRepositoryImpl implements UserRepository {

    //用来生成一个递增的id ，作为用户的唯一编号。

    private  static AtomicLong counterId = new AtomicLong();

    //模拟数据的存储，

    private final ConcurrentMap<Long , User> userConcurrentMap =new ConcurrentHashMap<Long,User>();

    @Override

    public User saveOrUpdateUser(User user) {

        Long id =user.getId();

        if (id==null){

            id=counterId.incrementAndGet();

            user.setId(id);

        }

        this.userConcurrentMap.put(id,user);

        return user;

    }

    @Override

    public void deleteUsere(Long id) {

        this.userConcurrentMap.remove(id);

    }

    @Override

    public User getUserById(Long id) {

        return this.userConcurrentMap.get(id);

    }

    @Override

    public List<User> userList() {

        return new ArrayList<User>(this.userConcurrentMap.values());

    }

}

UserRepositoryImpl 类

　　3、前端界面代码

　　　　看这前端的代码数量就知道我为什么嫌弃复杂了，在这里面common文件夹下的明显是可公用的模块（像页眉、页脚这种存在），list是展示所有用户、form界面是新建和编辑用户的可编辑页面，view是进入某个用户的详情页。　　　

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>页脚</title>

</head>

<body>

<div th:fragment="footer">

    <a href="/helloworld">欢迎光临</a>

</div>

</body>

</html>

common/footer.html

common/footer.html：在这里定义了fragment="footer"的片段

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>页头</title>

</head>

<body>

<div th:fragment="header">

    <h1>DemoThymeleaf</h1>

    <a href="/user" th:href="@{~/user/userlist}">首页</a>

</div>

</body>

</html>

common/header.html

common/header.html：在这里定义了fragment="header"的片段

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>用户列表</title>

</head>

<body>

<div th:replace="~{common/header::header}"></div>

<h4 th:text="${userModel.title}">

    渡西湖

</h4>

<div>

    <a href="/user/form" th:href="@{/user/form}">

        新建用户

    </a>

</div>

<table border="2">

    <thead>

    <tr>

        <td>id</td>

        <td>名字</td>

        <td>年龄</td>

        <td>管理</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.getId()}"></td>

        <td><a th:href="@{'/user/'+${user.getId()}}" th:text="${user.getName()}"></a></td>

        <td th:text="${user.getAge()}"></td>

        <td><a th:href="@{'/user/delete/'+${user.getId()}}">删除</a></td>

    </tr>

    </tbody>

</table>

<div th:replace="~{common/footer::footer}"></div>

</body>

</html>

user/list.html

　user/list.html：

1、使用<div th:replace="~{common/header::header}"></div>引用了在commmon/header.html中的片段

　　　2、使用${}获取传入数据

　　　3、使用@{}获取controller中定义的地址

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"

      xmlns:layout= "http://www.ultraq.net.nz/thymeleaf/layout">

<head>

    <meta charset="UTF-8">

    <title>DemoThymeleaf</title>

</head>

<body>

<div th:replace="~{common/header::header}"></div>

<h4 th:text="${userModel.title}"></h4>

<form action="/user" th:action="@{/user}" method="post" th:object="${userModel.user}">

    <input type="hidden" name="id" th:value="*{id}"/>

    名字<br/>

    <input type="text" name="name" th:value="*{name}"/>

    <br/>

    <input type="number" name="age" th:value="*{age}"/>

    <br/>

    <input type="submit" value="提交">

</form>

<div th:replace="~{common/footer::footer}"></div>

</body>

</html>

user/form.html

　user/form.html：这里包含了对form元素的处理，绑定了object，并使用*{}为输入绑定object里面对应的值，可以直接将数据传到后端

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>用户详情</title>

</head>

<body>

<div th:replace="~{common/header::header}"></div>

<h4 th:text="${userModel.title}"></h4>

<div>

    <p><strong>ID:</strong><span th:text="${userModel.user.id}"></span></p>

    <p><strong>名字:</strong><span th:text="${userModel.user.name}"></span></p>

    <p><strong>年龄:</strong><span th:text="${userModel.user.age}"></span></p>

</div>

<div>

    <a th:href="@{'/user/delete/'+${userModel.user.id}}">删除</a>

    <a th:href="@{'/user/edit/'+${userModel.user.id}}">修改</a>

</div>

<div th:replace="~{common/footer::footer}"></div>

</body>

</html>

user/view.html

　　4、controller的编写

import com.example.demo.domain.User;

import com.example.demo.repository.UserRepository;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.*;

import org.springframework.web.servlet.ModelAndView;

@RestController

@RequestMapping("/user")

public class UserController {

    @Autowired

    private UserRepository userRepository;

    //查词所有用户

    @GetMapping("/userlist")

    public ModelAndView userList(Model model){

        model.addAttribute("userList",userRepository.userList());

        model.addAttribute("title","用户管理");

        return  new ModelAndView("user/list","userModel",model);

    }

    //根据id 查询用户

    @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("user/view" ,"userModel",model);

    }

    //获取创建表单页面

    @GetMapping("/form")

    public ModelAndView createForm(Model model){

        model.addAttribute("user",new User());

        model.addAttribute("title","创建用户");

        return new ModelAndView("user/form","userModel",model);

    }

    //保存用户

    @PostMapping

    public ModelAndView saveOrUpdateUser(User user){

        user =userRepository.saveOrUpdateUser(user);

        return new ModelAndView("redirect:/user/userlist");

    }

    //根据id删除用户

    @GetMapping(value = "delete/{id}")

    public ModelAndView delete(@PathVariable("id") Long id){

        userRepository.deleteUsere(id);

        return new ModelAndView("redirect:/user/userlist");

    }

    //修改用户界面

    @GetMapping(value = "edit/{id}")

    public ModelAndView editForm(@PathVariable("id") Long id, Model model){

        User user =userRepository.getUserById(id);

        model.addAttribute("user",user);

        model.addAttribute("title","编辑用户");

        return new ModelAndView("user/form" ,"userModel",model);

    }

}

UserController

　　具体说说，无论是新增用户保存后还是删除用户后都应该跳转回用户列表展示界面，之前代码用的“redirect”，根据别人评论我改成了

"redirect:/user/userlist"，但是也没有去验证之前的写法对不对

    //保存用户

    @PostMapping

    public ModelAndView saveOrUpdateUser(User user){

        user =userRepository.saveOrUpdateUser(user);

        return new ModelAndView("redirect:/user/userlist");

    }

    //根据id删除用户

    @GetMapping(value = "delete/{id}")

    public ModelAndView delete(@PathVariable("id") Long id){

        userRepository.deleteUsere(id);

        return new ModelAndView("redirect:/user/userlist");

    }

运行：运行主程序DemoApplication.java，根据输出所示的端口访问界面，端口一般是8080，则访问http://127.0.0.1:8080/user/userlist

springBoot学习（一）：初学Thymeleaf的更多相关文章

springboot学习日志（二）-- thymeleaf学习
本次学习如何使用thymeleaf以及相关语法1.在上一章写的那样引入jar包到maven工程 <dependency> <groupId>org.springframewo ...
Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客
==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...
尚硅谷springboot学习14-自动配置原理
配置文件能配置哪些属性配置文件能配置的属性参照自动配置的原理 1).SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfiguration 2).@Ena ...
Springboot学习03-SpringMVC自动配置
Springboot学习03-SpringMVC自动配置前言在SpringBoot官网对于SpringMVCde 自动配置介绍 1-原文介绍如下: Spring MVC Auto-configur ...
SpringBoot学习笔记（2）：引入Spring Security
SpringBoot学习笔记(2):用Spring Security来保护你的应用快速开始本指南将引导您完成使用受Spring Security保护的资源创建简单Web应用程序的过程. 参考资料: ...
springboot 学习资源推荐
springboot 是什么?对于构建生产就绪的Spring应用程序有一个看法. Spring Boot优先于配置的惯例,旨在让您尽快启动和运行.(这是springboot的官方介绍) 我们为什么要学 ...
Springboot学习记录1--概念介绍以及环境搭建
摘要:springboot学习记录,环境搭建: 官方文档地址:https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/ht ...
SpringBoot学习笔记
SpringBoot个人感觉比SpringMVC还要好用的一个框架,很多注解配置可以非常灵活的在代码中运用起来: springBoot学习笔记: .一.aop: 新建一个类HttpAspect,类上添 ...
springboot学习（一）——helloworld
以下内容,如有问题,烦请指出,谢谢 springboot出来也很久了,以前零散地学习了不少,不过很长时间了都没有在实际中使用过了,忘了不少,因此要最近准备抽时间系统的学习积累下springboot,给 ...
SpringBoot整合Jsp和Thymeleaf (附工程)
前言本篇文章主要讲述SpringBoot整合Jsp以及SpringBoot整合Thymeleaf,实现一个简单的用户增删改查示例工程.事先说明,有三个项目,两个是单独整合的,一个是将它们整合在一起的 ...

随机推荐

本地计算机上的mysql服务启动停止后,某些服务在未由其他服务或程序使用时将自动停止
C:\Windows\system32>cd C:\Program Files\mysql-8.0.18-winx64\bin\ C:\Program Files\mysql-8.0.18-wi ...
Python Django mysqlclient安装和使用
一.安装mysqlclient 网上看到很过通过命令:pip install mysqlclient 进行安装的教程,但是我却始终安装失败,遇到的错误千奇百怪,后来通过自己下载mysqlclient客 ...
.Dot NET Cored简介
一.诞生原因 1..Net平台封闭. 2.不支持跨平台. 3.受限于Windows平台性能,无法解决高性能场景. 二.优势 1.支持跨平台.开源.系统建设成本低. 2.效率和性能较好. 三.缺点 1. ...
nginx Proxy Cache 配置
总结一下 proxy cache 设置的常用指令及使用方法: proxy_cache proxy_cache zone | off 配置一块公用的内存区域的名称,该区域可以存放缓存的索引数据.注意:z ...
记一次渗透某XX站
0X00 前言团队A师傅发来个站,问我有没有得搞正好在搞其他的站,卡住了,开干换个思路. 0x01 信息收集开burp抓了下包,目标设置了url重写,开了报错,我们随意输入一个控制器就直接报错. ...
stm32 引脚映射和 ADC
老是弄不明白ADC的输入到底在哪,看了stm32F103Ve的datasheet,将引脚和通道的映射关系贴在下面: 好了,写到这,我已经看了中文手册一上午了,可是啥都没看懂,下午接着看,写代码不重要, ...
Vue框架之vuex的使用
1.首先需要在你的项目目录下安装vuex 终端命令: 2.在全局组件中导入与声明vuex 3.创建store实例对象 let store = new Vuex.store({ state:{ }, m ...
Nginx服务优化及优化深入（配置网页缓存时间、日志切割、防盗链等等）
原文:https://blog.51cto.com/11134648/2134389 默认的Nginx安装参数只能提供最基本的服务,还需要调整如网页缓存时间.连接超时.网页压缩等相应参数,才能发挥出服 ...
webpack搭建组件库相关知识
1 .inquirer.js —— 一个用户与命令行交互的工具 2. existsSync 方法说明: 以同步的方法检测目录是否存在. 如果目录存在返回 true ,如果目录不存在返回false语 ...
聊聊MVCC多版本并发控制
一.介绍 MVCC只在RR和RC 2个隔离级别下才能工作.MySQL的大多数事务存储引擎实现的都不是简单的行级锁机制.基于提升并发性能的考虑,它们一般都同时实现了MVCC. 通俗的来讲,MVCC是行级 ...

springBoot学习（一）：初学Thymeleaf

springBoot学习（一）：初学Thymeleaf的更多相关文章

随机推荐

热门专题