一个完整的全栈网站开发实战教程_网页设计下载apache、php、mysql的教程-优快云博客

本文链接：https://blog.youkuaiyun.com/shuaige_shiwoa/article/details/146033432

以下是一个完整的全栈网站开发实战教程，涵盖HTML、CSS、PHP、MySQL和JavaScript。我们将通过创建一个简单的用户注册/登录系统来展示完整开发流程。

第一步：环境配置（XAMPP）

下载并安装 XAMPP（包含Apache、MySQL和PHP）
启动Apache和MySQL服务
创建项目文件夹：C:\xampp\htdocs\myproject

第二步：数据库设计（MySQL）

访问 phpMyAdmin（http://localhost/phpmyadmin）
新建数据库 user_system
创建users表：

CREATE TABLE users (
    id INT(11) PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

第三步：HTML + CSS 基础结构

创建 index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到用户系统</h1>
        <div class="form-container">
            <button onclick="showRegister()">注册</button>
            <button onclick="showLogin()">登录</button>
            
            <form id="registerForm" action="register.php" method="POST">
                <h2>用户注册</h2>
                <input type="text" name="username" placeholder="用户名" required>
                <input type="email" name="email" placeholder="邮箱" required>
                <input type="password" name="password" placeholder="密码" required>
                <button type="submit">注册</button>
            </form>

            <form id="loginForm" action="login.php" method="POST">
                <h2>用户登录</h2>
                <input type="text" name="username" placeholder="用户名" required>
                <input type="password" name="password" placeholder="密码" required>
                <button type="submit">登录</button>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

创建 style.css：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f2f5;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

form {
    display: none;
}

form.active {
    display: block;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    background-color: #1877f2;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

第四步：JavaScript交互功能

创建 script.js：

function showRegister() {
    document.getElementById('loginForm').classList.remove('active');
    document.getElementById('registerForm').classList.add('active');
}

function showLogin() {
    document.getElementById('registerForm').classList.remove('active');
    document.getElementById('loginForm').classList.add('active');
}

// 初始显示登录表单
document.addEventListener('DOMContentLoaded', function() {
    showLogin();
});

第五步：PHP后端处理

创建 db_connect.php（数据库连接）：

<?php
$host = 'localhost';
$db   = 'user_system';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
?>

创建 register.php 注册处理：

<?php
require 'db_connect.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = trim($_POST['username']);
    $email = trim($_POST['email']);
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);

    try {
        $stmt = $pdo->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
        $stmt->execute([$username, $email, $password]);
        header("Location: index.html?register=success");
    } catch (PDOException $e) {
        header("Location: index.html?error=" . urlencode("注册失败: " . $e->getMessage()));
    }
}
?>

创建 login.php 登录处理：

<?php
require 'db_connect.php';
session_start();

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];

    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
    $stmt->execute([$username]);
    $user = $stmt->fetch();

    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['user_id'] = $user['id'];
        $_SESSION['username'] = $user['username'];
        header("Location: dashboard.php");
    } else {
        header("Location: index.html?error=invalid_credentials");
    }
}
?>

第六步：用户仪表盘

创建 dashboard.php：

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: index.html");
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>用户仪表盘</title>
</head>
<body>
    <h2>欢迎, <?php echo htmlspecialchars($_SESSION['username']); ?>!</h2>
    <a href="logout.php">注销</a>
</body>
</html>

创建 logout.php:

<?php
session_start();
session_unset();
session_destroy();
header("Location: index.html");
exit;
?>

第七步：安全增强措施

密码加密

$password = password_hash($plain_password, PASSWORD_DEFAULT);

SQL注入防护

始终使用预处理语句

XSS防护

echo htmlspecialchars($user_input);

第八步：测试运行

访问 http://localhost/myproject
测试注册和登录功能
检查数据库是否正常存储数据
验证会话管理是否正常

项目结构

myproject/
├── index.html
├── style.css
├── script.js
├── db_connect.php
├── register.php
├── login.php
├── dashboard.php
└── logout.php

扩展建议

添加邮箱验证功能
实现密码重置系统
增加个人资料编辑功能
开发管理员后台
集成前端框架（如Bootstrap）
添加AJAX实现无刷新操作

这个教程覆盖了完整的网站开发流程，通过实际功能demo演示了各个技术的整合使用。开发过程中要始终注意安全防护，推荐使用最新版本的PHP和MySQL，并定期更新依赖库。