【JAVADAY35】thymeleaf技术的初步使用及基本语法

路径问题

• 使用相对路径

  • 如何在user下的login.html，引用css中的login.css

    • 使用…/回到当前所在路径的上一级，就回到了user这一级，因为css和user是同一级内的，所以

      …/css/login.css即可

  • 如何在index.html引用login.css，因为index.html与css在同一级，因此可以写成:css/login.css
  • 缺点：如果项目所在文件夹套的比较多将会使用多次…/，比较麻烦

• 使用绝对路径

  • 绝对路径的根路径是:http://localhost:8080/pro10，即你的webapp项目所在的那个路径。
  • 由根路径，我们就很好找其他文件了，比如要找login.css，就直接http://localhost:8080/pro10/css/login.css
  • 优点：不用考虑当前文件所在层级，引用其他文件一律从根开始找。

• base标签:base标签的作用，以及如何替代base标签：

  • 当前页面上的所有路径都以这个为基础。

    <base href="http://localhost:8080/Web2/">嗡嗡嗡
    

  • 因此我们HTML中的路径就可以写成

  <a href="login/logn.index"></a>
  浏览器会自动以base中的路径为基础补全为：
  <a href="http://localhost:8080/Web2/login/logn.index"></a>
  

  • 怎么动态获取，当前项目的根路径呢？

    • thyme中提供了一个语法th:href=“@{}”就可以替代base标签
    • 我们就可以把上述代码写成

    <a th:href=@{"/login/logn.index"}></a>
    

• 完善水果系统

• th:text语法的使用细节

  • 当它作为静态文件直接运行时，浏览器会自动忽略它不能识别的th:text属性，而显示<p>标签体的文本内容

    当它作为模板文件运行在服务器端时，th:text属性的具体值将会替换<p>标签体的文本内容。

  • th:text=“”用于输出引号里面的内容到HTML

  • 同时它会覆盖掉原本标签内的所有HTML

  • 比如
                    <td th:text="${fruit.fname}"><a href="">苹果</a></td>
    此时被<td>标签包裹的<a href="">苹果</a>，将被th:text输出的内容给覆盖掉
        超链接以及苹果失效
    

• th:utext

属性th:utext与th:text的区别在于：

• th:text默认会对含有 HTML 标签的内容进行字符转义；
• th:utext（Unescaped Text）则不会对含有 HTML 标签的内容进行字符转义；

假设：message = "<b>Welcome to BeiJing!</b>"。

使用th:text属性：

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

th:text效果：Welcome to BeiJing!

使用th:utext属性：

<p th:utext="${message}"></p>

th:utext效果：Welcome to BeiJing!

• th:href语法的使用

  •             <tr>
                    <!--使用th:href语法获取webapp的根路径
                    注意此根路径不以斜杠结尾,因此@{}里面要以斜杠开始-->
                    {}里面的被认为是字符串与根路径相加拼成了URL
                    <td>
                        <a th:href="@{/add.do}">新增</a>
                        <a th:href="@{/delete.do}">删除</a>
                        <a th:href="@{/update.do}">修改</a>
                        <a th:href="@{/detail.do}">详情</a>
                    </td>
                </tr>
    

• 如何在href后面传值给下一个页面

  • 第一种写法，不推荐，用单引号括起不需要解析的字符串，没有阔的thyme会按照语法解析

  • <a th:href="@{'/update.do?fid='+${fruit.fid}}">修改</a>
    

  • 第二种写法，推荐

  • 用括号括起来需要传的值，(name=value，name=value，name=value…)，不需要问号和&号

  • <a th:href="@{/update.do(fid=${fruit.fid},fname=${fruit.fname},price=${fruit.price},remark=${fruit.remark})}">修改</a>
    

  • 注意，这种写法不仅仅使用与th:href，action也是可以的，只要根路径有关的标签都行

  • <form th:action= ="@{/update.do}">
        @{/xxxx}
    

符号||可以用来将字面值和表达式包裹起来，这样就能方便的替换变量的值，而不需要使用+连接符：

