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

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/79010349 在有些场景下,我们需要在前端的JavaScript脚本中,使用数据库中的配置信息,该怎么做呢?第一步、Servlet启动的时候把数据库信息写入到前端的JavaScript文件中首先,在Servlet启动的时候(web.xml的尾部)加入listener。
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/79010349

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

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


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

相关文章
|
3天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`&lt;rect&gt;`元素的过程,奠定基础,助你进阶复杂项目。
|
7天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
17 4
|
9天前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
23 6
|
10天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
8天前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
18 1
|
9天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
18天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
18天前
|
存储 关系型数据库 MySQL
探索MySQL:关系型数据库的基石
MySQL,作为全球最流行的开源关系型数据库管理系统(RDBMS)之一,广泛应用于各种Web应用、企业级应用和数据仓库中
|
15天前
|
关系型数据库 MySQL 网络安全
Mysql 数据库主从复制
在MySQL主从复制环境中,配置了两台虚拟机:主VM拥有IP1,从VM有IP2。主VM的`my.cnf`设置server-id为1,启用二进制日志;从VM设置server-id为2,开启GTID模式。通过`find`命令查找配置文件,编辑`my.cnf`,在主服务器上创建复制用户,记录二进制日志信息,然后锁定表并备份数据。备份文件通过SCP传输到从服务器,恢复数据并配置复制源,启动复制。检查复制状态确认运行正常。最后解锁表,完成主从同步,新用户在从库中自动更新。
990 7
Mysql 数据库主从复制
|
16天前
|
缓存 运维 关系型数据库
数据库容灾 | MySQL MGR与阿里云PolarDB-X Paxos的深度对比
经过深入的技术剖析与性能对比,PolarDB-X DN凭借其自研的X-Paxos协议和一系列优化设计,在性能、正确性、可用性及资源开销等方面展现出对MySQL MGR的多项优势,但MGR在MySQL生态体系内也占据重要地位,但需要考虑备库宕机抖动、跨机房容灾性能波动、稳定性等各种情况,因此如果想用好MGR,必须配备专业的技术和运维团队的支持。 在面对大规模、高并发、高可用性需求时,PolarDB-X存储引擎以其独特的技术优势和优异的性能表现,相比于MGR在开箱即用的场景下,PolarDB-X基于DN的集中式(标准版)在功能和性能都做到了很好的平衡,成为了极具竞争力的数据库解决方案。