Thursday, October 31, 2024

[Flask] – Phần 2: Return thẻ HTML, truyền biến và chuyển hướng trang

-

Các khái niệm về return thẻ HTML, truyền biến và chuyển hướng trang liên quan đến việc tạo và điều hướng trang web trong phát triển ứng dụng web. Dưới đây chúng ta sẽ đi vào giải thích và thực hành về từng khái niệm.

1. Return Thẻ HTML.

  • Return: Trong phát triển web, return thường được hiểu là trả về một phần tử HTML từ một hàm hoặc route trong ứng dụng web. Nghĩa là, khi một người dùng truy cập một trang web, ứng dụng web sẽ trả về mã HTML để hiển thị nội dung trên trình duyệt của họ.
  • Thẻ HTML: Thẻ HTML là các phần tử được sử dụng để định dạng và cấu trúc trang web. Ví dụ: <html>, <head>, <body>, <p>, <div>, và nhiều thẻ khác. Khi bạn trả về một thẻ HTML từ một hàm hoặc route, trình duyệt sẽ hiển thị nội dung được định dạng bởi các thẻ này.

Đơn giản ở phần trước mình đã sử dụng option return rồi, chính là chỗ này return "<h1>Hello, World"</h1>".

cat > app.py << 'OEF'
from flask import Flask

app = Flask(__name__)
@app.route('/')
def hello_world():
    return "<h1>Hello, World</h1>"

if __name__=="__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)
OEF

2. Truyền Biến.

  • Trong phát triển web, bạn có thể truyền biến từ ứng dụng web của bạn đến trình duyệt của người dùng hoặc ngược lại.
  • Truyền từ ứng dụng web đến trình duyệt: Bạn có thể truyền dữ liệu từ ứng dụng web của bạn đến trình duyệt của người dùng bằng cách sử dụng các biến trong mã HTML, thường thông qua một mẫu (form). Ví dụ: người dùng điền vào một biểu mẫu đăng nhập và bạn truyền tên người dùng và mật khẩu từ biểu mẫu này đến server.
  • Truyền từ trình duyệt đến ứng dụng web: Bạn cũng có thể truyền dữ liệu từ trình duyệt của người dùng đến ứng dụng web của bạn thông qua các tham số URL hoặc các yêu cầu HTTP. Ví dụ: khi người dùng truy cập một trang web tìm kiếm, họ có thể nhập từ khóa tìm kiếm vào URL và truyền nó đến server.

Ví dụ dưới đây sẽ chỉnh sửa file myapp/app.py ở bài trước chúng ta đã tạo ra cho thấy cách truyền biến từ URL vào hàm xử lý trong Flask. Điều này cho phép bạn tạo các route động, có thể hiển thị nội dung khác nhau dựa vào các giá trị biến được truyền từ URL.

@app.route('/user/<name>')
def hello_user(name):
    return f"<h1>Hello, {name}</h1>"

Đầy đủ của myapp/app.py sẽ như dưới.

from flask import Flask

app = Flask(__name__)
@app.route('/')
def hello_world():
    return "<h1>Hello, World</h1>"

@app.route('/user/<name>')
def hello_user(name):
    return f"<h1>Hello, {name}</h1>"

if __name__=="__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

Nó định nghĩa cách truyền biến từ URL đến hàm xử lý của bạn. Hãy giải thích nó chi tiết:

  • @app.route('/user/<name>'): Dòng này xác định một route trong ứng dụng Flask với đường dẫn '/user/<name>'. Trong URL này, <name> là một biến động, nghĩa là nó có thể thay đổi và được truyền vào hàm xử lý dưới dạng tham số.
  • def hello_user(name): Đây là hàm xử lý cho route '/user/<name>'. Hàm này có một tham số name, và giá trị của tham số này sẽ được truyền từ URL vào khi người dùng truy cập route này.
  • return f"<h1>Hello, {name}</h1>": Trong hàm xử lý này, bạn sử dụng tham số name để tạo một câu chào đơn giản. Câu chào này được nhúng vào trong một thẻ HTML <h1> để định dạng nó là tiêu đề lớn. Khi người dùng truy cập route '/user/<name>', họ sẽ nhận được trang web với câu chào cá nhân được tạo dựa trên giá trị của name.

