使用 Python 和 Flask 设计交互式网页：分步指南

本文将指导你使用 Python 和 Flask 框架创建一个简单的网页。该网页允许用户从下拉菜单中选择章节和部分，并根据选择显示相应的文本内容。

步骤 1：创建 Flask 应用并定义路由

首先，你需要创建一个 Flask 应用并定义处理请求所需的路由和函数。pythonfrom flask import Flask, render_template, requestimport csv

app = Flask(name)

@app.route('/')def index(): chapters = ['Chapter 1', 'Chapter 2'] sections = ['Section 1', 'Section 2'] return render_template('index.html', chapters=chapters, sections=sections)

@app.route('/choose', methods=['POST'])def choose(): chapter = request.form['chapter'] section = request.form['section'] csv_file = f'Text/{chapter}_{section}.csv' with open(csv_file, 'r') as file: reader = csv.reader(file) data = list(reader) return render_template('text.html', data=data)

if name == 'main': app.run()

这段代码定义了两个路由：

• '/': 默认路由，渲染 'index.html' 模板，并传递章节和部分列表用于下拉菜单。- '/choose': 处理表单提交，根据选择的章节和部分读取相应的 CSV 文件，并将数据传递给 'text.html' 模板进行显示。

步骤 2：创建 HTML 模板

接下来，你需要创建 'index.html' 和 'text.html' 两个 HTML 模板。

**index.html:**html <link rel='stylesheet' type='text/css' href='{{ url_for('static', filename='style.css') }}'>

选择章节和部分

**text.html:**html <link rel='stylesheet' type='text/css' href='{{ url_for('static', filename='style.css') }}'> <script src='{{ url_for('static', filename='script.js') }}'>

文本显示

步骤 3：创建 CSS 文件

创建一个名为 'style.css' 的 CSS 文件，用于设置网页样式。cssh1 { text-align: center;}

form { text-align: center;}

#question p { text-align: center;}

.column2, .column3, .column4 { color: transparent;}

#type { display: block; margin: 0 auto;}

button { display: block; margin: 0 auto;}

步骤 4：创建 JavaScript 文件

创建一个名为 'script.js' 的 JavaScript 文件，用于处理按钮点击事件和文本显示。javascriptfunction showAnswer() { var columns = document.getElementsByClassName('column2'); for (var i = 0; i < columns.length; i++) { columns[i].style.color = 'black'; }}

function clearText() { var question = document.getElementById('question'); var type = document.getElementById('type'); question.innerHTML = ''; type.value = '';}

文件结构

确保按照以下结构组织你的文件：

• app.py (你的 Python 脚本)- templates/ - index.html - text.html- static/ - style.css - script.js- Text/ - Chapter 1_Section 1.csv - Chapter 1_Section 2.csv - ...

故障排除：'服务器遇到内部错误'

如果你在运行网页时遇到“服务器遇到内部错误”的信息，请检查以下几点：

1. CSV 文件路径: 确保 CSV 文件位于与 Python 脚本相同的目录下的 'Text' 文件夹中，并且文件名与表单中选择的章节和部分相匹配。2. 文件名: 检查 CSV 文件名是否与代码中使用的文件名完全一致，包括大小写和空格。3. 文件内容: 确保 CSV 文件内容格式正确，并且没有损坏或无法读取的数据。

通过仔细检查这些方面，你应该能够成功运行网页并避免“服务器遇到内部错误”