thymeleaf入门

1while(true){learn}

已于 2022-04-17 17:53:14 修改

阅读量557

点赞数

分类专栏： JavaWeb 文章标签： java

于 2022-04-17 17:52:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_55997161/article/details/124233240

版权

JavaWeb 专栏收录该内容

10 篇文章

订阅专栏

thymeleaf-视图模板技术

1)添加thymeleaf的jar包
2)新建-个Servlet类viewBaseServlet
3)在web.ml文件中添加配置
配置前缀view-prefix
-配置后缀view-suffix
4)使得我们的Servlet继承viewBaseservlet
5)根据逻辑视图名称得到物理视图名称//此处的视图名称是index
那么thymeleaf会将这个逻辑视图名称对应到物理视图名称上去
//逻辑视图名称：index
//物理视图名称：view-prefix+逻辑视图名称+view-suffix
//所以真实的视图名称是：/index.html
super.processTemplate ("index",request,response);

代码重工 (gitee.io)

FruitService

package JavaWeb.Service;

import JavaWeb.dao.BaseServlet;
import JavaWeb.dao.FruitDAO;
import JavaWeb.daomain.Fruit;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

/**
 * @author whlie(true){learn}
 */
//从Servlet3.0开始支持注解的注册
@WebServlet("/index")
public class FruitService extends BaseServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        FruitDAO fruitDAO = new FruitDAO();
        try {
            List<Fruit> fruit = fruitDAO.getFruit();
            //保存到session作用域
            HttpSession session = req.getSession();
            session.setAttribute("fruit",fruit);
            super.processTemplate("index",req,resp);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

index.css

body{
    margin:0;
    padding:0;
    background-color:#808080;
}
div{
    position:relative;
    float:left;
}

#div_container{
    width:80%;
    height:100%;
    border:0px solid blue;
    margin-left:10%;
    float:left;
    background-color: honeydew;
    border-radius:8px;
}
#div_fruit_list{
    width:100%;
    height:750px;
    border:0px solid red;
}
#tbl_fruit{
    width:60%;
    line-height:28px;
    margin-top:16px;
    margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
    border:1px solid gray;
    border-collapse:collapse;
    text-align:center;
    font-size:16px;
    font-family:"黑体";
    font-weight:lighter;
}
.w20{
    width:20%;
}
.delImg{
    width:24px;
    height:24px;
}
.btn{
    border:1px solid lightgray;
    width:80px;
    height:24px;
}
#add_fruit_div{
    border:0px solid red;
    width:40%;
    margin-left:30%;
}
#add_fruit_tbl {
    margin-top:32px;
    width:80%;
    margin-left:10%;
    border-collapse:collapse;
}
#add_fruit_tbl , #add_fruit_tbl tr , #add_fruit_tbl td{
    border:1px solid lightgray;
    text-align:center;
    line-height:28px;
}
.w30{
    width:30%;
}

.input{
    padding-left:4px;
    border:1px solid lightgray;
    width:90%;
}
.center{
    text-align: center;
    font-size: 30px;
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="div_container" th:method="get">
    <div id="div_fruit_list">
        <p class="center">欢迎使用水果库存系统</p>
        <table id="tbl_fruit">
            <tr>
                <th class="w20">名称</th>
                <th class="w20">单价</th>
                <th class="w20">库存</th>
                <th>操作</th>
            </tr>
            <tr th:if="${#lists.isEmpty(session.fruit)}">
                <td colspan="4">对不起，库存为空！</td>
            </tr>
            <tr th:if="${not#lists.isEmpty(session.fruit)}" th:each="f:${session.fruit}">
                <td th:text="${f.getName()}">苹果</td>
                <td th:text="${f.getPrice()}">5</td>
                <td th:text="${f.getCount()}">20</td>
                <td><img src="imgs/del.jpg" class="delImg"/></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 在上下文参数中配置视图前缀和视图后缀 -->
    <context-param>
        <param-name>view-prefix</param-name>
        <param-value>/</param-value>
    </context-param>
    <context-param>
        <param-name>view-suffix</param-name>
        <param-value>.html</param-value>
    </context-param>

</web-app>