web应用程序开发案例分析实验四 Spring Boot视图技术

小孙同学1024

已于 2023-11-17 12:09:24 修改

阅读量353

点赞数

分类专栏： web应用程序开发案例分析实验文章标签： spring boot java 后端

于 2023-11-03 21:28:18 首次发布

本文链接：https://blog.csdn.net/Annzz123/article/details/134211088

版权

web应用程序开发案例分析实验专栏收录该内容

10 篇文章 2 订阅

订阅专栏

实验四 Spring Boot视图技术

一、实验目的

1、熟悉Thymeleaf模板引擎基本语法

2、熟悉Spring Boot模板配置和静态资源映射规则

3、掌握Spring Boot国际化功能实现

4、掌握Spring Boot整合Thymeleaf模板引擎使用

二、实验内容

1、使用 Thymeleaf 完成数据的页面展示

2、使用Thymeleaf配置国际化页面

三、实验步骤

1、创建Spring Boot项目，在pom.xml中引入Thymeleaf依赖

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

2、编写配置文件application.properties文件中，设置页面数据缓存

spring.thymeleaf.cache=false

3、在src\main\java\com.lg.ch04下创建controller文件夹并在controller文件夹下创建控制类LoginController.java

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

@Controller
public class LoginController {
    @GetMapping("/toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login";
    }
}

4、创建模板页面并引入静态资源文件

在resources的templates目录下创建模板页面login.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
                                                                 shrink-to-fit=no">
    <title>用户登录界面</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
</head>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
<p class="mt-5 mb-3 text-muted">©<span th:text="${currentYear}">2018</span>
-<span th:text="${currentYear}+1">2019</span></p>

5、整合效果测试

启动项目进行测试，在浏览器上访问http://localhost:8080/toLoginPage，在页面底部动态显示了当前日期2019-2020，而不是文件中的静态数字2018-2019

6、编写多语言国际化文件及配置文件

在resources下创建i18n文件夹并在i18n文件夹下创

① login_en_US.properties文件

login.tip=Please sign in
login.username=Username
login.password=Password
login.rememberme=Remember me
login.button=Login

② login_zh_CN.properties

login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录

③ login.properties

login.tip=请登录
login.username=用户名
login.password=密码
login.rememberme=记住我
login.button=登录

7、编写配置文件

打开项目的application.properties全局配置文件，在该文件中添加国际化文件基础名设置

spring.messages.basename=i18n.login

8、定制区域化解析器MyLocalResovel

在com.lg.ch04文件夹下创建config文件夹并在config文件夹下创建MyLocalResovel.java文件

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.lang.Nullable;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

@Configuration
public class MyLocalResovel implements LocaleResolver {
    // 自定义区域解析方式
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        // 获取页面手动切换传递的语言参数l
        String l = httpServletRequest.getParameter("l");
        // 获取请求头自动传递的语言参数Accept-Language
        String header = httpServletRequest.getHeader("Accept-Language");
        Locale locale=null;
        // 如果手动切换参数不为空，就根据手动参数进行语言切换，否则默认根据请求头信息切换
        if(!StringUtils.isEmpty(l)){
            String[] split = l.split("_");
            locale=new Locale(split[0],split[1]);
        }else {
            // Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
            String[] splits = header.split(",");
            String[] split = splits[0].split("-");
            locale=new Locale(split[0],split[1]);
        }
        return locale;
    }
    @Override
    public void setLocale(HttpServletRequest httpServletRequest, @Nullable
            HttpServletResponse httpServletResponse, @Nullable Locale locale) {
    }
    // 将自定义的MyLocalResovel类重新注册为一个类型LocaleResolver的Bean组件
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocalResovel();
    }
}

9、页面国际化使用

修改login.html

<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1>
<input type="text" class="form-control"
                  th:placeholder="#{login.username}" required="" autofocus="">
<input type="password" class="form-control"
                  th:placeholder="#{login.password}" required="">
<div class="checkbox mb-3">
    <label>
        <input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
    </label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" 
                               th:text="#{login.button}">登录</button>
<p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>
                                  -<span th:text="${currentYear}+1">2019</span></p>
<a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>

10、整合效果测试

启动项目进行效果测试，在浏览器上访问http://localhost:8080/toLoginPage

打开的IDEA开发工具中，依次选择【File】->【Settings】选项打开项目设置窗口，在窗口中搜索“File Encodings”关键字，将Default encoding for properties files 设置为UTF-8

重启项目并访问http://localhost:8080/toLoginPage

小孙同学1024

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web应用程序开发案例分析实验四 Spring Boot视图技术

启动项目进行测试，在浏览器上访问http://localhost:8080/toLoginPage，在页面底部动态显示了当前日期2019-2020，而不是文件中的静态数字2018-2019。3、在src\main\java\com.lg.ch04下创建controller文件夹并在controller文件夹下创建控制类LoginController.java。在com.lg.ch04文件夹下创建config文件夹并在config文件夹下创建MyLocalResovel.java文件。
复制链接

扫一扫