关于 页面多语言支持的纯前端（JQuery插件）实现及 .json 文件读取报404的问题

如着急寻求解决方案请跳过开头，直接看正文。

*****************  废话  *****************

最近公司搞一个项目，被安排做页面的多语言支持，对 Hystrix Dashboard 界面实现汉化，和中英切换，刚开始真没把这个当事儿，主要是生气，作为一个java程序员，就是再初级呗，让我搞页面翻译？！做呗，那怎么办。最开始没说要求，说实现就行。我把这个功能的源码从jar包里扒出来，按照解压出来的目录结构放在项目路径下（这样会优先加载项目下的同名文件，也就是我修改的，而不是jar里的源码），开始修改，思路很简单，做两套静态页，页面参考微信网页版登陆页的实现方式，将

?lang=zh_CN  和  ?lang=en_US

作为参数传递到后台，修改源码Controller的结果视图跳转，齐活！

我说着简单，其实这中间也挺曲折，最初是这样修改的：

// Decompiled by Jad v1.5.8e2. Copyright 2001 Pavel Kouznetsov.
// Jad home page: http://kpdus.tripod.com/jad.html // Decompiler options: packimports(3) fieldsfirst ansi space
// Source File Name:   HystrixDashboardController.java

package org.springframework.cloud.netflix.hystrix.dashboard;

import org.springframework.ui.Model;
import org.springframework.web.context.request.WebRequest;

