Implementieren Sie Front-End-Caching mit JS

Verwenden Sie JS, um Front-End-Caching zu implementieren

Im Front-End-Browser können zunächst einige Daten (z. B. Daten im Datenwörterbuch) abgerufen werden request Kommen Sie vorbei und speichern Sie es in einem js-Objekt, damit Sie den Server nicht jedes Mal anfordern müssen, wenn Sie es in Zukunft benötigen. Bei Seiten, die häufig Datenwörterbücher zum Füllen von Dropdown-Feldern verwenden, kann dieser Ansatz die Serverbesuche erheblich reduzieren. Diese Methode funktioniert besonders gut mit Frames, die Iframes verwenden.

Spezifische Implementierungsideen und -methoden:

Erstellen Sie eine Cache.js-Datei:

1. Definieren Sie auf der Frontend-Seite, welche Daten vom Frontend abgerufen werden müssen gleichzeitig zwischenspeichern und ein Objekt definieren. So speichern Sie diese Daten:

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

2. Definieren Sie auf der Front-End-Seite eine Funktion zum Aufrufen der Backend-Schnittstelle, um die Daten abzurufen, und speichern Sie sie dann unter das lokale Cache-Objekt (dicts).

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

Rufen Sie diese Methode auf, wenn die Hauptseite geladen wird, um die Daten sofort abzurufen und zwischenzuspeichern. Wenn Sie in Zukunft dieselben Daten benötigen, können Sie diese auf diese Weise direkt aus den lokalen Objektdikten abrufen.

Backend-Controller:

3 Definieren Sie eine Schnittstelle zum Abfragen der Datenbank (oder zum Abfragen des Server-Cache, wie im Beispiel unten), entsprechend der Front-End-Anfrage, um Daten abzurufen und zurückzugeben zum Frontend:

/**
 * 根据多个分类编号获取多个字典集合
 * @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,>

Das obige ist der detaillierte Inhalt vonImplementieren Sie Front-End-Caching mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!