电子商务网站建设实训报告

从需求分析到系统上线的全流程实践

本报告基于为期八周的电子商务网站建设实训，以“校园二手书交易平台”为项目载体，系统阐述了从需求分析、系统设计、技术选型到开发测试的全流程实践，实训中，团队采用HTML5+CSS3+JavaScript前端技术栈与Spring Boot+MySQL后端架构，实现了用户注册登录、商品管理、订单处理、在线支付等核心功能，并通过响应式设计适配多终端访问，报告详细总结了实训过程中的技术难点、解决方案及团队协作经验，并对项目优化方向提出展望,为同类电子商务网站开发提供实践参考。

实训背景与目标

1 实训背景

随着数字经济的快速发展，电子商务已成为推动消费升级的重要力量，据《中国电子商务报告2023》显示，我国电子商务交易规模达47.35万亿元，同比增长9.2%，中小企业对电商网站的需求日益增长，传统高校计算机专业教学中，理论教学与产业实践脱节问题突出，学生缺乏真实项目开发经验，为解决这一问题，学校联合本地电商企业开展“电子商务网站建设实训”，旨在通过模拟真实商业场景，培养学生的全栈开发能力与项目管理意识。

2 实训目标

（1）技术能力目标：掌握电子商务网站开发的核心技术，包括前端UI设计、后端API开发、数据库设计与部署；
（2）项目实践目标：完成从需求调研到系统上线的完整开发流程，熟悉敏捷开发模式；
（3）团队协作目标：提升沟通协调与问题解决能力，培养软件工程师职业素养。

项目需求分析

1 项目定位

本项目定位于“校园二手书交易平台”，聚焦大学生群体，解决教材、教辅资料闲置率高、流通效率低的问题，平台需具备商品展示、在线交易、用户评价等基础功能，并针对校园场景优化二手书定价、物流配送等环节。

2 用户角色分析

通过问卷调查（回收有效问卷320份）与用户访谈，识别出三类核心用户角色：

• 买家：需求为快速筛选二手书、查看商品详情、安全支付、物流跟踪；
• 卖家：需求为便捷发布商品（支持批量上传）、管理库存、查看订单收益；
• 管理员：需求为用户审核、商品监管、数据统计、系统维护。

3 功能需求与非功能需求

3.1 核心功能需求

3.2 非功能需求

• 性能：页面加载时间≤3秒，支持500人同时在线；
• 安全性：用户密码加密存储（BCrypt），支付接口采用HTTPS协议；
• 兼容性：适配Chrome、Firefox等主流浏览器，支持移动端响应式访问；
• 可扩展性：预留API接口，便于后续接入物流查询、智能推荐等功能。

系统设计与技术选型

1 系统架构设计

采用“浏览器-服务器”（B/S）三层架构，分为表现层、业务逻辑层与数据访问层，如图1所示：

• 表现层：负责用户界面展示，采用HTML5+CSS3+JavaScript，结合Vue.js框架实现组件化开发；
• 业务逻辑层：处理核心业务逻辑，使用Spring Boot框架，通过RESTful API与前端交互；
• 数据访问层：负责数据持久化，采用MySQL数据库，结合MyBatis Plus简化数据操作。

2 数据库设计

根据需求分析，设计核心数据表结构如下：

• 用户表（user）：userId（主键）、username、password（加密）、phone、role（买家/卖家/管理员）；
• 商品表（product）：productId、title、description、price、images（JSON数组存储图片路径）、userId、status（在售/已售/下架）；
• 订单表（order）：orderId、orderNo（订单号）、userId、productId、quantity、totalPrice、status（待支付/已发货/已完成）；
• 订单详情表（order_item）：itemId（主键）、orderId、productId、specification（如书籍版本）、price。

3 技术选型依据

系统实现与核心功能展示

1 前端实现

1.1 首页与商品列表页

采用Vue Router实现路由管理，Axios发送异步请求，商品列表页实现“分类筛选+关键词搜索”功能，通过防抖（debounce）优化搜索请求频率，避免频繁调用API，商品卡片使用CSS Grid布局，实现响应式设计，适配PC端（≥1200px）与移动端（<768px）。

1.2 商品详情页

集成Markdown编辑器，支持卖家在发布商品时插入富文本描述；图片上传采用Vue Cropper组件，实现图片裁剪与压缩；库存状态实时更新，通过WebSocket推送商品库存变化信息（如“仅剩1本”）。

2 后端实现

2.1 用户认证与授权

基于Spring Security+JWT实现无状态认证：用户登录成功后，服务器生成Token并返回，前端将Token存储在localStorage，后续请求在Header中携带Token进行身份验证，通过角色（Role）与权限（Permission）注解控制接口访问权限，如

限制只有卖家可发布商品。

限制只有卖家可发布商品。

2.2 订单与支付流程

订单模块采用状态机模式管理订单状态（待支付→已支付→已发货→已完成→已取消），通过

注解保证数据一致性，支付接口对接支付宝沙箱环境，模拟支付回调：前端跳转至支付宝支付页面，支付成功后，支付宝服务器异步通知后端更新订单状态。

注解保证数据一致性，支付接口对接支付宝沙箱环境，模拟支付回调：前端跳转至支付宝支付页面，支付成功后，支付宝服务器异步通知后端更新订单状态。

3 后台管理系统

采用Vue Admin Template模板快速搭建后台界面，使用ECharts实现数据可视化：展示近30天订单量趋势、商品分类占比、用户活跃度等指标，管理员可批量审核商品，通过关键词过滤违规内容（如“考试答案”）。

测试与部署

1 测试策略

1.1 功能测试

使用Postman测试API接口，覆盖正常场景与异常场景：

• 正常场景：用户登录成功，返回Token；
• 异常场景：密码错误，返回“用户名或密码错误”提示（HTTP 401）。

1.2 性能测试

通过JMeter模拟500并发用户访问商品列表页，测试结果显示：平均响应时间1.8秒，95%请求响应时间<3秒，TPS（每秒事务数）达120，满足性能需求。

1.3 安全测试

使用SQLMap进行SQL注入测试，验证参数化查询可有效防止注入；使用X-Scan扫描系统漏洞，发现并修复了CSRF跨站请求伪造漏洞（通过添加CSRF Token解决）。

2 部署流程

（1）环境准备：在阿里云ECS上安装Ubuntu 20.04、JDK 11、MySQL 8.0、Nginx；
（2）项目打包：后端使用Maven打包为JAR包，前端通过npm run build生成静态文件；
（3）配置Nginx：配置反向代理，将