Flask系统的使用（包括几类文件的协同以及实例）-优快云博客

本文链接：https://blog.youkuaiyun.com/liming_dawn_h/article/details/143894639

三类文件作用

HTML作为基础：
- HTML定义了页面的基本结构和内容。例如，它可能包含一个<div>元素，用于稍后显示动态内容。
CSS应用样式：
- CSS选择器可以针对HTML元素应用样式。例如，可以为上述<div>元素设置样式，使其在页面上具有特定的位置、大小和颜色。
JavaScript添加交互性：
- JavaScript可以操作HTML和CSS。例如，它可以在用户点击按钮时，改变<div>元素的内容，或者在用户滚动页面时改变元素的样式。

协同工作流程

请求 HTML 页面：
- 用户访问 http://localhost:5000/。
- Flask 处理请求，并返回 index.html 页面。
请求 CSS 和 JS 文件：
- index.html 中包含对 styles.css 和 script.js 的引用。
- 浏览器请求这些文件，Flask 处理这些请求，并返回相应的文件内容。
执行 JavaScript：
- 一旦 HTML、CSS 和 JS 文件都被加载，JavaScript 代码开始执行。
- JavaScript 可以操作 DOM（文档对象模型），动态更新页面内容，或者发起新的 HTTP 请求（如使用 fetch）。
动态内容更新：
- JavaScript 可以定期发送请求到 Flask 应用，获取新数据，并更新页面内容。

这样，即使 app.py 中没有直接引用 HTML、CSS 和 JS 文件，它们也能通过 HTTP 请求和响应协同工作。Flask 应用作为服务器，处理这些请求，并提供必要的资源，使得前端页面能够正确显示和交互。

示例：假设我们有一个简单的网页，包含一个按钮和一个用于显示消息的区域。以下依次是html、css、js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="myButton">Click Me!</button>
    <div id="message"></div>
    <script src="script.js"></script>
</body>
</html>

#message {
    color: blue;
    font-size: 20px;
}

document.getElementById('myButton').addEventListener('click', function() {
    var messageDiv = document.getElementById('message');
    messageDiv.textContent = 'Hello, World!';
    messageDiv.style.color = 'red'; // 也可以在这里改变样式
});

在这个例子中：

HTML定义了一个按钮和一个用于显示消息的<div>。
CSS为<div>设置了蓝色字体和字体大小。
JavaScript侦听按钮的点击事件，并在点击时改变<div>的内容和颜色。

这样，HTML、CSS和JavaScript共同工作，提供了一个具有交互性的动态Web页面。用户可以看到结构（HTML）、样式（CSS）和行为（JavaScript）的结合，从而获得完整的Web体验。运行 Flask 应用时，它会启动一个 Web 服务器。这个服务器可以处理 HTTP 请求，并根据请求的 URL 和方法（如 GET、POST）返回相应的响应。这些响应通常包括 HTML 页面、CSS 样式表和 JavaScript 文件。