[SpringBoot——Web开发(使用Thymeleaf模板引擎…

2019-09-17 10:48:46来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

[SpringBoot——Web开发(使用Thymeleaf模板引擎)]

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

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下有index.html文件,系统会优先访问static下的index.html。

1568278504902

设置Thymeleaf页面跳转


新建一个controller

1568279494618


在templates下新建一个thymeleaf.html

1568279520276


访问:http://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://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


原文链接:https://www.cnblogs.com/noneplus/p/11528129.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【深入浅出-JVM】(76):classloader

下一篇:【深入浅出-口语】(3):自然发音