咸虾米壁纸全栈项目 ​

项目演示 ​

微信扫描下方小程序码，在线体验咸虾米壁纸项目 ↓↓↓

视频教程 ​

📺 完整版学习地址：https://www.bilibili.com/cheese/play/ss145273324

课程内容概述 ​

这是一个基于 uniapp 和 uniCloud 开发的 “咸虾米壁纸”全栈项目的实战课程。课程以前后端分离的架构，完整地讲解了从项目初始化、后台管理功能开发、客户端应用实现，到最终部署上线的全过程。核心知识内容可以概括为以下几个方面：

1. 项目初始化与后台管理系统搭建
   • 创建uni-admin项目并部署到uniCloud服务空间。
   • 引入Element-Plus和iconfont图标库，构建后台管理界面。
   • 使用uni-table、uni-pagination、uni-forms、popup等组件，实现壁纸和分类数据的列表展示、分页、新增、修改和删除（增删改查）功能。
   • 实现图片上传到云存储，并进行图片压缩、格式转换（webp）等优化处理。
2. 核心业务模块（壁纸管理）
   • 壁纸管理：设计壁纸和分类的schema数据库表结构及云对象。实现壁纸的发布、列表查询（含联表查询、分页、排序）、编辑和删除（同步删除云存储中的图片）。
   • 海报/Banner管理：为首页创建Banner管理模块，支持后台增删改查及链接跳转（站内或外部小程序）。
   • 每日推荐与专题：实现每日推荐和专题模块，使用vue-draggable-next实现拖拽排序，使用聚合查询（sample）随机获取壁纸，并利用云对象定时触发器（_timing）自动生成专题。
3. 高级前端技术（Vue3进阶）
   • 组件封装：封装图片上传组件、图片裁剪组件（vue-cropper），并实现组件间的复杂通信（defineProps、defineEmits、defineExpose、v-model）。
   • 逻辑抽离：使用hooks（组合式函数）将复杂页面的业务逻辑进行拆离和复用。
   • 状态管理：引入Pinia和Vuex进行全局状态管理，例如动态修改网站Logo。
4. 客户端开发与云对象联调
   • 数据请求：在客户端创建云对象，调用后台接口获取分类、壁纸列表、详情等数据，并渲染到页面。
   • 搜索与交互：实现壁纸搜索（正则匹配）、壁纸预览、下载记录统计、用户评分等功能。
   • 用户体系：集成uni-id-pages，实现微信一键登录、个人资料修改、登录状态拦截等功能。
5. 商业化功能与广告集成
   • 积分系统：创建硬币积分系统，实现每日签到领取积分、观看激励视频广告获取积分、下载壁纸消耗积分等完整逻辑。
   • 广告接入：在项目中接入微信小程序的激励视频广告和原生模板广告，并实现广告位动态配置。
6. 数据统计与权限管理
   • 数据可视化：使用秋云uCharts图表库，实现核心数据的区域图（趋势）、饼形图（分类喜好度）和排行榜展示。
   • 数据统计：设计统计表，通过云对象定时触发器（_timing）自动统计每日/每月的用户操作数据（如下载量、评分数）。
   • 权限控制：介绍uni-id的角色权限体系，分配管理员角色，并在schema中配置数据的permission权限，实现不同角色对数据的差异化访问控制。
7. 辅助功能与项目上线
   • 公告系统：集成wangEditor富文本编辑器，实现公告的发布与管理，并在客户端展示。
   • 项目部署：将打包后的客户端H5和后台管理PC端部署到前端网页托管，并将客户端打包为微信小程序上线。

核心亮点 ​

1.uni-admin后台管理

2.schema表结构设计

3.云数据库的增删改查

4.客户端调用uniCloud

5.深化vue3数据流及组件封装

6.安装vue3第三方常用插件

7.云对象定时触发机制

8.uni-id用户注册登录体系

9.vuex和pinia全局状态管理

10.引入微信广告获得收益

11.硬币积分系统

12.ucharts数据可视化图表库

13.权限角色控制

14.打包H5微信小程序APP

项目效果图概览 ​

📱 小程序客户端页面 ​

💻 后台管理页面 ​