22-05-23 西安 javaweb(08) Thymeleaf、域对象、OGNL、分支与迭代、引用公共代码片段

MD5加密

特点是：不可逆。相同数据的MD5值肯定一样，不同数据的MD5值不一样

对称加密：有加密程序，也有解密程序
非对称加密：只有加密程序，没有解密

MD5加密

SELECT MD5("123456")

但是MD5也不安全，破解方法：彩虹表，碰撞。

把常用的密码先MD5处理，并将数据存储起来，然后跟需要查询的MD5结果匹配，这时就有可能通过匹配的MD5得到明文。

MD5Util工具类：

主要使用encode方法对明文字符串执行MD5加密！

这样我们在做登录和注册的时候，

1、就可以在注册时用MD5把密码加密后的密文保存到数据库中

2、登录的时候我们再把明文密码转为密文，和数据库中的密文进行比较，相等则判断登录成功！

public class MD5Util {

    /**
     * 针对明文字符串执行MD5加密
     * @param source
     * @return
     */
    public static String encode(String source) {

        // 1.判断明文字符串是否有效
        if (source == null || "".equals(source)) {
            throw new RuntimeException("用于加密的明文不可为空");
        }

        // 2.声明算法名称
        String algorithm = "md5";

        // 3.获取MessageDigest对象
        MessageDigest messageDigest = null;
        try {
            messageDigest = MessageDigest.getInstance(algorithm);
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }

        // 4.获取明文字符串对应的字节数组
        byte[] input = source.getBytes();

        // 5.执行加密
        byte[] output = messageDigest.digest(input);

        // 6.创建BigInteger对象
        int signum = 1;
        BigInteger bigInteger = new BigInteger(signum, output);

        // 7.按照16进制将bigInteger的值转换为字符串
        int radix = 16;
        String encoded = bigInteger.toString(radix).toUpperCase();

        return encoded;
    }
}

---

MVC 设计理念

MVC作用于表述层：
        M：Model模型，指实体类，用来存储数据
        V：View视图，指项目中的html页面，用来展示数据
        C：Controller控制器，指servlet，用来控制请求和响应 

---

Thymeleaf模板引擎 

官方网站：Thymeleaf  

1、服务器端的页面渲染技术

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。作用是在静态页面上渲染显示动态数据

出于对HTML的新的期待：既能够正常显示页面，又能在页面中包含动态数据部分。而动态数据单靠HTML本身是无法做到的，此时我们需要引入服务器端动态视图模板技术。

有些时候，我们希望访问同一个资源(同一个路径)，在不同情况看到不同数据。

比如我们的这个经典案例：把用户信息共享在会话域session中，分为以下俩种情况展示

1.     已登录，显示欢迎您，XXX
2.     未登录，显示登录和注册的超链接

<!--
    判断是否登录
    已登录，显示欢迎您，XXX
    未登录，显示登录和注册的超链接
-->
<div th:if="${session.user != null}">
    <h1 th:text="'欢迎您，'+${session.user.username}"></h1>
</div>
<div th:unless="${session.user != null}">
    <a href="">登录</a>
    <a href="">注册</a>
</div>

---

2、Thymeleaf的入门案例

所有页面Thymeleaf必须通过服务器访问，不能由浏览器访问。因为它是服务器端页面渲染技术，所以只有请求转发才可以访问

为什么要把页面放在WEB-INF下呢？

         WEB-INF目录不允许浏览器直接访问，所以我们的视图模板文件放在这个目录下，是一种保护。以免外界可以随意访问视图模板文件。

还可以方便用户权限校验

不经过Servlet访问不了，这样就方便我们在Servlet中检查当前用户是否有权限访问。

那放在WEB-INF目录下之后，重定向进不去怎么办？

重定向到Servlet，再通过Servlet转发到WEB-INF下。

thymeleaf入门案例使用：

1、导入 lib jar 包,注意lib目录创建的位置，我今天就创建错一次位置、、

