具体实现思路和方法：

创建一个cache.js文件：

1、前端页面，定义那些数据需要一次性拿到前端缓存，定义一个对象来保存这些数据：

1. /** 
    * 定义需要在用户登录的时候获取到本地的数据字典类别 
    */ 
   var clsCodes = {"clsCodes" : 
    ["BOOL", 
    "STATUS", 
    "USER_TYPE", 
    "REPORT_STATUS" 
    ] 
   }; 
    
   /** 
    * 获取数据字典到本地 
    */ 
   var dicts;

2、前端页面，定义一个函数来调用后台接口获取数据，然后保存到本地缓存对象（dicts）中。

1. function getDicts() { 
    $.post(getContextPath() + "/api/sys/getDictList", 
    clsCodes, 
    function(resultBean, status, xhRequest) { 
    if (resultBean.data != undefined) { 
    dicts = resultBean.data; 
    } 
    }, 
    'json'); 
   }

在主页面加载的时候调用这个方法一次性获取数据并缓存起来。这样，以后需要同样的数据，就直接从本地对象dicts中获取了。

后端Controller：

3、定义一个接口，根据前端的请求，查询数据库（或查询服务器缓存，如下面例子中）获取数据返回给前端：

/** 
 * 根据多个分类编号获取多个字典集合 
 * @param clsCodes 
 * @return {{"clsCode" : {"code1":"name1,"code2":"name2"...}}, ...} 
 */ 
@SuppressWarnings({ "unchecked", "rawtypes" }) 
@ResponseBody 
@RequestMapping("getDictList") 
public ResultBean getDictList(@RequestParam(value = "clsCodes[]", required = true) String[] clsCodes) { 
 ResultBean rb = new ResultBean(); 
 
 Map<String, Map<String, String>> dictCache = (Map<String, Map<String, String>>) CacheManager.getInstance().get(CacheConstants.DICT); 
 Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序 
 
 if(dictCache != null){ 
 for(String clsCode: clsCodes){ 
 dictMap.put(clsCode, dictCache.get(clsCode)); 
 } 
 }else{ 
 rb.setMessage("缓存中拿不到字典信息！"); 
 rb.setSuccess(false); 
 } 
 
 rb.setData(dictMap); 
 return rb; 
}

相关推荐：