Cache frontal d'opération JS

Cette fois, je vais vous présenter le cache frontal du fonctionnement JS. Quelles sont les précautions pour le cache frontal du fonctionnement JS. Voici des cas pratiques, jetons un coup d'œil.

Dans le navigateur frontal, certaines données (telles que les données du dictionnaire de données) peuvent être récupérées et enregistrées dans l'objet js lors de la première requête. besoin de demander le serveur à chaque fois en cas de besoin. 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 de mise en œuvre spécifiques :

Créez un fichier cache.js :

1. Sur la page frontale, définissez les données qui doivent être obtenues simultanément du cache frontal et définissez un objet pour enregistrer les données :

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

2. Sur la page front-end, définit une fonction pour appeler l'interface back-end pour obtenir des données, puis les enregistrer dans l'objet de cache local (dicts).

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

Lorsque la page principale est chargée, appelez cette méthode pour obtenir les données une 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 back-end :

3. Définissez une interface pour interroger la base de données (ou interroger le cache du serveur, comme dans l'exemple ci-dessous) selon la requête du front-end 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,>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la mise en œuvre de l'autorisation Shiro

Comment vue proxyTable implémente le débogage des requêtes inter-domaines de l'interface

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!