在js中实现验证码资源的国际化

最新推荐文章于 2025-02-19 18:55:14 发布

原创最新推荐文章于 2025-02-19 18:55:14 发布 · 6.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#string #dwr #import #javascript #servlet #properties

Java 同时被 2 个专栏收录

6 篇文章

订阅专栏

dwr

4 篇文章

订阅专栏

本文介绍如何在JavaScript中实现验证码资源的国际化，包括配置资源文件、利用DWR框架动态生成JavaScript代码，以及具体的应用示例。

在 js 中实现验证码资源的国际化

在 web 应用开发中，框架都提供了资源国际化的配置。但是，在 js 中实现资源国际化还是比较麻烦。比如： alert('Hello!') ; 我需要将这个 hello 在中文环境中显示为‘你好’，而在英文环境中显示为英文‘ hello ’，就比较麻烦。

这里用到了 dwr 框架，它动态生成 javascript 代码 ; 隐藏的 http 协议。关于 dwr 的资料网上面很多。

下面就是基本的资源关系图：

*.jsp 或 *.html

Message.js

Dwr Engineer

Messages.java

*_zh_CN.properties...

首先：在 jsp 或 html 中引入需要的 js 文件

然后： js 就会通过 dwr 引擎调用 Messages.java 文件，而 Messages.java 文件提供了对属性文件的操作。这样就可以实现在 js 中验证码资源的国际化。

下面就来进行具体的开发：

一：开发一个 sevlet 类，当应用系统启动时，就将资源文件读入缓存，就可以加快访问速度。

package test.message;

import java.io.IOException;

import java.io.InputStream;

import java.util.Locale;

import java.util.Properties;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import org.xiaohongli.core.cache.Cache;

import org.xiaohongli.core.cache.LruCache;

