Để ôn lại, chúng ta hãy nhớ rằng sau khi hoàn tất Phần 1, bạn đã có ứng dụng Web đầu tiên với cấu trúc như sau

1

2

3

4

5

6

blog của tôi\

  myenv\

  ứng dụng\

    __init__. p

    tuyến đường. p

  blog của tôi. p

Và để thực hiện chương trình này, bạn cần thiết lập biến môi trường FLASK_APP=myblog.py cho phiên làm việc của bạn và sau đó chạy lệnh flask run. Sau lệnh này, Flask sẽ khởi động một máy chủ Web đơn giản và cho phép bạn truy cập ứng dụng bằng cách nhập URL http. //máy chủ cục bộ. 5000/ vào thanh địa chỉ của trình duyệt

Trong phần này, bạn sẽ tiếp tục phát triển ứng dụng mà bạn đã viết ở phần trước. Chúng ta sẽ học cách tạo ra các trang web phức tạp hơn với nhiều thành phần động. Nếu bạn cảm thấy chưa hiểu rõ về ứng dụng hoặc cách phát triển ứng dụng mà chúng ta đã thực hiện trong phần trước, hãy ôn lại trước khi chúng ta bắt đầu

Template là gì?

Chúng ta muốn trang chủ trong blog ứng dụng của chúng ta sẽ trình bày một thông báo chào mừng người sử dụng. Để không làm phức tạp vấn đề, chúng ta tạm thời bỏ qua khái niệm người dùng (user). Thay vào đó, chúng ta sẽ thiết lập (giả) các đối tượng giả mạo người dùng bằng từ điển trong Python như sau

1

người dùng = {'tên người dùng'. 'Thái'}

Tạo ra các trình giả lập chuyển đổi là một kỹ thuật rất hữu ích khi bạn muốn tập trung vào một phần bất kỳ của ứng dụng đó và không cần phải xem các thành phần khác chưa được xây dựng xong. Bởi vì chúng tôi đang tập trung vào vấn đề kiến ​​​​trúc thiết bị chủ cho ứng dụng và không muốn phân tâm vì chưa thiết lập hệ thống người dùng hệ thống, chúng tôi giả thiết lập đối tượng người dùng

Hiện thời, chức năng được hiển thị trong ứng dụng trả về một chuỗi đơn giản. Điều đó là chưa đủ, chúng tôi muốn nâng cấp chuỗi trả về này thành một trang HTML hoàn chỉnh, ví dụ như sau

ứng dụng/tuyến đường. py. Trả về chuỗi HTML từ hàm hiển thị

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

từ ứng dụng nhập ứng dụng

@ứng dụng. tuyến đường('/')

@ứng dụng. tuyến đường('/index')

def index().

    người dùng = {'tên người dùng': 'Thái'}

    return '''

<đầu>

         + người dùng['username'] + '''!

