微信壁纸小程序（SpringBoot后台V1.3.0发布）

前篇：微信壁纸小程序V1.2.0（自带后台上传图片）_热衷与自由的博客-CSDN博客_手机壁纸api

如果你还不知道小程序的前身，可以看看前篇哦~

上次9月末小编发布了V1.2.0版本，完成了后台的基本功能（上传壁纸、头像）。经过一段时间的体验，发现存在的一些问题，比如小程序在使用时发现5m以上的图片加载特别慢，导致用户体验比较差。

这谁忍得了？这不，经过6天时间的开发，这次版本带来了许多功能，也在较大程度上解决了图片加载速度慢的问题

本次版本更新内容如下：

图片
- 上传的图片的最大数量提高到30个
- 新增了图片压缩功能，在上传图片到七牛云前给图片进行压缩，原图和效果图压缩比大约为10:1，加快了图片加载速度
缓存
- 新增Redis缓存策略，给分类和图片信息添加了缓存
- 后台用户可以手动清理全局和局部缓存
分类
- 新增了分类隐藏和显示功能，对小程序审核有用
页面UI
- 首页新增了可视化图表（Echarts)，使用饼状图分析壁纸和头像的分类图片占比情况
- 新增了"帮助文档"一级菜单
- 解决侧边栏点击子菜单不聚焦的问题，页面头部采用渐进背景进行UI优化
安全
- 对公共接口进行请求限制，避免恶意高频获得数据

眼见为实，下面给出新版本在页面上有哪些改变！

后台v1.2.0版本

后台v1.3.0版本（新增Echarts图表内容，直观查看当前图像的数据）

分类管理：增加了显示与隐藏的字段和缓存策略，这样有利于应对小程序审核

图片管理：对图片增加了"更新缓存"，更新缓存实现代码有两个步骤：

1、清理该分类下所有图片的缓存

2、从Mysql获取该分类下所有图片信息，再把这些信息以List形式存入Redis

Controller层

//更新壁纸图片缓存
    @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层

 @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;
    }

新增"帮助文档"菜单

上传图片（增加上传图片的数量至30张）

小程序前台界面：

小结

系统主要改动内容：

1、整个系统在数据源上，以Mysql作为主数据库，Redis作为缓存。需要考虑的问题是Redis数据和Mysql数据的一致性，所以每次在Mysql上进行修改、删除，都会更新Redis缓存

2、对上传的图片使用图片压缩工具Thumbnailator来压缩，在简单的测试中发现越小的图片，可压缩空间越小。例如98KB的图片压缩后是92KB左右，而8MB的图片可压缩至600KB左右！，而且经过观察压缩后的图片，发现跟原图几乎一样，没有变得模糊！

基于第二点，假设我们本地有2000张1MB的图片，上传后每张图片可压缩至100K，那么我们可为用户节约1800MB的流量，也大大提高了图片的加载速度，这至关重要！

写在最后

本人的IT方向是Java后端开发，目前项目有我和一个运维人员在维持项目的更新，项目目前未开源，如果您对项目感兴趣，希望也搭建这样的一个小程序，欢迎联系我们(kkg58589)

后台版本将持续更新中...

下一步计划是优化小程序客户端的UI界面，提供更好的用户体验！

微信壁纸小程序（SpringBoot后台V1.3.0发布）

猜你喜欢