Kết quả khi mình nhập http://<flask_server>:5000/user/<tên biến cần truyền>, với tên biến cần truyền là HoangHD

Giả sử trong file myapp/app.py mình truyền biến kiểu int.

from flask import Flask

app = Flask(__name__)
@app.route('/')
def hello_world():
    return "<h1>Hello, World</h1>"

@app.route('/user/<name>')
def hello_user(name):
    return f"<h1>Hello, {name}</h1>"

@app.route('/user/<int:blog_id>')
def blog(blog_id):
    return f"<h1>Blog, {blog_id}</h1>"

if __name__=="__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

Kết quả.

3. Chuyển Hướng Trang.

  • Chuyển hướng có thể thực hiện bằng cách thay đổi URL trong trình duyệt của người dùng hoặc sử dụng mã HTTP để thông báo cho trình duyệt thực hiện chuyển hướng.
  • Ví dụ này thể hiện cách sử dụng redirecturl_for để chuyển hướng người dùng từ một route đến một route khác trong Flask dựa trên điều kiện xác định bởi giá trị của biến name. Nếu name'admin', người dùng sẽ được chuyển hướng đến trang '/admin', còn không, họ sẽ nhận được một trang chào đón cá nhân.

Đầu tiên tại file myapp/app.py bạn cần import thêm 2 module redirect, url_for.

from flask import Flask, redirect, url_for

Tạo route và hàm xử lý user 'admin'.

@app.route('/admin')
def hello_admin():
    return f"<h1>Hello, Administrator!</h1>"

Chỉnh sửa điều kiện user.

@app.route('/user/<name>')
def hello_user(name):
    if name == 'admin':
        return redirect(url_for('hello_admin'))
    return f"<h1>Hello, {name}!</h1>"

Đây là file đầy đủ và giải thích từng phần trong ví dụ này:

  • @app.route('/admin')def hello_admin(): Đây là một route và hàm xử lý cho trang web có đường dẫn '/admin'. Khi người dùng truy cập route này, hàm hello_admin được gọi và trả về một chuỗi HTML chào đón “Hello, Administrator!”.
  • @app.route('/user/<name>')def hello_user(name): Đây là một route và hàm xử lý cho trang web có đường dẫn '/user/<name>', trong đó <name> là một biến động trong URL. Khi người dùng truy cập route này, hàm hello_user được gọi và nhận giá trị của name từ URL làm tham số.
  • if name == 'admin': return redirect(url_for('hello_admin')): Trong hàm hello_user, chúng ta kiểm tra giá trị của biến name. Nếu name có giá trị là ‘admin’, chúng ta sử dụng redirecturl_for để chuyển hướng người dùng đến trang '/admin'.
    • url_for('hello_admin'): Hàm url_for được sử dụng để tạo URL cho một route cụ thể trong ứng dụng Flask. Trong trường hợp này, nó tạo ra URL cho route hello_admin.
    • redirect(): Hàm redirect được sử dụng để thực hiện chuyển hướng. Nó nhận một URL và chuyển hướng trình duyệt của người dùng đến URL đó. Trong ví dụ này, chúng ta chuyển hướng đến trang '/admin' khi name là ‘admin’.
  • return f"<h1>Hello, {name}!</h1>": Nếu name không phải 'admin', chúng ta trả về một trang chào đón thông thường với nội dung dựa trên giá trị của name.
from flask import Flask, redirect, url_for

app = Flask(__name__)

@app.route('/')
def hello_world():
    return "<h1>Hello, World</h1>"

@app.route('/admin')
def hello_admin():
    return f"<h1>Hello, Administrator!</h1>"

@app.route('/user/<name>')
def hello_user(name):
    if name == 'admin':
        return redirect(url_for('hello_admin'))
    return f"<h1>Hello, {name}!</h1>"

if __name__=="__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

Kết quả khi mình nhập user là http://192.168.13.200:5000/user/admin nó sẽ tự chuyển về http://192.168.13.200:5000/admin.

Nếu mình nhập user là HoangHD http://192.168.13.200:5000/user/HoangHD, mình có kết quả như dưới.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4,956FansLike
256FollowersFollow
223SubscribersSubscribe
spot_img

Related Stories