从零开始设计一个网站：HTML5、CSS、MySQL、JavaScript 实战案例

本文链接：https://blog.youkuaiyun.com/weixin_44088472/article/details/146192169

从零开始设计一个网站：HTML5、CSS、MySQL、JavaScript 实战案例
本实战案例将手把手教你搭建一个个人博客系统，涵盖前端页面设计、后端数据库交互和动态功能实现。以下是详细步骤和代码示例：

一、项目规划与工具准备

功能模块
用户注册/登录

文章发布与管理

文章列表展示

文章详情与评论

响应式布局（适配手机/PC）

技术栈
前端：HTML5（结构）、CSS3（样式）、JavaScript（交互）

后端：PHP（处理请求）或 Node.js（可选）

数据库：MySQL（存储用户、文章、评论数据）

开发环境：XAMPP/MAMP（本地服务器）、VS Code

环境搭建
安装 XAMPP 并启动 Apache 和 MySQL 服务。

创建数据库 blog_db：

sql
复制
CREATE DATABASE blog_db;
USE blog_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
CREATE TABLE posts (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(100) NOT NULL,
content TEXT NOT NULL,
user_id INT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id)
);
CREATE TABLE comments (
id INT AUTO_INCREMENT PRIMARY KEY,
content TEXT NOT NULL,
post_id INT,
user_id INT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (post_id) REFERENCES posts(id),
FOREIGN KEY (user_id) REFERENCES users(id)
);

二、前端开发：HTML5 + CSS

首页模板（index.html）
html
复制

我的博客

欢迎来到我的博客

运行 HTML 2. 响应式 CSS（css/style.css） css 复制 * { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: Arial, sans-serif; line-height: 1.6; }

header {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}

nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
}

.post-list {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}

.post-item {
background: #f4f4f4;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 5px;
}

@media (max-width: 600px) {
nav { display: flex; flex-direction: column; }
nav a { margin: 0.5rem 0; }
}

三、后端开发：PHP + MySQL

数据库连接（php/db_connect.php）
php
复制

<?php $host = 'localhost'; $dbname = 'blog_db'; $username = 'root'; $password = ''; try { $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { die("数据库连接失败: " . $e->getMessage()); } ?>

用户注册（php/register.php）
php
复制

<?php require_once 'db_connect.php'; if ($_SERVER['REQUEST_METHOD'] === 'POST') { $username = $_POST['username']; $password = password_hash($_POST['password'], PASSWORD_DEFAULT); try { $stmt = $pdo->prepare("INSERT INTO users (username, password) VALUES (?, ?)"); $stmt->execute([$username, $password]); header("Location: login.html"); } catch (PDOException $e) { echo "注册失败: " . $e->getMessage(); } } ?>

获取文章列表（php/get_posts.php）
php
复制

<?php require_once 'db_connect.php'; $stmt = $pdo->query("SELECT posts.*, users.username FROM posts JOIN users ON posts.user_id = users.id ORDER BY created_at DESC"); $posts = $stmt->fetchAll(PDO::FETCH_ASSOC); header('Content-Type: application/json'); echo json_encode($posts); ?>

四、动态交互：JavaScript（AJAX）

加载文章列表（js/main.js）
javascript
复制
document.addEventListener(‘DOMContentLoaded’, function() {
fetch(‘php/get_posts.php’)
.then(response => response.json())
.then(posts => {
const postList = document.querySelector(‘.post-list’);
postList.innerHTML = posts.map(post => <div class="post-item"> <h2>${post.title}</h2> <p>作者：${post.username}</p> <p>${post.content.slice(0, 100)}...</p> <a href="post.html?id=${post.id}">阅读更多</a> </div> ).join(‘’);
});
});
表单提交示例（注册页面 register.html）
html
复制

运行 HTML

五、安全与优化

防止 SQL 注入
使用 PDO 预处理语句（如 $pdo->prepare()）。

密码安全
使用 password_hash() 和 password_verify() 处理密码。

XSS 防护
前端使用 textContent 替代 innerHTML，或对动态内容转义：

javascript
复制
function escapeHtml(text) {
const div = document.createElement(‘div’);
div.textContent = text;
return div.innerHTML;
}
HTTPS 部署
购买域名并配置 SSL 证书（推荐使用 Let’s Encrypt）。