Hướng dẫn how do i link an html file to a flask? - làm cách nào để liên kết tệp html với bình?

Question

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

0 tạo URL cho các tuyến đường được xác định trong ứng dụng của bạn. Không có (hoặc có lẽ không nên là bất kỳ) các tệp HTML thô được phục vụ, đặc biệt là trong thư mục mẫu. Mỗi mẫu nên là một cái gì đó được kết xuất bởi Jinja. Mỗi vị trí bạn muốn hiển thị hoặc đăng một biểu mẫu cần được xử lý và tạo bởi một tuyến đường trên ứng dụng của bạn.

Nội dung chính Show

Bắt đầu với bình Python
Bây giờ sao chép dán cái này vào bạn api.py
Sao chép cái này vào nhà.html
Chạy tệp API

Trong trường hợp này, bạn có thể muốn có một tuyến đường để cả biểu mẫu trên get và xử lý biểu mẫu gửi trên bài.

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

1:

from flask import Flask, request, url_for, redirect, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/cool_form', methods=['GET', 'POST'])
def cool_form():
    if request.method == 'POST':
        # do stuff when the form is submitted

        # redirect to end the POST handling
        # the redirect can be to the same route or somewhere else
        return redirect(url_for('index'))

    # show the form, it wasn't submitted
    return render_template('cool_form.html')

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

2:

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

3:

<!doctype html>
<html>
<body>
    <form method="post">
        <button type="submit">Do it!</button>
    </form>
</html>

Tôi không biết những hình thức và tuyến đường của bạn thực sự làm gì, vì vậy đây chỉ là một ví dụ.

Nếu bạn cần liên kết các tệp tĩnh, hãy đặt chúng vào thư mục

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

4, sau đó sử dụng:

url_for('static', filename='a_picture.png')

Trong hướng dẫn cuối cùng, chúng ta biết cách chạy một ứng dụng bình đơn giản. Nếu bạn thiên đường đọc những thứ đó, xin vui lòng trải qua điều đó và sau đó quay lại. Hãy để Lôi nhảy một chút về phía trước. Điều gì sẽ xảy ra nếu chúng ta muốn nó thực sự trông giống như một trang web, và không chỉ trả lại các chuỗi ngẫu nhiên. Tôi cho rằng bạn có kiến thức cơ bản trong HTML. HyperText Markup Ngôn ngữ hoặc HTML là ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu được thiết kế để hiển thị trong trình duyệt web. Vì vậy, hãy để Lừa học cách tạo mẫu HTML trong ứng dụng Flask.

Đầu tiên, tạo một thư mục mới trong thư mục dự án có tên là Mẫu. Đặt tên này là quan trọng. Bây giờ hãy tạo một tệp mới trong thư mục mẫu đặt tên chỉ mục.html. Sau đó chèn mã dưới đây trong tệp.templates. This naming is important. Now create a new file in the templates folder naming “index.html”. Then insert the below code in the file.

<html>
<head>
<title>Flask Tutorial</title>
</head>
<body>
<h2>This is the Index page</h2>
</body>
</html>

Bây giờ, hãy tạo một tệp khác có tên App.py trong thư mục dự án. Sau đó viết các mã này vào tệp Python.app.py in the project directory. Then write these codes in to the python file.

from flask import Flask, render_template
app = Flask(__name__)@app.route('/')
def home():
   return render_template('index.html')
if __name__ == '__main__':
   app.run()

Trong tệp này, chúng tôi thực sự đang nhập chức năng Render_Template được cung cấp bởi bình và sau đó hiển thị mẫu HTML của chúng tôi, index.html trong tuyến đường gia đình. Bây giờ tất cả đã được thiết lập để thực thi. Nhập
<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>
5 trong thiết bị đầu cuối để chạy ứng dụng.render_template function provided by the Flask and then rendering our HTML template, index.html in the home route. Now it is all set to execute. Type
<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>
5 in the terminal to run the app.

Nếu mọi thứ diễn ra tốt đẹp, nó sẽ nói

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

6now chúng ta có thể dán liên kết này vào trình duyệt và xem nội dung HTML được hiển thị. Đầu ra sẽ như sau.

Bây giờ bạn đã học được cách hiển thị một trang HTML trong bình, bạn có thể hiển thị bất kỳ trang web tĩnh nào bạn muốn trong ứng dụng Flask. Một câu hỏi mà bạn có thể có là làm thế nào để sử dụng CSS, JS và hình ảnh trong các trang web. Hãy theo dõi và cho đến lúc đó tiếp tục định tuyến 😜

Bắt đầu với bình Python

Làm việc với Flask (một khung web vi mô được viết bằng Python) là một trong những điều mà tôi thực sự muốn thử nhưng không bao giờ có thể

Nhưng cuối cùng !! Tôi đã làm điều đó. Và tôi thực sự rất hào hứng khi chia sẻ nó với tất cả các bạn, nó siêu dễ dàng và siêu tuyệt vời.

Tôi sẽ giúp bạn những điều cơ bản về việc tạo một trang web bằng HTML và để thêm một tuyến đường qua bình.

Đầu tiên, cài đặt gói bình:

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

7

Tạo một thư mục mới và bên trong thư mục dự án của bạn, tạo một thư mục tĩnh và thư mục mẫu.

