当前位置：移动技术网 > IT编程>开发语言>Java > [SpringBoot——Web开发（使用Thymeleaf模板引擎）]

[SpringBoot——Web开发（使用Thymeleaf模板引擎）]

2019年09月16日 | 移动技术网IT编程 | 我要评论

【文字只能描述片段信息，具体细节参考代码】

https://github.com/hcj-shadow/springbootplus

1568622970099

引入pom依赖

 <properties>
        <java.version>1.8</java.version>
        <thymeleaf.version>3.0.11.release</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

  <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-thymeleaf</artifactid>
        </dependency>

记坑thymeleaf无法跳转：https://blog.csdn.net/qq_40754146/article/details/95411413

将html页面放于classpath：template/下，thymeleaf就可自动渲染。

1568278442041

启动：

注：如果static下有文件，系统会优先访问static下的。

1568278504902

设置thymeleaf页面跳转

新建一个controller

1568279494618

在templates下新建一个thymeleaf.html

1568279520276

访问：http://www.lhsxpumps.com/_localhost:8080/thymeleaf

1568279447464

thymeleaf crud测试

基础环境准备：

- 引入数据库相关pom依赖

  <dependency>
            <groupid>org.mybatis.spring.boot</groupid>
            <artifactid>mybatis-spring-boot-starter</artifactid>
            <version>2.1.0</version>
        </dependency>

        <dependency>
            <groupid>mysql</groupid>
            <artifactid>mysql-connector-java</artifactid>
            <scope>runtime</scope>
        </dependency>

- 引入bootstrap依赖

 <!--引入bootstrap-->
        <dependency>
            <groupid>org.webjars</groupid>
            <artifactid>bootstrap</artifactid>
            <version>4.0.0</version>
        </dependency>
        
        
  页面引用：
   <link  th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

- 引入pageshelper插件

 <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
        <dependency>
            <groupid>com.github.pagehelper</groupid>
            <artifactid>pagehelper-spring-boot-starter</artifactid>
            <version>1.2.5</version>
        </dependency>

配置yaml

pagehelper:
  helperdialect: mysql
  reasonable: true
  supportmethodsarguments: true
  pagesizezero: false #pagesize=0

1.创建数据库表

1568294907692

2.创建bean适配数据表

1568295098039

package zkkrun.top.web.bean;

import java.io.serializable;

public class userinfo implements serializable {

    private integer id;
    private string username;
    private string password;
    private integer age;
    private string email;

    public userinfo() {
    }

    public userinfo(integer id, string username, string password, integer age, string email) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.email = email;
    }

    public integer getid() {
        return id;
    }

    public void setid(integer id) {
        this.id = id;
    }

    public string getusername() {
        return username;
    }

    public void setusername(string username) {
        this.username = username;
    }

    public string getpassword() {
        return password;
    }

    public void setpassword(string password) {
        this.password = password;
    }

    public integer getage() {
        return age;
    }

    public void setage(integer age) {
        this.age = age;
    }

    public string getemail() {
        return email;
    }

    public void setemail(string email) {
        this.email = email;
    }

    @override
    public string tostring() {
        return "userinfo{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                ", email='" + email + '\'' +
                '}';
    }
}

3.yaml配置数据源

spring:
  datasource:
    #   数据源基本配置
    username: noneplus1
    password: noneplus564925080!1
    driver-class-name: com.mysql.jdbc.driver
    url: jdbc:mysql://47.113.6.247:3306/user?servertimezone=utc

4.创建mapper接口，使用注解版mybatis

package zkrun.top.web.mapper;

import org.apache.ibatis.annotations.delete;
import org.apache.ibatis.annotations.insert;
import org.apache.ibatis.annotations.select;
import org.apache.ibatis.annotations.update;
import org.springframework.stereotype.repository;
import zkrun.top.web.bean.userinfo;

@repository
public interface userinfomapper {

    @select("select * from user_info where id = #{id}")
    public userinfo getuserbyid(integer id);

    @update("update user_info set username=#{username},password=#{password},age=#{age},email=#{email} where id=#{id}")
    public void updateuser(userinfo userinfo);

    @delete("delete from user_info where id=#{id}")
    public void deleteuserbyid(integer id);

    @insert("insert into user_info(username,password,age,email) values(#{username},#{password},#{age},#{email})")
    public void insertuser(userinfo userinfo);

}

使用mapperscan扫描mapper接口所在包

@mapperscan("zkrun.top.web.mapper")

5.测试数据库

批量插入数据

package zkrun.top.web;

import org.junit.test;
import org.junit.runner.runwith;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.boot.test.context.springboottest;
import org.springframework.test.context.junit4.springrunner;
import zkrun.top.web.bean.userinfo;
import zkrun.top.web.mapper.userinfomapper;

import java.util.uuid;

@runwith(springrunner.class)
@springboottest
public class webapplicationtests {

    @autowired
    userinfomapper userinfomapper;
    @test
    public void contextloads() {

        userinfo userinfo = userinfomapper.getuserbyid(1);
        system.out.println(userinfo);

    }

