BS结构用户界面设计

B/S结构用户界面设计
我采用 B/S（Browser/Server，浏览器 / 服务器）结构设计并实现校园二手拍卖网站的前端页面。通过 HTML、CSS、JavaScript 等 Web 技术，构建一个功能完整、界面友好、交互性强的校园二手商品拍卖平台前端界面，满足校园师生进行二手商品拍卖交易的需求。
具体实现的主要页面包括：
首页：展示网站 logo、导航栏、轮播图、推荐商品和最新上架商品等内容，为用户提供网站的整体概览和快速访问入口。
商品相关页面：
商品列表页：展示各类二手商品，支持用户浏览不同类别的商品。
商品详情页：展示单个商品的详细信息，包括商品图片、价格、描述、卖家信息等，同时提供评论功能。
发布商品页：提供表单供用户填写商品信息（如标题、分类、价格、状态、描述等）并上传商品图片，实现商品发布功能。
用户相关页面：
登录页：提供用户登录表单，支持多种登录方式（账号密码登录、校园统一认证、微信登录、QQ 登录等）。
注册页：提供用户注册表单，收集用户基本信息（用户名、学号、邮箱、密码等）。
个人中心页：展示用户的个人信息和相关操作入口。
卖家店铺页：展示卖家店铺信息及所售商品。
我的订单页：展示用户的订单信息。
设置页：提供用户对个人信息、隐私等进行设置的功能。
交易相关页面：
购物车页：展示用户加入购物车的商品，方便用户进行结算等操作。
结账页：处理用户的订单结算流程。

【关键步骤】
1.需求分析与规划：明确校园二手拍卖网站的目标用户为校园师生，分析其需求，确定网站需要实现的核心功能（商品展示、发布、交易、用户管理等），规划网站的整体结构和页面布局。明确我要设计几个页面，页面之间的联系是什么。
2.页面原型设计：根据需求分析结果，设计各页面的原型，确定页面元素的摆放位置、导航结构等，确保页面布局合理、用户体验良好。
3.技术选型：选择 HTML 作为页面结构搭建的基础语言，CSS 用于页面样式美化，JavaScript 实现页面交互功能，同时引入 Font Awesome 图标库丰富页面图标展示。
4.公共组件开发：
导航栏：在各页面中统一实现，包含网站 logo、搜索框、导航链接（首页、商品分类、发布商品等）和用户相关操作入口（登录、注册、个人中心等），部分页面根据用户登录状态展示不同的用户操作选项。

页脚：统一包含网站介绍、快速链接（关于我们、使用帮助等）和联系方式等内容，保持各页面风格的一致性。各功能页面开发：按照页面原型，使用 HTML 构建各页面的结构，通过 CSS 设置页面的字体、颜色、布局等样式，使页面美观、协调。针对商品发布页，实现商品信息表单的交互功能，如根据交易方式选择显示或隐藏运费设置，根据商品状态选择启用或禁用相应的价格输入框，以及商品图片上传预览功能。 // 交易方式选择功能 const transactionMethod = document.querySelectorAll('input[name="transaction-method"]'); const deliveryFeeGroup = document.getElementById('delivery-fee-group');

if (transactionMethod.length && deliveryFeeGroup) {
transactionMethod.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'delivery') {
deliveryFeeGroup.style.display = 'block';
} else {
deliveryFeeGroup.style.display = 'none';
}
});
});
}
在商品详情页实现评论功能，包括评分选择和评论内容提交等交互。
【程序运行截图】
首页：