問題解決: すべてのselect要素が毎回サーバーにリクエストを送るため、パフォーマンスに悪影響が出る。どうやって改善するか？ データベースにディクショナリテーブルを作成し、よく使う選択肢の内容を保存します。プロジェクト起動時にこのテーブルを読み込み、メモリに保存します。その後、select要素はメモリから選択肢の内容を取得します。
データの非同期問題: 定期的なタスクでキャッシュを更新することで対応できます。
一、目的
HTMLページ内のすべてのselect要素に特定の属性を追加すると、キャッシュからオプションの内容を自動的に読み込み、レンダリングされます。 HTML内容
効果
ディクショナリテーブル
valueは選択肢の値、textは表示される内容、nameはキャッシュ属性に対応しています。必要があれば、表に直接追加すればよいです。
二、設計手順
- プロジェクト起動時にディクショナリテーブルを読み込み、メモリに保存します。
- 前端ページでcache属性を持つすべてのselect要素を検索し、jsを使ってajaxでバックエンドのキャッシュ管理器にアクセスし、結果をselect要素にレンダリングします。
三、実行
1、キャッシュマネージャーの準備
package com.example.demo.Ctrl;
import org.springframework.stereotype.Component;
import org.thymeleaf.expression.Maps;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
* @author FanJiangFeng
* @version 1.0.0
* @ClassName CacheManager.java
* @Description TODO
* @createTime 2020年06月04日 17:22:00
*/
@Component
public class CacheManager<T> {
private Map<String, T> cache =new ConcurrentHashMap<>();
public T get(String key){
return cache.get(key);
}
public void addOrUpdateCache(String key,T value) {
cache.put(key, value);
}
// 依據 key 来刪除缓存中的一条记录
public void evictCache(String key) {
if(cache.containsKey(key)) {
cache.remove(key);
}
}
// 清空缓存中的全部记录
public void evictCache() {
cache.clear();
}
}
2、SQLクエリの作成
@Component
@Mapper
public interface TestMapper {
@Select(value = "select * from cache_dict")
List<Map> getCacheDictData();
}
3、プロジェクト起動時の初期化
プロジェクト起動時にディクショナリテーブルのデータを取得し、キャッシュマネージャーに保存します。
package com.example.demo.Ctrl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.stereotype.Component;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @author FanJiangFeng
* @version 1.0.0
* @ClassName InitProject.java
* @Description TODO
* @createTime 2020年06月04日 17:31:00
*
* このクラスはApplicationRunnerインターフェースを継承し、runメソッドを実装し、ComponentでSpringに登録する必要があります。
* プロジェクト起動時に実行され、初期化処理を行います。
*/
@Component
public class InitProject implements ApplicationRunner {
@Autowired
TestMapper testMapper;
@Autowired
CacheManager cacheManager;
@Override
public void run(ApplicationArguments args) throws Exception {
System.out.println("#####################################");
System.out.println(" キャッシュマネージャーを初期化 ");
System.out.println("#####################################");
// キャッシュディクショナリを再構築し、キャッシュマネージャーにデータを格納
List<Map> cacheDictData = testMapper.getCacheDictData();
System.out.println("取得したキャッシュデータ：" + cacheDictData);
cacheManager.addOrUpdateCache("cacheDict", cacheDictData);
System.out.println("#########キャッシュディクショナリがキャッシュマネージャーに保存されました###########");
}
}
4、キャッシュを読み取るAJAXの準備
引数はselect要素のcache属性の値で、対応するオプションの内容を取得します。
@RequestMapping("queryCache")
@ResponseBody
public List<Map> queryCache(String cacheName){
List<Map> cacheDict = (List<Map>)cacheManager.get("cacheDict");
List<Map> tempList=new ArrayList<>();
for(Map map:cacheDict){
if(cacheName.equals(map.get("name"))){
tempList.add(map);
}
}
return tempList;
}
5、共通JSの作成
このJSはHTMLからcache属性を持つselect要素をスキャンし、それらをレンダリングします。
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script><script>
$(function () {
$("select").each(function () {
var _this=$(this);
var isHas=_this.attr('cache');
if(isHas!=undefined){
var temp='';
$.ajax({
url:"/test/queryCache",
data:{cacheName:isHas},
type:"post",
async:false,
success:function (data) {
for(var i=0;i<data.length;i++){
temp+='<option value="'+data[i].value+'">'+data[i].text+'</option>';
}
}
});
_this.html(temp);
}
});
});
</script>
6、テスト
HTMLページでselect要素を記述し、指定された属性cacheを追加します。値はディクショナリテーブルのnameフィールドです。効果は上記の通り、成功してレンダリングされます！ 定期的なタスクを設定し、キャッシュを更新することで、キャッシュとディクショナリテーブルのデータが一致することを確保してください！