本项目是一个面向在校大学生的校园二手交易平台,前端采用 Vue 3 结合 Vue Router、Axios 和 Vite 搭建成单页应用(SPA),负责实现从物品浏览、详情展示到发布交易、个人中心和后台管理的一整套交互界面。前端通过组件化设计,将首页、物品列表、物品详情、发布/编辑物品、用户中心、管理员后台等功能拆分为多个独立视图组件,并利用 Vue Router 实现无刷新路由切换和基础权限控制(登录重定向、管理员入口等)。 在数据交互层面,前端使用 Axios 封装统一的 API 模块,与后端 Spring Boot 提供的 REST 接口进行通信,完成物品、用户、交易、评价、统计等数据的获取与提交;通过请求拦截器自动附带 JWT Token,实现前后端分离下的认证信息传递。界面方面,项目基于 HTML5/CSS3 手写布局与样式,采用卡片式商品列表、模态框表单和响应式栅格布局,适配不同屏幕宽度,保证 PC 与移动端都有良好体验。 在功能体验上,前端实现了多条件筛选与分页的物品列表、支持多图预览和相似物品推荐的详情页,以及带有表单校验和错误提示的发布/编辑页面。同时集成了 AI 图片识别能力:用户上传商品图片后,前端将图片通过表单数据上传到后端 AI 接口,自动获取并回填推荐的分类和描述,显著降低用户发帖成本。通过这个项目的前端开发,我完整实践了 Vue 3 组件化开发、路由与状态管理、接口封装、文件上传与 AI 能力集成等前端技术栈在真实业务场景中的应用。