    @test
    public void insertdatas() {

        for(int i =0;i<1000;i++)
        {
            userinfo userinfo = new userinfo(i+2,uuid.randomuuid().tostring().substring(0,8),"123456789",(integer) (i+50)/3,"@sina.com");
            userinfomapper.insertuser(userinfo);
        }
        system.out.println("插入成功！");

    }

}

1568297909179

显示信息列表

取消thymeleaf缓存

spring:
  thymeleaf:
    cache: false

ctrl+shift+f9刷新

1.userinfomapper增加sql查询，获取所有信息

1568363383334

@select("select * from user_info")
    public list<userinfo> getusers();

2.创建crudcontroller，使用pagehelper插件分页

1568363460490

@controller
public class crudcontroller {

    @autowired
    userinfomapper userinfomapper;

    @requestmapping("/crud")
    public string crud(@requestparam(defaultvalue = "1") int pagenum,
                       @requestparam(defaultvalue = "10") int pagesize,
                       model model)
    {
        //默认查询所有信息
        pagehelper.startpage(pagenum,pagesize);
        pageinfo<userinfo> pageinfo = new pageinfo<userinfo>(userinfomapper.getusers());
        model.addattribute("pageinfo",pageinfo);
        return "crud";
    }


}

pagenum,pagesize表示起始页和每页显示的数据量，通过@requestparam参数将默认值设为1和10，方便设置下一页和上一页跳转。
pagehelper.startpage(pagenum,pagesize);设置起始页和每页显示的数据量
pageinfo pageinfo = new pageinfo(userinfomapper.getusers());将查询到的数据赋给pageinfo对象
model.addattribute("pageinfo",pageinfo);将pageinfo传输进页面

3.thymeleaf通过表达式适配数据

<table class="table">
    <tr>
        <th>id</th>
        <th>username</th>
        <th>password</th>
        <th>age</th>
        <th>email</th>
    </tr>
    <tr th:each="user:${pageinfo.list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.age}"></td>
        <td th:text="${user.email}"></td>
    </tr>
</table>

<ul class="pagination" style="margin-left: 50%">
    <li class="page-item"><a class="page-link"><span th:text="第+${pageinfo.pagenum}+页"></span></a></li>
    <li class="page-item"><a class="page-link" th:href="@{/crud}">首页</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/crud(pagenum=${pageinfo.pages})}">尾页</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/crud(pagenum=${pageinfo.prepage})}">last</a></li>
    <li class="page-item"><a class="page-link" th:href="@{/crud(pagenum=${pageinfo.getnextpage()})}">next</a></li>
</ul>

访问http://www.lhsxpumps.com/_localhost:8080/crud

1568364289542

删除信息

controller

//删除
    @requestmapping("/delete")
    public string delete(int id) {
        userinfomapper.deleteuserbyid(id);
        return "redirect:/user";
    }

userinfomapper

 @delete("delete from user_info where id=#{id}")
    public void deleteuserbyid(integer id);

在页面添加一个按钮

   <button type="button" class="btn btn-danger"><a style="color: aliceblue" th:href="@{/delete(id=${user.id})}">删除</a></button>

修改和添加信息

先跳转到修改或者添加页面，再进行表单提交

修改

//点击修改按钮，跳转到修改页面，回显信息
    @requestmapping("/modify")
    public string modify(int id ,model model) {
        model.addattribute("oneinfo",userinfomapper.getuserbyid(id));
        return "modify";
    }

    //提交修改信息
    @requestmapping("/modifycommit")
    public string modify(userinfo userinfo) {
        system.out.println(userinfo);
        userinfomapper.updateuser(userinfo);
        system.out.println("修改提交.");
        return "redirect:/user";
    }

主页添加一个修改按钮

 <button type="button" class="btn btn-primary"><a style="color: aliceblue" th:href="@{/modify(id=${user.id})}">修改</a></button>

响应上述第一个请求，跳转到modify页面

modify页面

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>modify</title>
    <link  th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
</head>
<body>
<div style="width: 50%;margin-left: 25%;margin-top: 5%">
    <h1>修改</h1>
    <form class="form-horizontal" th:action="@{/modifycommit}">
        <input name="id" class="form-control"  th:value="${oneinfo.getid()}" style="display: none">
        <div class="form-group">
            <label  class="col-sm-2 control-label">username</label>
            <div class="col-sm-10">
                <input name="username" class="form-control" id="username" placeholder="username" th:value="${oneinfo.getusername()}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">password</label>
            <div class="col-sm-10">
                <input name="password" class="form-control" id="inputpassword3" placeholder="password" th:value="${oneinfo.getpassword()}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">age</label>
            <div class="col-sm-10">
                <input name="age" class="form-control" id="age" placeholder="age" th:value="${oneinfo.getage()}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">email</label>
            <div class="col-sm-10">
                <input name="email" class="form-control" id="inputemail3" placeholder="email" th:value="${oneinfo.getemail()}">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

