四，搭建环境：表述层

四，搭建环境：表述层

@[toc]

---

设定 Web 工程

web.xml 的配置编写

在 demo-module01-web 模块下的， web.xml 进行编写

• 配置 ContextLoaderListener
• 配置：DispatcherServlet
• 配置：CharacterEncodingFilter 设置字符集
• 配置：HiddenHttpMethodFilter

配置 ContextLoaderListener

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" version="5.0"> <!-- 第一部分：加载 spring-persist.xml 配置文件--> <context-param> <param-name>contextConfigLocation</param-name> <!-- classpath:表示从 项目的 resources根路径下找--> <param-value>classpath:spring-persist.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> </web-app>

配置 DispatcherServlet

还是在 demo-module01-web 模块下的， web.xml 进行编写

注意：同时在该 demo-module01-web 模块下的src/main/resources根路径下，创建一个名为spring-mvc.xml 的配置文件。

xml

代码解读

复制代码

<!-- 第二部分：加载 spring-mvc.xml 配置文件--> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <!-- 优先加载--> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" version="5.0"> <!-- 第一部分：加载 spring-persist.xml 配置文件--> <context-param> <param-name>contextConfigLocation</param-name> <!-- classpath:表示从 项目的 resources根路径下找--> <param-value>classpath:spring-persist.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 第二部分：加载 spring-mvc.xml 配置文件--> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <!-- 优先加载--> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>

配置 CharacterEncodingFilter

还是在 demo-module01-web 模块下的， web.xml 进行编写

xml

代码解读

复制代码

<!-- 第三部分：设置字符集的 Filter --> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceRequestEncoding</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>forceResponseEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" version="5.0"> <!-- 第一部分：加载 spring-persist.xml 配置文件--> <context-param> <param-name>contextConfigLocation</param-name> <!-- classpath:表示从 项目的 resources根路径下找--> <param-value>classpath:spring-persist.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 第二部分：加载 spring-mvc.xml 配置文件--> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <!-- 优先加载--> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 第三部分：设置字符集的 Filter --> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceRequestEncoding</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>forceResponseEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>

配置 HiddenHttpMethodFilter

还是在 demo-module01-web 模块下的， web.xml 进行编写

xml

代码解读

复制代码

<!-- 第四部分：按照 RESTFul 风格负责转换请求方式的 Filter --> <filter> <filter-name>hiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>hiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" version="5.0"> <!-- 第一部分：加载 spring-persist.xml 配置文件--> <context-param> <param-name>contextConfigLocation</param-name> <!-- classpath:表示从 项目的 resources根路径下找--> <param-value>classpath:spring-persist.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 第二部分：加载 spring-mvc.xml 配置文件--> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <!-- 优先加载--> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 第三部分：设置字符集的 Filter --> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceRequestEncoding</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>forceResponseEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 第四部分：按照 RESTFul 风格负责转换请求方式的 Filter --> <filter> <filter-name>hiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>hiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>

配置 Spring MVC

就是上一步，在配置DispatcherServlet时，创建的 spring-mvc.xml 的文件下编写。也就是在 demo-module01-web 模块下的 resources 目录下的 spring-mvc.xml 文件

xml

代码解读

复制代码

<!-- 开启 SpringMVC 的注解驱动功能--> <mvc:annotation-driven/> <!-- 让 SpringMVC 对没有 @RequestMapping的请求直接放行--> <mvc:default-servlet-handler></mvc:default-servlet-handler>

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 开启 SpringMVC 的注解驱动功能--> <mvc:annotation-driven/> <!-- 让 SpringMVC 对没有 @RequestMapping的请求直接放行--> <mvc:default-servlet-handler></mvc:default-servlet-handler> </beans>

配置视图解析相关

在配置DispatcherServlet时，创建的 spring-mvc.xml 的文件下编写。也就是在 demo-module01-web 模块下的 resources 目录下的 spring-mvc.xml 文件

xml

代码解读

复制代码

<!-- 配置视图解析器 --> <bean id="thymeleafViewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> <property name="order" value="1"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateEngine"> <bean class="org.thymeleaf.spring5.SpringTemplateEngine"> <property name="templateResolver"> <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> <property name="prefix" value="/WEB-INF/templates/"/> <property name="suffix" value=".html"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateMode" value="HTML5"/> </bean> </property> </bean> </property> </bean>

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <!-- 开启 SpringMVC 的注解驱动功能--> <mvc:annotation-driven/> <!-- 让 SpringMVC 对没有 @RequestMapping的请求直接放行--> <mvc:default-servlet-handler></mvc:default-servlet-handler> <!-- 配置视图解析器 --> <bean id="thymeleafViewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> <property name="order" value="1"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateEngine"> <bean class="org.thymeleaf.spring5.SpringTemplateEngine"> <property name="templateResolver"> <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> <property name="prefix" value="/WEB-INF/templates/"/> <property name="suffix" value=".html"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateMode" value="HTML5"/> </bean> </property> </bean> </property> </bean> </beans>

注意：需要我们自己手动创建 templates 目录。(还是在：demo-module01-web模块下)

配置自动扫描的包

在配置DispatcherServlet时，创建的 spring-mvc.xml 的文件下编写。也就是在 demo-module01-web 模块下的 resources 目录下的 spring-mvc.xml 文件

xml

代码解读

复制代码

<!-- 配置自动扫描的包 --> <context:component-scan base-package="com.rainbowsea.imperial.court.*"></context:component-scan>

xml

代码解读

复制代码

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"> <!-- 开启 SpringMVC 的注解驱动功能--> <mvc:annotation-driven/> <!-- 让 SpringMVC 对没有 @RequestMapping的请求直接放行--> <mvc:default-servlet-handler></mvc:default-servlet-handler> <!-- 配置自动扫描的包 --> <context:component-scan base-package="com.rainbowsea.imperial.court.*"></context:component-scan> <!-- 配置视图解析器 --> <bean id="thymeleafViewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> <property name="order" value="1"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateEngine"> <bean class="org.thymeleaf.spring5.SpringTemplateEngine"> <property name="templateResolver"> <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> <property name="prefix" value="/WEB-INF/templates/"/> <property name="suffix" value=".html"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateMode" value="HTML5"/> </bean> </property> </bean> </property> </bean> </beans>

配置 view-controller 访问首页

在配置DispatcherServlet时，创建的 spring-mvc.xml 的文件下编写。也就是在 demo-module01-web 模块下的 resources 目录下的 spring-mvc.xml 文件

就是不需要 controller 控制器，就可以访问该页面，一般（是错误，首页，异常的页面显示）

创建首页模板文件

在 demo-module01-web 模块下的 webapp\templates\ 目录下的创建一个名为 index.html 前端页面文件

测试

启动配置 Tomcat 服务器启动测试

选择 demo-module01-web ，因为该项目中只有它是 web

测试成功，编写我们的登录首页：

html

代码解读

复制代码

<!DOCTYPE html> <html lang="en" xml:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <!-- @{/auth} 解析后：/demo/auth --> <form th:action="@{/auth/login}" method="post"> <!-- th:text 解析表达式后会替换标签体 --> <!-- ${attrName} 从请求域获取属性名为 attrName 的属性值 --> <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>