Spring Boot基础学习笔记10：使用Thymeleaf配置国际化页面

其他 2020-09-13 22:43:17 阅读次数: 0

文章目录

零、学习目标

1、掌握使用Thymeleaf配置国际化页面

2、掌握Thymeleaf复杂数据的展示

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

  • 使用场景：不同国家使用不同的语言，此例对登录页面login.html进行中英两个语言国际化处理
  • 创建ThymeleafI18N项目
    在这里插入图片描述
  • 将上一讲ThymeleafDemo项目的内容拷贝到新项目里
    在这里插入图片描述

（一）编写多语言国际化配置文件

1、在resources下创建i18n目录

  • i18n - internationalization，i与n之间有18个字母
    在这里插入图片描述

2、在i18n目录里创建login.properties

在这里插入图片描述

login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录

3、在i18n目录里创建login_zh_CN.properties

在这里插入图片描述

login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录

4、在i18n目录里创建login_en_US.properties

在这里插入图片描述

login.title = User Login
login.username = Enter Username
login.password = Enter Password
login.rememberme = Remember Me
login.button = Login
  • 注意：一定要三个文件的名称正确，编码最好采用UTF8

（二）编写全局配置文件

  • 打开项目的application.properties全局配置文件，在该文件中添加国际化文件基础名设置
    在这里插入图片描述

（三）定制区域信息解析器

  • 创建一个用于定制国际化功能区域信息解析器的自定义配置类MyLocalResolver，MyLocalResolver自定义区域解析器配置类实现了LocaleResolver接口，并重写了其中的resolveLocale()方法进行自定义语言解析，最后使用@Bean注解将当前配置类注册成Spring容器中的一个类型为LocaleResolver的Bean组件，这样就可以覆盖默认的LocaleResolver组件。
    在这里插入图片描述
package net.hw.lesson10.resolver;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * 功能：自定义区域解析器
 * 作者：华卫
 * 日期：2020年09月09日
 */
@Configuration
public class MyLocaleResolver implements LocaleResolver {
    
    
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
    
    
        String flag = httpServletRequest.getParameter("flag");
        Locale locale = Locale.getDefault();
        if (!StringUtils.isEmpty(flag)) {
    
    
            String[] split = flag.split("_");//使用下划线切分出一个数组，如zh_CN，["zh","CN"]
            locale = new Locale(split[0], split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
    
    
    }

    @Bean
    public LocaleResolver localeResolver() {
    
    
        return new MyLocaleResolver();
    }
}
  • 代码关键点说明
  1. 使用@Configuration注解成一个配置类
  2. 重写resolveLocale方法，根据请求参数的值来实例化Locale对象
  3. 使用@Bean把这个配置类交给Spring容器进行管理

（四）页面国际化使用

  • 用户登录页面login.html结合Thymeleaf模板引擎实现国际化功能
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center" th:text="#{login.title}">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.username}" required
                       autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" th:placeholder="#{login.password}" required>
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox" id="remember-me">[[#{login.rememberme}]]
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit" th:text="#{login.button}">登录</button>
            </div>
            <div class="text-center">
                <a class="btn btn-sm" th:href="@{/toLoginPage(flag='zh_CN')}">中文</a>
                <a class="btn btn-sm" th:href="@{/toLoginPage(flag='en_US')}">English</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

（五）整合效果测试

  • 启动应用
    在这里插入图片描述
  • 在浏览器里访问http://localhost:8080/toLoginPage
    在这里插入图片描述
  • 测试中英文切换
    在这里插入图片描述

二、Thymeleaf复杂数据的展示

（一）创建用户实体类

在这里插入图片描述

package net.hw.lesson10.bean;

/**
 * 功能：用户实体类
 * 作者：华卫
 * 日期：2020年09月09日
 */
public class User {
    
    
    private Integer id;
    private String name;
    private String gender;
    private Integer age;

    public User() {
    
    
    }

    public User(Integer id, String name, String gender, Integer age) {
    
    
        this.id = id;
        this.name = name;
        this.gender = gender;
        this.age = age;
    }

    public Integer getId() {
    
    
        return id;
    }

    public void setId(Integer id) {
    
    
        this.id = id;
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

    public String getGender() {
    
    
        return gender;
    }

    public void setGender(String gender) {
    
    
        this.gender = gender;
    }

    public Integer getAge() {
    
    
        return age;
    }

    public void setAge(Integer age) {
    
    
        this.age = age;
    }

    @Override
    public String toString() {
    
    
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                '}';
    }
}

（二）创建用户控制器

在这里插入图片描述

package net.hw.lesson10.controller;

import net.hw.lesson10.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;

/**
 * 功能：用户控制器
 * 作者：华卫
 * 日期：2020年09月09日
 */
@Controller
public class UserController {
    
    
    @RequestMapping("/allUsers")
    public String allUsers(HttpServletRequest request, Model model) {
    
    
        model.addAttribute("users", getUsers());
        return "allUsers"; // 模板页面文件名
    }

    /**
     * @return 用户列表
     */
    private List<User> getUsers() {
    
    
        List<User> users = new ArrayList<>();
        users.add(new User(1, "李红玉", "女", 20));
        users.add(new User(2, "肖雨涵", "男", 18));
        users.add(new User(3, "唐忠刚", "男", 19));
        users.add(new User(4, "郑小红", "女", 18));
        users.add(new User(5, "陆文君", "女", 19));
        return users;
    }
}

（三）创建显示全部用户信息模板页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-sm-12 col-md-8 col-xl-4 text-center m-auto border-warning border bg-light"
     style="margin-top:20px!important;">
    <p class="text-success h4">查询到的用户信息</p>
    <table class="table table-hover">
        <tr class="row">
            <th class="col-sm-3 col-md-3 col-xl-3 text-center">编号</th>
            <th class="col-sm-3 col-md-3 col-xl-3 text-center">姓名</th>
            <th class="col-sm-3 col-md-3 col-xl-3 text-center">性别</th>
            <th class="col-sm-3 col-md-3 col-xl-3 text-center">年龄</th>
        </tr>
        <tr class="row " th:if="${users} ne null" th:each="user:${users}">
            <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.id}"></td>
            <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.name}"></td>
            <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.gender}"></td>
            <td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.age}"></td>
        </tr>
    </table>
</div>
</body>
</html>

（四）修改登录成功模板页面

在这里插入图片描述

（五）启动项目，查看效果

  • 启动项目
    在这里插入图片描述
  • 在浏览器里访问http://localhost:8080/toLoginPage
    在这里插入图片描述
  • 用户登录页面，输入用户名与密码
    在这里插入图片描述
  • 用户登录成功页面
    在这里插入图片描述
  • 显示全部用户信息页面
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/howard2005/article/details/108484950
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022