/**

* @author xiaohongli

public class MessagesServlet extends HttpServlet{

// 定义属性文件后缀

public static final String MESSAGE_SUFFIX = ".properties";

// 定义缺省属性文件前缀

public static final String DEFAULT_MESSAGE_PREFIX = "resourceMessages" ;

// 定义资源 cache 名为 message_cache

private static final String CACHE_NAME = "message_cache" ;

// 定义资源文件存放位置

private static final String PATH_PREFIX = "/WEB-INF/classes" ;

private Properties p = null ;

private static final long serialVersionUID = 3477255511805826715L;

// 获得本地化信息

protected final Locale defaultLocale = Locale.getDefault();

public void init() throws ServletException {

try{

initMessages();

}catch(Exception e){

System.out.println("Fatal: 读取属性文件出错！ ");

}

protected void initMessages(){

// 获取资源文件名

String messagePrefix = getServletConfig().getInitParameter("messages") ;

// 获取资源文件存放路径

String messagePath = getServletConfig().getInitParameter("path") ;

if(null==messagePath){

messagePath = "" ;

}

InputStream input = null;

try {

String messageFileName = null ;

if(null==messagePrefix){

messageFileName = DEFAULT_MESSAGE_PREFIX + "_" +defaultLocale.toString()+MESSAGE_SUFFIX ;

}else{

messageFileName = messagePrefix+ "_" +defaultLocale.toString()+MESSAGE_SUFFIX ;

}

String mfile = PATH_PREFIX+messagePath+"/"+messageFileName ;

input = getServletContext().getResourceAsStream(mfile);

} catch (RuntimeException e) {

String messageFileName = null ;

if(null==messagePrefix){

messageFileName = DEFAULT_MESSAGE_PREFIX+MESSAGE_SUFFIX ;

}else{

messageFileName = messagePrefix+MESSAGE_SUFFIX ;

}

String mfile = PATH_PREFIX+messagePath+"/"+messageFileName ;

input = getServletContext().getResourceAsStream(mfile);

}

p = new Properties();

try {

p.load(input);

// 蒋资源写入 cache

Object object = this.getCache().get(CACHE_NAME) ;

if(null == object){

this.getCache().put(CACHE_NAME,p) ;

}

} catch (IOException e) {

e.printStackTrace();

}

// 获取 cache 实例

private LruCache getCache(){

return Cache.getCacheInstance() ;

}

二：在 web.xml 中配置 MessagesServlet

< servlet >

< servlet-name > MessagesServlet </ servlet-name >

< servlet-class > test.message.MessagesServlet </ servlet-class >

< init-param >

< param-name > messages </ param-name >

< param-value > jsMessages </ param-value >

</ init-param >

< init-param >

< param-name > path </ param-name >

< param-value > /js </ param-value >

</ init-param >

< load-on-startup > 2 </ load-on-startup >

</ servlet >

这里指定了属性文件名为 jsMessages.properties,jsMessages_zh_CN.properties….

文件存放路径为 WEB-INF/classes/js 下。

启动应用以后，资源文件就写入到 cache 中了，读取资源文件首先会查找本地资源文件，如中国就是 *_zh_CN.properties ，当这个文件不存在时就会读取 jsMessages.propeties

三：编写获取具体属性资源的 java 类

1. MessageConstants .java

package test.message;

public class MessageConstants {

public final static String field_is_required = "field-is-required" ;

public final static String field_too_short = "field-too-short" ;

public final static String field_too_long = "field-too-long" ;

public final static String field_been_used = "field-been-used" ;

public final static String field_can_use = "field-can-use" ;

}

这里指定了几个常用的验证属性。

域必须： field-is-required

。。。。

2 ． BaseMessages.java

package test.message.type;

import java.util.HashMap;

import java.util.Map;

import java.util.Properties;

import org. xiaohongli .core.cache.Cache;

import org.xiaohongli.core.cache.LruCache;

public abstract class BaseMessage {

private static final String CACHE_NAME = "message_cache" ;

private static Properties prop = null ;

protected LruCache getCache(){

return Cache.getCacheInstance() ;

}

public Map<String, String> map = new HashMap<String, String>();

protected void setString(String index,String value){

map .put(index, value) ;

}

// 解析资源文件中的字符串如 You must enter a value for {0}.

protected String parse(String str){

String ret = "" ;

String[] str1 = str.split( "[{]" ) ;

for ( int i=0 ;i<str1. length ;i++){

String temp = str1[i] ;

if ( null ==str1[i]|| "" .equals(str1[i].trim())||i==0) {

ret = ret + temp ;

continue ;

}

String index = temp.substring(0,1) ;

String mstr = (String) map .get(index) ;

ret = ret + mstr + temp.substring(2) ;

}

return ret ;

}

protected String _getMessage(String key){

if ( prop == null )

prop = (Properties) this .getCache().get( CACHE_NAME ) ;

return prop .getProperty(key) ;

}

这个方法提供了获取属性的几个基本的方法，如 parse 解析资源文件中的字符串。 _getMessage 会得到资源文件的相关属性。

3 ． Messages.java

package test.message;

import test.message.type.BaseMessage;

public class Messages extends BaseMessage{

private String basekey ;

public String getBasekey() {

return basekey ;

}

public void setBasekey(String basekey) {

this . basekey = basekey;

}

// 获取关键字对应的属性

public String getMessage(String key){

String keyValue = _getMessage(key);

return keyValue ;

}

// 检测是否唯一时，当已经被使用时

public String getBeenUsedMessage(String key){

setBasekey(MessageConstants. field_been_used ) ;

String keyValue = _getMessage(key);

setString( "0" , keyValue) ;

return parse(_getMessage( basekey ));

}

// 检测是否唯一时，没有被使用时

public String getCanUseMessage(String key){

setBasekey(MessageConstants. field_can_use ) ;

String keyValue = _getMessage(key);

setString( "0" , keyValue) ;

return parse(_getMessage( basekey ));

}

// 必须域

public String getRequiredMessage(String key){

setBasekey(MessageConstants. field_is_required ) ;

String keyValue = _getMessage(key);

setString( "0" , keyValue) ;

return parse( _getMessage ( basekey ));

}

// 最小长度， key: 关键字， length ，长度

public String getMinLengthMessage(String key,String length){

setBasekey(MessageConstants. field_too_short ) ;

String keyValue = _getMessage(key);

setString( "0" , length) ;

setString( "1" , keyValue) ;

return parse(_getMessage( basekey ));

}

// 最大小长度， key: 关键字， length ，长度

public String getMaxLengthMessage(String key,String length){

setBasekey(MessageConstants. field_too_long ) ;

String keyValue = _getMessage(key);

setString( "0" , length) ;

setString( "1" , keyValue) ;

return parse(_getMessage( basekey ));

}

4 ．这里列出具体的 *.properties 文件

jsMessages_zh_CN.properties

field-is-required= /u8BF7/u8F93/u5165 {0} /u7684/u5185/u5BB9/u3002

field-too-short= {1} /u7684/u5185/u5BB9/u4E0D/u80FD/u5C11/u4E8E {0} /u5B57/u7B26/u3002

field-too-long= {1} /u7684/u957F/u5EA6/u4E0D/u80FD/u8D85/u8FC7 {0} /u4E2A/u5B57/u7B26/u3002

field-been-used /u5BF9/u4E0D/u8D77/uFF0C/u8BE5 {0} /u5DF2/u7ECF/u88AB/u4F7F/u7528/uFF01

field-can-use /u60A8/u53EF/u4EE5/u4F7F/u7528/u8FD9/u4E2A {0} /uFF01

########

account= /u8D26/u53F7

permission-name= /u6743/u9650/u540D

resource-name= /u8D44/u6E90/u540D

role-name= /u89D2/u8272/u540D

jsMessages.properties

field-is-required= You must enter a value for {0} .

field-too-short= You must enter at least {0} characters for {1} .

field-too-long= You must enter no more than {0} characters for {1} .

field-been-used Sorry, the {0} has been used/!

field-can-use= You can use the {0} /!

account= account

permission-name= permission

resource-name= resource

role-name= role

这个文件提供了几个最基本地验证属性，当然可以自己扩展。还有几个如 account.. 是在我这个应用中要用到的。

四：在项目中加入 dwr

到dwr官方网站上http://getahead.ltd.uk/dwr下载dwr.jar,放到lib目录下。
编写dwr.xml

<? xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

< dwr >

< allow >

< create creator="spring" javascript="UserManager">

< param name="beanName">userManager</param>

</ create >

< create creator="spring" javascript="RoleManager">

< param name="beanName">roleManager</param>

</ create >

< create creator="spring" javascript="PermissionManager">

< param name="beanName">permissionManager</param>

</ create >

< create creator="spring" javascript="ResourceManager">

< param name="beanName">resourceManager</param>

</ create >

< create creator="spring" javascript="Messages">

< param name="beanName">jsMessages</param>

</ create >

</ allow >

</ dwr >

这里是调用 spring 中的 bean, 如果是通过其他方式获取 bean 的话，可参考 dwr 的官方文档。

3. 在 web.xml 中加入

< servlet >

< servlet-name > dwr-invoker </ servlet-name >

< display-name > DWR Servlet </ display-name >

< description > Direct Web Remoter Servlet </ description >

< servlet-class > uk.ltd.getahead.dwr.DWRServlet </ servlet-class >

< init-param >

< param-name > debug </ param-name >

< param-value > true </ param-value >

</ init-param >

< init-param >

< param-name > classes </ param-name >

< param-value > java.lang.Object </ param-value >

</ init-param >

< load-on-startup > 1 </ load-on-startup >

</ servlet >

< servlet-mapping >

< servlet-name > dwr-invoker </ servlet-name >

< url-pattern > /dwr/* </ url-pattern >

</ servlet-mapping >

3 ．打开浏览器，输入 http://localhost:8080/youApp/dwr

如果没有出错，就说明你 dwr 部署成功了。非常简单把。

五．具体应用。

< script type='text/javascript' src='../dwr/interface/UserManager.js'></script>

< script type='text/javascript' src='../dwr/interface/Messages.js'></script>

< script type='text/javascript' src='../dwr/engine.js'></script>

< script type='text/javascript' src='../dwr/util.js'></script>

< script type='text/javascript' src='js/message.js'></script>

< script >

function check (){

var checkField = form.account.value ;

if(!requriedField(form.account,'account'))return false ;

if(!minLengthField(form.account,'4','account'))return false ;

UserManager.checkByField("Name",checkField,echoData) ;

}

function echoData(data){

if(data){

beenUsedField('account') ;

}else{

canUseMessage('account') ;

}

</ script >

可能还遗漏了什么地方。欢迎大家提出批评意见。

在js中实现验证码资源的国际化

1 条评论