Web期末作业：网页设计与开发全记录-CSDN博客

本文链接：https://blog.csdn.net/2401_82355416/article/details/146556419

前言

在当今数字化时代，网页设计已成为一项基础而重要的技能。作为计算机相关专业的学生，掌握网页开发技术不仅能够提升个人竞争力，也能为未来职业发展打下坚实基础。本次Web期末作业要求我们设计并实现一个完整的网页项目，同时撰写一篇不少于2000字的博客记录整个开发过程。本文将详细记录从构思到实现的每一个环节，包括需求分析、技术选型、设计过程、编码实现、测试优化以及最终成果展示。

一、项目需求分析

1.1 作业要求解读

本次期末作业的主要要求包括：
设计并实现一个完整的网页项目
网页需包含多个页面，具备良好的导航结构
使用HTML5、CSS3进行页面布局和样式设计
引入JavaScript实现交互功能
考虑响应式设计，适配不同设备屏幕
撰写详细的开发博客，记录全过程

1.2 主题选择与定位

经过慎重考虑，我决定设计一个"校园二手交易平台"。选择这一主题的原因在于：
1. 贴近大学生活，具有实际应用价值
2. 功能模块清晰，便于展示多种Web技术
3. 可扩展性强，未来可继续完善为真实项目

平台主要功能包括：
商品浏览与搜索
用户注册与登录
商品发布与管理
留言与联系功能
个人中心

二、技术选型与开发环境搭建

2.1 前端技术栈

基于课程要求和项目特点，我选择了以下技术组合：

HTML5：作为网页结构的基础
CSS3：负责页面样式和布局
JavaScript：实现交互逻辑
Bootstrap 5：加速响应式开发
jQuery：简化DOM操作和AJAX请求
Font Awesome：提供丰富的图标资源

2.2 开发工具准备

为了高效完成项目，我配置了以下开发环境：

1. 代码编辑器：Visual Studio Code
安装插件：Live Server、Prettier、ESLint、HTML CSS Support等
2. 版本控制：Git + GitHub
3. 浏览器开发者工具：Chrome DevTools
4. 设计工具：Figma（用于原型设计）
5. 调试工具：Postman（测试API接口）

2.3 项目结构规划

```
/second-hand-market/
├── index.html # 首页
├── products.html # 商品列表页
├── detail.html # 商品详情页
├── publish.html # 发布商品页
├── login.html # 登录页
├── register.html # 注册页
├── user-center.html # 个人中心页
├── css/
│ ├── style.css # 主样式文件
│ └── bootstrap.min.css # Bootstrap样式
├── js/
│ ├── main.js # 公共JS逻辑
│ ├── products.js # 商品页专用JS
│ └── jquery.min.js # jQuery库
└── images/ # 图片资源
```

三、设计过程与实现细节

3.1 原型设计与UI规划

在开始编码前，我首先使用Figma制作了低保真原型，确定了以下设计要点：

