Spring Boot + Bootstrap + jQuery + Freemarker

原文地址:http://qilu.me/post/tech/2018-03-18

最近在写一些Web的东西,技术上采用了Spring Boot + Bootstrap + jQuery + Freemarker。过程中查了大量的资料,也感受到了前端技术的分裂,每种东西都有N种实现,组合起来,每种解决方案的资料却很有限。

这篇文章记录下多语言国际化的实现,以支持中英文为例。

首先是页面内容的国际化

1.定义页面文本配置文件的路径,在application.properties里添加spring.messages.basename=i18n/messages

2.在resources/目录下创建上述目录,添加3个配置文件messages.properties、messages_zh.properties、messages_en.properties,分别对应默认,中文和英文配置,完整路径为resources/i18n/messages.properties

3.在配置文件里定义每条需要国际化的文本,比如中文 index.title=麦希工具 - 您身边的助手,英文Meta Tool - Your Best Assistant

4.在Freemarker文件里使用<@spring.message ""/>来输出文本,比如<@spring.message "index.title"/>

再说下验证内容的国际化

所谓验证内容,就是比如在填Form表单的时候,有些字段有格式或数值等的要求,表单提交时,应该验证数据是否符合要求。验证又分前端验证和后端验证,一般结合使用。

前端用来验证格式(必须是数字/英文/邮件)等,如:

这里pattern使用正则表达式,定义了输入框输入字符的范围和数量。

后端用来验证数值(必须大于18岁)等,可以在Spring Boot的VO对象里,以添加注解的形式实现,如:

@Min(value = 100, message = "不能低于100cm")
@Max(value = 250, message = "不能高于250cm")
private String height;

这里就出现了问题,即注解也应该采用配置文件的形式,以支持多语言切换,这就是验证内容的国际化。

1.定义验证文本配置文件的路径,在application.properties里添加spring.messages.basename=i18n/messages,i18n/ValidationMessages,前面的是第一节的页面文本,后面的是验证文本

2.在resources/目录下创建上述目录,添加3个配置文件ValidationMessages.properties、ValidationMessages_zh.properties、ValidationMessages_en.properties,分别对应默认,中文和英文配置,完整路径为resources/i18n/ValidationMessages.properties

3.在配置文件里定义每条需要国际化的文本,比如中文 vm.bmi.height.lower=不能低于100cm,英文vm.bmi.height.lower=Can Not Lower Than 100cm

4.与页面文本相比,这里要多做一步,即在代码里覆盖默认验证器的配置,在代码根目录添加以下文件:

@Configuration

public class CustomConfiguration implements WebMvcConfigurer {

@Autowired
private MessageSource messageSource; @Override
public Validator getValidator() {
return localValidatorFactoryBean();
} @Bean
public LocalValidatorFactoryBean localValidatorFactoryBean() {
LocalValidatorFactoryBean validator = new LocalValidatorFactoryBean();
validator.setValidationMessageSource(messageSource);
return validator;
}

}

5.在接收表达的VO对象的属性上,使用验证文本作为提示

public class BmiVo {

@Min(value = 100, message = "{vm.bmi.height.lower}")
@Max(value = 250, message = "{vm.bmi.height.upper}")
private String height;

6.在表单上添加验证失败后的提示,使用<@spring.bind "" />绑定VO对象的属性,使用<@spring.showErrors ""/>显示属性验证失败的提示

cm

这样就做到了页面内容和验证内容的多语言国际化支持,具体示例参看Meta Tool

Spring Boot + Bootstrap + jQuery + Freemarker的更多相关文章

  1. spring boot ----> 常用模板freemarker和thymeleaf

    ===========================freemarker=================================== freemarker 官网:https://freem ...

  2. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  3. Spring Boot+BootStrap fileInput 多图片上传

    一.依赖文件 <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/c ...

  4. Spring Boot使用模板freemarker【从零开始学Spring Boot(转)

    视频&交流平台: à SpringBoot网易云课堂视频 http://study.163.com/course/introduction.htm?courseId=1004329008 à  ...

  5. spring boot中使用freemarker

    在做Java web开发领域,web模板引擎主要有jsp.freemarker.velocity,其中freemarker是我们常用的一种,在spring boot中使用的freemarker的方法可 ...

  6. Spring boot之使用freemarker

    大纲 (1)在pom.xml中引入freemarker; (2)如何关闭freemarker缓存 (3)编写模板文件.ftl (4)编写访问文件的controller 在pom.xml中引入freem ...

  7. Spring Boot + Bootstrap 出现"Failed to decode downloaded font"和"OTS parsing error: Failed to convert WOFF 2.0 font to SFNT"

    准确来讲,应该是maven项目使用Bootstrap时,出现 "Failed to decode downloaded font"和"OTS parsing error: ...

  8. Spring Boot +Bootstrap 图片上传与下载,以及在bootstrap-table中的显示

    1.前台上传: <input type="file" name="file" id="file"> 2.后台的接收与处理: St ...

  9. Spring Boot + Freemarker多语言国际化的实现

    最近在写一些Web的东西,技术上采用了Spring Boot + Bootstrap + jQuery + Freemarker.过程中查了大量的资料,也感受到了前端技术的分裂,每种东西都有N种实现, ...

随机推荐

  1. Hadoop MapReduce编程 API入门系列之倒排索引(二十四)

    不多说,直接上代码. 2016-12-12 21:54:04,509 INFO [org.apache.hadoop.metrics.jvm.JvmMetrics] - Initializing JV ...

  2. Monad Maybe

    在上一篇, 我们创建了第一个Monad,Indentity<T>, 它可能是最简单的Monad, 使我们可以快速了解Monad的模式,而不用陷入细节.接下来我们创建一个有用的Monad, ...

  3. React 16 服务端渲染的新特性

    React 16 服务端渲染的新特性 React 16 中关于服务端渲染的新特性 快速介绍React 16 服务端渲染的新特性,包括数组.性能.流等 React 16 终于来了!

  4. SurfaceView加载长图

    1:SurfaceView加载长图,移到.可以充当背景 效果截图 2:View (淡入淡出动画没实现:记录下) package com.guoxw.surfaceviewimage; import a ...

  5. equal height

    https://css-tricks.com/the-perfect-fluid-width-layout/ http://nicolasgallagher.com/multiple-backgrou ...

  6. 实践:使用FLANN.LSH进行检索

    1.Survey: FLANN 库详情见:http://en.wikipedia.org/wiki/Flann http://medievalscotland.org/kmo/AnnalsIndex/ ...

  7. concurrently - npm 同时运行前端和后台服务

    项目基于vue(前端)+node(后台),需要启动两个服务 0.文件夹结构及package.json内容: 1.客户端 npm run dev 2.服务器 cd server npm run serv ...

  8. 路飞学城Python-Day151

    sprapy框架能够在pycharm中调试的方式 需要在配置文件中加上一个文件,文件的内容为 start.py #!/usr/bin/env python # -*- coding:utf-8 -*- ...

  9. linu问题集锦

    问题1 系统卡 慢 执行命令延迟/var/spool/mail下root文件过大导致/var磁盘空间92% cd / && du | sort -n | tail -n 10 查看排名 ...

  10. Project Euler 16 Power digit sum( 大数乘法 )

    题意: 215 = 32768,而32768的各位数字之和是 3 + 2 + 7 + 6 + 8 = 26. 21000的各位数字之和是多少? 思路:大数乘法,计算 210 × 100 可加速计算,每 ...