动态网页的模板引擎

文章目录

  • 一、什么是模板引擎?
  • 二、流程
  • 三、Thymeleaf使用流程
    • 1.通过maven引入依赖
    • 2.创建html版本文件
    • 3.编写Servlet代码
  • 四、Thymeleaf模板语法
    • 1.设置标签属性
  • 五、只创建一个引擎实例
    • 1.什么是ServletContext?
    • 2.什么是监听器(Listener)


一、什么是模板引擎?

jdbc预编译的操作命令对象,类似模板引擎:

select * from emp where id=?

这里的?就是占位符
这整个就相当于模板

preparedStatement.setInt(1,123)

1表示第几个占位符
123表示替换的值
模板和替换的值一起就组织为一个拼接的数据库可以执行的sql
select * from emp where id=123

作用:

  • 通过组织网页模板和数据,就可以返回一个动态的网页
  • 可以分离Servlet Java代码和HTML网页代码(相对于Servlet直接返回动态网页来说,模板引擎的优点)

网页模板引擎产品有很多:freemarker、velocity、thymeleaf(springboot官方默认的模板技术)

二、流程

动态网页的模板引擎_第1张图片

三、Thymeleaf使用流程

1.通过maven引入依赖

在maven中央仓库搜索Thymeleaf
在这里插入图片描述
选择一个合适的版本,例如3.0.12:

<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.12.RELEASE</version>
</dependency>

2.创建html版本文件

创建hello.html, 放到 webapps/WEB-INF/templates 目录中

<h3>网页模板技术学习</h3>
<p th:text="${message}"></p>

th:text 是 Thymeleaf 的语法. 浏览器不能直接识别 th:text 属性.

3.编写Servlet代码

先创建模板引擎和模板解析器

//使用thymeleaf模板技术
//创建一个模板引擎
TemplateEngine engine = new TemplateEngine();
//创建一个渲染网页模板的解析器:getServletContext是HttpServlet中的方法,返回Servlet上下文对象
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(getServletContext());
resolver.setCharacterEncoding("utf-8");//设置渲染时编码
//设置网页模板文件,路径的前缀和后缀
resolver.setPrefix("/WEB-INF/templates/");//前缀
resolver.setSuffix(".html");//后缀
//将模板解析器绑定到模板引擎中
engine.setTemplateResolver(resolver);

再设置数据和模板名称

//创建一个web上下文(环境的语义,里边有一个map结构,可以存放键值对的数据)
WebContext webContext = new WebContext(req,resp,getServletContext());
//设置了一个键值对的数据,可以理解为:为网页模板定义了一个变量(变量名为message,值为hello...)
//queryString传入msg=xxx
webContext.setVariable("message",req.getParameter("msg"));

//模板引擎渲染网页模板:第一个参数为模板名称,第二个参数为web上下文(里边保存了数据)
//会根据模板解析器设置的前缀+模板名称+后缀,为模板路径查找到模板,再组织模板内容+数据
//返回值就是渲染后的网页字符串
String html = engine.process("hello",webContext);

最后把渲染的html设置到响应正文

resp.getWriter().write(html);

四、Thymeleaf模板语法

命令 功能
th:text 在标签中展示表达式求值结果的文本内容
th:[HTML]标签属性 设置任意的HTML标签属性的值
th:if 当表达式的结果为真时则显示内容,否则不显示
th:each 循环访问元素

$ {变量名}来引用Java代码中,设置的键值对数据(${键}就是值)

在这里插入图片描述
最终是把webContext设置的键值对数据中,键为message的值,设置到标签内容中

1.设置标签属性

一些常用的需要设置的属性

  • href
  • src
  • class
  • style

1.设置a标签的href属性:

前端代码:

<a th:href="${a1}">搜狗</a> <!-- 渲染为<a href="键为a1的值" -->
<a th:href="${a2}">百度</a>

后端代码:

//写网站的绝对路径还是要加http://写全
webContext.setVariable("a1","http://www.sogou.com");
webContext.setVariable("a2","http://www.baidu.com");