其中modify表的action响应修改表的提交操作

添加

同理，跳转到添加页面，再进行表单提交

controller

    //添加:1.跳转到添加页面
    @requestmapping("/add1")
    public string add1() {
        return "add";
    }

    //添加 ： 2.提交信息
    @requestmapping("/add2")
    public string add2(userinfo userinfo) {
        system.out.println(userinfo);
        userinfomapper.insertuser(userinfo);
        return "redirect:/user";
    }

添加一个按钮

<button style="margin-left: 75%" type="button" class="btn btn-primary"><a style="color: aliceblue" th:href="@{/add1}">新增</a></button>

添加页面（对比修改页面不需要回显）

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>add</title>
    <link  th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
</head>
<body>
<div style="width: 50%;margin-left: 25%;margin-top: 5%">
<h1>添加</h1>
<form class="form-horizontal" th:action="@{/add2}">
    <div class="form-group">
        <label  class="col-sm-2 control-label">username</label>
        <div class="col-sm-10">
            <input name="username" class="form-control" id="username" placeholder="username">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">password</label>
        <div class="col-sm-10">
            <input name="password" class="form-control" id="inputpassword3" placeholder="password">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">age</label>
        <div class="col-sm-10">
            <input name="age" class="form-control" id="age" placeholder="age">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">email</label>
        <div class="col-sm-10">
            <input name="email" class="form-control" id="inputemail3" placeholder="email">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </div>
</form>
</div>
</body>
</html>

测试

插入500条测试数据

 @test
    public void insertdatas() {

        system.out.println("开始插入...");

        for(int i =1;i<500;i++)
        {
            userinfo userinfo = new userinfo(i,uuid.randomuuid().tostring().substring(0,8),"123456789",(integer) (i+50)/3,"@sina.com");
            userinfomapper.insertuser(userinfo);
        }
        system.out.println("插入成功！");

    }

1568622618710

1568622635243

显示信息列表

1568622681593

修改

1568622720898

1568622745911

添加

1568622797540

1568622789735

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

关于项目打成jar包并发布到云服务器上

人狠话不多，社会你狗哥！！！直接来干货把项目达成jar包idea打包思路流程1. 找个idea中的终端窗口2. ... [阅读全文]
apache配置基于域名访问

编辑配置文件，注释掉directory文件，一共四个vim /etc/httpd/conf/httpd.conf... [阅读全文]
SpringBoot项目部署到服务器之 Liunx环境安装jdk详细步骤

一、CentOS7 安装JDK1.服务器安装JDK之前，先确保有没有默认安装JDK，执行以下命令进行检查java... [阅读全文]
荐【Linux】循序渐进学运维-服务篇-ssh服务入门

大家好，我是高胜寒，本文是Linux运维-循序渐进学运维-服务篇的第3篇文章文章目录前言1. 什么是SSH？2.... [阅读全文]
三星Galaxy Fold 2获得3C认证：支持双模5G

三星Galaxy Fold 2在7月3日通过了3C认证，认证信息显示其将支持5G网络，配备一个最高25W 的快充... [阅读全文]
云计算

5G云计算内容动态自组织网库（SON）用于满足低时延高可靠场景，优点在部署灵活，支持多跳，高可靠性，支持超高带宽... [阅读全文]
揭开5G面纱

揭开5G面纱5G定义移动通信技术是具有代际演进规律的，G代表一代，每十年一个周期，5G即是第五代通信技术。G的发... [阅读全文]
了解5G

了解5G什么是GG代表一代，每十年一个周期发展历程1G–1980sAMPS2G–1990s2G:GSM、I... [阅读全文]
5G时代的来临——揭开5G神秘面纱

一、移动通信发展历程G代表一代每10年一个周期5G：第五代通信技术1G2G3G4G5G1980s1990s200... [阅读全文]
2020共识纪元 | 锐角云分布式存储区块链峰会即将开启

随着区块链上升为国家上战略，区块链赋能实体将进入全新高度，凭借公开透明、不可篡改、去中心自组织等技术特征，渗透应... [阅读全文]

网友评论


验证码：

[SpringBoot——Web开发（使用Thymeleaf模板引擎）]

2019年09月16日 | 移动技术网IT编程 | 我要评论

【文字只能描述片段信息，具体细节参考代码】

引入pom依赖

设置thymeleaf页面跳转

thymeleaf crud测试

基础环境准备：

- 引入数据库相关pom依赖

- 引入bootstrap依赖

- 引入pageshelper插件

显示信息列表

1.userinfomapper增加sql查询，获取所有信息

2.创建crudcontroller，使用pagehelper插件分页

3.thymeleaf通过表达式适配数据

访问http://www.lhsxpumps.com/_localhost:8080/crud

删除信息

修改和添加信息

修改

添加

测试

插入500条测试数据

显示信息列表

修改

添加

您可能感兴趣的文章:

相关文章:

网友评论