怎样用php+css来写前端+后端代码-CSDN博客

本文链接：https://blog.csdn.net/langmengvip/article/details/147855028

数据库设计

假设我们要开发一个博客网站

SQL:

CREATE TABLE posts (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

后端实现（PHP）:

<?php
// src/config/db.php - 数据库连接
$host = 'localhost';
$dbname = 'blog';
$username = 'root';
$password = '';

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

// src/models/Post.php - 文章模型
class Post {
    private $pdo;

    public function __construct(PDO $pdo) {
        $this->pdo = $pdo;
    }

    public function getAll() {
        $stmt = $this->pdo->query("SELECT * FROM posts ORDER BY created_at DESC");
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }

    public function create($title, $content) {
        $stmt = $this->pdo->prepare("INSERT INTO posts (title, content) VALUES (:title, :content)");
        $stmt->execute(['title' => $title, 'content' => $content]);
        return $this->pdo->lastInsertId();
    }
}

// src/controllers/PostController.php - 文章控制器
class PostController {
    private $postModel;

    public function __construct(Post $postModel) {
        $this->postModel = $postModel;
    }

    public function index() {
        $posts = $this->postModel->getAll();
        include '../../public/index.php';
    }

    public function create() {
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            $title = $_POST['title'];
            $content = $_POST['content'];
            
            $this->postModel->create($title, $content);
            header('Location: /');
            exit;
        }
        include '../../public/create_post.php';
    }
}

前端实现（HTML + CSS）:

<!-- public/index.php - 文章列表页 -->
<!DOCTYPE html>
<html>
<head>
    <title>我的博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <a href="/">首页</a>
            <a href="/create_post.php">新建文章</a>
        </nav>
    </header>
    
    <main>
        <h2>文章列表</h2>
        <?php foreach ($posts as $post): ?>
            <article>
                <h3><?= htmlspecialchars($post['title']) ?></h3>
                <p class="meta">发布于 <?= $post['created_at'] ?></p>
                <div class="content">
                    <?= nl2br(htmlspecialchars(substr($post['content'], 0, 200))) ?>
                    <?php if (strlen($post['content']) > 200): ?>
                        ... <a href="#">阅读更多</a>
                    <?php endif; ?>
                </div>
            </article>
        <?php endforeach; ?>
    </main>
    
    <footer>
        <p>© 2025 我的博客</p>
    </footer>
</body>
</html>

<!-- public/create_post.php - 新建文章页 -->
<!DOCTYPE html>
<html>
<head>
    <title>新建文章</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <a href="/">首页</a>
            <a href="/create_post.php">新建文章</a>
        </nav>
    </header>
    
    <main>
        <h2>新建文章</h2>
        <form method="POST" action="src/controllers/PostController.php?action=create">
            <div>
                <label for="title">标题:</label>
                <input type="text" id="title" name="title" required>
            </div>
            <div>
                <label for="content">内容:</label>
                <textarea id="content" name="content" rows="10" required></textarea>
            </div>
            <button type="submit">发布文章</button>
        </form>
    </main>
    
    <footer>
        <p>© 2025 我的博客</p>
    </footer>
</body>
</html>

<!-- public/css/style.css - 样式文件 -->
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 20px;
}

nav {
    margin-top: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    margin-right: 15px;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

article {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.meta {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 10px;
}

h2 {
    color: #333;
}

form div {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

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

button:hover {
    background-color: #555;
}

footer {
    text-align: center;
    padding: 20px;
    color: #666;
    border-top: 1px solid #ddd;
    margin-top: 20px;
}

整合前后端:

<?php
// public/index.php - 主入口文件
session_start();
require '../src/config/db.php';
require '../src/models/Post.php';
require '../src/controllers/PostController.php';

$postModel = new Post($pdo);
$postController = new PostController($postModel);

// 根据URL参数决定执行哪个操作
if (isset($_GET['action'])) {
    $action = $_GET['action'];
    switch ($action) {
        case 'create':
            $postController->create();
            break;
        default:
            $postController->index();
    }
} else {
    $postController->index();
}