企业级信息系统开发讲课笔记4.10 配置国际化页面

news2024/11/8 6:50:54

文章目录

  • 零、学习目标
  • 一、使用Thymeleaf配置国际化页面
    • （一）创建Spring Boot项目 - ThymeleafI18N
    • （二）编写多语言国际化配置文件
      • 1、在resources下创建i18n目录
      • 2、在i18n目录里创建login.properties
      • 3、在i18n目录里创建login_zh_CN.properties
      • 4、在i18n目录里创建login_en_US.properties
    • （三）编写全局配置文件
    • （四）定制区域信息解析器
    • （五）页面国际化使用
    • （六）整合效果测试
  • 二、Thymeleaf复杂数据的展示
    • （一）创建用户实体类
    • （二）创建用户控制器
    • （三）创建显示全部用户信息模板页面
    • （四）修改登录成功模板页面
    • （五）启动项目，查看效果
  • 三、课后作业

零、学习目标

  1. 掌握使用Thymeleaf配置国际化页面
  2. 掌握Thymeleaf复杂数据的展示

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

  • 使用场景：不同国家使用不同的语言，此例对登录页面login.html进行中英两个语言国际化处理

（一）创建Spring Boot项目 - ThymeleafI18N

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 将上一讲Thymeleaf中的登录控制器、Bootstrap、模板页面、应用属性文件拷贝到新项目
    在这里插入图片描述
  • 启动应用，测试效果
    在这里插入图片描述
  • 登录成功截图
    在这里插入图片描述
  • 登录失败截图
    在这里插入图片描述

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

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;

/**
 * 功能：自定义区域解析器
 * 作者：华卫
 * 日期：2021年05月26日
 */
@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[] splits = flag.split("_"); // 使用下划线切分字符串，返回一个字符串数组，如zh_CN --> ["zh", "CN"]
            // 利用区域标识创建区域对象
            locale = new Locale(splits[0], splits[1]);
        }
        // 返回区域对象
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
    }
    
    @Bean // 定义Bean组件，交给Spring容器管理
    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;

/**
 * 功能：用户实体类
 * 作者：华卫
 * 日期：2021年05月26日
 */
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 java.util.ArrayList;
import java.util.List;

/**
 * 功能：用户控制器
 * 作者：华卫
 * 日期：2021年05月26日
 */
