2025山东大学软件学院创新实训10

原创已于 2025-06-11 21:49:36 修改 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

于 2025-05-16 10:48:36 首次发布

电商推荐系统小程序前后端开发总体报告

一、项目背景与目标

本商城系统旨在构建一个支持微信小程序电商平台，提供完整的用户购物体验，包括商品浏览、收藏、分类查找、购物车管理、订单提交和地址维护等核心功能。前端采用跨平台开发框架 uni-app 编写，后端使用 Java + Spring Boot 提供稳定的 API 服务，并通过 RESTful 接口与前端对接，支持完整的“前后端分离”架构。

该项目以小程序为主运行平台，实现“一套代码，多端运行”。

二、项目结构总览

本系统由两个部分组成：

层级	技术栈	职责说明
前端	uni-app（Vue3）	展示商城界面，处理用户操作，调用后端接口
后端	Spring Boot + MySQL	提供商品、分类、用户、订单、地址等接口服务

📁 前端目录结构（关键模块）


index/：商城首页（轮播图、新品推荐、快捷导航）
basket/：购物车页面（商品管理、结算跳转）
category/：商品分类页（多层级分类展示）
prod/：商品详情页（价格、规格、收藏按钮）
search-page/：搜索入口页面
user/：用户中心（地址管理入口）
delivery-address/ & editAddress/：地址选择与编辑模块

📁 后端目录结构（部分）

controller/：接口控制器，如 ProductController.java

config/：跨域配置、拦截器配置等

listener/：系统启动事件监听器

resources/：接口配置、数据库连接、日志设置

三、首页功能设计

首页作为商城的核心入口，功能布局简洁直观，包括：

顶部搜索栏：用户可输入关键词进行商品检索（跳转到 search-page）
轮播图区域：展示促销/推荐活动图（通过 API 动态加载）
快捷导航栏：支持「新品推荐」「限时特惠」「每日疯抢」等分类跳转
通知栏：展示系统公告（如新品上线、物流提醒）
每日上新模块：通过接口拉取新品数据动态展示
底部导航栏：包含首页、AI助手、分类、购物车、我的（统一管理页面跳转）

四、购物车模块

用户在商品详情页点击“加入购物车”按钮后，商品信息会添加至本地购物车

购物车页面（basket 页面）支持以下功能：

展示所有已添加商品，包括名称、图片、价格、数量。
支持增减商品数量或删除。
实时更新总金额。
点击“去结算”跳转提交订单页面。

五、商品分类功能

商品分类页面采用左侧一级分类、右侧二级分类结构设计。用户点击左侧类目，右侧实时刷新对应商品。

分类页与首页联动，支持点击分类跳转到列表或详情页。

六、商品收藏功能

在商品详情页中，用户可以点击“收藏”图标将商品加入个人收藏夹。

收藏列表可以在“我的”页面中查看，支持点击跳转回商品详情。

七、搜索功能

搜索功能由首页顶部入口进入，跳转到 search-page 页面。

支持：

关键词输入：调用 /api/prod/search 查询商品列表。
搜索历史记录：存储最近输入关键词，便于快速重复搜索。
结果展示：商品列表形式展示查询结果，点击进入详情页。

搜索模块提升了用户商品检索效率，是首页的核心交互通道之一。

八、地址管理功能

用户在“我的”页面进入“收货地址”模块（delivery-address 页面）。

功能包括：

查看已有地址列表。
添加新地址：进入 editAddress 页面填写信息。
编辑或删除已有地址。
设置默认地址：用于提交订单时自动选择。

提交订单时，地址信息会自动加载默认收货地址，用户也可手动更换。