Web 开发(SpringBoot)

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 的主要目标是提供一种优雅且高度可维护的模板创建方式。为此,它以“自然模板”的概念为基础,以不影响模板作用设计原型的方式将其逻辑注入模板文件。这样可以改善设计沟通,并缩小设计团队与开发团队之间的差距。

  • ThymeleafJSP的区别在于,不运行项目之前,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/oddboolean类型的,用来判断是偶数个还是奇数个
firstboolean类型,判断是否为第一个
lastboolean类型,判断是否为最后一个
  • 控制器跳转的时候 将对象信息放到 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>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值