1.编程实现:利用flask进行Web开发,Web网页呈现以下淡水鱼数据。 已知淡水鱼数据 data = [ [ f1 , 鲤鱼 , 杂食性 ,300], [ f2 , 草鱼 , 食草性 ,240], [ f3 , 鲫鱼 , 温水性 ,500], [ f4 ,
时间: 2024-01-18 08:03:48 浏览: 292
鲢鱼 , 杂食性 ,450], [ f5 , 鳙鱼 , 食肉性 ,600], [ f6 , 鲤鲫 , 杂食性 ,350] ],其中每个小列表包含淡水鱼编号、鱼种、食性和体重四个字段,要求实现以下功能:
1)在网页中展示所有淡水鱼的数据,每个小列表按照编号、鱼种、食性、体重的顺序排列;
2)添加一个搜索框,用户可以根据鱼种或食性进行搜索,搜索结果按照体重从大到小的顺序排列;
3)添加一个添加数据的功能,用户可以在网页中添加新的淡水鱼数据,添加成功后自动刷新页面。
以下是实现代码:
```python
from flask import Flask, render_template, request
app = Flask(__name__)
data = [
['f1', '鲤鱼', '杂食性', 300],
['f2', '草鱼', '食草性', 240],
['f3', '鲫鱼', '温水性', 500],
['f4', '鲢鱼', '杂食性', 450],
['f5', '鳙鱼', '食肉性', 600],
['f6', '鲤鲫', '杂食性', 350]
]
@app.route('/')
def index():
return render_template('index.html', data=data)
@app.route('/search', methods=['POST'])
def search():
keyword = request.form['keyword']
result = []
for d in data:
if keyword in d[1] or keyword in d[2]:
result.append(d)
result = sorted(result, key=lambda x: x[3], reverse=True)
return render_template('search.html', result=result)
@app.route('/add', methods=['POST'])
def add():
id = request.form['id']
species = request.form['species']
diet = request.form['diet']
weight = request.form['weight']
new_data = [id, species, diet, int(weight)]
data.append(new_data)
return render_template('index.html', data=data)
if __name__ == '__main__':
app.run(debug=True)
```
在templates文件夹中创建index.html和search.html两个模板文件,代码如下:
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡水鱼数据</title>
</head>
<body>
<h1>淡水鱼数据</h1>
<table border="1">
<tr>
<th>编号</th>
<th>鱼种</th>
<th>食性</th>
<th>体重</th>
</tr>
{% for d in data %}
<tr>
<td>{{ d[0] }}</td>
<td>{{ d[1] }}</td>
<td>{{ d[2] }}</td>
<td>{{ d[3] }}</td>
</tr>
{% endfor %}
</table>
<br>
<form action="/search" method="post">
<label for="keyword">搜索:</label>
<input type="text" name="keyword" id="keyword">
<input type="submit" value="搜索">
</form>
<br>
<form action="/add" method="post">
<label for="id">编号:</label>
<input type="text" name="id" id="id">
<label for="species">鱼种:</label>
<input type="text" name="species" id="species">
<label for="diet">食性:</label>
<input type="text" name="diet" id="diet">
<label for="weight">体重:</label>
<input type="text" name="weight" id="weight">
<input type="submit" value="添加">
</form>
</body>
</html>
```
search.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索结果</title>
</head>
<body>
<h1>搜索结果</h1>
<table border="1">
<tr>
<th>编号</th>
<th>鱼种</th>
<th>食性</th>
<th>体重</th>
</tr>
{% for r in result %}
<tr>
<td>{{ r[0] }}</td>
<td>{{ r[1] }}</td>
<td>{{ r[2] }}</td>
<td>{{ r[3] }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
```
在浏览器中输入http://127.0.0.1:5000/即可访问。
阅读全文