《大数据技术及应用》课件 单元3 登录及跳转页面初探

单元3登录及跳转页面初探学习目标01在SpringBoot项目中使用Thymeleaf模板引擎02运用Thymeleaf模板引擎输出静态页面03运用SpringBoot结合Thymeleaf输出含有动态数据的页面04运用Thymeleaf模板引擎结合Java实体类实现简单程序设计任务3.1输出用户登录界面任务情境01SpringBoot默认只能输出字符串数据，而仅靠输出字符串，是无法满足用于对软件系统的使用需求的。为了提升用户对软件系统的使用体验，我们需要给用户呈现一个完整的操作页面。我们需要引入模板引擎来实现数据展示。SpringBoot默认输出限制引入模板引擎：使用SpringBoot开发时，需引入模板引擎如Thymeleaf来实现数据与界面的分离，生成HTML供浏览器渲染。用户体验与动态数据展示：确保页面简洁、美观、易用，并合理使用Thymeleaf语法（如`th:text`）来动态展示数据，如用户登录状态。后端处理与Controller方法：后端处理用户登录请求，返回响应结果。新增`login()`方法接收URL请求，编写业务逻辑如验证登录凭证。验证通过则重定向，失败则返回错误信息。工作流程：在`pom.xml`中添加Maven依赖以引入Thymeleaf。其次，在`application.yml`中配置模板文件的编码等。最后，在`src/main/resources/templates`下创建默认首页文件并编写HTML。任务布置：构建竞赛登记管理系统的静态登录页面知识准备02Thymeleaf缓存配置01spring.thymeleaf.cache的作用提高渲染效率缓存Thymeleaf模板，减少重复解析和编译，加快页面渲染速度。降低服务器压力减少服务器对CPU和内存的使用，提高服务器处理请求的能力。保证页面一致性缓存模板后，多次请求将获取相同的页面内容，保证页面的一致性。缓存的开启与关闭在某些情况下，需要关闭缓存，以确保模板的实时更新和调试的方便。缓存的关闭通过设置Thymeleaf的配置项，可以开启缓存功能，提高模板渲染的效率。缓存的开启缓存对系统性能的影响缓存可以减少数据库查询次数，提高页面渲染速度，从而提升系统响应速度。提高响应速度缓存可以分担服务器的处理压力，避免服务器过载，提高系统的稳定性和可靠性。减轻服务器压力缓存可以减少页面加载时间，提高用户访问体验，增加用户满意度和忠诚度。优化用户体验Thymeleaf模板文件位置配置02spring.thymeleaf.prefix的作用指定Thymeleaf模板文件的前缀路径，如classpath:/templates/。定义模板文件路径通过合理配置前缀，可以加快模板文件的加载速度，提高开发效率。提高开发效率通过配置前缀，可以简化模板文件的引用，提高代码的可读性和可维护性。简化模板引用配置模板文件位置Thymeleaf默认会在项目的"src/main/resources/templates"目录下查找模板文件。默认位置可以通过在SpringBoot的配置文件中设置"spring.thymeleaf.prefix"属性，来自定义模板文件的位置。自定义位置可以配置多个模板文件位置，Thymeleaf会按照配置的先后顺序进行查找。多位置配置模板文件位置的选择原则01模板文件应放置在Web应用的根目录下，便于Web服务器访问。便于访问模板文件应放置在Web应用的安全区域内，防止未经授权的用户访问。02安全性03模板文件应放置在易于管理和维护的目录下，方便开发人员查找和修改。可维护性Thymeleaf页面后缀配置03spring.thymeleaf.suffix的作用定义页面后缀在SpringBoot中，通过配置spring.thymeleaf.suffix属性，可以定义Thymeleaf模板页面的后缀名。简化页面引用配置合适的后缀名可以简化模板页面中对于静态资源的引用，提高开发效率。提高代码可读性明确的页面后缀配置有助于其他开发人员理解页面资源的组织方式，提高代码的可读性。页面后缀的格式选择Thymeleaf默认使用HTML作为模板文件的后缀，如index.html。HTML后缀可以使用Thymeleaf特定的后缀，如index.thymeleaf，以明确标识模板文件。THYMELEAF后缀可以根据项目需求自定义模板文件的后缀，如index.tpl，但需要在配置中指定。自定义后缀页面后缀与模板文件的关系后缀配置方法页面后缀的作用页面后缀用于识别Thymeleaf模板文件，确保正确解析和渲染页面。在Thymeleaf配置文件中设置页面后缀，如“.html”，以便正确加载模板文件。后缀与模板关系页面后缀与模板文件内容相关联，共同构成完整的页面展示效果。Thymeleaf模板样式配置04spring.thymeleaf.mode的作用spring.thymeleaf.mode设置为HTML5时，Thymeleaf将使用HTML5规范解析模板。HTML5模式设置为LEGACYHTML4时，Thymeleaf将使用HTML4规范解析模板，兼容旧版浏览器。LEGACYHTML4模式设置为XML时，Thymeleaf将使用XML规范解析模板，适用于需要严格XML格式的场合。XML模式HTML5样式的配置在Thymeleaf模板中，使用HTML5的Doctype声明，确保浏览器以HTML5标准解析模板。HTML5Doctype通过Thymeleaf的语法，将CSS样式表链接到模板中，为页面提供统一的样式。CSS样式链接在Thymeleaf模板中，可以直接使用内联样式为元素设置样式，但通常不推荐这样做，因为不利于样式的复用和维护。内联样式其他可选的模板样式第三方样式标准样式0103Thymeleaf还支持使用第三方提供的模板样式，这些样式通常具有更加丰富的功能和更高的美观度。Thymeleaf提供了一套标准的模板样式，适用于大多数常见的Web应用。02用户可以根据自己的需求，自定义Thymeleaf模板的样式，包括颜色、字体、布局等。自定义样式Thymeleaf模板编码配置05spring.thymeleaf.encoding的作用设置模板编码spring.thymeleaf.encoding用于设置Thymeleaf模板的编码方式，确保模板解析和渲染时字符编码的正确性。防止乱码问题通过正确配置spring.thymeleaf.encoding，可以避免在Thymeleaf模板渲染过程中出现的乱码问题，提高用户体验。提高系统稳定性合理的编码配置有助于提高系统的稳定性，减少因编码问题导致的潜在错误和异常。编码格式的选择原则选择广泛支持的编码格式，以确保在各种环境下都能正常显示。兼容性01选择易于阅读和理解的编码格式，以提高代码的可维护性。可读性02选择对性能影响较小的编码格式，以提高系统的响应速度。性能03编码格式与模板文件的关系不同的编码格式会影响模板文件的显示和解析。编码格式影响01UTF-8和ISO-8859-1是Thymeleaf常用的编码格式。常用编码设置02在Thymeleaf的配置文件中，可以设置模板文件的默认编码格式。配置方法03任务实施03在项目的`src/main/resources/templates`目录下创建名为`index.html`的默认首页文件。文件内容按指定格式填写。添加默认首页文件点击三角箭头符号启动项目。启动项目并访问验证工作流程项目启动成功后，通过浏览器访问`http://localhost:8080/`验证模板引擎整合情况。若整合成功，效果如下。</dependencies>标签内添加完依赖后，保存并关闭pom.xml文件。添加Maven依赖在Idea中添加完依赖后点击页面右上角的刷新按钮，Idea将会自动把依赖下载到本地环境中。等待下载完成后，可以在Idea的MavenProjects窗口中看到新添加的Thymeleaf模板引擎依赖项。如果在下载过程中遇到网络问题或其他原因导致下载失败，可以尝试清除Maven本地仓库缓存后重新下载。添加application.yml配置spring:thymeleaf:enabled:trueencoding:utf-8prefix:classpath:/templates/cache:falsemode:HTMLsuffix:.html添加application.yml配置创建index.html文件01在src/main/resources/templates目录下，创建名为index.html的默认首页文件。编写HTML5代码02在index.html文件中，编写静态HTML5代码，包括文档类型声明、语言声明、头部信息（如字符编码和标题）以及主体内容（如欢迎消息）。自动跳转展示03当用户访问系统首页时，系统将自动跳转到index.html页面，并展示编写好的内容。添加默认首页文件点击图3-2中右上方工具栏的三角箭头符号。启动项目访问验证问题排查项目启动成功后，通过浏览器访问[http://localhost:8080/，验证模板引擎整合是否成功。启动项目时遇到问题，查看控制台输出信息获取详情，并根据具体情况进行排查和解决。030201启动项目并访问验证创建一个默认首页文件找到项目中的src/main/resources/templates目录，并创建一个默认首页文件，其名为index.html的文件，文件内容如下：编写登录页面制作需要用到的静态HTML5代码：静态HTML代码写完后，我们再来编写后端代码。静态HTML5代码示例在Controller类中新增一个login()方法该方法主要功能是接收URL请求并进行响应，其关键代码段如下：最后我们运行以上代码，在浏览器中访问http://localhost:8080/login，即可看到如图3-4所示的运行结果。后端代码示例运行成功效果展示在浏览器中访问http://localhost:8080/login，即可看到如下图所示的运行结果。（SprintBoot项目本地启动时，通常默认使用8080端口）任务3.2显示相同url下不同角色的不同首页任务情境01需求分析：系统中不同角色需看到不同首页内容，需根据用户角色动态加载和显示页面内容。教师登录后需填写竞赛信息，需提供竞赛信息登记表单。技术选型：选用SpringBoot作为后端框架，Thymeleaf模板引擎作为前端框架，以实现动态数据加载和页面元素控制。任务背景编写前端代码：使用Thymeleaf模板引擎编写前端代码，实现页面元素渲染和动态数据加载。编写后端代码：使用SpringBoot编写后端代码，实现数据处理和传输。测试和优化：测试代码功能和性能，进行必要优化。任务要求任务背景知识准备02Thymeleaf介绍定义与用途Thymeleaf是一个现代服务器端Java模板引擎，适用于Web和独立环境。它为HTML、XML、JavaScript、CSS和文本文件提供模板，帮助开发人员便捷地管理Web应用程序的视图层。主要特点Thymeleaf以易用性、强大功能、高可维护性和良好安全性为主要特点。定义与用途链接表达式用于生成Web应用程序中的链接，通常用于<a>标签的href属性中，以指定链接的URL。Thymeleaf的语法Thymeleaf使用@{...}语法来表示链接表达式。示例<ath:href="@{/login}">Login</a>会在页面中生成一个指向/login路径的链接。链接表达式03示例<divth:text=”’你是否读过，’+${session.book}+’!!’”><div>01定义与用途标准变量表达式用于获取上下文中的变量值。02语法Thymeleaf使用${...}语法来表示标准变量表达式。标准变量表达式03示例<p>Name:<spanth:text="*{firstName}">Sebastian</span>.</p>01定义与用途选择变量表达式用法跟标准变量表达式类似，不过得预先选择对象来代替上下文变量容器执行。02语法Thymeleaf使用*{...}语法来表示选择变量表达式。选择变量表达式03示例<pth:utext="#{home.welcome}">Welcometoourgrocerystore!</p>01定义与用途消息表达式用于从消息源中提取消息内容实现国际化（“国际化”指软件开发应当具备支持多种语言和地区的功能，也就是页面具备切换页面显示语言的能力。）02语法Thymeleaf使用#{...}语法来表示消息表达式。消息表达式03示例<ath:href=”@{http://localhost:8080/TestThymeleaf}”>项目路径</a>01定义与用途链接表达式一般用于网页页面跳转或html资源引入，在Web开发中使用非常频繁02语法Thymeleaf使用@{...}语法来表示片段表达式。链接表达式03示例<divth:insert="~{header::title}"></div>会在页面中插入header模板的title片段。01定义与用途片段表达式用于在模板中插入其他模板的片段，常用于布局模板中实现页面布局的复用。02语法Thymeleaf使用~{...}语法来表示片段表达式。片段表达式th标签简介Thymeleaf提供的特殊标签，用于在模板中设置属性、样式和行为等。常用th标签th:if、th:unless、th:switch、th:case、th:attr、th:value、th:href、th:src、th:text和th:utext等。功能与应用这些标签可以动态地修改元素的属性、样式和行为，以实现更灵活和可维护的视图层。th标签的使用定义th:onclick是一个用于设置元素点击事件的属性。用途在元素上绑定一个JavaScript函数或表达式。示例<buttonth:onclick="'getCollect()'">收藏</button>，当用户点击“收藏”按钮时，会触发名为“getCollect()”的JavaScript函数。th:onclick动态设置样式th:style可以根据条件或变量动态改变元素的外观。示例<divth:style="'display:'+@{(${sitrue}?'none':'inline-block')}+''"></div>，根据变量“sitrue”的值，动态设置div元素的display样式。th:style用于根据条件判断来显示或隐藏元素。功能若条件为真，则显示元素；否则隐藏元素。用法<divth:if="${rowStat.index}==0">这是第一行</div>示例在示例中，如果当前行的索引号为0，则显示“这是第一行”。解释th:if功能条件判断（反向），当条件为假时显示元素，否则隐藏元素。示例<ath:href="@{/login}"th:unless="${session.user!=null}">Login</a>说明如果用户已登录（session.user不为空），则不显示登录链接。th:unlessth:switch用于根据多个条件进行选择性匹配，类似于Java中的switch语句。以`th:switch`开始，并使用`th:case`进行条件判断。`th:case`的值可以是字符串、数字等，用于与`th:switch`的表达式进行匹配。在`<divth:switch="${user.role}">`中，`${user.role}`是需要匹配的值。`th:case="'admin'"`、`th:case="'teacher'"`分别匹配"admin"和"teacher"角色，并显示相应的段落。`th:case="*"`作为默认情况，当没有匹配到任何`th:case`时，显示"Userroleisunknown"。用途语法结构示例th:switchVSth:attr可以用来修改元素如src、title等通用属性。示例<imgth:attr="src=@{/image/aa.jpg},title=#{logo}">中，img元素的src属性被设置为/image/aa.jpg，title属性被设置为logo的文本内容。通用属性修改th:attrth:value用于指定标签的属性值。属性值修改<inputid="msg"type="hidden"th:value="${msg}"/>示例将input元素的value属性设置为变量“msg”的值。说明th:valueth:href设定链接地址使用th:href属性为a标签设定链接地址。例如，<ath:href="@{/logout}"class="signout"></a>将a标签的href属性设置为/logout，并添加了一个signout的类名。设定资源地址使用th:src可以为script或img等元素设定资源地址。例如，<scriptth:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"></script>这段代码将script元素的src属性设置为/resources/js/jquery/jquery.json-2.4.min.js。th:srcth:text指定标签显示的文本内容。用途<tdclass="text"th:text="${username}"></td>，在这个例子中，th:text将td元素的文本内容设置为变量username的值。示例用于指定标签显示的文本内容，且不转义特殊标签。<pth:utext="${htmlcontent}">conten</p>中，文本内容设置为“htmlcontent”的值，不进行特殊标签转义。定义示例th:utext声明片段：使用`th:fragment`属性声明一个片段