文档章节

springBoot学习(一):初学Thymeleaf

o
 osc_ogi0qclx
发布于 2019/08/23 11:14
字数 1591
阅读 21
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

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

  使用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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
5.9K
18
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1
ThinkPHP助手

ThinkPHP助手 简介 ThinkPHP助手是运行在本地的ThinkPHP开发辅助性工具,也是本人的初学LAMP的学习成果,基于ThinkPHP+XML,前端采用jQuery和Bootstrap。主要目的是将应用开发过程中的一些繁琐...

朱__朱
2012/11/16
9.2K
2
TBB学习:并行循环

http://www.cppprog.com/2009/0325/92.html

Waiting4you
2009/05/12
672
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在SQL Server中将多行文本合并为单个文本字符串?

问题: Consider a database table holding names, with three rows: 考虑一个包含名称的数据库表,该表具有三行: PeterPaulMary Is there an easy way to turn this into a single str......

富含淀粉
9分钟前
9
0
在JavaScript中生成特定范围内的随机整数? - Generating random whole numbers in JavaScript in a specific range?

问题: 如何可以生成两个指定的变量之间的随机整数在JavaScript中,例如x = 4和y = 8将输出任何的4, 5, 6, 7, 8 ? 解决方案: 参考一: https://stackoom.com/question/6PRz/在JavaScript中...

fyin1314
40分钟前
8
0
Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
今天
23
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部