2.条件判断:

前端代码:

<p th:if="${isLogin}">已经登录了</p>

后端代码:

webContext.setVariable("isLogin",true);

true时,html中会包含< p >
false时,html中不包含< p >

3.循环:

th:each的功能就是可以循环的构造出多个元素
语法格式为:

th:each=“自定义的元素变量名称:${集合变量名称}”

简单直接遍历
前端代码:
动态网页的模板引擎_第2张图片
后端代码:

//Arrays.asList中的参数为可变参数,是将可变参数数组转变为List
webContext.setVariable("names", Arrays.asList("张三","李四","王五"));

对User类进行访问:
动态网页的模板引擎_第3张图片

五、只创建一个引擎实例

关于创建模板引擎和模板解析器
整个web应用,只需要初始化一次(代码中的对象engine、resolver,只需要创建一次)

原因:对象及属性不会改变
改造:放在Servlet的init方法

Servlet有三个生命周期方法:

  • init:初始化方法,只执行一次。tomcat在某个时间会创建Servlet对象,然后调用init方法
  • service:请求路径如果匹配到某个Servlet,就调用一次该Servlet的service方法
  • destory:销毁方法,只执行一次

还存在问题:每个Servlet都需要在init方法中创建(一个webapp中,还是有多个engine,resolver对象)
解决这个问题:ServletContext、ServletContextListener

1.什么是ServletContext?

上下文/环境,常用于设置一些数据到上下文环境中
上下文环境中的对象,就可以互相引用对方的数据

很多地方都有Context这样的概念,他是一个语义上的概念
多个servlet间,无法直接传递数据,但可以通过共享的一个上下文环境,来设置/使用一些数据(数据传递)

ServletContext对象的重要方法:

方法 描述
void setAttribute(String name,Object obj) 设置属性(键值对)
Object getAttribute(String name) 根据属性名获取属性值,如果name不存在,返回null
Object removeAttribute(String name) 删除对应的属性

ServletContext类似Map结构,存放多组键值对的数据

代码示例:多个Servlet共享数据

//写入Context
@WebServlet("/write")
public class ContextWriteServlet extends HttpServlet {

    //write?data=xxx
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String data = req.getParameter("data");
        //把数据写入Servlet共享的上下文环境
        ServletContext sc = getServletContext();
        sc.setAttribute("d",data);

        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().write("写入Context成功");
    }
}

//读取Context
@WebServlet("/read")
public class ContextReadServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //把数据写入Servlet共享的上下文环境
        ServletContext sc = getServletContext();
        Object data = sc.getAttribute("d");

        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().write("读取Context:"+data);
    }
}

2.什么是监听器(Listener)

监听器,属于一种设计模式
如html中,标签中的事件——如< button onclick >
这个事件,其实就是监听器的设计模式

在html或js中,为一个dom元素,绑定一个事件(事件注册),不需要手动调用该事件的函数,而是在事件发生的时候,由浏览器来调用事件绑定的函数
这样事件发生需要执行的代码,和事件发生,两个就解耦

ServletContextListener,也是类似的一种监听器的设计。不要在事件发生的时候,自己写代码做事情,而是先注册一个函数/方法到监听器中,在某个事件发生后,就会自动执行

代码示例:监听ServletContext的创建

@WebListener
public class MyListener implements ServletContextListener {
    public void contextInitialized(ServletContextEvent sce) {
        // 这个会在 context 被创建的时候调用.
    	// 创建的时机在所有 Servlet 实例化之前.
    	System.out.println("ServletContext 创建");
    	// 通过 sce 的 getServletContext 方法获取到刚刚创建好的 ServletContext 对象
    	ServletContext context = sce.getServletContext();
    	context.setAttribute("message", "message 的初始值");
 }
    public void contextDestroyed(ServletContextEvent sce) {
        //这个会在 context 被销毁的时候调用. 此处我们不关注
    }
}

你可能感兴趣的:(web,java,后端)