使用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(): try: 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) except Exception as e: return f'An error occurred: {str(e)}'

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

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

• /: 默认路由，渲染一个包含章节和段落选择的下拉菜单的页面。- /choose: 处理用户选择并加载相应文本内容的路由。

2. 创建HTML模板

接下来，我们需要创建两个HTML模板：index.html 和 text.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文件

创建一个CSS文件（style.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文件

创建一个JavaScript文件（script.js）来处理按钮点击和文本显示。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 = '';}

5. 运行应用程序

将CSV文件放置在名为“Text”的文件夹中，并确保文件名与代码中的引用一致。然后，运行Flask应用程序。

flask run

现在，您应该可以在浏览器中访问 http://127.0.0.1:5000/ 并使用该网页了。

错误处理

代码中已包含错误处理机制，以便在出现问题时显示更具体的错误消息。 确保CSV文件存在于正确的位置，并且文件名与代码中的引用相匹配。

This is a basic example to get you started. You can further enhance the design and functionality based on your requirements.