zoukankan      html  css  js  c++  java
  • 【SpringBoot】11 Web开发 Part2 模板引擎

    开发回顾:

    JavaWeb开发使用JSP技术,所有的页面文件必须是JSP,才能接受数据处理

    JSP的好处是,数据交互方便,有JSTL补充

    SpringBoot的区别:

    我们最终的项目是一个jar包

    内嵌了Tomcat,这是不支持JSP的

    纯静态页面的数据交互成技术难点了

    解决方案:

    模板引擎 TemplateEngine


    常见的模板引擎:

    - 初代目:JSP、JSTL、

    - Thymeleaf

    - Freemarker

    - Velocity


    模板引擎的核心思想:

    1、在页面中写入模板【表达式】

    2、由服务器传输数据,交给模板引擎

    3、模板引擎处理数据注入到页面的模板中

    4、最后在页面上生成我们想要的效果

    要注意,模板引擎的本质是对文档的Dom对象进行操作


    SpringBoot 推荐Thymeleaf

    1、引入Thymeleaf

    maven坐标

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    2、默认的模板位置

    也就是resources.templates目录下

    Thymeleaf会自动渲染这个目录内的所有页面

    开始测试:

    编写控制器

    页面访问

    传输数据

    首先,被渲染的模板页面需要导入Thymeleaf的TL约束

    这个约束可以不打,就是会没有提示信息

    <html lang="en" xml:th="http://www.thymeleaf.org">

    但是在IDEA的编写过程中是提示这个约束

    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

    改变当前元素的文本内容

    <p th:text="${hello}"></p>

    凡是元素具有的属性,只要在前面加 th:

    这个属性的值就可以被模板引擎进行交互

    th的值会替换当前元素原有的文本内容

    【可以替换原生元素的属性值】

    简单的表达式

    字面值

    文本运算符

    算术运算符

    布尔运算符

    比较运算符

    条件运算与三元运算

    特殊的Token?

     字面意思是【不操作】,用于三元运算的操作取消?

    上述的这些特性可以被组合与嵌套


     OGNL (Object-Graph Navigation Language)

    对象图形导航语言

    关于OGNL官网的详细介绍

    http://commons.apache.org/proper/commons-ognl/

    这种表达式用于获取变量【即对象、属性、值】

    ${Value}

    可以使用对象引用属性的方式获取值

    /** 
    Access to properties using the point (.). Equivalent to calling property getters.
    */
    ${person.father.name}

    或者按对象的属性标识符来获取

    /** 
    Access to properties can also be made by using brackets ([]) and writing 
    the name of the property as a variable or between single quotes.
    */ ${person['father']['name']}

    如果对象是一个Map,则点和括号语法将等效于对其get(…)方法执行调用

    /** 
    If the object is a map, both dot and bracket syntax will be equivalent to 
    executing a call on its get(...) method.
    */ ${countriesByCode.ES} ${personsByName['Stephen Zucchini'].age}

    数组和List集合的引用

    /** 
    Indexed access to arrays or collections is also performed with brackets,
    writing the index without quotes. 
    */ 
    ${personsArray[0].name}

    你甚至可以写方法,和参数!?

    /** 
    Methods can be called, even with arguments. 
    */ 
    ${person.createCompleteName()} 
    ${person.createCompleteNameWithSeparator(
    '-')}

    表达式内置的基本对象

    在对上下文变量求值OGNL表达式时,某些对象可用于表达式以获得更高的灵活性。

    这些对象将被引用(根据OGNL标准),从【#】符号开始

    内置的工具对象

    除了这些基本对象之外,Thymeleaf还将提供一组实用程序对象,

    帮助我们执行表达式中的常见任务。


    表达式的总结:

    变量表达式

    ${Value}

    - 表达对象、属性、值

    - 表达对象的属性、

    - 配合内置基本对象

    - 配合内置工具对象

    选择变量表达式

    *{SelectionValue}

    用于配合th:object表达式使用

    官方的实例说明:

    父类元素的th属性获取了这个表达式的对象

    然后,里面子元素,可以使用*{}表达式直接调用父元素的这个object属性

    消息表达式:

    Message Expressions: #{...}

    用于I18N的国际化

    连接表达式:

    Link URL Expressions: @{...}

    用于定义链接,使用模板引擎声明URL的好处就是

    - 动态注入连接参数

    - 不需要写完整协议,从工程名后面开始即可

    片段表达式:

    Fragment Expressions: ~{...}

    用于抽取封装HTML片段,提高可重用性


    th:text & th:utext 的区别?

    th:text 是不转义的表达式,我们写入<h1>text</h1> 会识别为文档标签

    th:utext 是转义的表达式,我们写入<h1>text</h1> 会转义当成文本处理

    遍历的属性表达式,prod表示遍历的变量,就是当成对象一样获取数学

    这两种属性的行内写法:

    th:text  == [[ ${Value} ]]
    th:utext  == [( ${Value} )]

    不推荐使用这种写法,如果没有获取到,页面将会解析这个表达式出来,

    影响美观,泄露数据安全

  • 相关阅读:
    unzip详解,Linux系统如何解压缩zip文件?
    什么是FHS,Linux的文件系统目录标准是怎样的
    第三篇:Linux的基本操作与文件管理(纯命令行模式下)(上)
    什么是YUM
    KineticJS教程(12)
    KineticJS教程(11)
    KineticJS教程(10)
    KineticJS教程(9)
    KineticJS教程(8)
    KineticJS教程(7)
  • 原文地址:https://www.cnblogs.com/mindzone/p/12858011.html
Copyright © 2011-2022 走看看