Thư mục tĩnh sẽ có

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

8 của bạn trong khi các mẫu sẽ giữ các tệp

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

9 của bạn. Điều này rất quan trọng ban đầu khi tôi thử làm việc trên bình trong khi không có manh mối về cây thư mục, tôi không thể chạy tệp khi tôi phát hiện ra rằng Flask tìm kiếm các mẫu để xem các tệp HTML nằm. Và api.py là tệp chính mà bạn sẽ phải chạy để làm cho tệp HTML của bạn hoạt động!static folder will have your

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

8 while templates will hold your

<!doctype html>
<html>
<body>
    <p><a href="{{ url_for('cool_form') }}">Check out this cool form!</a></p>
</body>
</html>

9 files. This is important as initially when I tried working on Flask while having no clue about the directory tree, I was not able to run the file that's when I found out that flask looks for templates for views where the HTML files lie. And api.py is the main file which you will have to run to make your HTML file work!

Vì vậy, cây thư mục của bạn sẽ trông giống như:

Hình: Cây dự án

gây nhầm lẫn? Không phải lo lắng chỉ đi với dòng chảy hay sao chép kho lưu trữ từ GitHub: https://github.com/pemagrg1/flask-for-beginners

Vì vậy, tệp api.py sẽ chứa tất cả các tuyến sẽ liên kết mã HTML và mã Python của bạn.

Hãy để tạo ra một!

tạo tệp HTML và đặt tên nó là Home.htmlhome.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Flask App</title>
</head>
<body>
    <p>
        Hello!! Testing if it works on web! :p
    </p>
</body>
</html>

Tạo một trang HTML đơn giản để hiển thị văn bản.

Và trong API.py của bạnapi.py

from flask import Flask, render_templateapp = Flask(__name__)
@app.route('/')
def home():
    return render_template('home.html')
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

Tạo một tuyến đường và/và trở về nhà.html từ chức năng. Sau đó, chạy tệp API.py của bạn và nhấp vào liên kết mà nó cung cấp sau khi chạy. Nếu nó không hiển thị cho bạn bất kỳ liên kết nào, hãy mở trình duyệt của bạn và trên hộp URL, hãy nhập http://0.0.0.0:5000/. api.py file and click on the link that it provides after running. If it doesnt show you any link, open your browser and on the url box, type http://0.0.0.0:5000/.

Hình: Đầu ra sau khi chạy API

Easy?

Bây giờ, hãy để Lừa lấy đầu vào từ web đến bình và in lại!

Bây giờ sao chép dán cái này vào bạn api.py

from flask import Flask, request, render_template,jsonifyapp = Flask(__name__)def do_something(text1,text2):
   text1 = text1.upper()
   text2 = text2.upper()
   combine = text1 + text2
   return combine@app.route('/')
def home():
    return render_template('home.html')@app.route('/join', methods=['GET','POST'])
def my_form_post():
    text1 = request.form['text1']
    word = request.args.get('text1')
    text2 = request.form['text2']
    combine = do_something(text1,text2)
    result = {
        "output": combine
    }
    result = {str(key): value for key, value in result.items()}
    return jsonify(result=result)if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

Tạo một tuyến đường mới,/tham gia với các phương thức GET GET và POST. Lấy đầu vào từ hộp đầu vào web thông qua

<!doctype html>
<html>
<body>
    <form method="post">
        <button type="submit">Do it!</button>
    </form>
</html>

0. Thực hiện một số thao tác văn bản trong hàm và trả về giá trị dưới dạng định dạng JSON cho web.

Sao chép cái này vào nhà.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Flask App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></head><script>function myFunction() {
var text1= $('#text1').val();
var text2= $('#text2').val();
  $.ajax({
              url: "/join",
              type: "POST",
              data: {text1:text1,
              text2:text2}          }).done(function(response) {            var html= "<br><br><br><p> <b> RESULT : <b><p>";            response =response.result;
                 $.each(response,function(key,val){
                 console.log(val);
                    html+="<p>"+val+"<p>"                });
                html +="<br>";
                $(".show-data").append(html);
            });
};  </script>
<body>
    <p>
        Taking input from web<br><br>            Text_Value1<input type="text" id="text1" name="text1"><br><br>
            Text_Value2<input type="text" id="text2" name="text2"><br><br>
            <button id="clicked" onclick="myFunction()">Submit</button>
        </p>
    <div class="show-data" >    </div>
</body>
</html>

Chạy tệp API

Mở liên kết trên trình duyệt. Nhập các giá trị và nhấp vào gửi, kết quả sau đó sẽ được hiển thị trên cùng một trang.

Hình: Trước khi gửi: Sau khi gửi

Bây giờ bạn có một mã đang chạy 😃

Bạn có thể thêm nhiều chức năng và định tuyến đến trang web và một số CSS để làm cho nó tốt hơn.

Bạn có thể kiểm tra github này để có một ứng dụng web hoạt động đầy đủ cho NLP: https://github.com/pemagrg1/nlp-flask-websiteGitHub to get a fully working web app for NLP: https://github.com/pemagrg1/NLP-Flask-Website

Chúc may mắn! Thả một số đề xuất hoặc phản hồi nếu bạn có bất kỳ.

Giới thiệu:

[1] https://www.tutorialspoint.com/flask/flask_quick_guide.htm