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

骑猪看日落 2021-05-10 11:18 315阅读 0赞

在有些场景下，我们需要在前端的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 项目和此类似）。

然后使用：

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

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

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

--------------------

![20190430093935456.jpg][]

[20190430093935456.jpg]: /images/20210506/7a054ed6b57944caaf6a19369019c494.png