在前端获取统一的项目名

一、引言

在平时的开发工作中,一般会有三个开发环境,本地、测试和生产环境,很多时候每个环境对于Web项目的项目名会有不同的需求,可能生产环境不需要项目名,直接域名访问,但在测试环境中又需要带上项目名。这样的话,对于前端页面来说,资源的位置可能就产生变化,我们总不能每次上线都需要改资源文件的url,解决这个问题,方法有多种,下面只记录一下我的解决办法。

二、代码

在Web整合Spring的过程中,会在web.xml中配置进入Spring的监听器(ContextLoaderListener),tomcat在初始化过程中的初始化顺序是:

在启动 Web 项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>;

接着容器会创建一个 ServletContext (上下文),应用范围内,即整个Web项目都能使用这个上下文;

接着容器会将读取到 <context-param> 转化为键值对,并交给ServletContext;

容器创建 <listener></listener> 中的类实例,即创建监听(注:listener定义的类可以是自定义的类但必须
	需要继承ServletContextListener);
	
在监听的类中会有一个 contextInitialized(ServletContextEvent event) 初始化方法,在这个方法中可以通
	过 event.getServletContext().getInitParameter("contextConfigLocation") 来得到context-param 
	设定的值。在这个类中还必须有一个contextDestroyed(ServletContextEvent event) 销毁方法.
	用于关闭应用前释放资源,比如说数据库连接的关闭;
	
得到这个context-param的值之后,你就可以做一些操作了,注意,这个时候你的Web项目还没有完全启动完成,
	这个动作会比所有的Servlet都要早;

Spring所提供的监听器(org.springframework.web.context.ContextLoaderListener),实现了ServletContextListener接口,只要一个类实现了该接口,在Web应用对象初始化的时候,它就会被监听到并且执行它对应的方法,在它的方法当中,会调用初始化 webApplicationContext方法,在该方法中,会将整个Spring的环境进行初始化。

由上面的初始化过程可知容器对于 web.xml 的加载过程是 :listener >> context-param >> filter >> servlet (在Listener中加载context-param参数);

这里通过注册Listener的方式来将项目名获取到 application 域中,这样就可以在前端页面每次获取到同样的项目名。

我们自定义一个SeverStartUpListener监听器,该监听器实现ServletContextListener接口,并重写里面的方法,具体代码如下:

	public class ServerStartupListener implements ServletContextListener {

		public void contextInitialized(ServletContextEvent sce) {
			// 将web应用名称(路径)保存到application范围中
			ServletContext application = sce.getServletContext();
			String path = application.getContextPath();
			application.setAttribute("APP_PATH", path);
		}

		public void contextDestroyed(ServletContextEvent sce) {
			// TODO Auto-generated method stub
		}
	}

编写完Listener后,需要在web.xml中注册该监听器,好让tomcat把该监听器加载进来。

<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

<listener>
    <listener-class>com.scorpios.atcrowdfunding.web.ServerStartupListener </listener-class>
</listener>

通过上述的监听器,我们就把获取到的项目名放到了application域中,在前端页面引入资源文件前面时,只需要获取APP_PATH的值,就可以得到资源的访问路径了。引入示例如下:

	<link rel="stylesheet" href="${APP_PATH}/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
	<link rel="stylesheet" href="${APP_PATH}/css/main.css">
	<link rel="stylesheet" href="${APP_PATH}/css/doc.min.css">

三、总结

本文主要采用办法就是:基于 tomcat 加载 Listener 的顺序,在Listener中获取到项目名,然后将该名字放在应用的application域中,因为该域里面存放的字段在整个应用的范围内都有效。

前端vue项目引入echart,可以通过以下步骤来通过接口获取数据: 第一步,安装echart库和vue-echarts库。 在命令行中运行以下命令来安装echart和vue-echarts库: ```shell npm install echarts vue-echarts ``` 第二步,引入echart和vue-echarts库。 在vue项目的入口文件(通常是main.js)中引入echart和vue-echarts库: ```javascript import Vue from 'vue' import ECharts from 'vue-echarts' import 'echarts' Vue.component('v-chart', ECharts) ``` 第三步,在组件中使用vue-echarts来展示图表。在需要展示图表的vue组件中,通过调用echart的接口获取数据,并将数据传入到vue-echarts中进行渲染: ```javascript <template> <v-chart :options="chartOptions" /> </template> <script> export default { data() { return { chartOptions: {} } }, methods: { fetchData() { // 通过接口获取数据 // 这里可以使用axios或者其他网络请求库来调用接口获取数据 // 假设获取到的数据为responseData let responseData = { /* 获取到的数据 */ } // 将数据传入echart的options中 this.chartOptions = { // 这里根据echart的配置要求,将responseData中的数据传入到options中 } } }, mounted() { // 在组件挂载后调用fetchData方法来获取数据并渲染图表 this.fetchData() } } </script> ``` 通过以上步骤,我们可以在vue项目中引入echart,并通过接口获取数据来展示图表。这样就可以实现在前端vue项目中使用echart来展示动态数据的图表。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

止步前行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值