校园二手交易平台

校园二手交易平台

项目简介

本项目是一个面向校园场景的二手商品交易平台，采用 HTML + Vue 2 + CSS 实现前端页面与交互逻辑，数据通过浏览器 localStorage 本地持久化，无需后端服务即可运行，适合课程大作业演示与本地体验。

---

功能介绍

1. 用户系统

功能	说明
注册	填写用户名、密码与确认密码；校验两次密码一致、用户名不重复
登录	用户名 + 密码登录，登录状态保存在本地
退出	清除当前登录状态
会话保持	刷新页面后自动恢复登录状态

2. 商品浏览与搜索

功能	说明
商品列表	以卡片形式展示所有在售商品（名称、描述、价格、卖家、分类）
关键词搜索	支持按商品名称、描述、分类进行模糊搜索
商品详情	登录用户可查看商品完整信息与留言区

3. 商品发布

功能	说明
发布商品	登录用户可发布商品，填写名称、描述、价格、分类
商品分类	书籍、电子产品、生活用品、其他
卖家信息	自动关联当前登录用户为卖家

4. 留言互动

功能	说明
查看留言	在商品详情页查看该商品下的所有留言
发表留言	登录用户可在商品详情页提交留言，显示用户名与时间

5. 下单购买

功能	说明
下单	登录用户可对非本人发布的商品发起购买
订单记录	订单信息（商品、买卖双方、价格、状态等）写入本地存储
状态提示	下单成功后提示联系卖家完成线下交易

---

技术栈

• HTML5：页面结构与模板
• Vue 2.6（CDN）：响应式数据绑定与组件化交互
• Axios（CDN）：已引入，预留 HTTP 请求能力
• CSS3：页面样式与布局
• localStorage：用户、商品、订单数据本地持久化

---

文件夹目录

campus-trade-html-vue/
├── index.html          # 主页面：导航栏、登录/注册弹窗、商品列表与详情
├── css/
│   └── style.css       # 全局样式：导航、表单、商品卡片、详情页、响应式布局
├── js/
│   └── app.js          # Vue 应用逻辑：用户认证、商品 CRUD、留言、下单
├── 演示材料/
│   └── 预览视频.mp4    # 项目功能演示视频
└── 项目说明.md         # 本说明文档

文件职责说明

路径	职责
index.html	应用入口，引入 Vue、Axios 及本地 CSS/JS，定义页面 DOM 结构与 Vue 模板
css/style.css	导航栏、模态框、搜索栏、商品卡片、详情浮层、留言区等 UI 样式
js/app.js	核心业务：filteredProducts 搜索过滤、loadData/saveData 读写 localStorage、登录注册、发布商品、留言、下单
演示材料/预览视频.mp4	录制的功能演示，便于答辩或提交作业时展示

本地存储键名

键名	存储内容
campusTradeUsers	注册用户列表
campusTradeProducts	商品列表（含留言）
campusTradeOrders	订单列表
currentUser	当前登录用户信息

---

运行方式

1. 用浏览器直接打开项目根目录下的 index.html；或
2. 使用本地静态服务器（如 VS Code Live Server、python -m http.server）访问。

数据保存在浏览器 localStorage 中，清除站点数据或换浏览器后需重新注册。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/campus-trade-html-vue