internationalization(i18n)

  • 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式。
  • 它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素。
  • 换言之,应用程序的功能和代码设计考虑在不同地区运行的需要,其代码简化了不同本地版本的生产。
  • 开发这样的程序的过程,就称为国际化。

中文语言页面

英文语言页面

浏览器切换中文,英文

Application.java

package com.jege.spring.boot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.PropertySource;
import org.springframework.context.annotation.PropertySources; /**
* @author JE哥
* @email 1272434821@qq.com
* @description:spring boot 启动类
*/ @SpringBootApplication
@PropertySources(value = { @PropertySource("classpath:messages.properties") })
public class Application { public static void main(String[] args) {
SpringApplication.run(Application.class, args);
} }

messages.properties

同messages_en_US.properties

title=User Management
id=Id
name=Name
age=Age
userinfo=UserInfo q=Keyword
add=Add
edit=Edit
remove=Remove
reload=Reload
search=Search
save=Save
cancel=Cancel errorMessage=Error Message
addUser=Add User
editUser=Edit User operationMessage=Operation Message
editSelete=Please select a row of data in the modification
deleteSelete=Please select a row of data in the delete

messages_zh_CN.properties

title=\u7528\u6237\u7BA1\u7406
id=\u7F16\u53F7
name=\u4E0B\u9762
age=\u5E74\u9F84
userinfo=\u7528\u6237\u4FE1\u606F q=\u5173\u952E\u5B57
add=\u6DFB\u52A0
edit=\u7F16\u8F91
remove=\u5220\u9664
reload=\u5237\u65B0
search=\u641C\u7D22
save=\u4FDD\u5B58
cancel=\u53D6\u6D88 errorMessage=\u9519\u8BEF\u63D0\u793A
addUser=\u6DFB\u52A0\u7528\u6237
editUser=\u7F16\u8F91\u7528\u6237
operationMessage=\u64CD\u4F5C\u63D0\u793A
editSelete=\u8BF7\u5148\u9009\u4E2D\u4E00\u884C\u6570\u636E\uFF0C\u5728\u4FEE\u6539\uFF01\uFF01\uFF01
deleteSelete=\u8BF7\u5148\u9009\u4E2D\u4E00\u884C\u6570\u636E\uFF0C\u5728\u4FEE\u6539\uFF01\uFF01\uFF01

