SpringBoot学习---页面国际化

简介: SpringBoot学习---页面国际化

一.项目需求

  • 选择英文:网页文字显示为英文模式
  • 选择中文:网页文字显示为中文模式

在这里插入图片描述
项目结构如下:
在这里插入图片描述
index.html(呈现登入界面的html):
在这里插入图片描述
MyMvcConfig.java文件(当在地址栏输入 "/""/index.html" 的时候跳转到index.html界面):
在这里插入图片描述
如输入http://localhost:8089/:
在这里插入图片描述
如输入http://localhost:8089/index.html
在这里插入图片描述

二.实现需求步骤

1.设置properties的编码为utf-8

在这里插入图片描述

在这里插入图片描述

2.在resources目录下创建i18n文件

在这里插入图片描述

3.创建三个Resource Bundle文件(文件名为 login,login_en_US和login_zh_CN)

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

4.通过#{…}消息表达式(国际表达式)来代替idnex.html中的中文

修改前:
在这里插入图片描述
修改后:
在这里插入图片描述

5.在login,login_en_US和login_zh_CN中对index.html的国际表达式赋值

login是默认情况下,采用的格式,这里默认采用中文:
在这里插入图片描述
login_zh_CN:采用中文模式
在这里插入图片描述
login_en_US:采用英文模式
在这里插入图片描述
赋完值后,index.html就不会报错了:
在这里插入图片描述

6.在config文件中创建一个MyLocalResolver类,该类实现LocaleResolver接口,来实现国际化操作

index.html中有一个中文和英文的按钮,当点击的时候,将参数传递到后端,交给MyLocalResolver类进行处理,实现国际化
在这里插入图片描述
MyLocalResolver类代码如下:
在这里插入图片描述

7.在MyMvcConfig类中使用自己自定义的国际化组件

在这里插入图片描述

8.在application.properties中指定自定义的目录

在这里插入图片描述

9.运行效果

点击English
在这里插入图片描述
点击中文
在这里插入图片描述

三.项目完善

上面的操作虽然完成了需求但是存在一个问题,当我们访问其他页面时就无效了,这是因为我们是通过地址后面的参数(l='en_US')来设置中英文,如何解决这个问题呢,我们可以在设置语言的时候将该信息写入到session中去,这样下次访问的时候,如果地址后面没有参数(l='en_US'),我们就可以直接从session中获取。

在MyLocalResolver类中:
在这里插入图片描述

相关文章
|
5天前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
5天前
|
存储 前端开发 JavaScript
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
本文介绍了使用Springboot后端和Vue前端实现图片与表单数据一起提交到后端,并保存图片地址到数据库,然后展示存储的图片到前端Vue页面的完整流程。
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
|
6天前
|
前端开发 Java Spring
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
这篇文章展示了一个使用Spring Boot、Thymeleaf和Bootstrap框架开发的简洁、响应式的商城管理页面,包括美食介绍、产品详情、购物车等功能,适合初学者学习和使用。
springboot+thymeleaf+bootstrap 超级无敌简洁的页面展示 商城管理页面
|
6天前
|
Java 数据库 Spring
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
这篇文章介绍了如何在Spring Boot和Thymeleaf框架中使用条件运算符来根据数字字段的值动态替换显示不同的字符串,例如将订单状态的数字0和1替换为"未付款"和"已付款"等。
springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符
|
1月前
|
Java 数据格式 微服务
2024最新首发,全网最全 Spring Boot 学习宝典(附思维导图)
📚 《滚雪球学Spring Boot》是由CSDN博主bug菌创作的全面Spring Boot教程。作者是全栈开发专家,在多个技术社区如CSDN、掘金、InfoQ、51CTO等担任博客专家,并拥有超过20万的全网粉丝。该教程分为入门篇和进阶篇,每篇包含详细的教学步骤,涵盖Spring Boot的基础和高级主题。
110 4
2024最新首发,全网最全 Spring Boot 学习宝典(附思维导图)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线学习过程管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线学习过程管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线学习过程管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
20天前
|
安全 Java 数据库
三更草堂 Spring Security学习总结(思路整理)
Spring Security学习总结(思路整理)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生国学自主学习平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生国学自主学习平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的诗词学习系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的诗词学习系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
51 2