xiaoli/peixue-dev

Fork 0

xiaojiang dedaf98ea2 初始化项目：上传完整代码

2026-02-28 17:26:03 +08:00

4.5 KiB

Raw Blame History

轮播图对接完成总结

完成时间：2026-01-27

修改内容

1. 后台管理系统 - API路径修复

文件: peidu/admin/src/views/content/banner.vue

修复了API调用路径，添加了正确的 /api 前缀：

✅ 获取轮播图列表：/banner/admin/list → /api/banner/admin/list
✅ 创建轮播图：/banner → /api/banner
✅ 更新轮播图：/banner/{id} → /api/banner/{id}
✅ 删除轮播图：/banner/{id} → /api/banner/{id}
✅ 更新状态：/banner/{id}/status → /api/banner/{id}/status

文件: peidu/admin/src/api/content.js

同步更新了API定义文件中的轮播图接口路径。

2. 小程序前端 - 动态加载轮播图

文件: peidu/uniapp/src/pages/index/components/UserHome.vue

修改点：

添加轮播图API调用
- 在 loadHomeData() 方法中添加了 api.bannerApi.getList() 调用
- 从后端动态加载轮播图数据，替换原来的静态数据

数据映射

this.bannerList = banners.map(banner => ({
  id: banner.id,
  image: banner.imageUrl,
  title: banner.title,
  linkType: banner.linkType,
  linkUrl: banner.linkUrl
}))

添加点击事件处理
- 为轮播图添加了 @click="handleBannerClick(banner)" 事件
- 实现了 handleBannerClick() 方法，支持：
  - 无链接（linkType: 'none'）
  - 内部页面跳转（linkType: 'page'）
  - 外部链接（linkType: 'url'，通过webview打开）

对接完成情况

✅ 后端API

GET /api/banner/list - 前端获取启用的轮播图
GET /api/banner/admin/list - 管理端获取所有轮播图
POST /api/banner - 创建轮播图
PUT /api/banner/{id} - 更新轮播图
DELETE /api/banner/{id} - 删除轮播图
PUT /api/banner/{id}/status - 更新轮播图状态

✅ 后台管理系统

轮播图列表展示
新增轮播图（支持图片上传和URL输入）
编辑轮播图
删除轮播图
启用/禁用轮播图
支持设置链接类型（无链接/内部页面/外部链接）

✅ 小程序前端

首页动态加载轮播图
自动轮播展示
点击跳转功能
降级处理（API失败时使用默认图片）

功能特性

后台管理功能

图片上传：支持直接上传图片到服务器
URL输入：支持直接输入图片URL
链接配置：
- 无链接：仅展示
- 内部页面：跳转到小程序内部页面
- 外部链接：通过webview打开外部网页
排序管理：支持设置轮播图显示顺序
状态控制：启用/禁用轮播图

小程序功能

动态加载：从后端API获取轮播图数据
自动轮播：3秒间隔自动切换
指示器：显示当前轮播位置
点击跳转：根据配置的链接类型进行跳转
容错处理：API失败时使用默认图片

数据流程

后台管理系统
    ↓ (管理员上传/配置轮播图)
后端数据库 (banner表)
    ↓ (API: /api/banner/list)
小程序前端
    ↓ (用户查看和点击)
跳转到目标页面

测试建议

后台管理系统测试

✅ 创建轮播图（上传图片）
✅ 创建轮播图（输入URL）
✅ 编辑轮播图信息
✅ 启用/禁用轮播图
✅ 删除轮播图
✅ 设置不同的链接类型

小程序测试

✅ 首页轮播图正常显示
✅ 轮播图自动切换
✅ 点击无链接轮播图（无反应）
✅ 点击内部页面链接（正常跳转）
✅ 点击外部链接（webview打开）
✅ 后端API失败时显示默认图片

注意事项

图片尺寸建议：建议使用 750x400 像素的图片，保证在不同设备上显示效果一致
图片大小限制：后台上传限制为10MB
链接格式：
- 内部页面：使用相对路径，如 /pages/service/list
- 外部链接：使用完整URL，如 https://example.com
状态控制：只有启用状态的轮播图才会在小程序中显示
排序规则：sortOrder值越小，显示顺序越靠前

后续优化建议

时间控制：添加轮播图的开始时间和结束时间，支持定时上下架
点击统计：记录轮播图的点击次数，用于效果分析
多端适配：支持为不同端（小程序/H5/APP）配置不同的轮播图
图片压缩：自动压缩上传的图片，优化加载速度
预览功能：在后台管理系统中添加轮播图预览功能

对接状态: ✅ 完成 测试状态: ⏳ 待测试

4.5 KiB Raw Blame History Unescape Escape