spring boot 视图层与模板引擎
19.1 学习目标与重点提示
学习目标:掌握spring boot视图层与模板引擎的核心概念与使用方法,包括spring boot视图层的基本方法、spring boot与thymeleaf的集成、spring boot与freemarker的集成、spring boot与velocity的集成、spring boot的静态资源管理、spring boot的实际应用场景,学会在实际开发中处理视图层问题。
重点:spring boot视图层的基本方法、spring boot与thymeleaf的集成、spring boot与freemarker的集成、spring boot与velocity的集成、spring boot的静态资源管理、spring boot的实际应用场景。
19.2 spring boot视图层概述
spring boot视图层是指使用spring boot进行web应用开发的方法。
19.2.1 视图层的定义
定义:视图层是指使用spring boot进行web应用开发的方法。
作用:
- 实现web页面的渲染。
- 实现数据的展示。
- 实现用户交互。
✅ 结论:视图层是指使用spring boot进行web应用开发的方法,作用是实现web页面的渲染、数据的展示、用户交互。
19.2.2 视图层的常用组件
定义:视图层的常用组件是指spring boot提供的视图层组件。
组件:
- thymeleaf:用于thymeleaf模板。
- freemarker:用于freemarker模板。
- velocity:用于velocity模板。
✅ 结论:视图层的常用组件包括thymeleaf、freemarker、velocity。
19.3 spring boot与thymeleaf的集成
spring boot与thymeleaf的集成是最常用的视图层方法之一。
19.3.1 集成thymeleaf的步骤
定义:集成thymeleaf的步骤是指使用spring boot与thymeleaf集成的方法。
步骤:
- 在pom.xml文件中添加thymeleaf依赖。
- 在application.properties或application.yml文件中配置thymeleaf。
- 创建实体类。
- 创建repository接口。
- 创建控制器类。
- 创建thymeleaf模板文件。
- 测试应用。
示例:
pom.xml文件中的thymeleaf依赖:
<dependencies>
<!-- web依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-web</artifactid>
</dependency>
<!-- thymeleaf依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-thymeleaf</artifactid>
</dependency>
<!-- data jpa依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-data-jpa</artifactid>
</dependency>
<!-- h2数据库依赖 -->
<dependency>
<groupid>com.h2database</groupid>
<artifactid>h2</artifactid>
<scope>runtime</scope>
</dependency>
<!-- 测试依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-test</artifactid>
<scope>test</scope>
</dependency>
</dependencies>application.properties文件中的thymeleaf配置:
# 服务器端口 server.port=8080 # 数据库连接信息 spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.driver spring.datasource.username=sa spring.datasource.password=password # jpa配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true # h2数据库控制台 spring.h2.console.enabled=true spring.h2.console.path=/h2-console # thymeleaf配置 spring.thymeleaf.cache=false spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html
实体类:
import javax.persistence.*;
@entity
@table(name = "product")
public class product {
@id
@generatedvalue(strategy = generationtype.identity)
private long id;
private string productid;
private string productname;
private double price;
private int sales;
public product() {
}
public product(string productid, string productname, double price, int sales) {
this.productid = productid;
this.productname = productname;
this.price = price;
this.sales = sales;
}
// getter和setter方法
public long getid() {
return id;
}
public void setid(long id) {
this.id = id;
}
public string getproductid() {
return productid;
}
public void setproductid(string productid) {
this.productid = productid;
}
public string getproductname() {
return productname;
}
public void setproductname(string productname) {
this.productname = productname;
}
public double getprice() {
return price;
}
public void setprice(double price) {
this.price = price;
}
public int getsales() {
return sales;
}
public void setsales(int sales) {
this.sales = sales;
}
@override
public string tostring() {
return "product{" +
"id=" + id +
", productid='" + productid + '\'' +
", productname='" + productname + '\'' +
", price=" + price +
", sales=" + sales +
'}';
}
}repository接口:
import org.springframework.data.jpa.repository.jparepository;
import org.springframework.stereotype.repository;
import java.util.list;
@repository
public interface productrepository extends jparepository<product, long> {
list<product> findbysalesgreaterthan(int sales);
}控制器类:
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.controller;
import org.springframework.ui.model;
import org.springframework.web.bind.annotation.*;
import java.util.list;
@controller
@requestmapping("/products")
public class productcontroller {
@autowired
private productrepository productrepository;
@getmapping("/")
public string getallproducts(model model) {
list<product> products = productrepository.findall();
model.addattribute("products", products);
return "products";
}
@postmapping("/")
public string addproduct(@modelattribute product product) {
productrepository.save(product);
return "redirect:/products/";
}
@getmapping("/top-selling")
public string gettopsellingproducts(@requestparam int topn, model model) {
list<product> products = productrepository.findbysalesgreaterthan(0);
products.sort((p1, p2) -> p2.getsales() - p1.getsales());
if (products.size() > topn) {
products = products.sublist(0, topn);
}
model.addattribute("products", products);
return "products";
}
}thymeleaf模板文件(src/main/resources/templates/products.html):
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>产品列表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.add-product {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>产品列表</h1>
<div class="add-product">
<form th:action="@{/products/}" method="post" th:object="${product}">
<label>产品id:</label>
<input type="text" th:field="*{productid}" required>
<label>产品名称:</label>
<input type="text" th:field="*{productname}" required>
<label>价格:</label>
<input type="number" th:field="*{price}" step="0.01" required>
<label>销量:</label>
<input type="number" th:field="*{sales}" required>
<button type="submit">添加产品</button>
</form>
</div>
<div>
<form th:action="@{/products/top-selling}" method="get">
<label>销量top:</label>
<input type="number" name="topn" value="3" min="1" required>
<button type="submit">查询</button>
</form>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品id</th>
<th>产品名称</th>
<th>价格</th>
<th>销量</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${products}">
<td th:text="${product.id}"></td>
<td th:text="${product.productid}"></td>
<td th:text="${product.productname}"></td>
<td th:text="${#numbers.formatdecimal(product.price, 0, 'comma', 2, 'point')}"></td>
<td th:text="${product.sales}"></td>
</tr>
</tbody>
</table>
</body>
</html>测试类:
import org.junit.jupiter.api.test;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.boot.test.context.springboottest;
import org.springframework.boot.test.web.client.testresttemplate;
import org.springframework.boot.web.server.localserverport;
import static org.assertj.core.api.assertions.assertthat;
@springboottest(webenvironment = springboottest.webenvironment.random_port)
class productapplicationtests {
@localserverport
private int port;
@autowired
private testresttemplate resttemplate;
@test
void contextloads() {
}
@test
void testhomepage() {
string response = resttemplate.getforobject("http://localhost:" + port + "/products/", string.class);
assertthat(response).contains("产品列表");
}
}✅ 结论:集成thymeleaf的步骤包括添加thymeleaf依赖、配置thymeleaf、创建实体类、创建repository接口、创建控制器类、创建thymeleaf模板文件、测试应用。
19.4 spring boot与freemarker的集成
spring boot与freemarker的集成是常用的视图层方法之一。
19.4.1 集成freemarker的步骤
定义:集成freemarker的步骤是指使用spring boot与freemarker集成的方法。
步骤:
- 在pom.xml文件中添加freemarker依赖。
- 在application.properties或application.yml文件中配置freemarker。
- 创建实体类。
- 创建repository接口。
- 创建控制器类。
- 创建freemarker模板文件。
- 测试应用。
示例:
pom.xml文件中的freemarker依赖:
<dependencies>
<!-- web依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-web</artifactid>
</dependency>
<!-- freemarker依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-freemarker</artifactid>
</dependency>
<!-- data jpa依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-data-jpa</artifactid>
</dependency>
<!-- h2数据库依赖 -->
<dependency>
<groupid>com.h2database</groupid>
<artifactid>h2</artifactid>
<scope>runtime</scope>
</dependency>
<!-- 测试依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-test</artifactid>
<scope>test</scope>
</dependency>
</dependencies>application.properties文件中的freemarker配置:
# 服务器端口 server.port=8080 # 数据库连接信息 spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.driver spring.datasource.username=sa spring.datasource.password=password # jpa配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true # h2数据库控制台 spring.h2.console.enabled=true spring.h2.console.path=/h2-console # freemarker配置 spring.freemarker.cache=false spring.freemarker.prefix=classpath:/templates/ spring.freemarker.suffix=.ftl
实体类、repository接口、控制器类与集成thymeleaf的示例相同。
freemarker模板文件(src/main/resources/templates/products.ftl):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>产品列表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.add-product {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>产品列表</h1>
<div class="add-product">
<form action="/products/" method="post">
<label>产品id:</label>
<input type="text" name="productid" required>
<label>产品名称:</label>
<input type="text" name="productname" required>
<label>价格:</label>
<input type="number" name="price" step="0.01" required>
<label>销量:</label>
<input type="number" name="sales" required>
<button type="submit">添加产品</button>
</form>
</div>
<div>
<form action="/products/top-selling" method="get">
<label>销量top:</label>
<input type="number" name="topn" value="3" min="1" required>
<button type="submit">查询</button>
</form>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品id</th>
<th>产品名称</th>
<th>价格</th>
<th>销量</th>
</tr>
</thead>
<tbody>
<#list products as product>
<tr>
<td>${product.id}</td>
<td>${product.productid}</td>
<td>${product.productname}</td>
<td>${product.price?string(",###.00")}</td>
<td>${product.sales}</td>
</tr>
</#list>
</tbody>
</table>
</body>
</html>测试类:
import org.junit.jupiter.api.test;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.boot.test.context.springboottest;
import org.springframework.boot.test.web.client.testresttemplate;
import org.springframework.boot.web.server.localserverport;
import static org.assertj.core.api.assertions.assertthat;
@springboottest(webenvironment = springboottest.webenvironment.random_port)
class productapplicationtests {
@localserverport
private int port;
@autowired
private testresttemplate resttemplate;
@test
void contextloads() {
}
@test
void testhomepage() {
string response = resttemplate.getforobject("http://localhost:" + port + "/products/", string.class);
assertthat(response).contains("产品列表");
}
}✅ 结论:集成freemarker的步骤包括添加freemarker依赖、配置freemarker、创建实体类、创建repository接口、创建控制器类、创建freemarker模板文件、测试应用。
19.5 spring boot与velocity的集成
spring boot与velocity的集成是常用的视图层方法之一。
19.5.1 集成velocity的步骤
定义:集成velocity的步骤是指使用spring boot与velocity集成的方法。
步骤:
- 在pom.xml文件中添加velocity依赖。
- 在application.properties或application.yml文件中配置velocity。
- 创建实体类。
- 创建repository接口。
- 创建控制器类。
- 创建velocity模板文件。
- 测试应用。
示例:
pom.xml文件中的velocity依赖:
<dependencies>
<!-- web依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-web</artifactid>
</dependency>
<!-- velocity依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-velocity</artifactid>
<version>1.5.22.release</version>
</dependency>
<!-- data jpa依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-data-jpa</artifactid>
</dependency>
<!-- h2数据库依赖 -->
<dependency>
<groupid>com.h2database</groupid>
<artifactid>h2</artifactid>
<scope>runtime</scope>
</dependency>
<!-- 测试依赖 -->
<dependency>
<groupid>org.springframework.boot</groupid>
<artifactid>spring-boot-starter-test</artifactid>
<scope>test</scope>
</dependency>
</dependencies>application.properties文件中的velocity配置:
# 服务器端口 server.port=8080 # 数据库连接信息 spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driver-class-name=org.h2.driver spring.datasource.username=sa spring.datasource.password=password # jpa配置 spring.jpa.hibernate.ddl-auto=update spring.jpa.show-sql=true # h2数据库控制台 spring.h2.console.enabled=true spring.h2.console.path=/h2-console # velocity配置 spring.velocity.cache=false spring.velocity.prefix=classpath:/templates/ spring.velocity.suffix=.vm
实体类、repository接口、控制器类与集成thymeleaf的示例相同。
velocity模板文件(src/main/resources/templates/products.vm):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>产品列表</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.add-product {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>产品列表</h1>
<div class="add-product">
<form action="/products/" method="post">
<label>产品id:</label>
<input type="text" name="productid" required>
<label>产品名称:</label>
<input type="text" name="productname" required>
<label>价格:</label>
<input type="number" name="price" step="0.01" required>
<label>销量:</label>
<input type="number" name="sales" required>
<button type="submit">添加产品</button>
</form>
</div>
<div>
<form action="/products/top-selling" method="get">
<label>销量top:</label>
<input type="number" name="topn" value="3" min="1" required>
<button type="submit">查询</button>
</form>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品id</th>
<th>产品名称</th>
<th>价格</th>
<th>销量</th>
</tr>
</thead>
<tbody>
#foreach ($product in $products)
<tr>
<td>$product.id</td>
<td>$product.productid</td>
<td>$product.productname</td>
<td>$product.price.format("###,###.00")</td>
<td>$product.sales</td>
</tr>
#end
</tbody>
</table>
</body>
</html>测试类:
import org.junit.jupiter.api.test;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.boot.test.context.springboottest;
import org.springframework.boot.test.web.client.testresttemplate;
import org.springframework.boot.web.server.localserverport;
import static org.assertj.core.api.assertions.assertthat;
@springboottest(webenvironment = springboottest.webenvironment.random_port)
class productapplicationtests {
@localserverport
private int port;
@autowired
private testresttemplate resttemplate;
@test
void contextloads() {
}
@test
void testhomepage() {
string response = resttemplate.getforobject("http://localhost:" + port + "/products/", string.class);
assertthat(response).contains("产品列表");
}
}✅ 结论:集成velocity的步骤包括添加velocity依赖、配置velocity、创建实体类、创建repository接口、创建控制器类、创建velocity模板文件、测试应用。
19.6 spring boot的静态资源管理
spring boot的静态资源管理是视图层的重要组件。
19.6.1 静态资源管理的定义
定义:静态资源管理是指使用spring boot管理静态资源的方法。
作用:
- 管理web应用的静态资源,如css、javascript、图片等。
- 提高开发效率。
- 提供统一的编程模型。
常用静态资源目录:
- src/main/resources/static:用于存放静态资源。
- src/main/resources/public:用于存放静态资源。
- src/main/resources/resources:用于存放静态资源。
- src/main/resources/templates:用于存放模板文件。
示例:
创建静态资源文件(src/main/resources/static/css/style.css):
body {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
margin: 20px 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.add-product {
margin-bottom: 20px;
}在thymeleaf模板文件中引用静态资源:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>产品列表</title>
<link rel="stylesheet" th:href="@{/css/style.css}" rel="external nofollow" >
</head>
<body>
<h1>产品列表</h1>
<div class="add-product">
<form th:action="@{/products/}" method="post" th:object="${product}">
<label>产品id:</label>
<input type="text" th:field="*{productid}" required>
<label>产品名称:</label>
<input type="text" th:field="*{productname}" required>
<label>价格:</label>
<input type="number" th:field="*{price}" step="0.01" required>
<label>销量:</label>
<input type="number" th:field="*{sales}" required>
<button type="submit">添加产品</button>
</form>
</div>
<div>
<form th:action="@{/products/top-selling}" method="get">
<label>销量top:</label>
<input type="number" name="topn" value="3" min="1" required>
<button type="submit">查询</button>
</form>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品id</th>
<th>产品名称</th>
<th>价格</th>
<th>销量</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${products}">
<td th:text="${product.id}"></td>
<td th:text="${product.productid}"></td>
<td th:text="${product.productname}"></td>
<td th:text="${#numbers.formatdecimal(product.price, 0, 'comma', 2, 'point')}"></td>
<td th:text="${product.sales}"></td>
</tr>
</tbody>
</table>
</body>
</html>✅ 结论:静态资源管理是指使用spring boot管理静态资源的方法,常用静态资源目录包括src/main/resources/static、src/main/resources/public、src/main/resources/resources、src/main/resources/templates。
19.7 spring boot的实际应用场景
在实际开发中,spring boot视图层与模板引擎的应用场景非常广泛,如:
- 实现商品的展示与购买。
- 实现订单的管理。
- 实现用户的管理。
- 实现博客的发布与管理。
示例:
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.boot.springapplication;
import org.springframework.boot.autoconfigure.springbootapplication;
import org.springframework.data.jpa.repository.jparepository;
import org.springframework.stereotype.repository;
import org.springframework.stereotype.controller;
import org.springframework.ui.model;
import org.springframework.web.bind.annotation.*;
import javax.persistence.*;
import java.util.list;
// 产品类
@entity
@table(name = "product")
public class product {
@id
@generatedvalue(strategy = generationtype.identity)
private long id;
private string productid;
private string productname;
private double price;
private int sales;
public product() {
}
public product(string productid, string productname, double price, int sales) {
this.productid = productid;
this.productname = productname;
this.price = price;
this.sales = sales;
}
// getter和setter方法
public long getid() {
return id;
}
public void setid(long id) {
this.id = id;
}
public string getproductid() {
return productid;
}
public void setproductid(string productid) {
this.productid = productid;
}
public string getproductname() {
return productname;
}
public void setproductname(string productname) {
this.productname = productname;
}
public double getprice() {
return price;
}
public void setprice(double price) {
this.price = price;
}
public int getsales() {
return sales;
}
public void setsales(int sales) {
this.sales = sales;
}
@override
public string tostring() {
return "product{" +
"id=" + id +
", productid='" + productid + '\'' +
", productname='" + productname + '\'' +
", price=" + price +
", sales=" + sales +
'}';
}
}
// 产品repository
@repository
public interface productrepository extends jparepository<product, long> {
list<product> findbysalesgreaterthan(int sales);
}
// 产品控制器
@controller
@requestmapping("/products")
public class productcontroller {
@autowired
private productrepository productrepository;
@getmapping("/")
public string getallproducts(model model) {
list<product> products = productrepository.findall();
model.addattribute("products", products);
model.addattribute("product", new product());
return "products";
}
@postmapping("/")
public string addproduct(@modelattribute product product) {
productrepository.save(product);
return "redirect:/products/";
}
@getmapping("/top-selling")
public string gettopsellingproducts(@requestparam int topn, model model) {
list<product> products = productrepository.findbysalesgreaterthan(0);
products.sort((p1, p2) -> p2.getsales() - p1.getsales());
if (products.size() > topn) {
products = products.sublist(0, topn);
}
model.addattribute("products", products);
model.addattribute("product", new product());
return "products";
}
}
// 应用启动类
@springbootapplication
public class productapplication {
public static void main(string[] args) {
springapplication.run(productapplication.class, args);
}
@autowired
private productrepository productrepository;
public void run(string... args) {
// 初始化数据
productrepository.save(new product("p001", "手机", 1000.0, 100));
productrepository.save(new product("p002", "电脑", 5000.0, 50));
productrepository.save(new product("p003", "电视", 3000.0, 80));
productrepository.save(new product("p004", "手表", 500.0, 200));
productrepository.save(new product("p005", "耳机", 300.0, 150));
}
}
// 测试类
@springboottest(webenvironment = springboottest.webenvironment.random_port)
class productapplicationtests {
@localserverport
private int port;
@autowired
private testresttemplate resttemplate;
@test
void contextloads() {
}
@test
void testhomepage() {
string response = resttemplate.getforobject("http://localhost:" + port + "/products/", string.class);
assertthat(response).contains("产品列表");
}
}输出结果:
- 访问http://localhost:8080/products/:显示产品列表页面。
- 访问http://localhost:8080/products/top-selling?topn=3:显示销量top3的产品列表页面。
✅ 结论:在实际开发中,spring boot视图层与模板引擎的应用场景非常广泛,需要根据实际问题选择合适的模板引擎。
总结
本章我们学习了spring boot视图层与模板引擎,包括spring boot视图层的基本方法、spring boot与thymeleaf的集成、spring boot与freemarker的集成、spring boot与velocity的集成、spring boot的静态资源管理、spring boot的实际应用场景,学会了在实际开发中处理视图层问题。其中,spring boot视图层的基本方法、spring boot与thymeleaf的集成、spring boot与freemarker的集成、spring boot与velocity的集成、spring boot的静态资源管理、spring boot的实际应用场景是本章的重点内容。从下一章开始,我们将学习spring boot的其他组件、微服务等内容。
到此这篇关于spring boot 视图层与模板引擎的文章就介绍到这了,更多相关springboot模板引擎内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!
发表评论