网站建设大作业

我的网站建设大作业全流程实践与思考

在互联网深度渗透日常生活的今天，网站已成为个人展示、企业服务、信息传递的核心载体，作为计算机科学与技术专业的学生，"网站建设大作业"是我们从理论学习走向工程实践的关键桥梁，本文将以我独立开发的"校园二手书交易平台"为例，从需求分析、技术选型、开发实施、测试优化到部署上线，完整记录大作业的实践过程，并分享其中的经验与反思,为即将开展类似项目的同学提供参考。

需求分析：从模糊概念到清晰蓝图

网站建设的首要任务是明确"为谁做、做什么、怎么做"，我的大作业选题是"校园二手书交易平台"，源于观察到身边同学普遍存在教材闲置、购书成本高的问题——每学期结束后，大量教材被当作废纸变卖，而新生则需要高价购买新书，信息不对称造成了资源浪费，构建一个安全、便捷的校内二手书交易网站,具有实际应用价值。

用户定位与需求拆解

通过问卷调查（收集120份有效样本）和深度访谈（10名不同年级学生）,我确定了三类核心用户及其需求：

• 买家：快速筛选所需教材（按专业、课程、年级分类）、查看书籍详细信息（新旧程度、价格、笔记情况）、直接联系卖家、在线支付（支持校园卡余额）、交易评价；
• 卖家：便捷发布书籍信息（拍照上传、自动填充ISBN信息）、管理在售商品、查看订单状态、提现功能（绑定校园卡）；
• 管理员：用户审核（实名认证）、商品信息审核、纠纷处理、数据统计（交易量、热门书籍等）。

功能模块设计

基于需求分析,我将网站功能划分为五大模块：

• 用户模块：注册/登录（支持学号验证）、个人中心（个人信息、发布记录、订单、收藏）、实名认证；
• 商品模块：书籍发布（ISBN自动获取信息）、搜索（关键词、分类筛选）、详情页（图片、描述、卖家信息）、收藏与举报；
• 交易模块：下单、在线支付（对接校园支付系统）、订单状态跟踪（待发货、已发货、已完成）、退款申请；
• 管理模块：后台仪表盘（数据可视化）、用户管理、商品审核、公告发布；
• 辅助模块：消息通知（站内信、邮件提醒）、帮助中心、关于我们。

非功能性需求

除了核心功能,我还特别关注非功能性需求：

• 性能：页面加载时间≤3秒,支持100人同时在线；
• 安全：用户密码加密存储（BCrypt），支付接口采用HTTPS,防止SQL注入攻击；
• 兼容性：适配主流浏览器（Chrome、Firefox、Edge、移动端浏览器）；
• 易用性：界面简洁，操作流程不超过3步完成核心任务（如发布商品）。

技术选型：构建稳定高效的开发环境

技术选型直接决定项目的可维护性、扩展性和开发效率，结合课程所学与实际需求，我选择了"前端+后端+数据库+服务器"的全栈技术方案。

前端技术栈

• 框架：Vue.js 3（组合式API，代码复用率高，适合中单页应用开发）；
• UI组件库：Element Plus（基于Vue的组件库，提供丰富的表单、表格、弹窗组件，加速界面开发）；
• 状态管理：Pinia（Vue官方推荐，比Vuex更简洁，支持TypeScript）；
• 路由：Vue Router（实现前端路由控制，如登录拦截、动态路由）；
• 构建工具：Vite（比Webpack启动速度快，热更新效率高，适合中小型项目）；
• CSS预处理器：Sass（变量、嵌套语法，提升样式代码可维护性）。

后端技术栈

• 框架：Spring Boot 2.7（Java生态成熟，简化配置，内置Tomcat服务器，适合快速开发RESTful API）；
• 数据库：MySQL 8.0（关系型数据库，支持事务，适合存储结构化数据如用户、商品、订单）；
• ORM框架：MyBatis-Plus（简化CRUD操作，支持代码生成，提高开发效率）；
• 安全框架：Spring Security（处理用户认证、授权，防止未访问控制）；
• 缓存：Redis（缓存热门商品数据，减轻数据库压力，存储验证码）；
• 文档工具：Swagger（自动生成API文档，方便前后端联调）。

