帮我写:1.前端页面:弹窗获取ID,当用户输入ID确定后跳转到第二个页面;页面二:数据展示,2.后端使用python flask完成
时间: 2024-09-14 09:10:00 浏览: 27
好的,我将为你提供一个简单的前端页面与后端使用Python Flask的示例。
首先,创建一个前端页面(假设为`index.html`),在这个页面中有一个弹窗用于获取用户输入的ID:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取ID并跳转</title>
<script>
function getIdAndRedirect() {
var id = prompt("请输入ID:");
if (id !== null && id.trim() !== "") {
window.location.href = 'page2.html?uid=' + encodeURIComponent(id);
}
}
</script>
</head>
<body onload="getIdAndRedirect();">
<!-- 页面加载时会自动执行getIdAndRedirect函数 -->
</body>
</html>
```
接着,创建第二个页面(假设为`page2.html`),用于展示数据:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据展示</title>
</head>
<body>
<h1>数据展示页面</h1>
<!-- 后端将会通过某种方式在这里展示数据 -->
<div id="data-container"></div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
// 示例:使用jQuery来获取数据(实际应由后端提供)
$(document).ready(function() {
$.get('/get_data', {uid: location.search.match(/uid=(.+?)(?=&|$)/)[1]}, function(data) {
$('#data-container').html(data);
});
});
</script>
</body>
</html>
```
最后,实现后端逻辑使用Python Flask:
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
# 假设这是一个简单的ID对应的数据字典
data_store = {
'1': {'name': 'Alice', 'age': 30},
'2': {'name': 'Bob', 'age': 25},
# 更多数据...
}
@app.route('/')
def index():
return '<script>location.href="index.html"</script>' # 重定向到前端页面
@app.route('/get_data')
def get_data():
uid = request.args.get('uid', '')
user_data = data_store.get(uid)
if user_data:
return jsonify(user_data)
else:
return jsonify({'error': 'No data found for the given ID'}), 404
if __name__ == '__main__':
app.run(debug=True)
```
在这个Flask应用中,当用户访问根路径时,会被重定向到`index.html`前端页面。用户输入ID后,前端页面会通过JavaScript将用户重定向到`page2.html`,并且带上查询参数`uid`。然后`page2.html`中的JavaScript会向后端的`/get_data`端点发送GET请求,带上`uid`参数。后端接收到请求后,会从预设的数据存储中检索数据,并以JSON格式返回给前端页面展示。