<!-- Welcome to BeiJing! -->
<p th:text="|Welcome to ${location}!|"></p>

• 操作四大域的语法

  • 会话域session

    • session.fruitList session后面是存放在session域中的对象的key
      

  • 请求域request

    • ${fruits123.fid}，request不用写，只需要把request的对象的key写出来，在点对象的属性名就行了

    • 水果编号:<input name="fid" type="text" readonly th:value="${fruits123.fid}"><br>
      

  • 应用域application

    • application.fruitList application后面是存放在application域中的对象的key
      

• 简化html中获取属性的写法

  • 如果是一个属性yy的获取需要 xx.yy类似这种格式都可以使用下面th:object"${xx}"，在子标签中就可以只用属性名就能达到相同的效果

  • <form th:object="${fruits123}">
    <!--原本写法水果编号:<input name="fid" type="text" readonly th:value="${fruits123.fid}"><br>-->
    <!--我们简化一下写法，只需要在大的标签里加上一个th:object="${fruits123}" 大括号里是request的名字-->
    <!--有了上面的语法，我们就可以直接使用*{属性名}来简化操作-->
    水果编号:<input name="fid" type="text" readonly th:value="*{fid}"><br>
    

  • 比如说：我们的index.html页面的详情跳转代码就可以修改为下面这样

  • <td th:object="${fruit}">
    <a th:href="@{/edit.do(fid=*{fid},fname=*{fname},price=*{price},fcount=*{fcount},remark=*{remark})}">详情</a>
        ....
    </td>
    

• 表单提交中文，数据库乱码问题

//request.setCharacterEncoding("UTF-8");解决前端表单提交中文，数据库乱码并且导致前端显示不出来问题
//仅针对post请求有效，写在Java中

• 思考，但不确定是否真是这样

super.processTemplate("index",request,response);
这行代码的作用是，将/index.html路径下的静态页面即index.html,渲染为动态页面,并且跳转至路径页面,默认跟在根目录下。
    并把Java中的request和response传给前端
 如果你直接访问index.html，显然里面写的th是不会生效的，我们必须经过模板引擎thyme leaf，通过使在index中写的语法生效，让静态index变为动态的index
        因此我们引入了逻辑视图
        物理视图= 视图前缀+ 逻辑视图+ 视图后缀
        试图前缀和视图后缀
         /pages/user/login.html
		/pages/user/login_success.html
		/pages/user/regist.html
		/pages/user/regist_success.html
			...
        路径的开头都是：/pages/user/
        路径的结尾都是：.html
        所以，路径开头的部分称之为视图前缀，路径结尾的部分称之为视图后缀。
        视图前缀	  逻辑视图	        视图后缀	  物理视图
	  /pages/user/	  login	           .html	/pages/user/login.html
      /pages/user/	  login_success	   .html	/pages/user/login_success.html

• 思考2，为什么使用super.processTemplate(“index”,request,response);更新后页面不会刷新或者说response.sendRedirect这个方法什么时候用？

response.sendRedirect(request.getContextPath()+"/index");
虽然我写的Java里有很多直接使用的是这个，但实际上，你跳到/项目名/index下，它会寻找/index对于的servlet
在该servlet中，我曾经写了一个代码在代码的最后一行，我写了：
        super.processTemplate("index",request,response);
            /*为什么能写super.processTemplate("index",request,response)
              因为：我的代码中update.html点击提交了之后要找/update.do的servlet就找到了这里
              然后通过if，当他走到super.processTemplate这里面的时候，这是一个post的request
              它只进IndexServlet.java的inie和destory方法里并没有进doget，通过在IndexServlet.java中写代码
              也能验证这一点，出来后你会发现它此时的路径依旧是/update.do，因为它执行完后，实际上并不是我们想的那样
              经过doget方法，然后跳转到index.html，它并没有
              而我们用重定向就不会不进doget方法了，因为重定向是一次get请求。
              
              
  不只是update需要用重定向，add也是需要的，因为它也是发了一次post请求，你没法直接用
  super.processTemplate("index",request,response);