user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><spring:message code="title"/></title>
<%@include file="/WEB-INF/page/common.jsp"%>
<script type="text/javascript">
// 页面加载完毕之后才能写jQuery的代码 $(function() {
// 声明并缓存easyui组件
var userDatagrid = $("#userDatagrid");
var userDialog = $("#userDialog");
var userForm = $("#userForm");
var userSearchForm = $("#userSearchForm"); // 表单的添加方法
userForm.form({
url : "/user/save",
onSubmit : function() {
// 在表单提交前,做一下验证
return userForm.form("validate");
},
//data是后台save方法返回的json字符串
success : function(data) {
// 需要自己把字符串转变成json对象,easyiui没有提供转换
data = $.parseJSON(data);
// 判断保存是否成功
if (data.meta.success) {
// 成功就关掉对话框
userDialog.dialog("close");
//重新加载最新的数据
userDatagrid.datagrid("reload");
} else {
$.messager.alert('<spring:message code="errorMessage"/>', data.meta.message, 'error');
}
}
}); // 创建操作data-url的json对象,把页面所有linkbutton组件的操作都统一添加到此对象上面
var urlObjectUser = {
addUser : function() {
// 清空对话框里面的表单内容,防止原来的数据有缓存
userForm.form("clear");
// 打开对话框,修改标题,然后居中
userDialog.dialog("open").dialog("setTitle", '<spring:message code="addUser"/>');
},
updateUser : function() {
// 获取选中行数据
var selectedRow = userDatagrid.datagrid("getSelected");
// 判断是否选中行
if (!selectedRow) {
$.messager.alert('<spring:message code="operationMessage"/>', '<spring:message code="editSelete"/>', "info");
return;
}
// 清空对话框里面的表单内容
userForm.form("clear");
//修改的时候才查询上级null数据
$('#parentCombotree').combotree({
url : '${ctx}/user/getTreeByParent'
});
// 使用easyui的form组件load方法,只要是相同的名称,会自动回显数据
userForm.form("load", selectedRow);
// 打开对话框
userDialog.dialog("open").dialog("setTitle", '<spring:message code="editUser"/>');
},
removeUser : function() {
// 获取选中行数据
var row = userDatagrid.datagrid("getSelected");
// 判断是否选中行
if (!row) {
$.messager.alert('<spring:message code="operationMessage"/>', '<spring:message code="deleteSelete"/>', "info");
return;
}
$.get("/user/delete?id=" + row.id, function(data) {
if (data.meta.success) {//删除成功
userDatagrid.datagrid("reload");
} else {
$.messager.alert('<spring:message code="errorMessage"/>', data.meta.message, 'error');
}
}, 'json');
},
reloadUser : function() {//调用重新加载数据的方法
userDatagrid.datagrid("reload");
},
saveUser : function() {//提交表单
userForm.submit();
},
cancelUser : function() {//关闭对话框
userDialog.dialog("close");
},
searchUser : function() {//简单搜索
userDatagrid.datagrid("load", {
q : $("input[name=q]").val()
});
}
}; // 对页面所有linkbutton组件,统一监听
$("a[data-url]").on("click", function() {
// 获取linkbutton的data-url信息
var url = $(this).data("url");
//如果此目标方法是存在的并且linkbutton组件没有被禁用,才可以点击
if (urlObjectUser[url] && !$(this).linkbutton('options').disabled) {
//调用动态的方法
urlObjectUser[url]();
}
});
});
</script>
</head>
<body>
<!-- 数据表格组件 -->
<table id="userDatagrid" class="easyui-datagrid" url="/user/json" title="<spring:message code='title'/>" fit="true" border="false"
fitColumns="true" singleSelect="true" pagination="true" rownumbers="true" toolbar="#userDatagridToolbar">
<thead>
<tr>
<th data-options="field:'id'"><spring:message code='id'/></th>
<th data-options="field:'name',width:10"><spring:message code='name'/></th>
<th data-options="field:'age',width:10"><spring:message code='age'/></th>
</tr>
</thead>
</table>
<!-- 数据表格组件工具栏 -->
<div class="easyui-layout" fit="true">
<div id="userDatagridToolbar" region="north" border="false"
style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;">
<div style="float: left;">
<a data-url="addUser" href="javascript:void(0)" class="easyui-linkbutton c1" iconCls="icon-add"><spring:message code='add'/></a> <a
data-url="updateUser" href="javascript:void(0)" class="easyui-linkbutton c2" iconCls="icon-edit"><spring:message code='edit'/></a> <a
data-url="removeUser" href="javascript:void(0)" class="easyui-linkbutton c3" iconCls="icon-remove"><spring:message code='remove'/></a>
<a data-url="reloadUser" href="javascript:void(0)" class="easyui-linkbutton c4" iconCls="icon-reload"><spring:message code='reload'/></a>
</div>
<div style="float: right">
<form method="post">
<spring:message code='q'/>:<input name="q" size="10" /> <a data-url="searchUser" href="javascript:void(0)"
class="easyui-linkbutton c5" iconCls="icon-search"><spring:message code='search'/></a>
</form>
</div>
</div>
</div>
<!-- 添加/编辑用户对话框 -->
<div id="userDialog" class="easyui-dialog" style="width: 360px; height: 260px; padding: 10px 20px"
title="管理用户对话框" data-options="closed:true,modal:true,buttons:'#userDialogButtons',resizable:true">
<form id="userForm" method="post">
<input type="hidden" name="id" />
<div class="ftitle"><spring:message code='userinfo'/></div>
<table align="center">
<tr>
<td><spring:message code='name'/>:</td>
<td><input class='easyui-validatebox' required="true" type='text' name='name'></input></td>
</tr>
<tr>
<td><spring:message code='age'/>:</td>
<td><input class='easyui-numberbox' required="true" min="20" max="80" precision="0" type='text'
name='age'></input></td>
</tr>
</table>
</form>
</div>
<!-- 对话框按钮组件 -->
<div id="userDialogButtons">
<a data-url="saveUser" href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok"
style="width: 90px"><spring:message code='save'/></a> <a data-url="cancelUser" href="javascript:void(0)" class="easyui-linkbutton c7"
iconCls="icon-cancel" style="width: 90px"><spring:message code='cancel'/></a>
</div>
</body>
</html>

