在前端的JavaScript脚本中，如何高效率的使用数据库中的配置信息-优快云博客

本文介绍了一种在前端JavaScript中使用数据库配置信息的方法。通过在Servlet启动时将配置信息写入前端JavaScript文件，并在JSP页面中引用，实现便捷的数据交互。

在有些场景下，我们需要在前端的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获取到该值——糟糕的做法。

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

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