在前端的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获取到该值——糟糕的做法。

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

---