Hướng dẫn how do you pass variables in flask to html? - làm cách nào để chuyển các biến trong flask sang html?

43

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Máy chủ web hoạt động (bình python) nhưng khi tôi truy cập trang web, nơi giá trị của động vật (chó), nó hiển thị tên động vật có thể thay đổi. (Có nhiều hơn cho mã nhưng đây là phiên bản đơn giản nhất là cùng một khái niệm.

Giả sử tôi có những dòng mã này trong tập lệnh Python của tôi chạy bình python.

animal = dog
return render_template('index.html', value=animal)

Và trong HTML của tôi

I like the animal: {{ value }}

Nhưng thay vì hiển thị 'con chó', nó hiển thị tên biến 'động vật'. Vậy làm thế nào tôi có thể hiển thị biến Python thành HTML? Cảm ơn bạn

hỏi ngày 17 tháng 7 năm 2017 lúc 16:37Jul 17, 2017 at 16:37

Hướng dẫn how do you pass variables in flask to html? - làm cách nào để chuyển các biến trong flask sang html?

ThepgtthepgtThePGT

6211 Huy hiệu vàng6 Huy hiệu bạc9 Huy hiệu đồng1 gold badge6 silver badges9 bronze badges

5

Nó không nên là

I like the animal: {{ value }}

1? Nếu 'con chó' là giá trị bạn muốn thấy được in sau "Tôi thích con vật:", đây là những gì bạn cần làm:

animal = 'dog'
return render_template('index.html', value=animal)

Đã trả lời ngày 17 tháng 7 năm 2017 lúc 18:47Jul 17, 2017 at 18:47

Renato Byrrorenato ByrroRenato Byrro

3.35217 Huy hiệu bạc29 Huy hiệu đồng17 silver badges29 bronze badges

2

Khi bạn phải chuyển một giá trị bằng cách sử dụng một biến, bạn phải xác định nó là một chuỗi như:

I like the animal: {{ value }}

1, sau đó chuyển nó đến mẫu HTML:

I like the animal: {{ value }}

3

Bây giờ, bạn sẽ thấy giá trị vượt qua trong HTML.

Đã trả lời ngày 18 tháng 2 năm 2018 lúc 19:28Feb 18, 2018 at 19:28

Hướng dẫn how do you pass variables in flask to html? - làm cách nào để chuyển các biến trong flask sang html?

1

Chào mừng bạn đến với Phần 3 của Series The Flask 101. & NBSP;

  1. Flask 101: Tạo một ứng dụng web Python cơ bản
  2. Flask 101: Thêm JSON vào ứng dụng web Python của bạn
  3. Flask 101: Sử dụng các mẫu HTML và gửi các biến & nbsp; - Hướng dẫn này
  4. Bình 101: Phục vụ hình ảnh & nbsp;
  5. Flask 101: Phục vụ các tệp CSV

Đối với hướng dẫn này, chúng tôi sẽ tạo ra một trình tạo hình ảnh hài hước + báo giá ngẫu nhiên mà bạn có thể làm mới theo ý muốn để làm sáng lên ngày của bạn. Để xem trước kết quả cuối cùng, hãy xem phần cuối của hướng dẫn này 🙂

Ngoài ra, mã đầy đủ cho dự án này có sẵn trên repo GitHub của tôi.

1 - Thiết lập

Nếu bạn muốn sử dụng môi trường ảo Python 3, ví dụ bạn có thể theo dõi bài đăng này. Nhưng tất cả những gì bạn thực sự cần là cài đặt bình

# Install flask
pip install flask

Tạo các thư mục và tệp sau đây, để chúng trống ngay bây giờ. Chúng tôi lấp đầy chúng sau.

static/
templates/
myapp.py
runapp.sh

Điều đầu tiên trước tiên, bạn sẽ & nbsp; Cần tải xuống một số hình ảnh hài hước vào thư mục tĩnh/. Tôi đã lấy của tôi từ 2 trang web này - BusinessInsider và HonestTopaws - nhưng tất nhiên cảm thấy thoải mái khi sử dụng của riêng bạn. Để đơn giản, bạn chỉ có thể tải xuống những cái trên repo GitHub của tôi ở đây.

2 - Tạo một trang web cơ bản

Bên trong các mẫu/ thư mục, tạo một tệp có tên index.html, với các nội dung bên dưới. Đây là một trang web HTML cơ bản hiển thị tiêu đề H3 và hình ảnh, ngoại trừ 2 điều:templates/ directory, create a file named index.html, with the contents below. This is a basic HTML web page that displays an h3 title and an image, with the exception of 2 things:

  • Nội dung bên trong các thẻ sẽ được lấp đầy với một biến có tên Random_quote, sẽ được gửi qua ứng dụng Flask của bạn

    tags will be filled with a variable called random_quote, to be sent via your Flask app
  • Hình ảnh bên trong & nbsp; img src & nbsp; sẽ là một tệp trong thư mục ‘tĩnh mà bạn đã tạo ở trên và tên tệp hình ảnh sẽ được chỉ định bởi một biến có tên Random_image, cũng sẽ được cung cấp bởi ứng dụng bình của bạn img src is going to be a file under the ‘static’ directory you have created above, and the image filename will be specified by a variable called random_image, that is also going to be provided by your Flask app



{{ random_quote }}

Bây giờ, hãy để xem cách ứng dụng bình của bạn sẽ gửi các biến này đến index.html.

3 - Tạo ứng dụng bình cơ bản của bạn

Cho đến nay, cấu trúc thư mục của bạn sẽ trông như thế này

static/
   img1.jpg
   .. more images ... 
templates/ 
   index.html
myapp.py 
runapp.sh

Bây giờ hãy mở tệp có tên myApp.py mà bạn đã tạo ở trên và thêm nội dung bên dưới. Về cơ bản, chúng tôi đang làm 3 việc ở đó:myapp.py that you have created above, and add the content below. We are basically doing 3 things there:

  1. Defrandom_jaden_quote () Hàm này trả về một trích dẫn ngẫu nhiên từ Jaden Smith. Tôi không đặc biệt là một fan hâm mộ của con trai Will Smith, nhưng trong những năm tuổi thiếu niên, anh ấy đã xuất bản một loạt các trích dẫn và tweet nổi tiếng vì rất ít ý nghĩa. Tôi đã nhận được của tôi từ đây. random_jaden_quote()
    this function returns a random quote from Jaden Smith. I am not particularly a fan of Will Smith’s son, but during his teenage years, he published a series of quotes and tweets that are famous for making very little sense. I got mine from here.
  2. def random_image () cái này chịu trách nhiệm trả về một trong các hình ảnh bên trong thư mục tĩnh/ của bạn một cách ngẫu nhiên
    this one is in charge for returning one of the images inside your static/ directory at random
  3. @app.route (‘/xông) Đây là tuyến chính - và duy nhất - của ứng dụng này. Nó có một hình ảnh ngẫu nhiên, một báo giá ngẫu nhiên và sử dụng hàm Render_template () của Flask Flask để gửi chúng đến trang index.html của bạnapp.route(‘/’)
    this is the main – and only – route of this app. It takes a random image, a random quote, and uses Flask’s render_template() function to send them to your index.html page
from flask import Flask, render_template
import os
import random

app = Flask(__name__)


def random_jaden_quote():
    """
    return a random quote from Jaden Smith
    """
    quotes = [
        "Instagram is not the answer.",
        "You can discover everything you need to know about everything by looking at your hands",
        "Being born was the most influential thing that’s ever happened to me, for myself.",
        "When Life Gives You Big Problems, Just Be Happy You Forgot All Your Little Problems.",
        "The Lack Of Emotion In My Face Doesn't Mean I'm Unhappy.",
        "When The First Animal Went Extinct That Should've Been A Sign.",
        "How Can Mirrors Be Real If Our Eyes Aren't Real."
    ]
    quote = "%s -- Jaden Smith" % random.choice(quotes)
    return quote


def random_image():
    """
    Return a random image from the ones in the static/ directory
    """
    img_dir = "./static"
    img_list = os.listdir(img_dir)
    return random.choice(img_list)


@app.route('/')
def myapp():
    quote = random_jaden_quote()
    image = random_image()
    return render_template('index.html', random_quote=quote, random_image=image)

4 - Chạy ứng dụng của bạn

Trong cùng một thư mục như & nbsp; myApp.py, hãy tạo một tệp có tên & nbsp; runapp.sh & nbsp; với các nội dung sau.myapp.py, create a file named runapp.sh with the following contents.

export FLASK_APP=myapp
export FLASK_ENV=development
flask run

Đóng tệp, sau đó trong dòng lệnh, chạy nó với

# Execute this in the command line inside the same directory 
bash runapp.sh

Bạn sẽ thấy đầu ra sau

I like the animal: {{ value }}

0

5 - Kiểm tra ứng dụng của bạn

Hướng dẫn how do you pass variables in flask to html? - làm cách nào để chuyển các biến trong flask sang html?

Làm cách nào để gửi một biến từ bình đến HTML?

Từ bình Nhập bình, Render_Template, Yêu cầu ..
@app.route('/').
Sinh viên def ():.
trả về render_template ('student.html').
@app.Route ('/result', setree = ['post', 'get']).
Kết quả def ():.
Nếu request.method == 'Post':.
return render_template ("result.html", result = result).

Làm cách nào để nhận dữ liệu HTML trong bình?

Chúng tôi nhận được đầu vào HTML từ biểu mẫu bằng cách sử dụng yêu cầu ...
lời yêu cầu.hình thức.Nhận ('Kubernetes') lấy đầu vào làm tham số của nó.Trong trường hợp này, đầu vào là Kubernetes và được lưu trữ trong biến K38 ..
lời yêu cầu.hình thức.Nhận ('playbook') lấy đầu vào làm tham số của nó ..

Flask có hỗ trợ HTML không?

Tài liệu bình và các ứng dụng ví dụ đang sử dụng HTML5.Bạn có thể nhận thấy rằng trong nhiều tình huống, khi các thẻ cuối là tùy chọn, chúng không được sử dụng, do đó HTML sạch hơn và tải nhanh hơn.. You may notice that in many situations, when end tags are optional they are not used, so that the HTML is cleaner and faster to load.