2、在web.xml上下文参数context-param中配置视图前缀和视图后缀

3、复制基类ViewBaseServlet（直接复制）

4、创建servlet继承ViewBaseServlet，processTemplate（）设置逻辑视图，并转发到逻辑视图页面。

5、在WEB-INF下创建view，页面都放在这里
注意在html标签中设置约束 xmlns:th="http://www.thymeleaf.org"

第二步骤：web.xml中设置视图前缀[和目录有关]和视图后缀【thymeleaf要把所有页面放在同一个目录下】

物理视图和逻辑视图

物理视图:在Servlet中，将请求转发到一个HTML页面文件时，使用的完整的转发路径(绝对路径)。

逻辑视图+前缀+后缀=物理视图

    <context-param>
        <param-name>view-prefix</param-name>
        <param-value>/WEB-INF/view/</param-value>
    </context-param>
    <context-param>
        <param-name>view-suffix</param-name>
        <param-value>.html</param-value>
    </context-param>

第三步骤：再把ViewBaseServlet也供出来吧，我们要有开源精神，主要是使用里面的processTemplate（）

public class ViewBaseServlet extends HttpServlet {

    private TemplateEngine templateEngine;

    @Override
    public void init() throws ServletException {

        // 1.获取ServletContext对象
        ServletContext servletContext = this.getServletContext();

        // 2.创建Thymeleaf解析器对象
        ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);

        // 3.给解析器对象设置参数
        // ①HTML是默认模式，明确设置是为了代码更容易理解
        templateResolver.setTemplateMode(TemplateMode.HTML);

        // ②设置前缀
        String viewPrefix = servletContext.getInitParameter("view-prefix");

        templateResolver.setPrefix(viewPrefix);

        // ③设置后缀
        String viewSuffix = servletContext.getInitParameter("view-suffix");

        templateResolver.setSuffix(viewSuffix);

        // ④设置缓存过期时间（毫秒）
        templateResolver.setCacheTTLMs(60000L);

        // ⑤设置是否缓存
        templateResolver.setCacheable(true);

        // ⑥设置服务器端编码方式
        templateResolver.setCharacterEncoding("utf-8");

        // 4.创建模板引擎对象
        templateEngine = new TemplateEngine();

        // 5.给模板引擎对象设置模板解析器
        templateEngine.setTemplateResolver(templateResolver);

    }

    protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 1.设置响应体内容类型和字符集
        resp.setContentType("text/html;charset=UTF-8");

        // 2.创建WebContext对象
        WebContext webContext = new WebContext(req, resp, getServletContext());

        // 3.处理模板数据
        templateEngine.process(templateName, webContext, resp.getWriter());
    }
}

做好准备工作1、2、3步之后，我们接着4、5步骤

第四步骤：创建servlet继承ViewBaseServlet，processTemplate（）设置逻辑视图，并转发到逻辑视图页面。

  基类ViewBaseServlet，是用来继承的，这个基类不需要再web.xml中注册.

public class HelloServlet extends ViewBaseServlet{
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setAttribute("param1","你好");
        //processTemplate 处理模板，跳转到某一个页面，底层用的就是请求转发
        processTemplate("hello",request,response);
    }
}

逻辑视图对应的页面hello.html：

入门案例运行结果：我们动态的展示了请求域中的数据param1

---

访问首页ProtalServlet

现在我们直接访问项目路径时访问不了index.html首页了，设置一个ProtalServlet.

它的url-pattern 比较特殊，值是 index.html

    <servlet>
        <servlet-name>ProtalServlet</servlet-name>
        <servlet-class>com.atguigu.servelt.ProtalServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ProtalServlet</servlet-name>
        <url-pattern>/index.html</url-pattern>
    </servlet-mapping>

在这个ProtalServlet中，直接转发到首页index.html。这里"index"是逻辑视图

processTemplate("index", request, response);

---

3、th:后面跟什么？