public class HystrixDashboardController
{

public HystrixDashboardController()
{

//源代码
/*public String home(Model model, WebRequest request)
{
model.addAttribute("basePath", extractPath(request));
return "hystrix/index";
}*/

//修改了home方法中结果视图跳转的逻辑
public String home(Model model, WebRequest request)
{
model.addAttribute("basePath", extractPath(request));
String language = request.getParameter("lang");
if ("zh_CN".equals(language)
4000
){
return "hystrix/indexCN";
}else{
return "hystrix/indexEN";
}
}

public String monitor(String path, Model model, WebRequest request)
{
model.addAttribute("basePath", extractPath(request));
model.addAttribute("contextPath", request.getContextPath());
return (new StringBuilder()).append("hystrix/").append(path).toString();
}

private String extractPath(WebRequest request)
{
String path = (new StringBuilder()).append(request.getContextPath()).append(request.getAttribute("org.springframework.web.servlet.HandlerMapping.pathWithinHandlerMapping", 0)).toString();
return path;
}
}

改完了报404。SpringBoot我没有系统学过，只是入个门，我记得它会根据 return 的字符串，去自动匹配静态目录下同名的页面进行结果跳转，但是现在404。然后我开始找配置文件，因为跟原页面 index.ftl 在同一目录下，后缀名也一样，所以前缀和后缀不用再操心，但是这个控制跳转的配置文件我死活找不到，jar包里真的没有。到这就像进了一个死结。后来想着要不拿注解试试？因为之前自己玩SpringBoot是用全注解开发。就这样：

// Decompiled by Jad v1.5.8e2. Copyright 2001 Pavel Kouznetsov.
// Jad home page: http://kpdus.tripod.com/jad.html // Decompiler options: packimports(3) fieldsfirst ansi space
// Source File Name:   HystrixDashboardController.java

package org.springframework.cloud.netflix.hystrix.dashboard;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.context.request.WebRequest;
/* here */
@Controller
public class HystrixDashboardController
{

public HystrixDashboardController()
{
}
/* and here */
@RequestMapping("/hystrix")
public String home(Model model, WebRequest request)
{
model.addAttribute("basePath", extractPath(request));
String language = request.getParameter("lang");
if ("en_US".equals(language)){
return "hystrix/indexEN";
}else{
return "hystrix/indexCN";
}
}

public String monitor(String path, Model model, WebRequest request)
{
model.addAttribute("basePath", extractPath(request));
model.addAttribute("contextPath", request.getContextPath());
return (new StringBuilder()).append("hystrix/").append(path).toString();
}

private String extractPath(WebRequest request)
{
String path = (new StringBuilder()).append(request.getContextPath()).append(request.getAttribute("org.springframework.web.servlet.HandlerMapping.pathWithinHandlerMapping", 0)).toString();
return path;
}
}

It works！！！从这里有两点：注解优于配置生效了；二是我还是不确定jar包中的配置文件在哪？希望看到此处的高人能指点一二，感激不尽！

提交方案，被否定，说这种侵入式修改不行，不容易维护或者根本不能维护，说优先利用前端技术实现！我就TM×××××了！早管干啥呢？当初说实现就行，实现了又说不行！可能是我水平低，我是真不明白了，就是开源软件再怎么更新，我就加两个注解，获取一个参数，改一个结果视图逻辑就不好维护了？？？还优先前端技术实现？培养一个拿着可怜工资的后台程序员向全栈发展？？？还TM得会专业英语翻译页面！为此我还麻烦了一个英语专业同学，恰巧她的方向是计算机英语，不然光靠六级水平根本挡不住。真的，为了实现这个破项目的一个外围都算不上，就是一个边缘功能，真是尽心尽力了，国庆前一周同事都计划回家了，我一直在搞这个，30号提前下班没有走，十一当天还在解决 .json文件读不到的问题！我就想证明一件事，既然你们瞧不上我，我就把这些边缘功能做的漂漂亮亮，不为什么狗屁公司，就为了证明自己，然后后会无期！网上说90后这那那这的，任性的有，但是代表不了一个群体，对我而言，我觉着有一点很关键，认同感。扯远了。于是，30号全天，开始寻求前端解决方案，下面是正文：

**************************** 正文 ****************************

刚开始很苦恼，前端的东西确实生疏。我问前端看有没有什么解决方案，前端说一种是将中英文内容写在两个div中，放在一个页面上，通过语言选择控制div的隐藏和显示，我觉得太low了… 另外一种是通过插件，我就问具体是啥，他说不上来，没做过他也不知道，这就很尴尬，那已经是30号下午了，马上过节放假，交情不深也不好让人家做太多… 但是JQuery确实是水太深了，真保不准有没有哪个插件能实现，我当时也没太当回事，那时候主要是想通过读取语言文件的方式，没想到后来将两者结合在一起了。

怎么办，上网找资料呗，还真让我找见了！

https://github.com/coderifous/jquery-localize/

我把我的代码拿出来，简单做个说明：

js引入

<script src="/hystrix/js/jquery.localize.js" type="text/javascript" charset="utf-8"></script>

这里要注意路径和文件位置，SpringBoot默认的静态资源访问路径，我在网上查了一下，有

classpath:/META-INF/resources/，classpath:/resources/，classpath:/static/，classpath:/public/

可是我这里

classpath:/static/  和  classpath:/templates/

都已经是配置好的。这里要说一下，红色的js（红色是因为忽略在svn的修改，并不是错误，这里只是用颜色来区分），在static根目录下，访问不到，只有放在js目录下的 .js 文件才能够被访问，这应该也是在哪配置了，我没有找到。

回到

<script src="/hystrix/js/jquery.localize.js" type="text/javascript" charset="utf-8"></script>

这个上面来，我的src是从 /hystrix 开始写，而没有从 /static 开始，就是上面说的默认配置的原因，注意一下。

另外jquery.min.js的引入我就不写了。

以上是 .js 引入。

关于使用：

首先必须给出我的语言资源文件名称，路径和内容，下面讲解要用：



可以看到，这个文件名叫 language-cn.json ! 命名结构很重要，不然我不会费劲讲名字！ 整个名字由 - 分割 ， language是前半部分 ， cn 是后半部分！！！！ 内容就是 json标准形式，没说的，注意key值。

1 . 关于data-localize，它是插件定义的标签，用来对应资源文件的key。

<h1 data-localize="greeting" > Hello! </h1>

2 . 这部分来选择语言，将值传递给调用插件的方法，这个值有讲究

<div>
<select id="language" onchange="changeLanguage(this.value);">
<option value="cn">简体中文</option>
<option value="en" selected="selected">English</option>
</select>
</div>

3 . 调用插件，最最核心的地方来了：$(“[data-localize]”).localize()，这是插件调用语言资源文件的固定写法！

<script>
function changeLanguage(lang){
alert(lang);
var params = { language: lang, pathPrefix: "hystrix/js" };
$("[data-localize]").localize("language", params );
}
</script>

必须要讲一下params 里面的参数：

先说pathPrefix：语言资源文件的路径，请回过头去看之前的项目资源文件路径。

然后是params 中的 language: lang ，其中lang变量是调用方法时传递过来的，也就是 language: “cn” ，它控制的是语言资源文件名的后半部分；

文件名的前半部分，由 localize(“language”，params ) 中的“language” 字符串决定！

希望不会对你造成歧义，我另举一个例子，如果你的params 中的 language: “en”，而 localize(“A”，params )，那么文件名就应该是A-en.json

这里 .json 的后缀名是固定的，我大致看了插件 js，是用了Ajax 获取的 .json文件，这也引出了标题中的问题。

这问题真是难死我了………….就是死活读不出来！！！！就是404！！！最开始怀疑是SpringBoot
9ce1
把这个静态文件拦截了，还是那个问题，找配置文件找不到！后来索性就不管这个了！开始上网找资料，试各种偏门，真的是逼得没招。

茫茫网页中，我找到了这么一页！！！！！

http://blog.csdn.net/chenjing9393/article/details/55102920

首先排除路径问题，会不会是什么IIS配置的问题？我不知道，但是真没办法了，死马当活马医，按照他说的搞，新的问题又出现了！妹儿的我的Web管理工具里没有 IIS服务 这个选项….. 我忽略了一个重要前提win7 旗舰版 ，我的是家庭版…….

然后开始升级系统，参考这篇文章：

http://jingyan.baidu.com/article/08b6a591ed82d314a809228d.html

升级完成后添加MIME类型，没报希望的试了一下。

成了！！！！成了！！！！真的，你们不知道那一刻我是什么心情！！！！！

希望此文能帮上你们。