If you don’t know the predecessor of the Mini Program, you can read the previous part~
At the end of September last time, the editor released the V1.2.0 version , which completed the basic functions of the background ( uploading wallpapers and avatars ). After a period of experience, some problems were found. For example, when using the applet, it was found that the loading of pictures larger than 5m was extremely slow, resulting in poor user experience.
Who can bear this? No, after 6 days of development, this version has brought many functions, and also solved the problem of slow image loading to a large extent
The content of this version update is as follows:
-
picture
-
Increased maximum number of uploaded images to 30
-
Added a picture compression function, which can compress the picture before uploading it to Qiniu Cloud. The compression ratio of the original picture and the effect picture is about 10:1, which speeds up the picture loading speed
-
-
cache
-
Added Redis caching strategy, adding caching to category and picture information
-
Background users can manually clean up global and local caches
-
-
Classification
-
Added the function of hiding and displaying categories, which is useful for small program review
-
-
page UI
-
A new visual chart (Echarts) has been added to the homepage, using pie charts to analyze the proportion of classified pictures of wallpapers and avatars
-
Added "Help Documentation" first-level menu
-
Solve the problem that the submenu in the sidebar is not focused, and the page head adopts a progressive background for UI optimization
-
-
Safety
-
Limit requests on public interfaces to avoid malicious high-frequency data acquisition
-
Seeing is believing, here are the changes in the new version on the page!
Background v1.2.0 version
Background version v1.3.0 (new Echarts chart content, visually view the data of the current image)
Classification management: Added display and hidden fields and caching strategies, which is conducive to dealing with applet audits
Image management: Added "update cache" to images, and there are two steps to update the cache implementation code:
1. Clean up the cache of all pictures under this category
2. Obtain all the image information of this category from Mysql, and then store the information in Redis in the form of List
Controller layer
//更新壁纸图片缓存
@PostMapping("/updateWallPhotoCache")
public DataInter updateWallPhotoCache(Integer cid){
DataInter res = new DataInter();
//先清理缓存
redisCacheService.clearWallpaperCache(cid);
//判断该分类是否已经被隐藏
if (categoryService.findByCid(cid).size() != 0){
//没有被隐藏，就添加缓存
if (redisCacheService.addWallpaperCache(cid)){
res.setMsg("更新成功！");
}else {
res.setMsg("更新失败，请稍后再试");
}
}else {
res.setMsg("该分类已隐藏，无需更新！");
}
return res;
}Service layer
@Override
public boolean clearWallpaperCache(int cid) {
return stringRedisTemplate.delete(RedisConfig.WALLPAPER_KEY_PREFIX+":"+cid);
}//添加壁纸图片缓存
@Override
public boolean addWallpaperCache(int cid) {
// 获取图片列表
List<WallPhoto> wallPhotoList = wallpaperService.findPhotoByCid(cid);
if (null != wallPhotoList && wallPhotoList.size() > 0){
try {
for (WallPhoto wallPhoto : wallPhotoList){
PhotoDTO photoDTO = new PhotoDTO();
BeanUtil.copyProperties(wallPhoto,photoDTO);
stringRedisTemplate.opsForList().leftPush(RedisConfig.WALLPAPER_KEY_PREFIX+":"+cid,objectMapper.writeValueAsString(photoDTO));
}
//设置过期时间
stringRedisTemplate.expire(RedisConfig.WALLPAPER_KEY_PREFIX+":"+cid,RedisConfig.EXPIRE_TIME, TimeUnit.HOURS);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return true;
}
return false;
}Added "Help Documentation" menu
Upload pictures (increase the number of uploaded pictures to 30)
Small program front interface:
summary
The main changes in the system:
1. On the data source of the whole system, Mysql is used as the main database and Redis is used as the cache . The problem to be considered is the consistency between Redis data and Mysql data, so every time you modify or delete on Mysql, the Redis cache will be updated
2. Use the picture compression tool Thumbnailator to compress the uploaded pictures . In a simple test, it is found that the smaller the picture, the smaller the compressible space. For example, a 98KB picture is about 92KB after compression, and an 8MB picture can be compressed to about 600KB ! , and after observing the compressed picture, it is found that it is almost the same as the original picture, and it has not become blurred!
Based on the second point, assuming we have 2000 pictures of 1MB locally, each picture can be compressed to 100K after uploading, then we can save 1800MB of traffic for users, and also greatly improve the loading speed of pictures , which is very important!
write at the end
My IT direction is Java back-end development. At present, I and an operation and maintenance personnel are maintaining the update of the project. The project is currently not open source. If you are interested in the project and hope to build such a small program, please contact us ( kkg58589)
The background version will continue to be updated...
The next step is to optimize the UI interface of the Mini Program client to provide a better user experience!