Web 开发(SpringBoot)

bigdata7

已于 2023-02-17 21:58:41 修改

阅读量454

点赞数

分类专栏： # java web 文章标签：前端 java spring boot

于 2022-01-04 20:17:02 首次发布

by顾辞嘤嘤怪

本文链接：https://blog.csdn.net/qq_43636709/article/details/122310678

版权

java web 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

文章目录

Web开发

模板引擎

概念：模板引擎，顾名思义，是一款模板，模板中可以动态的写入一些参数，我们将这些参数在代码中传入，以保证数据在页面的动态调用，这就是引擎要做的，页面和数据的动态传输模板。

SpringBoot官方为我们推荐的是Thymeleaf。

模板引擎的作用：

将 html 和数据绑定
实现前后端分离，前端使用非编译型的【之前使用的 jsp 是编译型的，效率太低】

Spring Boot支持的模板引擎

JSP
Velocity
Freemarker
Thymeleaf

Spring Boot + JSP【了解一下就好】

导入 jar 包
创建 webapp 目录
设置 webapp 部署位置
设置视图前后缀
编写控制器类
编写 jsp 文件

导入 jar 包

导入 springboot 内嵌的 Tomcat 对 JSP 的解析包
导入 servlet-api 的包
导入 jsp-api 的包

导入 jstl 的包

<!-- 支持JSP运行的tomcat -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <!--servlet-api-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <!-- JSP -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
        </dependency>
        <!--jstl-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>

创建 `webapp`资源目录并配置

在 src/main 下创建 webapp 目录和资源目录同级

SpringBoot 要求 jsp 文件必须编译到指定的 META-INF/resources 目录下才能访问，否则访问不到。

<resource>
	<!--源文件位置-->
	<directory>src/main/webapp</directory>
	<!--指定编译到 META-INF/resources，该目录不能随便写-->
	<targetPath>META-INF/resources</targetPath>
	<!--指定要把哪些文件编译进去，**表示 webapp 目录及子目录，*.*表示所有文件-->
	<includes>
		<include>**/*.*</include>
	</includes>
</resource>

配置视图前后缀

相当于 springmvc 里面的视图解析器，在 application.properties 中配置

配置端口号和上下文路径
server.port=9091
server.servlet.context-path=/
#配置 SpringMVC 视图解析器。其中：/ 表示目录为 src/main/webapp
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp

编写控制器、编写 jsp文件测试

控制器

@Controller
public class Hello {
	@RequestMapping("/hello")
	public String hello(Model model){
		model.addAttribute("message","hello spring boot");
		return "hello";
		}
}

jsp 页面：在webapp目录下创建hello.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
${message}
</body>
</html>

运行访问测试

Spring Boot + Thymeleaf

Thymeleaf 简介

概述

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎，能够处理 HTML，XML，JavaScript，CSS 甚至纯文本。
Thymeleaf 的主要目标是提供一种优雅且高度可维护的模板创建方式。为此，它以“自然模板”的概念为基础，以不影响模板作用设计原型的方式将其逻辑注入模板文件。这样可以改善设计沟通，并缩小设计团队与开发团队之间的差距。
Thymeleaf与JSP的区别在于，不运行项目之前，Thymeleaf也是纯HTML（不需要服务端的支持）而JSP需要进行一定的转换，这样就方便前端人员进行独立的设计、调试。

优点

Thymeleaf 在有网络和无网络的环境下皆可运行，它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

使用

项目创建

创建一个 spring boot项目选择依赖的时候在 web 里面选择

语法解析

这个的写法和 JSP 的很像，只不过用的 html ,头部要引入命名空间 xmlns:th="http://www.thymeleaf.org"，联网。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Thymeleaf快速入门-Hello Thymeleaf</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>学生id</th>
        <th>学生姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="s:${students}">
        <td th:text="${s.id}"></td>
        <td th:text="${s.name}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

常用的循环：

可以使用th:each="s,status:${students}"方式遍历，就可以把状态放在status里面了，
同时可以用th:class="${stauts.even}?'even':'odd'"来判断奇偶。
status 包含的信息

属性	说明
index	从0开始的索引值
count	从1开始的索引值
size	集合内元素的总量
current	当前的迭代对象
even/odd	boolean类型的，用来判断是偶数个还是奇数个
first	boolean类型，判断是否为第一个
last	boolean类型，判断是否为最后一个

控制器跳转的时候将对象信息放到 model html 里面用 th 就可以取出来还能使用三元表达式

<tr th:class="${status.even}?'even':'odd'" th:each="s,status:${students}">
        <td th:text="${status.index}"></td>
        <td th:text="${s.id}"></td>
        <td th:text="${s.name}"></td>
</tr>

bigdata7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web 开发(SpringBoot)

文章目录@[TOC]Web开发模板引擎模板引擎的作用：Spring Boot支持的模板引擎Spring Boot + JSP【了解一下就好】导入 jar 包创建 `webapp`资源目录并配置配置视图前后缀编写控制器、编写 jsp文件测试运行访问测试Spring Boot + ThymeleafThymeleaf 简介概述优点使用项目创建语法解析常用的循环：Web开发模板引擎概念：模板引擎，顾名思义，是一款模板，模板中可以动态的写入一些参数，我们将这些参数在代码中传入，以保证数据在页面的动态调用，这
复制链接

扫一扫