当前位置：物联沃-IOTWORD物联网 > 技术教程 > 写给Pythoner的前端进阶指南（七）：实战一之构建一个动态网页
代码收藏家代码收藏家 技术教程

写给Pythoner的前端进阶指南（七）：实战一之构建一个动态网页

在现代 Web 开发中，前端和后端的配合是至关重要的。通过前端与后端的交互，网页可以变得动态且响应迅速。作为一名 Python 开发者，你可能熟悉使用 Flask 或 Django 构建后端 API，而在前端方面，JavaScript 提供了丰富的工具和方法，尤其是在处理用户输入和动态更新页面时。

在本篇文章中，一起动手来实现一个简单的动态博客页面吧。它支持用户查看评论、提交新评论，并且通过前后端交互，避免页面刷新。前端将使用 HTML、CSS 和 JavaScript，后端部分我们将提供一个简单的 Node.js API（或者 Python Flask）来处理评论数据。

一、需求分析

1.1 项目目标

我们要实现一个简单的博客页面，具有以下基本功能：

  • 展示评论：从服务器获取并展示已有的评论。
  • 提交评论：用户输入评论内容并提交，评论提交后会立即显示在页面上，页面无需重新加载。

    • 1.2 功能说明

  • 用户可以在评论框中输入内容并提交。
  • 评论提交后，会通过 API 保存到服务器，并立即在页面上显示新评论。
  • 无需刷新页面，通过 JavaScript 动态更新页面内容。

    • 二、技术栈

    2.1 前端技术

  • HTML：用于构建网页结构。
  • CSS：用于页面样式设计。
  • JavaScript & DOM：实现动态网页交互，处理用户输入，展示数据。
  • AJAX（Fetch API）：用于异步请求数据并动态更新页面。

    • 2.2 后端技术

  • Node.js（Express）：构建简单的后端 API，处理评论的获取和提交。
  • 或：使用 Python Flask 实现后端服务。

    • 我们将从前端开始，展示如何使用 HTML、CSS 和 JavaScript 创建一个简单的动态博客页面。接着，我们将使用 Node.js（或 Python Flask）构建一个简单的后端 API 来支持评论功能。

    三、实现步骤

    3.1 前端实现

    1. 创建基本的 HTML 结构

    首先，我们需要创建一个简单的网页，包含一个显示评论的区域和一个提交评论的表单。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态博客页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .comment-list {
            list-style: none;
            padding: 0;
        }
        .comment-item {
            background-color: #f9f9f9;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
        }
        .comment-form {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的博客！</h1>
    <h2>评论区</h2>
    <ul class="comment-list" id="commentList"></ul>

    <div class="comment-form">
        <textarea id="commentText" placeholder="请输入你的评论..." rows="4" style="width: 100%;"></textarea>
        <button onclick="submitComment()">提交评论</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

    3.2 使用 JavaScript 和 DOM 实现前端交互

    接下来，我们使用 JavaScript 和 DOM 操作来处理用户的评论提交，并通过 fetch API 异步请求后端数据。

    1. 获取已有评论

    页面加载时，我们需要从后端 API 获取评论数据并展示在页面上。可以通过 fetch API 来异步获取数据。

    document.addEventListener('DOMContentLoaded', function() {
    fetchComments();
});

function fetchComments() {
    fetch('http://localhost:3000/comments')
        .then(response => response.json())
        .then(data => {
            const commentList = document.getElementById('commentList');
            commentList.innerHTML = '';  // 清空现有的评论
            data.forEach(comment => {
                const li = document.createElement('li');
                li.classList.add('comment-item');
                li.textContent = comment.text;
                commentList.appendChild(li);
            });
        })
        .catch(error => console.error('获取评论失败:', error));
}
    2. 提交新评论

    用户在文本框中输入评论内容后，点击提交按钮，我们需要将新评论通过 API 提交给服务器，并将其立即显示在页面上。

    function submitComment() {
    const commentText = document.getElementById('commentText').value;
    if (!commentText) {
        alert('评论不能为空');
        return;
    }

    const newComment = {
        text: commentText
    };

    fetch('http://localhost:3000/comments', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(newComment)
    })
        .then(response => response.json())
        .then(data => {
            // 将新评论添加到页面的评论列表中
            const commentList = document.getElementById('commentList');
            const li = document.createElement('li');
            li.classList.add('comment-item');
            li.textContent = data.text;
            commentList.appendChild(li);

            // 清空评论框
            document.getElementById('commentText').value = '';
        })
        .catch(error => console.error('提交评论失败:', error));
}

    3.3 后端实现

    使用 Node.js 和 Express 实现简单 API

    为了存储和获取评论，我们使用 Node.js 和 Express 来构建一个简单的后端 API。

    1. 安装所需依赖：
    npm init -y
npm install express body-parser
    1. 创建后端服务（server.js）：
    const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

// 存储评论的数组
let comments = [
    { text: "这是一个示例评论！" },
    { text: "我喜欢这个博客！" }
];

// 使用 body-parser 来解析 JSON 数据
app.use(bodyParser.json());

// 获取所有评论
app.get('/comments', (req, res) => {
    res.json(comments);
});

// 提交评论
app.post('/comments', (req, res) => {
    const newComment = req.body;
    comments.push(newComment);
    res.json(newComment);  // 返回新评论
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});
    1. 启动 Node.js 服务器：
    node server.js

    3.4 测试前后端交互

    1. 启动后端服务。
    2. 打开浏览器加载 HTML 页面。
    3. 查看已有评论并提交新的评论，评论将即时显示在页面上。

    四、与 Python 的对比

    4.1 使用 Python Flask 实现后端 API

    如果你更习惯使用 Python，我们可以使用 Flask 构建后端 API。以下是一个简单的 Flask 后端示例：

    1. 安装 Flask：
    pip install Flask
    1. 创建 Flask 后端服务（app.py）：
    from flask import Flask, request, jsonify

app = Flask(__name__)

comments = [
    {"text": "这是一个示例评论！"},
    {"text": "我喜欢这个博客！"}
]

@app.route('/comments', methods=['GET'])
def get_comments():
    return jsonify(comments)

@app.route('/comments', methods=['POST'])
def post_comment():
    new_comment = request.get_json()
    comments.append(new_comment)
    return jsonify(new_comment)

if __name__ == '__main__':
    app.run(debug=True, port=3000)
    1. 启动 Flask 服务：
    python app.py

    4.2 比较

  • HTTP 请求：在 Python 中，requests 库与 JavaScript 中的 fetch 功能类似，都提供了简洁的接口来处理 HTTP 请求。
  • 实时通信：在 Python 中，我们使用 socket 库来处理底层的网络通信，而 JavaScript 中的 WebSocket API 更加便捷，尤其适合浏览器中的实时数据传输。

    • 结语

    通过本篇实战项目，我们创建了一个简单的动态博客页面，支持用户查看和提交评论。前端使用了 HTML、CSS 和 JavaScript，后端部分则通过 Node.js（或 Python Flask）实现了简单的 API。这个项目展示了前后端交互的基本概念，并且通过异步请求和 DOM 操作避免了页面刷新，使得用户体验更加流畅。

    希望通过这篇文章，你能够更好地理解如何结合 JavaScript 和后端技术实现动态网页。如果你有任何问题或进一步的讨论，欢迎在评论区留言，我们一同交流！

    作者：余生H

    物联沃分享整理
    物联沃-IOTWORD物联网 » 写给Pythoner的前端进阶指南（七）：实战一之构建一个动态网页

    代码收藏家 普通

    分享到：

    相关推荐

    发表回复