英文:
How to display details to Flask-Python
问题
Here's the translation of the provided code:
我有一个名为**(plant.py)**的Python文件,它从一个**API**中获取关于特定植物的信息。
import requests
import pprint
printer = pprint.PrettyPrinter()
plant_name = "peace lily".strip().lower()
url = f"https://house-plants.p.rapidapi.com/common/{plant_name}"
headers = {
"X-RapidAPI-Key": "API-KEY",
"X-RapidAPI-Host": "house-plants.p.rapidapi.com"
}
response = requests.get(url, headers=headers).json()
# print(printer.pprint(response))
latin_name = response[0]["latin"]
climate = response[0]["climate"]
tempmax = response[0]["tempmax"]
watering = response[0]["watering"]
diseases = response[0]["diseases"]
use = response[0]["use"][0]
现在,以下是我的主要Flask文件,名为**(app.py)**
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/result")
def result():
return render_template("result.html", Plant_name=request.args.get("Plant_name", "World"))
为了解释这个文件的目的,我创建了**index.html**,它提示用户输入植物的名称,而**app.py**将路由更改为**result.html**,并在该页面中显示来自API的**植物信息**。
以下是**index.html**的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Taviraj&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
rel="stylesheet"
/>
<title>Gist of it</title>
<style>
.form-block {
margin: auto;
display: block;
padding: 10px;
font-size: 18px;
width: 250px;
border-radius: 5px;
border-color: #00203f;
border: none;
text-align: center;
}
input::placeholder {
color: #00203f;
font-family: "Taviraj", serif;
text-align: center;
opacity: 0.7;
}
.btn {
display: block;
margin: auto;
border: none;
padding: 12px;
width: 100px;
font-size: 15px;
font-weight: bold;
font-family: "Rubik", sans-serif;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #33b249;
border-radius: 30px;
cursor: pointer;
transition: transform 0.3s ease;
}
.btn:hover {
transform: translate(0px, -6px);
}
#TitleWords {
font-family: "Taviraj", serif;
text-align: center;
font-size: 55px;
color: #00203f;
}
</style>
</head>
<body bgcolor="#ADEFD1">
<div id="TitleWords">
<p>Plantast</p>
</div>
<!-- Form -->
<form action="/result" method="get">
<input
class="form-block"
type="text"
autocomplete="off"
placeholder="Plant Name"
name="Plant_name"
/>
<button type="submit" class="btn">Submit</button>
</form>
</body>
</html>
[**index.html**的web视图](https://i.stack.imgur.com/I5QIr.png)
**result.html**的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Taviraj&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
rel="stylesheet"
/>
<title>Plant result</title>
<style>
#TitleWords {
font-family: "Taviraj", serif;
text-align: center;
font-size: 55px;
color: #00203f;
}
#Plant_name {
font-family: "Taviraj", serif;
text-align: left;
position: relative;
left: 30px;
color: #f8c301;
font-size: 22px;
}
</style>
</head>
<body bgcolor="#ADEFD1">
<div id="TitleWords">
<p>Plantast</p>
</div>
<h2 id="Plant_name">{{Plant_name}}</h2>
</body>
</html>
[**result.html**的web视图](https://i.stack.imgur.com/Il4PY.png)
我打算在**result.html**中显示来自API的**植物信息**,但我在这方面卡住了。如果您对如何完成此任务有任何想法,我毫无头绪,苦苦思索。
<details>
<summary>英文:</summary>
I have a python file **(plant.py)** which gives me information about specific plants from an **API**.
import requests
import pprint
printer = pprint.PrettyPrinter()
plant_name = "peace lily".strip().lower()
url = f"https://house-plants.p.rapidapi.com/common/{plant_name}"
headers = {
"X-RapidAPI-Key": "API-KEY",
"X-RapidAPI-Host": "house-plants.p.rapidapi.com"
}
response = requests.get(url, headers=headers).json()
# print(printer.pprint(response))
latin_name = response[0]["latin"]
climate = response[0]["climate"]
tempmax = response[0]["tempmax"]
watering = response[0]["watering"]
diseases = response[0]["diseases"]
use = response[0]["use"][0]
Now given below is my main flask file called **app.py**
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/result")
def result():
return render_template("result.html", Plant_name=request.args.get("Plant_name", "World"))
To give the purpose of this file, I have made the **index.html** which prompts the user to enter a plant's name, and the **app.py** changes the route to **result.html** and will display the **info about that plant(from the API)** in that page.
Given below is the code of **index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Taviraj&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
rel="stylesheet"
/>
<title>Gist of it</title>
<style>
.form-block {
margin: auto;
display: block;
padding: 10px;
font-size: 18px;
width: 250px;
border-radius: 5px;
border-color: #00203f;
border: none;
text-align: center;
}
input::placeholder {
color: #00203f;
font-family: "Taviraj", serif;
text-align: center;
opacity: 0.7;
}
.btn {
display: block;
margin: auto;
border: none;
padding: 12px;
width: 100px;
font-size: 15px;
font-weight: bold;
font-family: "Rubik", sans-serif;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #33b249;
border-radius: 30px;
cursor: pointer;
transition: transform 0.3s ease;
}
.btn:hover {
transform: translate(0px, -6px);
}
#TitleWords {
font-family: "Taviraj", serif;
text-align: center;
font-size: 55px;
color: #00203f;
}
</style>
</head>
<body bgcolor="#ADEFD1">
<div id="TitleWords">
<p>Plantast</p>
</div>
<!-- Form -->
<form action="/result" method="get">
<input
class="form-block"
type="text"
autocomplete="off"
placeholder="Plant Name"
name="Plant_name"
/>
&nbsp;
<button type="submit" class="btn">Submit</button>
</form>
</body>
</html>
[web view of **index.html**](https://i.stack.imgur.com/I5QIr.png)
Code of **result.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Taviraj&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
rel="stylesheet"
/>
<title>Plant result</title>
<style>
#TitleWords {
font-family: "Taviraj", serif;
text-align: center;
font-size: 55px;
color: #00203f;
}
#Plant_name {
font-family: "Taviraj", serif;
text-align: left;
position: relative;
left: 30px;
color: #f8c301;
font-size: 22px;
}
</style>
</head>
<body bgcolor="#ADEFD1">
<div id="TitleWords">
<p>Plantast</p>
</div>
<h2 id="Plant_name">{{Plant_name}}</h2>
</body>
</html>
[web view of **result.html**](https://i.stack.imgur.com/Il4PY.png)
I aim to display the details of the **plant from the API** in the **result.html** and am stuck in this.
If you have any ideas on how to get this done I have no idea and broke my head on this.
</details>
# 答案1
**得分**: 0
你可以尝试简单地将*plant.py*导入Python Flask应用程序,然后将结果传递到HTML。
一种方法是在*plant.py*中创建一个返回搜索结果的函数:
```python
def result():
dict = {
latin_name: response[0]["latin"]
climate: response[0]["climate"]
tempmax: response[0]["tempmax"]
watering: response[0]["watering"]
diseases: response[0]["diseases"]
use: response[0]["use"][0]
}
return dict
然后将plant.py导入Flask应用程序,并将返回的值作为变量添加到渲染模板中:
@app.route("/result")
def result():
plant_dict = plant.result()
return render_template("result.html", result=plant_dict, Plant_name=request.args.get("Plant_name", "World"))
然后你可以在result.html中使用这个字典来显示信息。
英文:
You could try to simply import the plant.py to the python flask app then, pass the results to the html.
One way is to create a function in the plant.py that returns the result of the search:
def result():
dict = {
latin_name: response[0]["latin"]
climate: response[0]["climate"]
tempmax: response[0]["tempmax"]
watering: response[0]["watering"]
diseases: response[0]["diseases"]
use: response[0]["use"][0]
}
return dict
Then import the plant.py to the flask app, and add the returned value as a variable in the render template
@app.route("/result")
def result():
plant_dict = plant.result()
return render_template("result.html", result=plant_dict Plant_name=request.args.get("Plant_name", "World"))
You can then use the dict in the result.html to display the information.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论