在前端使用form表单添加搜索功能,搜索野生动物的名称,后端通过flask的template连接到MySQL数据库,获得野生动物对应的省份名称,使用pyecharts添加地图模块,将获得的省份数据高亮显示在地图上,并生成HTML页面,将HTML的链接放在前端的页面上,代码怎么写
时间: 2023-11-26 18:05:39 浏览: 89
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>野生动物搜索</title>
</head>
<body>
<h1>野生动物搜索</h1>
<form action="/" method="POST">
<label for="animal_name">动物名称:</label>
<input type="text" id="animal_name" name="animal_name">
<button type="submit">搜索</button>
</form>
{% if data %}
<h2>{{ data.province }}</h2>
<iframe src="{{ data.map_url }}" width="800" height="600"></iframe>
{% endif %}
</body>
</html>
```
在这个页面中,我们添加了一个表单,用户可以输入要搜索的野生动物的名称。提交表单时,数据将被发送到后端的 Flask 应用程序。如果搜索成功,我们将在页面上显示结果。
后端代码:
```python
from flask import Flask, render_template, request
from flask_mysqldb import MySQL
import json
from pyecharts.charts import Map
from pyecharts import options as opts
app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'password'
app.config['MYSQL_DB'] = 'animals_db'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
animal_name = request.form['animal_name']
cur = mysql.connection.cursor()
cur.execute(f"SELECT province FROM animals WHERE name='{animal_name}'")
result = cur.fetchone()
if result:
province = result['province']
map_url = generate_map(province)
data = {'province': province, 'map_url': map_url}
return render_template('index.html', data=data)
else:
return render_template('index.html', data=None)
return render_template('index.html', data=None)
def generate_map(province):
with open('province_code.json', 'r') as f:
province_code = json.load(f)
code = province_code[province]
m = (
Map()
.add("野生动物分布", [(province, 1)], code)
.set_global_opts(
title_opts=opts.TitleOpts(title="野生动物分布图"),
visualmap_opts=opts.VisualMapOpts(is_piecewise=True),
)
)
map_url = 'templates/map.html'
m.render(map_url)
return map_url
if __name__ == '__main__':
app.run(debug=True)
```
在这个代码中,我们首先设置了 Flask 应用程序的 MySQL 配置信息。然后,我们定义了一个 `index` 视图函数,它处理用户提交的表单数据。在这个函数中,我们从表单中获取动物的名称,然后查询 MySQL 数据库以获取该动物的省份信息。如果查询成功,我们使用 `pyecharts` 库生成一个地图,并将其保存到 HTML 文件中。最后,我们将地图的 URL 和省份信息一起返回到 HTML 页面中。
`generate_map` 函数使用一个名为 `province_code.json` 的 JSON 文件,其中包含每个省份的编码。这个文件的内容如下:
```json
{
"北京市": "110000",
"天津市": "120000",
"河北省": "130000",
"山西省": "140000",
"内蒙古自治区": "150000",
"辽宁省": "210000",
"吉林省": "220000",
"黑龙江省": "230000",
"上海市": "310000",
"江苏省": "320000",
"浙江省": "330000",
"安徽省": "340000",
"福建省": "350000",
"江西省": "360000",
"山东省": "370000",
"河南省": "410000",
"湖北省": "420000",
"湖南省": "430000",
"广东省": "440000",
"广西壮族自治区": "450000",
"海南省": "460000",
"重庆市": "500000",
"四川省": "510000",
"贵州省": "520000",
"云南省": "530000",
"西藏自治区": "540000",
"陕西省": "610000",
"甘肃省": "620000",
"青海省": "630000",
"宁夏回族自治区": "640000",
"新疆维吾尔自治区": "650000",
"台湾省": "710000",
"香港特别行政区": "810000",
"澳门特别行政区": "820000"
}
```
最后,我们可以使用 `flask run` 命令启动应用程序,并在浏览器中访问 http://localhost:5000/ 查看搜索页面。
阅读全文
相关推荐


















