如何在Flask-Python中显示详细信息

huangapple go评论69阅读模式
英文:

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&amp;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&amp;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>

[**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&amp;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&amp;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 = &quot;peace lily&quot;.strip().lower()
    
    url = f&quot;https://house-plants.p.rapidapi.com/common/{plant_name}&quot;
    
    headers = {
        &quot;X-RapidAPI-Key&quot;: &quot;API-KEY&quot;,
        &quot;X-RapidAPI-Host&quot;: &quot;house-plants.p.rapidapi.com&quot;
    }
    
    response = requests.get(url, headers=headers).json()
    
    # print(printer.pprint(response))
    
    latin_name = response[0][&quot;latin&quot;]
    climate = response[0][&quot;climate&quot;]
    tempmax = response[0][&quot;tempmax&quot;]
    watering = response[0][&quot;watering&quot;]
    diseases = response[0][&quot;diseases&quot;]
    use = response[0][&quot;use&quot;][0]
   

Now given below is my main flask file called **app.py**

    from flask import Flask, render_template, request
    
    app = Flask(__name__)
    
    
    @app.route(&quot;/&quot;)
    def index():
        return render_template(&quot;index.html&quot;)
    
    
    @app.route(&quot;/result&quot;)
    def result():
        return render_template(&quot;result.html&quot;, Plant_name=request.args.get(&quot;Plant_name&quot;, &quot;World&quot;))


To give the purpose of this file, I have made the **index.html** which prompts the user to enter a plant&#39;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**

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot; /&gt;
        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
        &lt;link
          href=&quot;https://fonts.googleapis.com/css2?family=Taviraj&amp;display=swap&quot;
          rel=&quot;stylesheet&quot;
        /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
        &lt;link
          href=&quot;https://fonts.googleapis.com/css2?family=Rubik&amp;display=swap&quot;
          rel=&quot;stylesheet&quot;
        /&gt;
        &lt;title&gt;Gist of it&lt;/title&gt;
    
        &lt;style&gt;
          .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: &quot;Taviraj&quot;, 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: &quot;Rubik&quot;, 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: &quot;Taviraj&quot;, serif;
            text-align: center;
            font-size: 55px;
            color: #00203f;
          }
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body bgcolor=&quot;#ADEFD1&quot;&gt;
        &lt;div id=&quot;TitleWords&quot;&gt;
          &lt;p&gt;Plantast&lt;/p&gt;
        &lt;/div&gt;
    
        &lt;!-- Form --&gt;
        &lt;form action=&quot;/result&quot; method=&quot;get&quot;&gt;
          &lt;input
            class=&quot;form-block&quot;
            type=&quot;text&quot;
            autocomplete=&quot;off&quot;
            placeholder=&quot;Plant Name&quot;
            name=&quot;Plant_name&quot;
          /&gt;
          &amp;nbsp;
          &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/body&gt;
    &lt;/html&gt;

[web view of **index.html**](https://i.stack.imgur.com/I5QIr.png)

Code of **result.html**

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot; /&gt;
        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
        &lt;link
          href=&quot;https://fonts.googleapis.com/css2?family=Taviraj&amp;display=swap&quot;
          rel=&quot;stylesheet&quot;
        /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
        &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
        &lt;link
          href=&quot;https://fonts.googleapis.com/css2?family=Rubik&amp;display=swap&quot;
          rel=&quot;stylesheet&quot;
        /&gt;
        &lt;title&gt;Plant result&lt;/title&gt;
    
        &lt;style&gt;
          #TitleWords {
            font-family: &quot;Taviraj&quot;, serif;
            text-align: center;
            font-size: 55px;
            color: #00203f;
          }
    
          #Plant_name {
            font-family: &quot;Taviraj&quot;, serif;
            text-align: left;
            position: relative;
            left: 30px;
            color: #f8c301;
            font-size: 22px;
          }
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body bgcolor=&quot;#ADEFD1&quot;&gt;
        &lt;div id=&quot;TitleWords&quot;&gt;
          &lt;p&gt;Plantast&lt;/p&gt;
        &lt;/div&gt;
    
        &lt;h2 id=&quot;Plant_name&quot;&gt;{{Plant_name}}&lt;/h2&gt;
      &lt;/body&gt;
    &lt;/html&gt;


[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][&quot;latin&quot;]
climate: response[0][&quot;climate&quot;]
tempmax: response[0][&quot;tempmax&quot;]
watering: response[0][&quot;watering&quot;]
diseases: response[0][&quot;diseases&quot;]
use: response[0][&quot;use&quot;][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(&quot;/result&quot;)
def result():
plant_dict = plant.result()
return render_template(&quot;result.html&quot;, result=plant_dict Plant_name=request.args.get(&quot;Plant_name&quot;, &quot;World&quot;))

You can then use the dict in the result.html to display the information.

huangapple
  • 本文由 发表于 2023年6月26日 03:40:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76552148.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定