开发与部署环境

• 开发工具：IntelliJ IDEA（后端）、VS Code（前端）、Navicat（数据库管理）；
• 版本控制：Git（代码托管平台使用Gitee，团队协作必备）；
• 服务器：阿里云ECS（轻量应用服务器，2核4G配置，Ubuntu 20.04系统）；
• 容器化：Docker（将项目打包成镜像，部署简单，环境一致）；
• 反向代理：Nginx（处理静态资源、负载均衡、HTTPS配置）。

开发实施：从零开始构建系统

技术选型完成后，进入具体的编码阶段，我将开发过程分为数据库设计、前端开发、后端开发、接口联调四个阶段，遵循"先框架后功能，先模块后集成"的原则。

数据库设计：数据的"骨架"

数据库是系统的核心，设计时需遵循三范式（减少数据冗余、保证数据一致性）,我设计了6张核心表：

• 用户表（user）：id（主键）、学号（唯一）、密码（加密）、姓名、手机号、认证状态、创建时间；
• 商品表（book）：id（主键）、标题、ISBN、作者、出版社、描述、图片路径（多图以逗号分隔）、价格、新旧程度（1-5成）、卖家id（外键）、状态（在售/已售下架）、发布时间；
• 订单表（order）：id（主键）、订单号、商品id（外键）、买家id（外键）、卖家id（外键）、金额、状态（待支付/已支付/已发货/已完成/已取消）、创建时间；
• 分类表（category）：id（主键）、分类名称（如"计算机基础"、"文学小说"）、父级id（支持二级分类）；
• 收藏表（favorite）：id（主键）、用户id（外键）、商品id（外键）、创建时间；
• 评价表（comment）：id（主键）、订单id（外键）、评分（1-5星）、评价内容、创建时间。

通过PowerDesigner绘制ER图，确保表关系清晰（如商品表与用户表通过"卖家id"关联，订单表同时关联买家与卖家）。

前端开发：从"静态页面"到"交互界面"

前端开发采用"组件化"思想,将页面拆分为可复用的组件：

• 基础组件：Button（按钮）、Input（输入框）、Table（表格）等，使用Element Plus封装,统一样式与交互逻辑；
• 业务组件：BookCard（商品卡片，展示封面、标题、价格）、SearchBar（搜索栏，支持分类筛选）、OrderItem（订单项，显示状态与操作按钮）；
• 页面组件：HomePage（首页，展示轮播图、热门商品）、PublishPage（发布商品页，分步骤表单）、AdminPage（后台管理，数据可视化图表）。

开发中遇到两个典型问题：

• 图片上传优化：商品图片需要压缩（使用Canvas压缩至1MB内），并支持多图上传（前端使用Element Plus的Upload组件，后端存储图片路径至OSS）；
• 路由守卫：未登录用户访问交易页面时，自动跳转至登录页（通过Vue Router的beforeEach钩子判断token是否存在）。

后端开发：API的"逻辑引擎"

后端核心是提供RESTful API，遵循"URL简洁、HTTP方法明确、数据格式统一（JSON）"的原则：

• 用户模块：POST /api/user/register（注册）、POST /api/user/login（登录，返回JWT token）、GET /api/user/profile（获取个人信息）；
• 商品模块：GET /api/book/list（分页查询商品，支持搜索与筛选）、POST /api/book/publish（发布商品，需登录）、PUT /api/book/{id}（修改商品）；
• 订单模块：POST /api/order/create（创建订单）、GET /api/user/orders（获取我的订单）、PUT /api/order/{id}/status（修改订单状态，卖家专用）。

开发中重点解决了两个技术难点：

• 事务管理：下单时需要扣减商品库存（商品表）、创建订单（订单表），使用Spring的@Transactional注解确保原子性，避免"下单成功但库存未减"的问题；
• 权限控制：普通用户只能修改自己的商品信息，管理员可审核所有商品，通过Spring Security的@PreAuthorize注解实现方法