在前端的JavaScript脚本中，如何高效率的使用数据库中的配置信息

在有些场景下，我们需要在前端的JavaScript脚本中，使用数据库中的配置信息，该怎么做呢？

第一步、Servlet启动的时候把数据库信息写入到前端的JavaScript文件中

首先，在Servlet启动的时候（web.xml的尾部）加入listener。

<listener>
<listener-class>com.honzh.common.listener.SpringContextInitListener</listener-class>
</listener>

然后，SpringContextInitListener 内容如下：

public class SpringContextInitListener implements ServletContextListener {

protected Logger logger = LoggerFactory.getLogger(getClass());

public void contextInitialized(ServletContextEvent servletContextEvent) {

ServletContext servletContext = servletContextEvent.getServletContext();

Variables.servletContextRealPath = servletContext.getRealPath("");
logger.info("网站realPath{}", Variables.realPath);

logger.info("数据库配置常量信息初始化");
Variables.INSTANCE.getStocksConfig();
}

public void contextDestroyed(ServletContextEvent servletContextEvent) {

}
}

要先从ServletContext获得项目的真实路径，比如说c:/run/webapps/。这一点很重要，因为接下来要把数据库的信息写入到该路径下的文件内。

然后，你懂的，关键的地方来了：

public enum Variables {
INSTANCE;

protected Logger logger = LoggerFactory.getLogger(getClass());

public ConfigDto getStocksConfig() {
if (config == null) {
// 获取数据库配置文件的service
// 这里用到了spring，你可以按照自己的方式
// 只要获取到数据库配置信息就好了
StocksConfigService stocksConfigService = SpringContextHolder.getBean(StocksConfigService.class);
config = stocksConfigService.getConfig();

try {
// 这里请注意路径哦
// servletContextRealPath 的值就是上文提到的c:/run/webapps/，项目war包运行的所在地
// 对应的项目路径就是WebContent下
File configPath = new File(
servletContextRealPath + File.separator + "components" + File.separator + "common");
String fileName = "config.js";
File configFile = new File(configPath, fileName);

Files.createParentDirs(configFile);

logger.info("文件路径创建成功");

// 写入的时候需要用到json转换，我这里用的是fastjson，你也可以使用jackjson等
// 最好是把配置文件的json对象复制到一个config变量中，前台使用起来方便。
Files.write("var CONFIG=" + JSON.toJSONString(config ) + ";\n", configFile, Charsets.UTF_8);
logger.info("前端配置文件生成完毕");
} catch (IOException e) {
logger.error("前端配置文件生成出错");
logger.error(e.getMessage(), e);
}
}

}

第二步，将config.js文件在jsp页面中引用，然后就可以使用该文件的json对象了。注意，引用路径一定要匹配上啊，components的路径在第一步中生成config.js文件时已经注明，它的相对路径就是WebContent（Maven 项目和此类似）。

<script type="text/javascript" src="/components/common/config.js"></script>

然后使用：

$(function() {
alert(CONFIG.wx_focus_url);
});

这是一篇很简单的文章，旨在介绍方案。但这种技巧真的非常有用，一个月以前，我是不知道还有这种操作的，常常需要通过controller将数据库参数带回到对应的jsp页面中，然后再通过jQuery获取到该值——糟糕的做法。

现在，我把这种做法介绍给你，希望对你有所帮助。

朝闻道夕死可矣！你理解这句话真正的含义吗？