关闭

利用Intellij+MAVEN+SpringMVC+URI.js实现页面的中英文切换(国际化)

1198人阅读 评论(0) 收藏 举报
分类:

 利用Intellij+MAVEN+SpringMVC+URI.js实现页面的中英文切换(国际化)

一个页面经常会有中英文切换的功能,今天就使用SpringMVC实现一个通过链接实现页面中英文切换的小DEMO。

一  配置文件

1 MAVEN的配置文件pom.xml(后面使用到了jstl标签,所以也需要导入这个包):

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>TestSpringMVC2</groupId>
  <artifactId>TestSpringMVC2</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>TestSpringMVC2 Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>

      <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>3.0.5.RELEASE</version>
      </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>4.3.1.RELEASE</version>
    </dependency>
    <!--spring-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>4.3.1.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>4.3.1.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>4.3.1.RELEASE</version>
    </dependency>

    <!--Spring Web + Spring MVC-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>4.3.1.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.3.1.RELEASE</version>
    </dependency>

    <!--NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config-->
    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>


    <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.2</version>
    </dependency>


  </dependencies>

  <build>
    <finalName>TestSpringMVC2</finalName>

    <resources>
      <!--表示把java目录下的有关xml文件,properties文件编译/打包的时候放在resource目录下-->
      <resource>
        <directory>${basedir}/src/main/java</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
      </resource>
      <resource>
        <directory>${basedir}/src/main/resources</directory>
      </resource>
    </resources>
    <plugins>
      <!--servlet容器 jetty插件-->
      <plugin>
        <groupId>org.eclipse.jetty</groupId>
        <artifactId>jetty-maven-plugin</artifactId>
        <version>9.3.10.v20160621</version>
      </plugin>
    </plugins>
  </build>
</project>


2  web.xml中配置SpringMVC的一些信息:

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >
  <web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
          http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
           version="3.0">

    <!--配置springmvc DispatcherServlet-->
    <servlet>
          <servlet-name>springMVC-servlet</servlet-name>
          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
          <init-param>
               <param-name>contextConfigLocation</param-name>
              <param-value>classpath:springMVC-servlet.xml</param-value>
           </init-param>

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

    <servlet-mapping>
        <servlet-name>springMVC-servlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!-- 配置HiddenHttpMethodFilter:把POST 请求转为DELETE/PUT 请求-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext.xml</param-value>
    </context-param>

      <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
      </listener>

</web-app>

配置SpringMVC 的配置文件,这里关于国际化的配置有

1)配置国际化资源文件
2)配置SessionLocaleResolver
3) 配置LocaleInterceptor
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">
    <mvc:annotation-driven />
    <mvc:default-servlet-handler/>

    <!-- 启动包扫描功能 -->
    <context:component-scan base-package="com.springmvc.crud" />

    <!-- 对模型视图名称的解析,在请求时模型视图名称添加前后缀 -->
    <bean id="viewResolverCommon" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
        <property name="viewClass"  value="org.springframework.web.servlet.view.JstlView" />
    </bean>

    <!--配置国际化资源文件-->
    <bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource">
        <property name="basename" value="i18n"></property>
    </bean>

    <!--配置SessionLocaleResolver-->
    <bean id="localeResolver" class="org.springframework.web.servlet.i18n.SessionLocaleResolver">
    </bean>

    <!--配置LocaleInterceptor-->
    <mvc:interceptors>
        <bean class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor"></bean>
    </mvc:interceptors>

    <!-- 处理静态资源 -->
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven></mvc:annotation-driven>
    <!--  conversion-service="conversionService"加在 mvc:annotation-driven后,在格式化时应去除 -->

</beans>
注意!


4  配置国际化文件:

i18n_en_US.properties
i18n.username=Username_en
i18n.password=Password_en
i18n_zh_CN.properties
i18n.username=姓名
i18n.password=密码

二、显示页面i18n.jsp

<%--
  Created by IntelliJ IDEA.
  User: WGS
  Date: 2017/1/1
  Time: 23:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>I18N  PAGE</title>
</head>
<body>

    <h2>I18N  PAGE</h2>
    <br>
    <a href="i18n?locale=zh_CN">中文</a>
    <a href="i18n?locale=en_US">英文</a>
    <br><br>
    show:
    <br>
    <fmt:message key="i18n.username"></fmt:message>
    <br>
    <fmt:message key="i18n.password"></fmt:message>
    <br>

</body>
</html>

三、成功显示,如下图片所示:
--------------------------------------------Updated on 2017-1-11---------------------------------------------------
 
上面是通过点击两个链接来切换页面的中英文设置,这次将这两个链接的切换功能集成到一个按钮中,通过点击按钮自动实现页面的中英文切换。

什么是URI?

实现这个小功能可用URI.js这个javascript库用于处理URLs地址。它提供了类似于jQuery风格的API(便利的接口和方法链)。
关于URI.js,可参看文档:【http://medialize.github.io/URI.js/docs.html#search-set】

如何实现?

首先要引入这个包:
 <script src="//cdn.bootcss.com/URI.js/1.18.3/URI.min.js"></script>

然后通过与jQuery结合即可实现:
<%--
  Created by IntelliJ IDEA.
  User: WGS
  Date: 2017/1/1
  Time: 23:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>
<head>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script src="//cdn.bootcss.com/URI.js/1.18.3/URI.min.js"></script>
</head>
<script>
    $(document).ready(function(){
        $(".i18n-choose").click(function () {
            var uri = new URI();
            uri.setSearch("locale",$(this).attr("data-language"));
            location.href = uri.toString();
        });
    });

</script>

<style type="text/css">
    .i18n-choose {
        cursor: pointer;
    }
    .i18n-choose hover{
        text-decoration: underline;
    }
</style>

<body>

    <h2>I18N  PAGE</h2>
    <br>
    <a>
        <span class="i18n-choose" data-language="zh_CN">中文</span>     |  
        <span class="i18n-choose" data-language="en_US">English</span>
    </a>
    <br><br>
    show:
    <br>
    <table class="table table-striped" border="1" cellspacing="0" cellpadding="10">
        <tr >
            <td><fmt:message key="i18n.username"></fmt:message></td>
        </tr>
        <tr>
            <td><fmt:message key="i18n.password"></fmt:message></td>
        </tr>
    </table>

</body>
</html>
上述代码引入了bootstrap和CSS样式,使显示页面美观点。

显示页面如下:




























然后通过与jQuery结合即可实现:
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:111710次
    • 积分:2730
    • 等级:
    • 排名:第14129名
    • 原创:181篇
    • 转载:10篇
    • 译文:0篇
    • 评论:101条
    联系方式
    最新评论