前篇:微信壁纸小程序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层

 @Overridepublic boolean clearWallpaperCache(int cid) {return stringRedisTemplate.delete(RedisConfig.WALLPAPER_KEY_PREFIX+":"+cid);}
//添加壁纸图片缓存@Overridepublic 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发布)相关推荐

  1. 微信壁纸小程序V1.2.0(自带后台上传图片)

    前篇:微信壁纸头像小程序(附源码)_热衷与自由的博客-CSDN博客_头像小程序源码 前言 在上篇文章中,我给大家介绍了一个纯前端的微信壁纸小程序,也简单教会大家如何去搭建,但是这个小程序的图片是通过网 ...

  2. WordPress微信壁纸小程序源码 高清壁纸下载小程序

    源码介绍 WordPress微信壁纸小程序源码 高清壁纸下载小程序 [功能特点] 精美的壁纸展示页面,搜索喜欢的壁纸,下载壁纸需观看激励视频广告,看一次,可免费下一天,热门壁纸榜单,壁纸收藏.分享功能 ...

  3. 2023微信社区小程序+APP+后台,附带超详细完整搭建教程【源码+教程】

    2023微信社区小程序+APP+后台,附带超详细完整搭建教程[源码+教程] 微信授权登陆正常,小程序和APP带后台 手机号登陆正常,发帖,建圈子.发活动. 微信小程序是一种轻量级的应用程序,可以在微信 ...

  4. 微信壁纸小程序+头像挂件+头像

    在插件市场点击"导入插件并试用"或者购买源码授权版 同意付费插件试用协议 选择绑定的服务空间 勾选部署云函数,初始化db_init后(全部勾选),点击"直接部署服务空间& ...

  5. 微信壁纸小程序搭建详细教程可完美上线运营版本【WordPress小程序】

    前言: 先来看看长啥样子吧! 额-光看图片不过瘾? 微信扫描看演示站 不多bb了 教程开始 前期准备工作 小程序基于WordPress搭建的需要会熟练操作WordPress的不然很吃力,这个不要怕耐心 ...

  6. 微信壁纸小程序源码修复图片无法下载-完美运营版本

    源码介绍: 这套微信小程序完美修复市面上流传出来的同款壁纸小程序源码所有的Bug上线可以完美运营,最典型的就是在你们在网上下载的是不能够下载图片的,会一直显示加载中 搭建教程: https://blo ...

  7. 个人微信壁纸小程序正式上线

    在历时一个月的时间准备.开发.内测后,个人壁纸小程序正式上线了! 欣喜的是,这个壁纸小程序上线后,发现自带流量,体验和转化率也还不错:上线差不多一个星期了就查看了下数据统计,还不错,流量也还可以: 记 ...

  8. 微信壁纸小程序 - 后台采用WordPress小丸子插件

    演示: 微信小程序:小潮壁纸 后台展示

  9. 原创壁纸小程序独立后台(1.3.5版本介绍)

    1.新版本开发目的 历经前两次版本迭代,本人发现在整个系统的架构方面存在一定的缺陷,这种缺陷就是前后端不分离,导致在后期的维护方面遇到了很多问题. 那么这次版本更新并没有带来很多新的功能,而是重构了系 ...

  10. 新款微信壁纸小程序源码 自动采集小米

    介绍: 完美运营能用的版本,已经实测过了,对接的是小米壁纸,自动采集无需自己上传,可以搜索内容很多. 1,注册微信小程序,类目选工具_图片. 2,将源码导入开发者工具,填写appid. 3,配置合法域 ...

最新文章

  1. c++学习笔记内联函数,函数重载,默认参数
  2. 三天学会Selenium,阿里p7精心整理自动化测试Selenium大礼包
  3. 动态库与静态库优缺点比较(转 侵删)
  4. MySQL sql99语法—非等值连接
  5. cassandra数据备份_Cassandra中的数据建模
  6. 第一届大数据科学与工程国际会议(2016)精彩荟萃
  7. Spark实战电影点评系统(一)
  8. Web前端面试指导(六):面试后需要总结和交流
  9. linux awk 某一列合并,利用shell中awk和xargs以及sed将多行多列文本中某一列合并成一行...
  10. 阿里云物联网平台 > 设备接入 > 使用开放协议自主接入 > MQTT协议接入 >
  11. pytorch总结(一)torch.nn模块使用详解
  12. DICM(DICOM), IMA 医学图像 预处理 调窗(window-leveling)
  13. 读书笔记 - 多Agent强化学习下的自适应交通信号控制研究综述2017
  14. 低碳节能智慧路灯杆解决方案
  15. 计算机专业研究生的读研规划思考------转载
  16. 从零开始学习CANoe(四)—— 设计panel
  17. 关于在控制面板上软件卸载失败的问题
  18. 修复花雨庭服务器,我的世界手机版怎么进花雨庭服务器 | 手游网游页游攻略大全...
  19. Android 数据加密算法总结
  20. 比特大陆发布首款7nm芯片矿机,力压抢了7nm首发的嘉楠耘智?

热门文章

  1. python中 s是什么意思_python中字符串 s[ : -1]是什么意思?
  2. plink遗传数据质控--每个个体QC、每个marker(变异)质控、全基因组关联meta分析QC
  3. 天牛须和贪心算法_天牛须搜索算法(BAS)
  4. python word文档文字批量替换与删除
  5. zencart和php是什么,什么是ZenCart ZenCart有什么特点 ZenCart模板
  6. 服务器不能使用无线键盘,无线键盘突然没反应怎么回事_无线键盘没反应的解决方法...
  7. Fedora9的虚拟机安装
  8. 用JS生成声音,实现钢琴演奏
  9. RK3066 遥控器调试流程
  10. JavaEE:HTML