@Controller
public class UserController {
    @RequestMapping("/allUsers")
    public String allUsers(Model model) {
        // 获取用户列表
        List<User> users = getUsers();
        // 将用户列表写入模型里
        model.addAttribute("users", users);
        // 返回逻辑视图名
        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
    在这里插入图片描述
  • 用户登录页面，输入用户名与密码
    在这里插入图片描述
  • 用户登录成功页面
    在这里插入图片描述
  • 显示全部用户信息页面
    在这里插入图片描述

三、课后作业

  • 要求用户数据来自数据库，利用Bootstrap里的Card组件来显示用户列表信息，类似于上一讲显示商品信息的样式
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/636148.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Prompt 用法大全！让 ChatGPT 更智能的六种策略（下）

Prompt 用法大全！让 ChatGPT 更智能的六种策略（下）

上两篇介绍了 Pormpt 用法大全中前四种策略&#xff0c;本篇继续讲解后两种策略。‍‍‍‍‍ 点燃创作灵感&#xff1a;Prompt 实践指南揭秘&#xff01;让 ChatGPT 更智能的六种策略&#xff08;上&#xff09; Prompt 用法大全&#xff01;让 ChatGPT 更智能的六种策略&#…
阅读更多...
基于html+css的图展示122

基于html+css的图展示122

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…
阅读更多...
docker 的网络模式

docker 的网络模式

一、docker网络概述 1、docker网络实现的原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c; 同时Docker网桥是 每个容器的…
阅读更多...
ISO21434 操作和维护(十)

ISO21434 操作和维护(十)

目录 一、概述 二、目标 三、网络安全事件响应 3.1 输入 3.1.1 先决条件 3.1.2 进一步支持信息 3.2 要求和建议 3.3 输出 四、更新 4.1 输入 4.1.1 先决条件 4.1.2 进一步支持信息 4.2 要求和建议 4.3 输出 一、概述 本条款描述了对文件中的项目…
阅读更多...
Mysql中explain的用法详解

Mysql中explain的用法详解

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…
阅读更多...
企业级信息系统开发讲课笔记4.8 Spring Boot整合Redis

企业级信息系统开发讲课笔记4.8 Spring Boot整合Redis

文章目录 零、学习目标一、Redis概述1、Redis简介2、Redis优点&#xff08;1&#xff09;存取速度快&#xff08;2&#xff09;数据类型丰富&#xff08;3&#xff09;操作具有原子性&#xff08;4&#xff09;提供多种功能 3、Redis官网与在线教程 二、使用Spring Boot 整合 R…
阅读更多...
c++11 标准模板（STL）（std::ios_base）（二）

c++11 标准模板（STL）（std::ios_base）（二）

定义于头文件 <ios> class ios_base; 类 ios_base 是作为所有 I/O 流类的基类工作的多用途类。它维护数种数据&#xff1a; 1) 状态信息&#xff1a;流状态标志&#xff1b; 2) 控制信息&#xff1a;控制输入和输出序列格式化和感染的本地环境的标志&#xff1b; 3)…
阅读更多...
音视频技术开发周刊 | 297

音视频技术开发周刊 | 297

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 Geenee AR为品牌商和零售商提供虚拟试穿应用 这意味着Geenee AR的虚拟试穿解决方案能够与品牌商现有的销售渠道无缝集成。 谁说苹果掉队了&#xff1f;WWDC上只字未提AI&a…
阅读更多...
macbook pro存储空间不足怎么办? MacBook Pro怎么优化或清理Mac磁盘空间？

macbook pro存储空间不足怎么办? MacBook Pro怎么优化或清理Mac磁盘空间？

MacBook Pro用久了之后都会堆积很多残留文件或缓存垃圾&#xff0c;久经之下MacBook Pro磁盘空间将会面临不够用的情况。 macbook pro存储空间不足怎么办&#xff1f;macbook pro笔记本中的存储空间不足&#xff0c;想要优化一下&#xff0c;该怎么优化呢&#xff1f; 这时候…
阅读更多...
【电路】电路与电子技术基础 课堂笔记 第8章 负反馈放大电路

【电路】电路与电子技术基础 课堂笔记 第8章 负反馈放大电路

反馈放大电路有很多好处&#xff0c;可以增加放大电路的输入电阻&#xff0c;使输出电流京可能稳定&#xff0c;保证输出电压随负载变化波动较小&#xff0c;减小电路元件参数变化对电路性能的影响等。 反馈放大电路分为正反馈和负反馈放大电路。 8.1 反馈的基本概念 8.1.1 反…
阅读更多...
在(Linux)ubuntu下通过GTK调用libvlc开发视频播放器

在(Linux)ubuntu下通过GTK调用libvlc开发视频播放器

一、项目介绍 本项目实现了一个基于GTK和libvlc的视频播放器。使用GTK创建GUI界面，使用libvlc播放视频。用户可以通过选择视频文件，然后启动播放器来观看视频。 二、VLC介绍 VLC是一款自由、开放源代码的跨平台媒体播放器，支持播放几乎所有常见的音频和视频格式。最初于20…
阅读更多...
STM32管脚模拟协议驱动双路16位DAC芯片TM8211

STM32管脚模拟协议驱动双路16位DAC芯片TM8211

STM32管脚模拟协议驱动双路16位DAC芯片TM8211 TM8211是一款国产的低成本双路16位DAC驱动芯片&#xff0c;可以应用于普通数模转换领域及音频转换领域等。这里介绍STM32 HAL库驱动TM8211的逻辑,时序和代码。 TM8211的功能特性为&#xff1a; TM8211的内部电路功能框图为&…
阅读更多...
一个人最大的愚蠢，就是 “习惯性反驳”

一个人最大的愚蠢，就是 “习惯性反驳”

作者| Mr.K 编辑| Emma 来源| 技术领导力(ID&#xff1a;jishulingdaoli) 每个人都有“反驳的义务”&#xff0c;这是全球顶级咨询公司麦肯锡&#xff0c;对所有员工的行为要求&#xff0c;即对于自己不认同的看法和意见&#xff0c;明确表示出自己的想法并提出反驳。麦肯锡认…
阅读更多...
揭秘报表新玩法！标配插件不再单调，手把手教你如何在浏览器中引入柱形图插件。

揭秘报表新玩法！标配插件不再单调，手把手教你如何在浏览器中引入柱形图插件。

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 图表作为一款用于可视化数据的工具&#xff0c;可以帮助我们更好的分析和理解数…
阅读更多...
【Rust日报】2023-06-10

【Rust日报】2023-06-10

nt-apiset: 一个用于 WindowsAPI API Set Map文件 的 Rust 解析器 我的bootloader程序项目的下一个构建块已经准备好了&#xff01;Nt-apiset 是用 Rust 编写的用于 Windows10及更高版本的 API Set Map 文件的解析器。 API Set是名称以“ API-”或“ ext-”开头的 PE 可执行文件…
阅读更多...
【MySQL】View 视图用法及作用

【MySQL】View 视图用法及作用

文章目录 1. 视图概述1.1 为什么使用视图&#xff1f;1.2 视图的理解 2. 创建视图2.1 创建单表视图2.2 创建多表联合视图2.3 基于视图创建视图 3. 查看视图4. 更新视图的数据4.1 一般情况4.2 不可更新的视图 5. 删除视图6. 总结6.1 视图优点6.2 视图缺点 1. 视图概述 1.1 为什么…
阅读更多...
STL之优先级队列（堆）的模拟实现与仿函数(8千字长文详解！)

STL之优先级队列（堆）的模拟实现与仿函数(8千字长文详解！)

STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数 文章目录 STL之优先级队列&#xff08;堆&#xff09;的模拟实现与仿函数优先级队列的概念priority_queue的接口介绍优先级队列的构造函数 priority_queue模拟实现类成员构造函数向下调整算法——正常实现 push向…
阅读更多...
正负10V电压输入±电流输出伺服阀控制器

正负10V电压输入±电流输出伺服阀控制器

10V、4~20mA模拟指令输入伺服阀放大器是一种控制元件&#xff0c;用于控制液压系统中的比例阀或伺服阀。它主要由三个部分组成&#xff1a;比例阀或伺服阀、放大器。 比例阀或伺服阀是控制流量或压力的元件&#xff0c;它的输出信号通常是电压或电流。放大器用于将实际值转换为…
阅读更多...
微信小程序开发uni-app-8分钟上手开发

微信小程序开发uni-app-8分钟上手开发

本篇文章uni-app微信小程序开发-8分钟上手开发 -首先到微信小程序官网登录/注册微信小程序 微信小程序官网 uni-app 微信小程序 注册微信小程序 这里要注意&#xff1a; 激活邮箱之后&#xff0c;选择主体类型为 “个人类型”&#xff0c;并按要求登记主体信息。主体信息提…
阅读更多...
一种直流转交流的代码实现 - through FFT

一种直流转交流的代码实现 - through FFT

# show how to use FFT, filtered DC signal and return back to SampleValue-time zone. # the basic concept is coming from ChatGPT. # Write in python language. # # created by twicave. # Jun09,2023 # import numpy as np import matplotlib.pyplot as plt# 定义正弦信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023