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

痛定思痛。 2022-08-22 00:16 274阅读 0赞

项目中的页面经常会和数据字典的值进行查询，一个一个去用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