处理模板函数processTemplate（）因为底层使用请求转发，所以可以在请求域中共享数据。在这之前，我们先说一下Thymeleaf的语法。

Thymeleaf没有使用自定义的标签或语法，所有的模板语言都是扩展了标准H5标签的属性

1.设置双标签文本值

th:text的含义就是替换所在标签中的文本内容

<p th:text="标签体新值">标签体原始值</p>

2.操作标签的属性，想操作什么属性，就在前面加th:

<input type="text" name="username" th:value="文本框新值" value="文本框旧值" />

3.设置路径问题，使用@会在字符串前附加『上下文路径』

th：属性名=“@{/路径}”,设置的绝对路径由服务器解析
<a th:href="@{/index.html}">访问index.html</a>

Thymeleaf高明之处

<h1 th:text="${msg}">大家好</h1>

在这个案例中：

• 静态页面中，th指令不被识别，但是浏览器也不会报错，把它当做一个普通属性处理。这样div的默认值大家好就会展现在页面上

• Thymeleaf环境下，th指令就会被识别和解析，而th:text的含义就是替换所在标签中的文本内容，于是msg的值就替代了 div中默认的大家好

th指令的设计，正是Thymeleaf的高明之处，也是它优于其它模板引擎的原因。动静结合的设计，使得无论是前端开发人员还是后端开发人员可以完美契合。

---

4、${}获取域中的数据

Thymeleaf通过${}来获取model中的变量，这个是ognl表达式。这个model可以理解为请求域

public String hello(Model model){
    model.addAttribute("msg","Hello，SringBoot Thymeleaf");
    return "hello";
}

1

---

5、th:href 路径参数拼接

<!-- 直接拼接字符串 -->
<a th:href="@{'http://api.gmall.com/pms/brand?pageNum=' + ${pageNum}}">点我带你飞</a><br>
<!-- 使用（）的形式定义参数 -->
<a th:href="@{http://api.gmall.com/pms/brand/{id}(id=${id})}">点我带你飞</a><br>
<!-- 使用（,,）的形式解析多个参数 -->
<a th:href="@{http://api.gmall.com/pms/brand(pageNum=${pageNum}, pageSize=${pageSize})}">起飞吧</a>

th:src和th:href用法一致。

---

6、Thymeleaf 页面中获取请求参数

第一步：发送一个get请求

获取请求参数之前，首先要发送一个get请求，使用手动拼接的方式

<a th:href="@{/TestParamServlet(username='admin',password=123456,hobby='A',hobby='B')}">
测试Thymeleaf获取请求参数</a>

第二步：使用Thymeleaf获取请求参数

1、根据一个参数名获取一个参数值

 <p th:text="${param.username}"></p>
 <p th:text="${param.password}"></p>

2、获取多个同名的请求参数
  

 <p th:text="${param.hobby[0]}"></p>

获取到请求参数后页面展示效果：

---

7、Thymeleaf内置对象  #lists

所谓内置对象其实就是在Thymeleaf的表达式中可以直接使用的对象

