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

本教程将指导您使用 Python 和 Flask 创建一个简单的交互式网页。该网页允许用户选择章节和部分、显示文本并提供基本功能，如显示答案和清除文本。

第 1 步：创建一个 Flask 应用并定义必要的路由和函数来处理请求

from flask import Flask, render_template, request
import csv
import traceback

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'

    try:
        with open(csv_file, 'r') as file:
            reader = csv.reader(file)
            data = list(reader)
        return render_template('text.html', data=data)
    except FileNotFoundError:
        return '找不到所选章节和部分的文件。', 404

@app.errorhandler(500)
def internal_server_error(e):
    traceback.print_exc()
    return '内部服务器错误', 500

if __name__ == '__main__':
    app.run(debug=True)

第 2 步：为索引页和文本页创建 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 = '';
}

确保创建必要的文件夹结构并将 CSV 文件放在 'Text' 文件夹中。

这是一个帮助您入门的基本示例。您可以根据需要进一步增强设计和功能。

注意：

更新后的 Flask 应用代码包含错误处理，以提供更多信息性的错误消息。
确保 CSV 文件存在于正确的目录中，并且格式正确。
使用 app.run(debug=True) 在调试模式下运行应用，以便在出现错误时获取更多信息。

这应该可以解决您遇到的错误，并允许您运行该页面。如果您遇到任何进一步的问题，请告诉我！