common.jsp

<!-- 国际化的js-->
<c:if test="${fn:contains(pageContext.request.locale, 'en')}">
<script type="text/javascript" src="${ctx}/static/easyui/locale/easyui-lang-en.js"></script>
</c:if>
<c:if test="${fn:contains(pageContext.request.locale, 'zh')}">
<script type="text/javascript" src="${ctx}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
</c:if>

其他关联项目

源码地址

https://github.com/je-ge/spring-boot

如果觉得我的文章对您有帮助,请打赏支持。您的支持将鼓励我继续创作!谢谢!



Spring Boot 系列教程15-页面国际化的更多相关文章

  1. Spring Boot 系列教程16-数据国际化

    internationalization(i18n) 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式. 它要求从产品中抽离所有地域语言,国家/地区和 ...

  2. Spring Boot 系列教程11-html页面解析-jsoup

    需求 需要对一个页面进行数据抓取,并导出doc文档 html解析器 jsoup 可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操 ...

  3. Spring Boot 系列教程8-EasyUI-edatagrid扩展

    edatagrid扩展组件 edatagrid组件是datagrid的扩展组件,增加了统一处理CRUD的功能,可以用在数据比较简单的页面. 使用的时候需要额外引入jquery.edatagrid.js ...

  4. Spring Boot 系列教程7-EasyUI-datagrid

    jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...

  5. Spring Boot 系列教程19-后台验证-Hibernate Validation

    后台验证 开发项目过程中,后台在很多地方需要进行校验操作,比如:前台表单提交,调用系统接口,数据传输等.而现在多数项目都采用MVC分层式设计,每层都需要进行相应地校验. 针对这个问题, JCP 出台一 ...

  6. Spring Boot 系列教程18-itext导出pdf下载

    Java操作pdf框架 iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好 ...

  7. Spring Boot 系列教程17-Cache-缓存

    缓存 缓存就是数据交换的缓冲区(称作Cache),当某一硬件要读取数据时,会首先从缓存中查找需要的数据,如果找到了则直接执行,找不到的话则从内存中找.由于缓存的运行速度比内存快得多,故缓存的作用就是帮 ...

  8. Spring Boot 系列教程14-动态修改定时任务cron参数

    动态修改定时任务cron参数 不需要重启应用就可以动态的改变Cron表达式的值 不能使用@Scheduled(cron = "${jobs.cron}")实现 DynamicSch ...

  9. Spring Boot 系列教程12-EasyPoi导出Excel下载

    Java操作excel框架 Java Excel俗称jxl,可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件,现在基本没有更新了 http://jxl.sourcef ...

随机推荐

  1. html5存储相关 coookie localstorage session storage

    html5存储 coookie  localstorage   session storage

  2. 14.hibernate的反向生成实现全套增删改查

    图片顺序就是步骤顺序 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.

  3. idea 切换新项目 新窗口 原窗口

    选择 file--setting. 在新打开的窗口中选择 Appearance & Behavior--System Settings 点 Confirm window to open pro ...

  4. amazeui 后台模板

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...

  5. Python 之 geturl 学习

    geturl为response对象的方法,由于有时候得到的网站url并不是真正的初始url而是通过重定向获得的,所以可以通过geturl方法获取真实的url.测试代码如下: from urllib2 ...

  6. Openjudge-计算概论(A)-放苹果

    描述: 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法.输入第一行是测试数据的数目t(0 <= t < ...

  7. Openjudge-计算概论(A)-与7无关的数

    描述: 一个正整数,如果它能被7整除,或者它的十进制表示法中某一位上的数字为7,则称其为与7相关的数.现求所有小于等于n(n < 100)的与7无关的正整数的平方和. 输入输入为一行,正整数n( ...

  8. 数据库 mysql 语句

    LAMP: Linux系统 A阿帕奇服务器 Mysql数据库 Php语言 mysql:常用代码 create table CeShi1( Uid varchar(50) primary key, Pw ...

  9. 新版本的jquery checkbox 全选反选代码只能执行一遍,第二次就失败attr与prop区别

    $("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...

  10. wpf之ListBox中ListBoxItem横向排列

    ListBox中ListBoxItem默认是纵向排列,可以通过自定义样式,让其横向排列, 如下Demo: XAML: <Window x:Class="ListBoxItemStyle ...