[SpringBoot——Web开发(使用Thymeleaf模板引擎)]
【文字只能描述片段信息,具体细节参考代码】
https://github.com/HCJ-shadow/SpringBootPlus
引入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就可自动渲染。
启动:
注:如果static下有index.html文件,系统会优先访问static下的index.html。
设置Thymeleaf页面跳转
新建一个controller
在templates下新建一个thymeleaf.html
访问:http://localhost:8080/thymeleaf
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.创建数据库表
2.创建bean适配数据表
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("插入成功!");
}
}
显示信息列表
取消thymeleaf缓存
spring:
thymeleaf:
cache: false
ctrl+shift+F9刷新
1.UserInfoMapper增加SQL查询,获取所有信息
@Select("SELECT * FROM user_info")
public List<UserInfo> getUsers();
2.创建CRUDController,使用PageHelper插件分页
@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
删除信息
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("插入成功!");
}
显示信息列表
修改
添加
[SpringBoot——Web开发(使用Thymeleaf模板引擎)]的更多相关文章
- SpringBoot Web开发(4) Thymeleaf模板与freemaker
SpringBoot Web开发(4) Thymeleaf模板与freemaker 一.模板引擎 常用得模板引擎有JSP.Velocity.Freemarker.Thymeleaf SpringBoo ...
- Spring Boot Web开发与thymeleaf模板引擎
简介: 使用Springboot应用,选中需要的模块, Spring已经默认将场景配置好了,只需在配置文件中少量配置就可以运行起来 自己编写业务代码 自动配置原理 这个场景Springboot帮我们配 ...
- Spring Boot Web开发中Thymeleaf模板引擎的使用
这里使用的是idea 1.新建Spring Boot项目 File-->New-->Project...,然后选择左边的Spring Initializr-->Next,可根据自己的 ...
- SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染
在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...
- JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎
上篇博客我们聊了<JavaEE开发之SpringBoot工程的创建.运行与配置>,从上篇博客的内容我们不难看出SpringBoot的便捷.本篇博客我们继续在上篇博客的基础上来看一下Spri ...
- SpringBoot项目的前端+thymeleaf模板引擎
SpringBoot项目创建之后,后台的框架是SpringMVC.但前端的resource和template目录都是空的.这个时候需要创建前台页面. 习惯上,我们会创建JSP,但是,SpringBoo ...
- springboot笔记06——使用Thymeleaf模板引擎
前言 Springboot 推荐使用Thymeleaf做视图层.Thymeleaf支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略 ...
- (二)SpringBoot基础篇- 静态资源的访问及Thymeleaf模板引擎的使用
一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...
- (二)SpringBoot2.0基础篇- 静态资源的访问及Thymeleaf模板引擎的使用
一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...
- SpringBoot:2.SpringBoot整合Thymeleaf模板引擎渲染web视图
在Web开发过程中,Spring Boot可以通过@RestController来返回json数据,那如何渲染Web页面?Spring Boot提供了多种默认渲染html的模板引擎,主要有以下几种: ...
随机推荐
- Sqlserver 查询分组 记录
select b.* from (select a.*,row_number() over (partition by 列1 order by 列2 desc) rn from a) b ; --如需 ...
- Jenkins使用aqua-microscanner-plugin进行容器漏洞扫描
官方地址:https://github.com/jenkinsci/aqua-microscanner-plugin Step1 在jenkins安装"Aqua MicroScanner&q ...
- 小白学Python(8)——pyecharts 入门
简介: pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts ...
- 盘一盘 NIO (一)—— Buffer源码解析
Buffer是个啥? Buffer 即缓冲区,用来暂存输入输出数据的区域.Buffer对象是一份固定数量的数据的容器,实质上是一个数组.但是一个缓冲区不仅仅是一个数组,缓冲区提供了对数据的结构化访问, ...
- 纯 CSS 实现绘制各种三角形(各种角度)
一.前言 三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线.其他边使用border-方向 ...
- SpringBoot 配置 AOP 打印日志
在项目开发中,日志系统是必不可少的,用AOP在Web的请求做入参和出参的参数打印,同时对异常进行日志打印,避免重复的手写日志,完整案例见文末源码. 一.Spring AOP AOP(Aspect-Or ...
- odoo通过actions.client进行自定义页面
一.使用原因 由于odoo自带页面在项目开发过程中无法满足使用,需要使用到动作ir.actions.client进行自定义视图的开发,实现自定义的xml视图开发. 二.实现目标 三.开发过程 1.项目 ...
- windows下 ionic 打包app --以安卓版本为例
环境安装 1.nodejs 安装版本5.7,尽量不要安装太新的版本,因为可能会出现兼容性问题,一开始本人安装的是6.+的版本,后来出现问题的,马上换回5.7的,问题就不会出现了. 安装教程网上教程很多 ...
- EF的3种开发模式
那么明显开发模式是三种. 即:DateBase First(数据库优先).Model First(模型优先)和Code First(代码优先). 当然,如果把Code First模式的两种具体方式独立 ...
- 到底什么是故事点(Story Point)?
故事点是一个度量单位,用于表示完成一个产品待办项或者其他任何某项工作所需的所有工作量的估算结果. 当采用故事点估算时,我们为每个待办项分配一个点数.待办项估算结果的原生数据并不重要,我们只关注最后得到 ...