使用 Python 和 Flask 设计网页的逐步指南

本指南提供了使用 Python 和 Flask 创建网页的分步说明。此网页旨在允许用户从下拉菜单中选择章节和部分，并显示相应的文本内容。

第 1 步：创建一个 Flask 应用并定义路由

首先，您需要创建一个 Flask 应用并设置处理用户请求所需的路由和函数。以下 Python 代码演示了如何执行此操作：

from flask import Flask, render_template, request
import 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()

此代码定义了两个路由：

'/'：此路由呈现一个包含章节和部分下拉菜单的网页。
'/choose'：当用户从下拉菜单中选择一个章节和部分时，此路由处理表单提交并呈现一个包含相应文本的网页。

第 2 步：创建 HTML 模板

接下来，您需要为索引页和文本页创建 HTML 模板。

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>章节和部分选择</title>
    <link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>章节和部分选择</h1>
    <form action='/choose' method='post'>
        <label for='chapter'>选择章节：</label>
        <select id='chapter' name='chapter'>
            {% for chapter in chapters %}
            <option value="{{ chapter }}">{{ chapter }}</option>
            {% endfor %}
        </select>
        <br><br>
        <label for='section'>选择部分：</label>
        <select id='section' name='section'>
            {% for section in sections %}
            <option value="{{ section }}">{{ section }}</option>
            {% endfor %}
        </select>
        <br><br>
        <input type='submit' value='选择'>
    </form>
</body>
</html>

text.html:

<!DOCTYPE html>
<html>
<head>
    <title>文本显示</title>
    <link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='style.css') }}">
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<body>
    <h1>文本显示</h1>
    <div id='question'>
        {% for row in data %}
        <p>
            <span class='column1'>{{ row[0] }}</span>
            <span class='column2'>{{ row[1] }}</span>
            <span class='column3'>{{ row[2] }}</span>
            <span class='column4'>{{ row[3] }}</span>
        </p>
        {% endfor %}
    </div>
    <br>
    <input type='text' id='type' placeholder='键入'>
    <br><br>
    <button onclick='showAnswer()'>答案</button>
    <button onclick='clearText()'>清除</button>
</body>
</html>

第 3 步：创建 CSS 文件以设置网页样式

创建一个名为 style.css 的文件，并在其中添加以下内容：

h1 {
    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 的文件，并在其中添加以下内容：

function 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 = '';
}

第 5 步：运行 Flask 应用

将 CSV 文件保存在名为 'Text' 的文件夹中，并确保 CSV 文件名与您的代码中使用的章节和部分名称相匹配。运行 Flask 应用，打开您的网络浏览器，然后导航到 http://127.0.0.1:5000/ 以查看该网页。

故障排除

如果您在运行代码时遇到 'The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.' 错误，请执行以下操作：

**检查 CSV 文件路径：**确保 CSV 文件位于正确的文件夹中，并且代码中的文件路径与实际文件路径相匹配。
**安装依赖项：**使用以下命令安装 Flask：
```
pip install flask
```
**检查 Flask 版本：**使用以下命令验证您是否安装了正确版本的 Flask：
```
pip show flask
```
如果版本不正确，请使用以下命令升级 Flask：
```
pip install --upgrade flask
```
**验证端口号：**确保 Flask 应用在正确的端口上运行。默认情况下，Flask 在端口 5000 上运行。您可以通过修改代码中的 app.run() 行来指定其他端口：

if name == 'main': app.run(port=8000) # 如果需要，请更改端口号


如果问题仍然存在，请提供有关错误消息或任何其他错误日志的更多详细信息，以便帮助识别问题。