Implémenter la mise en cache frontale à l'aide de JS

Utilisez JS pour implémenter la mise en cache frontale

Dans le navigateur frontal, certaines données (telles que les données du dictionnaire de données) peuvent être récupérées dans le premier request Venez le sauvegarder dans un objet js, afin de ne pas avoir à demander le serveur à chaque fois que vous en aurez besoin à l'avenir. Pour les pages qui utilisent beaucoup de dictionnaires de données pour remplir les listes déroulantes, cette approche peut réduire considérablement les visites sur le serveur. Cette méthode fonctionne particulièrement bien avec les frames utilisant des iframes.

Idées et méthodes d'implémentation spécifiques :

Créez un fichier cache.js :

1 Page Front-end, définissez les données qui doivent être obtenues à partir du front-end. cachez-le à la fois et définissez un objet Pour enregistrer ces données :

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

2. Sur la page front-end, définissez une fonction pour appeler l'interface backend pour obtenir des données, puis enregistrez-la sur le serveur local. objet de cache (dicts).

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

Appelez cette méthode lorsque la page principale est chargée pour obtenir les données en une seule fois et les mettre en cache. De cette façon, si vous avez besoin des mêmes données à l'avenir, vous pouvez les obtenir directement à partir des dictionnaires d'objets locaux.

Contrôleur backend :

3. Définir une interface pour interroger la base de données (ou interroger le cache du serveur, comme dans l'exemple ci-dessous) en fonction de la requête frontale pour obtenir les données et les renvoyer. au front-end :

/**
 * 根据多个分类编号获取多个字典集合
 * @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, string="">> dictCache = (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;
}</string,></string,>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!