1. 色彩方案：主色调采用校园风格的蓝色(#1E88E5)和绿色(#43A047)
2. 字体选择：主要使用系统默认的无衬线字体，标题使用Google Fonts的"Roboto"
3. 布局结构：采用经典的Header-Main-Footer布局
4. 响应式断点：基于Bootstrap的断点设置(576px, 768px, 992px, 1200px)

3.2 首页实现

首页(index.html)是平台的门面，我重点实现了以下功能：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校园二手交易平台</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="index.html">校园二手</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">商品浏览</a>
</li>
<li class="nav-item">
<a class="nav-link" href="publish.html">发布商品</a>
</li>
</ul>
<div class="d-flex">
<a href="login.html" class="btn btn-outline-light me-2">登录</a>
<a href="register.html" class="btn btn-light">注册</a>
</div>
</div>
</div>
</nav>

<main class="container my-5">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">校园二手交易平台</h1>
<p class="col-md-8 fs-4">一个专为大学生打造的二手物品交易平台，轻松买卖教材、电子产品、生活用品等。</p>
<a href="products.html" class="btn btn-primary btn-lg">浏览商品</a>
</div>
</div>

<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<i class="fas fa-book fa-3x text-primary mb-3"></i>
<h3>教材交易</h3>
<p>买卖各专业教材，节省学习成本</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<i class="fas fa-laptop fa-3x text-success mb-3"></i>
<h3>电子产品</h3>
<p>二手手机、电脑、平板等数码产品</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<i class="fas fa-home fa-3x text-warning mb-3"></i>
<h3>生活用品</h3>
<p>宿舍生活所需的各种物品</p>
</div>
</div>
</div>
</div>
</main>

<footer class="bg-dark text-white py-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5>关于我们</h5>
<p>校园二手交易平台致力于为大学生提供便捷的二手物品交易服务。</p>
</div>
<div class="col-md-3">
<h5>快速链接</h5>
<ul class="list-unstyled">
<li><a href="index.html" class="text-white">首页</a></li>
<li><a href="products.html" class="text-white">商品浏览</a></li>
<li><a href="publish.html" class="text-white">发布商品</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>联系我们</h5>
<ul class="list-unstyled">
<li><i class="fas fa-envelope me-2"></i> contact@schoolsecond.com</li>
<li><i class="fas fa-phone me-2"></i> 123-456-7890</li>
</ul>
</div>
</div>
<hr>
<div class="text-center">
<p class="mb-0">© 2023 校园二手交易平台. 保留所有权利.</p>
</div>
</div>
</footer>

3.3 商品列表页实现

商品列表页(products.html)展示了平台上的所有商品，实现了以下关键功能：

1. 商品卡片布局：使用Bootstrap的卡片组件
2. 搜索过滤功能：通过JavaScript实现即时搜索
3. 分页控制：模拟后端分页效果

```javascript
// products.js
$(document).ready(function() {
// 模拟商品数据
const products = [
{id: 1, name: '高等数学教材', price: 30, category: '教材', image: 'images/book1.jpg'},
{id: 2, name: 'MacBook Pro 2019', price: 4500, category: '电子产品', image: 'images/laptop1.jpg'},
// 更多模拟数据...
];

// 渲染商品列表
function renderProducts(productsToRender) {
const $productContainer = $('#product-container');
$productContainer.empty();

if (productsToRender.length === 0) {
$productContainer.html('<div class="col-12 text-center py-5"><h4>没有找到符合条件的商品</h4></div>');
return;
}

productsToRender.forEach(product => {
const productHtml = `
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="${product.image}" class="card-img-top" alt="${product.name}">
<div class="card-body">
<h5 class="card-title">${product.name}</h5>
<p class="card-text text-muted">${product.category}</p>
<p class="card-text text-primary fw-bold">¥${product.price}</p>
<a href="detail.html?id=${product.id}" class="btn btn-outline-primary">查看详情</a>
</div>
</div>
</div>
`;
$productContainer.append(productHtml);
});
}

// 初始渲染
renderProducts(products);

// 搜索功能
$('#search-input').on('input', function() {
const searchTerm = $(this).val().toLowerCase();
const filtered = products.filter(product =>
product.name.toLowerCase().includes(searchTerm) ||
product.category.toLowerCase().includes(searchTerm)
);
renderProducts(filtered);
});

// 分类筛选
$('.category-filter').on('click', function() {
const category = $(this).data('category');
if (category === 'all') {
renderProducts(products);
} else {
const filtered = products.filter(product => product.category === category);
renderProducts(filtered);
}
});
});
```

3.4 响应式设计实现

为确保网站在各种设备上都能良好显示，我采用了以下响应式策略：

1. 流体网格布局：使用Bootstrap的栅格系统
2. 弹性图片：设置图片最大宽度为100%
3. 媒体查询：针对小屏幕调整布局和字体大小
4. 折叠式导航：在小屏幕上自动折叠导航菜单

```css
/* style.css */
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
}

/* 响应式调整 */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2rem;
}

.product-card {
margin-bottom: 1.5rem;
}

.navbar-brand {
font-size: 1.2rem;
}
}

/* 图片响应式 */
.img-fluid {
max-width: 100%;
height: auto;
}

/* 商品卡片悬停效果 */
.product-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
```

四、功能亮点与技术创新

4.1 本地存储模拟用户系统

由于是静态网页项目，无法连接真实后端，我使用localStorage模拟了用户系统：

```javascript
// main.js - 用户相关功能
function registerUser(username, password, email) {
const users = JSON.parse(localStorage.getItem('users')) || [];
const userExists = users.some(user => user.username === username);

if (userExists) {
return {success: false, message: '用户名已存在'};
}

users.push({username, password, email});
localStorage.setItem('users', JSON.stringify(users));
return {success: true};
}

function getCurrentUser() {
return JSON.parse(localStorage.getItem('currentUser'));
}

function logoutUser() {
localStorage.removeItem('currentUser');
}
```

4.2 商品收藏功能

为增强用户交互，实现了商品收藏功能：

```javascript
// detail.js
function toggleFavorite(productId) {
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
const index = favorites.indexOf(productId);

if (index === -1) {
favorites.push(productId);
$('#favorite-btn').html('<i class="fas fa-heart"></i> 已收藏').removeClass('btn-outline-danger').addClass('btn-danger');
} else {
favorites.splice(index, 1);
$('#favorite-btn').html('<i class="far fa-heart"></i> 收藏').removeClass('btn-danger').addClass('btn-outline-danger');
}

localStorage.setItem('favorites', JSON.stringify(favorites));
}

function checkFavoriteStatus(productId) {
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
if (favorites.includes(productId)) {
$('#favorite-btn').html('<i class="fas fa-heart"></i> 已收藏').removeClass('btn-outline-danger').addClass('btn-danger');
}
}
```

4.3 表单验证与用户体验优化

在登录、注册和商品发布页面实现了客户端表单验证：

```javascript
// 表单验证示例
function validateRegisterForm() {
const username = $('#username').val().trim();
const password = $('#password').val();
const confirmPassword = $('#confirm-password').val();
const email = $('#email').val().trim();

// 重置错误提示
$('.invalid-feedback').hide();
$('.is-invalid').removeClass('is-invalid');

let isValid = true;

// 用户名验证
if (username.length < 4) {
$('#username').addClass('is-invalid');
$('#username-error').text('用户名至少4个字符').show();
isValid = false;
}

// 密码验证
if (password.length < 6) {
$('#password').addClass('is-invalid');
$('#password-error').text('密码至少6个字符').show();
isValid = false;
}

// 确认密码
if (password !== confirmPassword) {
$('#confirm-password').addClass('is-invalid');
$('#confirm-password-error').text('两次输入的密码不一致').show();
isValid = false;
}

// 邮箱验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
$('#email').addClass('is-invalid');
$('#email-error').text('请输入有效的邮箱地址').show();
isValid = false;
}

return isValid;
}
```

五、开发挑战与解决方案

5.1 跨页面状态管理

在静态网页中保持用户登录状态是一个挑战，我的解决方案是：

1. 使用localStorage存储当前用户信息
2. 每个页面加载时检查登录状态
3. 根据状态动态调整导航栏显示

```javascript
// 检查登录状态并更新UI
function updateAuthUI() {
const currentUser = getCurrentUser();
const $authButtons = $('#auth-buttons');
const $userDropdown = $('#user-dropdown');

if (currentUser) {
$authButtons.hide();
$userDropdown.show();
$('#username-display').text(currentUser.username);
} else {
$authButtons.show();
$userDropdown.hide();
}
}

// 每个页面加载时执行
$(document).ready(function() {
updateAuthUI();

// 注销按钮事件
$('#logout-btn').on('click', function(e) {
e.preventDefault();
logoutUser();
window.location.href = 'index.html';
});
});
```

5.2 商品数据管理

在没有后端的情况下管理商品数据也是一个挑战，我采用的方法是：

1. 使用localStorage存储商品数据
2. 为每个页面编写数据获取和渲染逻辑
3. 实现简单的CRUD操作

```javascript
// 商品数据管理
function getProducts() {
return JSON.parse(localStorage.getItem('products')) || [];
}

function saveProducts(products) {
localStorage.setItem('products', JSON.stringify(products));
}

function addProduct(product) {
const products = getProducts();
// 生成唯一ID
product.id = products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1;
products.push(product);
saveProducts(products);
return product;
}

function getProductById(id) {
const products = getProducts();
return products.find(product => product.id === parseInt(id));
}
```

六、测试与优化

6.1 功能测试

为确保各功能正常运行，我进行了以下测试：

1. 用户流程测试：
- 注册 → 登录 → 发布商品 → 查看商品 → 注销
2. 表单验证测试：
测试各种无效输入情况
验证错误提示是否正确显示
3. 响应式测试：
在不同设备尺寸下检查布局
测试导航菜单在小屏幕上的表现

6.2 性能优化

为提高页面加载速度和用户体验，实施了以下优化措施：

1. 资源优化：
压缩CSS和JavaScript文件
使用适当的图片格式和尺寸
2. 懒加载：
实现图片懒加载功能
3. 缓存利用：
合理使用localStorage缓存数据
4. 代码分割：
按页面分离JavaScript逻辑

```javascript
// 图片懒加载实现
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});

lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
```