专栏首页代码人生js实现关于数据字典的使用和数据存放的策略

js实现关于数据字典的使用和数据存放的策略

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/luo4105/article/details/51347188

项目中的页面经常会和数据字典的值进行查询,一个一个去用ajax去请求,无疑很浪费时间,当时我的想法是做一个js的工具类,里面放这么几个方法,

1.getAll() //用ajax获得所有数据

2.findTypeData(type) //按type把数据查询出来

3.findNameById(type,id) //按type和id得到汉字的值

经过一段时间的使用,确实方便了挺多,但是,每次加载页面时都要去getAll()一下,还是挺耗时的,当时想了一下,给了两个解决方案,

1.把数据字典的数据放在cache,在去用el表达式之类的去取,不访问数据库

2.把数据字典的数据拼成一个json数组,写入那个js工具类中,这样,就开始的时候下载这个js,数据和操作方法也都在该js中,也不需要去请求服务器了

由于本人比较喜欢js,就用了方案2

思路是这个样子的

1.写一个js工具类的模板,放在资源文件夹中,

2.javaIO去读该文件,获的文件的数据流,在jdbc请求数据字典数据,拼成想要的格式,在把这两个数据流一拼,在js打印到指定的位置,并把它做成一个方法

3.当数据字典发生增删改时,便调用该方法

4.js是浏览器中有缓存的话是不会在去下载的,当我js在服务器这里更新时,浏览器还是不会更新,必须把浏览器清除缓存才行,这样毫无疑问是不行的,好在公司的技术大哥告诉我一个思路,通过传动态参数的形式去下载这个js,我这里使用的传日期,当传的日期不同是,服务区就会请求并下载js,也就是一天下载一次。

后来我发现公司的框架中已经把数据存cache了,这就挺尴尬了

下面是实现代码

js的工具类

/**
 * 获得所有数据字典数据
 */
function getAllData(){
	return diclist;
}

/**
 * 数据源在页面内
 * @param classifyTp 数据字典的classifyTp
 * @param classifyCd 数据字典的classifyCd
 * @returns {String} 数据字典的value
 */
function findDicInPage(dicList,classifyTp,classifyCd){
	var result='';
	var state=1;
	for(var i=0;i<dicList.length;i++){
		if(dicList[i].classifyTp==classifyTp&&dicList[i].classifyCd==classifyCd){
			result=dicList[i].classifyNm;
			state=2;
			break;
		}
	}
	if(state==1){
		result=classifyCd;
	}
	return result;
}

/**
 * 数据源在页面内
 * 返回id,value
 * @param classifyTp
 * @returns {String} combobox所需要形式的值
 */
function findDicDataInPage(dicList,classifyTp){
	var result='[';
	$.each(dicList,function(i,n){
		if(n.classifyTp==classifyTp){
			var rjson='{';
			rjson+='id: "'+n.classifyCd+'",';
			rjson+='text: "'+n.classifyNm+'"';
			rjson+='}';
			if(i!=dicList.length-1){
				rjson+=',';
			}
			result+=rjson;
		}
	})
	result+=']';
	return eval(result);
}

2.java的io流那快

//字典js的打印
	public void proDicJS(HttpServletRequest request,List<WrClassifyB> diclist) throws IOException {
		JSONArray json = new JSONArray();
		// *========生成基础数据js=========*//
		String mbpath = request.getSession().getServletContext().getRealPath("/static/js/util/model/dic.js");// 模板js
		File file1 = new File(mbpath);
		InputStream fi = new FileInputStream(file1);
		long fileSize = file1.length();
		byte[] buffer = new byte[(int) fileSize];
		int offset = 0;
		int numRead = 0;
		while (offset < buffer.length && (numRead = fi.read(buffer, offset, buffer.length - offset)) >= 0) {
			offset += numRead;
		}
		// 确保所有数据均被读取
		if (offset != buffer.length) {
			throw new IOException("Could not completely read file " + file1.getName());
		}
		fi.close();
		String mb = new String(buffer);

		String path = request.getSession().getServletContext().getRealPath("/static/js/util/dic.js");
		File file = new File(path);
		for (WrClassifyB dic : diclist) {
			json.put(MapUtil.toMap(dic));
		}
		FileWriter in;
		try {
			in = new FileWriter(file);
			in.write("var diclist=" + json.toString() + ";\n" + mb);
			in.close();
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

3.浏览器请求

Date nowDate=new Date();
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");
String date=sdf.format(nowDate);
request.getSession(true).setAttribute("date",date);

调用js

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/util/dic.js?date=${date}"></script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 异步化,高并发大杀器

    同步和异步,阻塞和非阻塞, 这个几个词已经是老生常谈,当时常常还是有很多同学分不清楚,以为同步肯定就是阻塞,异步肯定就是非阻塞,其他他们不是一回事。

    用户5397975
  • 夯实Java基础系列11:深入理解Java中的回调机制

    本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看

    Java技术江湖
  • Spring注解@Resource源码分析

    继续追踪,看metadata.inject(bean, beanName, pvs)方法

    大王叫下
  • JVM CPU Profiler技术原理及源码深度解析

    本文介绍了JVM平台上CPU Profiler的实现原理,希望能帮助读者在使用类似工具的同时也能清楚其内部的技术实现。

    数据猿
  • Python | 分析 Ajax 爬取今日头条街拍美图

    这次实战采取的是 wi10 + python3.6 + PyCharm 的开发环境。另外,还用到了 requests 、urllib、hashlib、multi...

    一个优秀的废人
  • Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

    在项目的 resources 目录下创建 executor.properties 文件,并添加如下配置:

    create17
  • 「vue基础」手把手教你编写 Vue 组件(下)

    如果你以前使用过React,那么你已经熟悉了组件相关的生命周期的概念。所谓的组件生命周期,就如同人一般从出生到消亡一样,有几个关键的阶段,在这几个关键的阶段,我...

    前端达人
  • 夯实Java基础系列9:深入理解Class类和Object类

    本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看

    Java技术江湖
  • JVM CPU Profiler技术原理及源码深度解析

    研发人员在遇到线上报警或需要优化系统性能时,常常需要分析程序运行行为和性能瓶颈。Profiling技术是一种在应用运行时收集程序相关信息的动态分析手段,常用的J...

    美团技术团队
  • Echarts请求不同格式的json数据处理

    在前面已经说到过关于Echarts请求json数据处理: 【前端统计图】echart折线图ajax请求json数据: https://www.jianshu...

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券