一、组员分工
余嘉:项目需求分析,墨刀原型图商品分类、详情、发布页的设计。数据库表设计 ,软件类图绘制 , 后端接口设计、后端商品、订单、分类、登录、收藏接口实现。
王俊杰:大部分ui层设计和制作和大部分逻辑交互层的实现。ui设计:登陆和注册页面、主页、二手商品页面、商品详情页面、收藏商品页面。功能实现:前后端的连接交互、商品购买功能、商品收藏功能、商品评论功能、商品发布功能、商品评价功能等。
谭凯:ui设计,我的发布前端实现,我购买的,我出售的前端后端的实现,个人界面。查看商品评价功能。部分时序图和用例图。墨刀原型设计,我的发布以及我出售的。
邓扬名:用户需求分析,墨刀原型图主页以及设置页的设计,后端代码商品评论、订单评价、用户信誉分的实现。编写测试数据,负责软件测试和进度控制
二、主要界面
- 二手商品页面:该页面实现“生活用品”分类下二手商品的展示功能。左侧提供分类导航,可切换查看不同类型商品;中央列表按图片、名称、价格和描述排列商品信息,清晰直观。用户可点击商品查看详情或进行交易。页面基于 Vue.js 构建,通过接口调用数据库动态加载商品数据,确保内容实时更新。分类导航与简洁布局提升用户体验。
2.商品发布界面:功能概述:提供用户发布商品的表单,包括以下输入项:支持用户从预设分类中选择。描述商品的具体信息。自提地址:填写面交地址。上传商品图片:支持上传单张图片(最大2MB),用于商品展示。
3.首页界面,功能概述:顶部展示系统名称“校园二手交易平台”及系统LOGO,提升品牌辨识度。提供分类浏览功能,包括“教辅资料”、“电子产品”、“生活用品”等,方便用户快速找到目标商品。展示“最新发布”的商品信息,每个商品卡片包含商品图片、名称和价格等基本信息,支持点击查看详细信息。
二手商品页面
发布界面
首页
查询订单
商品详情页(用户信誉分)
三、系统使用主要场景
1.闲置物品售卖
用户可以通过上传图片和简洁描述快速发布自己闲置的商品,将物品展示在平台上,等待有需求的买家找到它,实现资源再利用的同时,也为自己带来收益。
在交易完成后,买家会对售出商品进行评分与评价,卖家由此获得相应的信誉分,信誉分将影响其在平台的交易形象与后续的交易机会。
2.二手商品购买
用户可以通过平台以更实惠的价格购买所需的二手商品,既满足生活需求,又节省开支。同时,平台提供智能分类和搜索功能,帮助用户更快速地找到心仪好物。
买家在购买过程中,可参考卖家的信誉分,以便做出更放心的交易决策,而自身的评价也会成为平台信誉体系的一部分,促进整个二手交易环境的良性发展。
四、系统亮点
1. 简洁明了的用户界面
系统设计注重用户体验,使用简洁的页面布局,导航栏明确,功能模块清晰分区(如首页、二手商品、发布、个人中心)。用户可以轻松完成商品的发布、浏览和交易操作。
2. 分类精准与快速搜索
在首页提供商品分类功能,包括“教辅资料”、“电子产品”和“生活用品”等,方便用户快速找到所需商品。同时支持用户查看“最新发布”商品,实时获取市场动态。
3. 高效的商品管理
用户可以在“个人中心”查看已发布、已售出和未售出的商品状态,支持直接管理已发布商品的详细信息。
4. 多媒体商品展示
商品发布功能支持上传图片(最大支持2MB),用户能够为商品配备直观的图片展示,提高商品的吸引力和交易成功率。
5. 移动端友好
系统通过HBuilderX构建Vue前端页面,具有响应式设计,适配各种屏幕尺寸,满足用户在不同设备上的使用需求。
五、关键技术
1. 前端技术
Vue.js:使用Vue框架构建前端页面,实现模块化开发,便于维护和扩展。页面文件通过HBuilderX编辑器编写,优化了开发效率。
Element UI组件库:用于界面设计,提供美观、交互良好的基础组件。
响应式设计:前端支持不同设备分辨率,保证在PC和移动端的友好展示。
2. 后端技术
Java + Spring Boot框架:后端使用IntelliJ IDEA集成开发环境编写,通过Spring Boot搭建高效、简洁的服务端架构。
Restful API接口设计:前后端采用Restful风格接口,数据交互更加清晰和规范。
数据校验与异常处理:后端添加了数据校验逻辑,保证上传的商品信息完整有效,同时对用户输入的异常情况提供友好的提示。
3. 数据库
MySQL:使用MySQL作为数据库存储商品信息、用户数据和交易记录。设计了规范化的表结构以保证数据的一致性和可扩展性。
数据优化:针对用户查询常用的商品信息、分类筛选进行了索引优化,提升数据库查询性能。
4. 文件存储与上传
文件上传与校验:支持用户上传商品图片,采用服务器端文件存储方案,对图片大小进行限制(2MB以内),保证上传稳定性和高效性。
图片预览与展示:前端通过预加载功能实时展示用户选择的图片。
5. 开发工具
HBuilderX:用于快速开发前端页面,支持对Vue项目的高效管理。
IntelliJ IDEA:后端开发中使用,集成代码编写、调试和运行功能。