在前端的JavaScript脚本中,如何高效率的使用数据库中的配置信息-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

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


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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Android NDK 开发】Android Studio 使用 CMake 导入静态库 ( CMake 简介 | 构建脚本路径配置 | 引入静态库 | 指定静态库路径 | 链接动态库 )(二)
【Android NDK 开发】Android Studio 使用 CMake 导入静态库 ( CMake 简介 | 构建脚本路径配置 | 引入静态库 | 指定静态库路径 | 链接动态库 )(二)
5 0
在ArcGIS中如何使用直连方式连接Oracle数据库
1.      背景 直连方式比使用SDE方式更加稳定,特别是在大数据量处理的应用中,不易出场由SDE连接进程造成的gsvr错误。
1051 0
TypeScript的书写规范(TSLint)配置修改
新版Angular中使用的Typescript书写规范非常恼人,比如默认会启用no-trailing-whitespace这样的选项。官方对此的说明是为了配合GIT的使用规范。
1636 0
Scrapy 如何正确配置、验证xpath?
[题记]:xpath难点 在使用scrapy做爬取网页的时候,规则的匹配是关键。如:sel.xpath(‘//ul[@id=”dirlist”]/li/dl/dt’)的正确配置。 如何进行xpath的正确配置呢? Scrapy shell交互终端是一个可供较快调试、验证配置结果的好工具。
19 0
Scrapy 如何正确配置、验证xpath?
如何进行xpath的正确配置呢?
240 0
在windows平台下使用vscode当golang开发环境的配置
一、使用的平台与软件: 1、window 7 或者10,注意必须是64位,否则不能使用delve debug 2、go1.11.5.windows-amd64.msi 3、Git-2.20.1-64-bit.exe 4、VSCodeUserSetup-x64-1.31.1.exe 二、安装git,golang,vscode git软件全部使用缺省配置即可,安装完成后也不需要做太多配置; golang一般缺省安装在C:\go下 重点是需要设置GOPATH的环境变量。
2810 0
JavaScript轻应用:UI组件的属性配置
之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
88 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载