Thymeleaf：首页（一）

超、凢脫俗 2024-03-22 14:32 49阅读 0赞

#### 依赖 ####

<dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        <scope>provided</scope>
    </dependency>
    
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf</artifactId>
        <version>3.0.11.RELEASE</version>
    </dependency>

#### 基类 ####

import org.thymeleaf.TemplateEngine;
    import org.thymeleaf.context.WebContext;
    import org.thymeleaf.templatemode.TemplateMode;
    import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
    
    import javax.servlet.ServletContext;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 处理视图模板文件的 Servlet 基类
     */
    public class ViewBaseServlet extends HttpServlet {
        
    
        private TemplateEngine templateEngine;
    
        /**
         * 初始化
         * @throws ServletException
         */
        @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);
    
        }
    
        /**
         * 请求处理
         * @param templateName
         * @param req
         * @param resp
         * @throws IOException
         */
        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());
        }
    }

import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    public class PortalServlet extends ViewBaseServlet {
        
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            doPost(req, resp);
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
            // 声明要访问的首页的逻辑视图
            String templateName = "index";
    
            // 调用父类的方法根据逻辑视图名称渲染视图
            processTemplate(templateName, req, resp);
        }
    }

#### web.xml ####

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://java.sun.com/xml/ns/javaee"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    		  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
               version="2.5">
        
        
        
        <context-param>
            <param-name>view-prefix</param-name>
            <param-value>/WEB-INF/pages/</param-value>
        </context-param>
        <context-param>
            <param-name>view-suffix</param-name>
            <param-value>.html</param-value>
        </context-param>
    
        
        <servlet>
            <servlet-name>portalServlet</servlet-name>
            <servlet-class>com.wuxian.servlet.PortalServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>portalServlet</servlet-name>
            <url-pattern>/</url-pattern>
        </servlet-mapping>
    </web-app>

#### 首页即为登录页面 ####

<!DOCTYPE html>
    <html lang="en" xml:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <form th:action="@{/auth}" method="post">
        
        <input type="hidden" name="method" value="login" />
    
        
        
        <p style="color: red;font-weight: bold;" th:text="${message}"></p>
        <p style="color: red;font-weight: bold;" th:text="${systemMessage}"></p>
    
        账号：<input type="text" name="loginAccount"/><br/>
        密码：<input type="password" name="loginPassword"><br/>
        <button type="submit">进宫</button>
    </form>
    
    </body>
    </html>