'''

Nếu bạn chưa quen thuộc với HTML, bạn nên đọc thêm về HTML trên Wikipedia

Please update the function display as on and running the program to see results

Chắc chắn bạn cũng đồng ý là cách trả về chuỗi HTML cho trình duyệt như trên không phải là giải pháp tốt. Bạn hãy thử tưởng tượng xem mã trong hàm hiển thị trên sẽ trở nên phức tạp như thế nào khi ứng dụng hoàn tất và liên tục nhận các bài viết với các nội dung khác nhau từ người dùng. Ứng dụng cũng sẽ phải có nhiều hàm hiển thị hơn là để liên kết với các URL khác. Vì vậy, nếu bất cứ lúc nào chúng ta cần thay đổi cách trình bày của trang Web, chúng ta phải cập nhật mã HTML trong từng hàm hiển thị. Rõ ràng đây không phải là cách hay khi ứng dụng của chúng ta trở nên phức tạp và có nhiều nội dung động hơn

Vì vậy, sẽ tốt hơn nhiều nếu chúng ta chia phần trình bày (trình bày) và phần logic của chương trình thành các phần tách rời nhau. Nếu được như vậy, bạn có thể nhờ người thiết kế Web để tạo ra các trang Web thực sự hấp dẫn, còn bạn thì có thể viết mã ứng dụng với Python hoàn toàn độc lập với họ

Mẫu cho phép chúng tôi thực hiện việc phân tách giữa trình bày phần và logic của ứng dụng. Trong Flask, các mẫu được viết trong các tệp khác nhau và được lưu trong thư mục con mẫu của gói ứng dụng. Do đó, để bắt đầu với mẫu, hãy chắc chắn rằng bạn đang ở trong thư mục blog của tôi và sử dụng lệnh sau để tạo ra thư mục chứa các mẫu

1

(myenv) $ mkdir app/templates

Dưới đây là mẫu đầu tiên với chức năng tương tự như đoạn mã HTML được hàm hiển thị index()trả về ở trên. Bạn hãy lưu lại tệp này trong thư mục app/templates/index. html

ứng dụng/mẫu/chỉ mục. html. Template cho trang chủ

1

2

3

4

5

6

7

8

        

Xin chào, {{ người dùng. tên tài khoản }}.

This most as a Web page with standard HTML code. Điểm khác nhau duy nhất giữa mã HTML thông thường và đoạn mã trên đây là một vài vùng chứa (placeholder) cho các nội dung động nằm giữa hai dấu ngoặc nhọn {{..}}. Trình giữ chỗ này đại diện cho các nội dung có thể được thay đổi trong thời gian chạy (runtime)

Như vậy, bởi vì chúng ta đã chuyển phần trình bày thành một mẫu HTML, hàm hiển thị có thể được đơn giản hóa như sau

ứng dụng/tuyến đường. py. Sử dụng hàm render_template()

1

2

3

4

5

6

7

8

từ flask nhập render_template

từ ứng dụng nhập ứng dụng

@ứng dụng. tuyến đường('/')

@ứng dụng. tuyến đường('/index')

def index().

    người dùng = {'tên người dùng': 'Thái'}

    return render_template('index. html', tiêu đề='Nhà', user=user)

Trông tốt hơn nhiều phải không? . Khi trang Web hiển thị trên trình duyệt, bạn cũng nên xem mã HTML được sinh ra và so sánh nó với mã ban đầu của mẫu

Quá trình chuyển đổi mẫu thành một trang HTML được gọi là quá trình xuất hoặc kiến ​​tạo (render). Để xuất bản mẫu, chúng ta phải tham chiếu đến một hàm trong Flask gọi là render_template(). Hàm này nhận vào tên tệp và một danh sách các tham số của mẫu và trả về mẫu đó, nhưng thay thế các vùng chứa (giữ chỗ) bằng các giá trị tương ứng

Hàm render_template() sẽ gọi đến Jinja2 – is a program (engine) for template – có sẵn trong Flask. Jinja2 sẽ thay thế các đoạn mã trong các khối {{ .. }} bằng các giá trị tương ứng từ các tham số được cung cấp khi gọi hàm render_template()

Điều kiện lệnh

Đến đây, bạn đã thấy cách Jinja2 thay thế các trình giữ chỗ bằng các giá trị thực trong quá trình xuất, nhưng đó chỉ là một trong số nhiều tác vụ mà Jinja2 có thể làm với các mẫu. Ví dụ như template cũng hỗ trợ cho các lệnh điều khiển (control statement) nẳm trong các khối {% .. %}. Sau đây là phần cập nhật của file index. html has used a command a condition

ứng dụng/mẫu/chỉ mục. html. Điều kiện lệnh trong mẫu

1

2

3

4

5

6

7

8

9

10

11

12

{% nếu tiêu đề %}

        

{% khác %}

        

{% endif %}

Xin chào, {{ người dùng. tên tài khoản }}.

Với sự thay đổi nhỏ này, mẫu của chúng ta thông minh hơn một chút. Nếu hàm hiển thị không truyền giá trị cho trình giữ chỗ flask run0, thì nó sẽ sử dụng giá trị mặc định thay vì để trống. Bạn có thể thử xem lệnh điều kiện làm việc thế nào bằng cách xóa tham số flask run0 khi gọi hàm hiển thị render_template()

Vòng lặp (Loop)

Một trong những chức năng quan trọng của blog là cho phép người sử dụng có quyền đăng nhập xem những bài viết gần đây, chúng tôi sẽ cập nhật mã chương trình để làm điều này

Chúng ta lại đi tắt đường một lần nữa và sử dụng mẹo để tạo các đối tượng giả lập cho người dùng và các bài viết

ứng dụng/tuyến đường. py. Trình giả lập đối tượng cho bài viết trong hàm được hiển thị

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

từ flask nhập render_template

từ ứng dụng nhập ứng dụng

@ứng dụng. tuyến đường('/')

@ứng dụng. tuyến đường('/index')

def index().

    người dùng = {'tên người dùng': 'Thái'}

    bài đăng = [

        {

            'tác giả'. {'tên người dùng'. 'Nguyen'},

            'body'. 'Flask de hoc qua phai khong?'

        },

        {

            'tác giả'. {'tên người dùng'. 'Dài'},

            'body'. 'Lập trình Web thu vi. '

        }

    ]

    return render_template('index. html', tiêu đề='Nhà', user=user, posts=posts)

Chúng ta sẽ sử dụng danh sách trong Python để tạo cấu trúc dữ liệu cho các bài viết, trong đó mỗi thành phần của danh sách là một từ điển bao gồm các trường flask run3 và flask run4. Khi chúng tôi xây dựng mã thật cho các đối tượng này, chúng tôi sẽ sử dụng các tên lớp và trường giống như trong các đối tượng giả lập. Nhờ đó, chúng ta không cần phải tìm hiểu về các lỗi có thể phát sinh với mã thật vì tên đối tượng/trường không đúng

Chúng ta cần giải quyết một vấn đề ở đây. in the template code at on, they ta default 2 đối tượng “bài viết”. Tuy nhiên, trong thực tế, danh sách bài viết có thể có số lượng bài viết bất thường. Số lượng bài viết được hiển thị phải do hàm hiển thị quyết định chứ không phải mẫu. Một cách khái niệm, mẫu chỉ nên nhận số lượng bài viết từ hàm hiển thị và hiển thị chúng chứ không nên quyết định có bao nhiêu bài viết. Làm sao chúng ta có thể làm điều này?

Rất có thể Jinja2 có cách giải quyết vấn đề bằng cách sử dụng vòng lặp flask run5

ứng dụng/mẫu/chỉ mục. html. use the loop for in template

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

{% nếu tiêu đề %}

        

{% khác %}

        

{% endif %}

Xin chào, {{ người dùng. tên tài khoản }}.

{% cho bài đăng trong bài viết %}

{% endfor %}

Tốt hơn nhiều phải không? . Bạn thử chạy chương trình và xem kết quả nhé

template kế thừa

Hầu hết các ứng dụng Web đều có một thanh định hướng ở đầu trang bao gồm một số URL thường được sử dụng như là URL để cập nhật hồ sơ cá nhân, đăng nhập, rời khỏi … Chúng ta cũng có thể thêm thanh điều hướng vào . html with a HTML code less. Tuy nhiên, khi ứng dụng của chúng tôi có thêm nhiều trang Web nữa thì chúng tôi sẽ phải thêm mã này vào các trang mới. Điều này đồng nghĩa với việc chúng ta có vài bản sao của phần mã HTML để định hướng và phải đảm bảo rằng chúng hoạt động giống nhau. Đây là điều nên tránh trong lập trình cũng như việc viết cùng một đoạn mã trong các hàm/lớp khác nhau

Jinja2 có một cơ chế cho phép kế thừa các mẫu và sẽ giúp chúng tôi giải quyết vấn đề này. Điểm mấu chốt là bạn sẽ chuyển các đoạn mã có thể được lặp lại trong các mẫu thành một mẫu cơ bản. Và các mẫu có đoạn mã lặp lại này sẽ kế thừa từ mẫu cơ bản đó. Khi chạy, các mẫu kế thừa này vẫn hiển thị chính xác các nội dung từ đoạn mã được lặp lại này (vì chúng được thừa kế từ mẫu cơ bản), nhưng khi viết mã, bạn không cần phải sao chép các đoạn . Điều này cũng tương tự như tính kế thừa của các ngôn ngữ lập trình đối tượng

Để thực hiện kế thừa, chúng ta sẽ tạo ra một mẫu mới được gọi là cơ sở. html có chứa mã HTML của một thanh định hướng đơn giản và logic cho tiêu đề của trang. Chúng ta sẽ lưu mẫu này vào tệp app/templates/base. html

ứng dụng/mẫu/cơ sở. html. Cơ bản mẫu với mã HTML cho thanh định hướng

1

2

3

4

5

6

7

8

9

10

11

12

13

14

{% nếu tiêu đề %}

      

{% khác %}

      

{% endif %}

{% khối nội dung %}{% khối cuối %}

Trong mẫu này, chúng ta sử dụng lệnh điều khiển flask run6 để xác định vị trí mà các mẫu kế thừa sẽ hiển thị nội dung. Tên của các khối phải là duy nhất (duy nhất) để các mẫu kế thừa có thể xác định sẽ hiển thị bất kỳ nội dung nào

Sau khi đã có mẫu cơ bản, chúng ta có thể đơn giản hóa chỉ mục mẫu. html by way doing for it kế thừa từ cơ sở mẫu. html

ứng dụng/mẫu/chỉ mục. html. Kế thừa từ mẫu cơ bản. html

1

2

3

4

5

6

7

8

{% mở rộng "cơ sở. html" %}

{% chặn nội dung %}

Xin chào, {{ người dùng. tên tài khoản }}.

{% cho bài đăng trong bài viết %}

    {% endfor %}

{% chặn kết thúc %}

By because template base. html sẽ đảm nhận công việc trình bày cấu trúc tổng quát của các Web trong ứng dụng, chúng ta có thể xóa hầu hết các đoạn mã từ chỉ mục. html ngoại trừ phần nội dung. Câu lệnh flask run7 thiết lập mối liên hệ thừa kế giữa hai chỉ mục mẫu. html and base. html, nhờ đó Jinja2 biết khi nào cần xuất chỉ mục. html thì nó phải xuất bản mẫu này bên trong cơ sở. html. Hai mẫu này có cùng một khối với tên gọi là flask run8 cho phép Jinja2 biết khi cần trình bày nội dung bên trong khối này thì nó phải sử dụng mã từ chỉ mục. html instead of base code. html

Với cấu trúc mới này, nếu chúng ta cần thêm các mẫu mới vào ứng dụng, chúng ta chỉ cần chọn kế thừa (mở rộng) từ cơ sở mẫu. html. Nhờ đó, chúng tôi có thể đảm bảo rằng mọi trang Web trong ứng dụng của chúng tôi đều có cùng một kiểu hiển thị mà không cần phải viết mã trùng lặp