${#lists.isEmpty(集合名)}:判断某个集合是否为null或者长度为0

第一步：在请求域中放入list集合

        List<String> list1 = null;
        List<String> list2 = new ArrayList<>();
        List<String> list3 = Arrays.asList("a", "b", "c");
        request.setAttribute("list1", list1);
        request.setAttribute("list2", list2);
        request.setAttribute("list3", list3);
        processTemplate("test_param", request, response);

第二步：在test_param.html中使用方法来判断请求域中的集合是否为null或者空，如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="'list1:'+${#lists.isEmpty(list1)}"></p>
<p th:text="'list2:'+${#lists.isEmpty(list2)}"></p>
<p th:text="'list3:'+${#lists.isEmpty(list3)}"></p>
</body>
</html>

运行结果:集合为null或者长度为0 则${#lists.isEmpty()}返回true

---

三种域对象，request,session,application

在指定的范围共享数据，使用域对象可以把服务器数据传递到页面

1、三种域对象简介

请求域：

类型	HttpServletRequest
范围	一次请求
应用场景	展示错误信息、列表功能（查询）、修改回显（回显到表单）

会话域：

类型	HttpSession
获取方式	request.getSession()
范围	一次会话（浏览器开启到浏览器结束）
应用场景	购物车、记录用户的登录状态

应用域：

类型	ServletContext
获取方式	request.getServletContext()，session.getServletContext()
范围	一个应用
应用场景	没有

---

2、域对象的相关方法

域对象操作共享数据的方法：

1. void setAttribute(String name, Object value);
2. Object getAttribute(String name)
3. void removeAttribute(String name)

各个域对象的范围：

1. request请求域：只有请求转发才可以获取
2. session域对象中的数据只跟浏览器是否关闭有关，跟服务器是否关闭无关
3. application域对象中的数据只跟服务器是否关闭有关，跟浏览器是否关闭无关

如何在页面获取域对象的数据：

1. <p th:text="${请求域中共享数据键}"></p>
2. <p th:text="${session.会话域共享数据键}"></p>
3. <p th:text="${application.应用域共享数据键}"></p>

---

3、域对象生效范围测试

 结果展示页面：test_scope.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${testRequest}"></p>
<p th:text="${session.testSession}"></p>
<p th:text="${application.testApplication}"></p>
</body>
</html>

测试一：

 结果：在一次请求转发中，三种域中的数据在页面都能访问到。 

测试二：在测试一的基础上，我们再点击

结果：请求域中的数据已经没了。session和application 有

测试三： 关闭浏览器，再打开浏览器

结果：application有，session没有

测试四：重启服务器

开启session钝化。如下图打勾，session数据会钝化到磁盘，服务器启动时，再加载到内存

关闭服务器，再重启服务器。

 结果：application没有，session有

---

OGNL 对象-图 导航语言

从根对象触发，通过特定的语法，逐层访问对象的各种属性。

什么叫属性？
跟成员变量没有关系，只跟set/get方法有关系，把get/set去掉，首字母小写后就是属性。

1、OGNL访问对象属性

  - 对象.属性名     <p th:text="${user.id}"></p> 
  - 对象['属性名']   <p th:text="${user['id']}"></p> 

2、 访问List集合或数组中的数据

  - 集合或数组[下标] <p th:text="${list[0]}"></p> 

3、-访问Map集合中的数据

  - Map集合.key     //该方式访问的键变量不能用数字开头
  - Map集合['key']   <p th:text="${map['1001'].username}"></p>   // map集合的键是纯数字，用[]来访问

---

基础使用 th:text

th:text的含义就是替换所在标签中的文本内容

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <h1 th:text="${msg}">大家好！</h1>
    <h1>
        <!-- 常规用法 -->
        欢迎您：<span th:text="${user.name}">请登录</span>
    </h1>
    <h1>
        <!-- 常量：有些内容可能不希望thymeleaf解析为变量 -->
        字符串常量：<span th:text="'欢迎您'"></span><br>
        数字常量：<span th:text="2020"></span><br>
        数字常量运算：<span th:text="2020 - 10"></span><br>
        bool常量：<span th:text="true"></span>
    </h1>
    <h1>
        <!-- 字符串拼接：下面两种方式等价 -->
        <span th:text="'欢迎您，' + ${user.name}"></span><br>
        <!-- 简写方式：使用‘|’围起来 -->
        <span th:text="|欢迎您，${user.name}|"></span>
    </h1>
    <h1>
        <!-- 运算：运算符放在${}外 -->
        10年后，我<span th:text="${user.age} + 10"></span>岁<br>
        <!-- 比较：gt (>), lt (<), ge (>=), le (<=), not (!), eq (==), neq/ne (!=) -->
        比较结果：<span th:text="${user.age} < ${user.friend.age}"></span><br>
        <!-- 三元运算 -->
        三元：<span th:text="${user.age}%2 == 0 ? '帅' : '不帅'"></span><br>
        <!-- 默认值：注意`?:`之间没有空格 -->
        默认值：<span th:text="${user.name} ?: '硅谷刘德华'"></span>
    </h1>
</body>
</html>

---

对象拆包 th:object

定义一个局部变量来接收域中获取的某个对象，在它的子标签内，可以直接使用*{}获取对象的属性值。

<h2 th:object="${user}">
    <p th:text="*{name}">Jack</p>
    <p th:text="*{age}">21</p>
    <p th:text="*{friend.name}">Rose</p>
</h2>

• 在 h2上 用 th:object="${user}"获取user的值，并且保存

• 在h2内部的任意元素上，可以通过 *{属性名}的方式，来获取user中的属性，这样就省去了user.前缀了

---

逻辑判断 th:if   th:unless

让标记了th:if、th:unless的标签根据条件决定是否显示。

th:if="":当条件的结果为true，当前属性所在的标签会存在于页面中
th:unless="":当条件的结果为false，当前属性所在的标签会存在于页面中

以下情况被认定为true：

表达式值为true
表达式值为非0数值或者字符串
表达式值为字符串，但不是"false","no","off"
表达式不是布尔、数字、字符中的任何一种
其它情况包括null都被认定为false

public class LoginServlet extends ViewBaseServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        User user = new User(1001,"admin","123456",23);
        HttpSession session = request.getSession();
        session.setAttribute("user", user);
        processTemplate("test_if", request, response);
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    判断是否登录
    已登录，显示欢迎您，XXX
    未登录，显示登录和注册的超链接
-->
<div th:if="${session.user != null}">
    <h1 th:text="'欢迎您，'+${session.user.username}"></h1>
</div>
<div th:unless="${session.user != null}">
    <a href="">登录</a>
    <a href="">注册</a>
</div>
</body>
</html>

---

分支控制 th:switch

这里要使用两个指令：th:switch 和 th:case，类似Java的switch case语句

<div th:switch="${user.role}">
  <p th:case="'admin'">用户是管理员</p>
  <p th:case="'manager'">用户是经理</p>
  <p th:case="*">用户是别的玩意</p>
</div>

需要注意的是，一旦有一个th:case成立，其它的则不再判断。与java中的switch是一样的。

另外th:case="*"表示默认，放最后

---

循环 th:each

在迭代的同时，我们也可以获取迭代的状态对象：

<table>
    <tr th:each="user,stat: ${users}">
        <td th:text="${stat.index + 1}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
    </tr>
</table>

stat对象包含以下属性：

• index，从0开始的角标

• count，表示计数，从1开始（可以表示为页面中出现的序号）

• size，总元素个数

• current，当前遍历到的元素

• even/odd，返回是否为奇偶，boolean值

• first/last，返回是否为第一或最后，boolean值

---

引用公共模块： 

作用就是抽取各个页面的公共部分

第一步：创建页面的公共代码片段

th:fragment =“”给公共模块取名 

<div th:fragment="header">
    <p>被抽取出来的头部内容</p>
</div>

第二步：在需要的页面中进行包含公共代码片段

 th:include用的最多：

th:insert=“逻辑视图：: 公共模块名”        把公共模块【连带div】添加到当前标签内部
th:include=“逻辑视图：: 公共模块名”     把公共模块内容【不带div】引用到当前属性所在的标签中 
th:replace =“逻辑视图：: 公共模块名”    把公共div替换当前div

<!-- 代码片段所在页面的逻辑视图 :: 代码片段的名称 -->
<div id="badBoy" th:insert="segment :: header">
    div标签的原始内容
</div>

<div id="worseBoy" th:replace="segment :: header">
    div标签的原始内容
</div>

<div id="worstBoy" th:include="segment :: header">
    div标签的原始内容
</div>