Chúng tôi có thể sử dụng Thymeleaf với Javascript không?

Bây giờ, ngược lại khi các JSP được tạo lần đầu tiên, bạn có thể nhúng mã Java nguyên gốc ngay vào JSP của mình [đọc. lên lớp trình bày của bạn]

Điều này đã nhanh chóng được coi là một thói quen lập trình khủng khiếp cần phải tránh bằng mọi giá.

Đủ công bằng…

Nhưng chúng tôi vẫn tiếp tục sử dụng JSP và thay vào đó sử dụng các thư viện thẻ để thêm đánh dấu bổ sung vào mã JSP của chúng tôi

Ví dụ: chúng tôi sẽ sử dụng thứ gì đó giống như “C” JSTL [thư viện thẻ cho JSP] để giới thiệu một số cấu trúc điều khiển và chức năng bổ sung

Đây là một cách tiếp cận tốt hơn nhiều so với việc sử dụng mã Java cũ đơn giản được nhúng ngay vào JSP, nhưng nó vẫn không phải là giải pháp tốt nhất

Lý do tại sao đây không phải là một giải pháp tuyệt vời là vì chúng tôi vẫn đang sử dụng mã HTML không có nguồn gốc bên trong các trang HTML của mình [à… Chúng tôi gọi chúng là JSP, nhưng về cơ bản chúng chỉ là các trang HTML]

Hãy nhớ rằng quy ước là tách biệt các mối quan tâm của bạn một cách tốt nhất có thể… Đó là lý do tại sao chúng tôi có xu hướng đặt mã CSS và JS của mình vào các tệp bên ngoài và liên kết chúng bên trong HTML/JSP của chúng tôi

Vậy tại sao chúng ta được phép sử dụng mã Java được tôn vinh trong JSP của mình mà không phải bất kỳ thứ gì khác?

Vấn đề chính với JSP

Được rồi, nếu chúng ta bỏ lập luận rằng chúng ta nên tách biệt các mối quan tâm của mình, thì tại sao các JSP lại hơi dở hơi?

Chà, chúng thực sự không thể được mở bên ngoài bối cảnh máy chủ web

Điều gì xảy ra nếu bạn tắt máy chủ web của mình, sau đó thử truy cập vào một JSP?

Hoặc điều gì sẽ xảy ra nếu bạn chỉ cố mở một tệp JSP cũ đơn giản bên trong trình duyệt của mình?

Tôi đặt cược với bạn nó sẽ không giống như nó nên

Đó là bởi vì các JSP dựa vào máy chủ web để hiển thị chính xác

Vậy làm thế nào chúng ta có thể viết mã HTML gốc, nhưng vẫn có thể khiến các trang HTML của chúng ta tương tác đúng cách với máy chủ phụ trợ của chúng ta?

Nhập Thymeleaf

Điều đầu tiên là đầu tiên. Cùng tìm hiểu cách phát âm Thymeleaf

Đó là “Thời gian – Leef”. Cỏ xạ hương được phát âm giống như thảo mộc, được phát âm là "Thời gian", giống như thời gian trong ngày

Tuyệt vời, giờ thì chi tiết SIÊU quan trọng đó đã hết…

Thymeleaf giải quyết tất cả các vấn đề đã gây khó khăn cho các JSP ngay từ đầu

Với Thymeleaf, bạn có thể viết mã HTML gốc mà bất kỳ trình duyệt cũ nào cũng có thể hiển thị, nhưng vẫn có thể tương tác như bạn luôn có thể, với máy chủ Java của mình

ú ớ

Và may mắn thay, nó không quá khó để học

Tôi dự định dạy cho bạn hầu hết những gì bạn cần biết trong một bài đăng này

Bắt đầu với Thymeleaf

Điều này có thể đơn giản một cách lố bịch… Hoặc nó có thể đơn giản

Dù bằng cách nào, thức dậy và chạy với Thymeleaf dễ dàng hơn là đi tất vào buổi sáng

Bạn có đang sử dụng Khởi động mùa xuân không?

Nếu bạn đang sử dụng Spring Boot, thì bạn đã sẵn sàng. Bạn thực sự không phải làm bất cứ điều gì để bắt đầu sử dụng Thymeleaf

Vô cùng đơn giản phải không?

Được rồi, nhưng nếu bạn không sử dụng Spring Boot thì sao

Vậy thì nó đơn giản như đưa một vật phẩm vào hệ thống quản lý phụ thuộc của bạn [tôi. e. thêm một phụ thuộc vào tệp Maven

...

5 của bạn] hoặc chỉ cần tải xuống JAR theo cách thủ công và thêm nó vào đường dẫn lớp của bạn

Có một số hướng dẫn cài đặt thực sự đơn giản thông qua trang tải xuống Thymeleaf

Vì vậy, ví dụ: nếu bạn không sử dụng Spring Boot nhưng bạn vẫn đang làm việc với dự án dựa trên Spring, thì bạn sẽ thêm thư viện lõi cộng với tích hợp phiên bản Spring thích hợp. Giả sử bạn đang làm việc với Spring 4 mà không có Spring Boot, đây là những gì bạn sẽ thêm vào tệp maven

...

5 của mình

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

Cú pháp cỏ xạ hương

Được rồi, vậy là bạn đã cài đặt Thymeleaf, bây giờ thì sao?

Chà, đã đến lúc bắt đầu viết mã

Đối với mã của tôi, tôi sẽ cho rằng chúng tôi đang làm việc trong giới hạn của ứng dụng Nhật ký Thực phẩm mà chúng tôi đã xây dựng trong vài tuần qua

Ghi chú. Bạn có thể kiểm tra kho lưu trữ GitHub cho dự án này tại đây

Câu lệnh IF đơn giản trong Thymeleaf

Chúng tôi sẽ căn cứ vào việc liệu có danh sách các đối tượng

...

7 trong mô hình của chúng tôi hay không

...

Điều đầu tiên tôi sẽ đề cập [và đây là lần duy nhất tôi sẽ đề cập đến nó]. bạn sẽ cần xác định không gian tên xml “th” bằng cách thêm

...

8 vào thẻ
...

9. Khi bạn làm điều này, bạn sẽ không nhận được bất kỳ cảnh báo nào trong IDE nói rằng không tìm thấy thuộc tính thymeleaf

Được rồi, đã nói vậy, hãy tiếp tục… Xin lưu ý rằng trong đoạn mã trên, đó không phải là cách hiệu quả nhất để cố gắng lặp qua các bộ sưu tập, vì việc kiểm tra xem liệu nó có thể thực hiện được không khi lặp lại

Cách lặp lại các bộ sưu tập với Thymeleaf

Cái này có cú pháp hơi lạ, hầu hết mã bạn sẽ viết bằng Thymeleaf sẽ được bao bọc hoàn toàn trong cú pháp Ngôn ngữ biểu thức mùa xuân [viết tắt là SPEL]… cú pháp này là ký hiệu đô la theo sau dấu ngoặc nhọn “%{}”

Nhưng khi thực hiện vòng lặp kiểu

0 với Thymeleaf thì hơi khác một chút. Đây là cách chúng tôi sẽ lặp qua

1 của chúng tôi

Hiển thị thông tin từ Model với Thymeleaf

Tiếp theo là điều chúng tôi làm mọi lúc… hiển thị thông tin chúng tôi có trên mô hình của mình

Trong Thymeleaf có hai cách chính để hoàn thành nhiệm vụ này… cách thứ nhất là với

2 như vậy

...

1

Việc sử dụng

2 cộng với nối Chuỗi sẽ dẫn đến một Chuỗi như thế này. “Tôi đã ăn pizza cho bữa tối lúc 6. 00 tối”

Thuộc tính

2 cũng có thể được sử dụng trong nhiều thẻ, không chỉ một

5. Bạn có thể sử dụng nó trong các thẻ

6, thẻ tiêu đề, thẻ

7… bạn đặt tên cho nó

Đó là vẻ đẹp của Thymeleaf, rất nhiều thuộc tính của chúng có thể được sử dụng với nhiều thẻ

Bây giờ, việc liên tục viết

8 bên trong các thẻ

6 và/hoặc

5 sẽ hơi mệt nếu có nhiều kết xuất cần phải hoàn thành

Vì vậy, Thymeleaf giải quyết vấn đề này bằng cách cho phép sắp xếp các đầu ra như vậy

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

0

Liên kết các phần tử HTML với các thuộc tính mô hình với Thymeleaf

Được rồi, vì vậy chúng tôi sẽ chuyển ngay cùng với cú pháp Thymeleaf này. Tiếp theo là một thứ khác rất quan trọng để xây dựng các ứng dụng web… cách liên kết các phần tử đầu vào của bạn với Bộ điều khiển mùa xuân để bạn có thể chuyển dữ liệu từ HTML sang Java

Giả sử rằng chúng ta muốn tạo một đối tượng

...

7 trong HTML và để nó liên kết với back-end Java của chúng ta

Trước đây, khi sử dụng JSP, chúng tôi sẽ sử dụng JSTL

...

12 và chúng tôi sẽ tạo các phần tử
...

13

Chà, một lần nữa, Thymeleaf được cho là có thể được giải thích bởi trình duyệt mà không cần sử dụng máy chủ web đang chạy. Vì vậy, trình duyệt không biết phần tử

...

13 là cái quái gì nếu không có thứ gì đó giống như máy chủ Tomcat

Thymeleaf chỉ sử dụng cú pháp

...

15 của nó để liên kết mọi thứ

Ghi chú. Giả sử rằng chúng ta có một mục

...

16 đã được thêm vào mô hình của chúng ta từ bộ điều khiển

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

7

Như bạn có thể thấy, chúng tôi đang sử dụng tên của biến đã được thêm vào mô hình của chúng tôi [

...

16] bên trong tham chiếu của chúng tôi tới
...

15 để liên kết mọi thứ với bộ điều khiển của chúng tôi

Bây giờ khi chúng tôi gửi biểu mẫu này [giả sử bộ điều khiển của chúng tôi được kết nối đúng cách], phương thức Java được gọi sẽ có thể dịch dữ liệu biểu mẫu HTML này thành một đối tượng Java

...

7 thực tế

nhiệm vụ hoàn thành

Tuy nhiên, chúng ta vẫn chưa hoàn thành… có một phím tắt nhỏ mà bạn có thể sử dụng để giúp cuộc sống của mình dễ dàng hơn một chút

Bạn có thể sử dụng thuộc tính

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

00 để sắp xếp “lưu trữ” tham chiếu đến thuộc tính mô hình khi bạn đang sử dụng mã
...

15

Đây chỉ là một cách để giảm số lần nhấn phím mà bạn cần thực hiện… vì vậy thực sự không có sự khác biệt nào về chức năng ở đây… tất cả chỉ là do sự lười biếng tuyệt đối

Mã này sẽ hoạt động theo cách chính xác giống như mã ở trên

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

7

Vì vậy, hai điều cần lưu ý ở trên là

  1. Chúng tôi đã sử dụng thuộc tính
      org.thymeleaf
      thymeleaf
      3.0.0.RELEASE
    
    
    
      org.thymeleaf
      thymeleaf-spring4
      3.0.0.RELEASE
    
    
    00 trên biểu mẫu để “lưu trữ” tham chiếu đến thuộc tính mô hình
  2. Chúng tôi đã sử dụng cú pháp *{} trái ngược với ${} và chúng tôi đã bỏ qua tham chiếu đến thuộc tính mô hình để lưu các lần nhấn phím

Một lần nữa, tất cả các mã ở trên giúp bạn không phải gõ

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

03 và thay vào đó thay thế nó bằng
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

04

Các đối tượng tiện ích trong Thymeleaf

Đôi khi, tất cả chúng ta đều cần tìm kiếm thư viện thẻ sẽ giúp chúng tôi định dạng ngày/tiền tệ hoặc một số tác vụ dựa trên tiện ích ngẫu nhiên khác mà các thư viện thẻ “C” hoặc “FORM” tiêu chuẩn không thể giúp chúng tôi

Chà, may mắn thay, những người tốt bụng ở Thymeleaf đã nghĩ ra điều này và họ cung cấp nhiều

Đây là một ví dụ nhanh về cách bạn có thể định dạng một ngày

...

7

Hoặc làm cách nào để kiểm tra xem danh sách có trống không?

Cách sử dụng Thymeleaf như mục đích sử dụng…

Bây giờ, nếu bạn là người dùng Thymeleaf lâu đời và bạn đã sử dụng nó đúng cách… bạn có thể hơi khó chịu với hướng dẫn của tôi cho đến nay. Đúng như vậy, tôi đã bỏ qua một trong những lý do chính khiến Thymeleaf được tạo ra

Bạn thấy đấy, Thymeleaf được tạo ra để bạn có thể mở một tệp HTML có cả đống đánh dấu Thymeleaf trong đó, nhưng trang vẫn mở ra và trông khá bình thường. Có nghĩa là bạn không cần phải xem trang HTML đã bật Thymeleaf với máy chủ đang chạy

Nhưng nếu bạn không có máy chủ đang chạy và Thymeleaf là thư viện dựa trên máy chủ, thì trang HTML của bạn sẽ trông như thế nào?

Chà, thông qua việc sử dụng thông minh các giá trị mặc định

Bạn thấy đấy, bất cứ khi nào bạn tạo một phần tử HTML hỗ trợ Thymeleaf, bạn cũng nên cung cấp một số loại giá trị mặc định để nếu bạn mở trang HTML mà không có máy chủ đang chạy, nó có thể quay trở lại các giá trị mặc định đó

Để tôi chỉ cho bạn một ví dụ

...

9

Bạn có nhận thấy cách chúng tôi mã hóa cứng một số văn bản trong đoạn mã trên không?

Chúng tôi đặt “Chào mừng đến với Trang web của tôi” trong thẻ

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

05 và chúng tôi cũng đặt “I at cookies” trong thẻ

6

Và điều bạn sẽ nhận thấy là nếu bạn mở nó trong một trình duyệt không có máy chủ đang chạy, bạn sẽ thấy chính xác hai câu đó được hiển thị trên màn hình… bởi vì các trình duyệt sẽ hoàn toàn bỏ qua đánh dấu thymeleaf. Và nếu bạn bỏ qua phần đánh dấu Thymeleaf, thì bạn chỉ còn lại một trang cũ đơn giản chào đón bạn và cho bạn biết rằng nó đã ăn cookie

Tuy nhiên, nếu bạn mở trang này trong khi máy chủ web đang chạy với Thymeleaf được kích hoạt, Thymeleaf sẽ nhận dạng đánh dấu của chính nó và nó sẽ thay thế các giá trị “mặc định” mà bạn đã cung cấp bằng dữ liệu dự kiến ​​tồn tại trên mô hình

Đồ khá gọn gàng

Bạn thậm chí có thể sử dụng Thymeleaf trong JavaScript

Sử dụng Thymeleaf trong JavaScript

Giả sử bạn muốn có quyền truy cập vào một số giá trị trong mô hình, nhưng bạn đang ở trong một đoạn mã JavaScript

không thành vấn đề

Bạn chỉ cần sử dụng thuộc tính

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

07 cùng với một số đánh dấu CDATA để mọi thứ hoạt động

Nó hơi phức tạp, nhưng này, nó hoạt động

Đây là cách tôi lấy giá trị của một thuộc tính từ mô hình giả định rằng có sẵn một đối tượng

...

16 để làm việc với

...

0

Vì vậy, có ba điều chính bạn cần lưu ý ở đây

  1. Đảm bảo bạn sử dụng mã
      org.thymeleaf
      thymeleaf
      3.0.0.RELEASE
    
    
    
      org.thymeleaf
      thymeleaf-spring4
      3.0.0.RELEASE
    
    
    07 trong thẻ
      org.thymeleaf
      thymeleaf
      3.0.0.RELEASE
    
    
    
      org.thymeleaf
      thymeleaf-spring4
      3.0.0.RELEASE
    
    
    70 của mình
  2. Đừng quên bao gồm phần đánh dấu CDATA mở và đóng bên trong thẻ
      org.thymeleaf
      thymeleaf
      3.0.0.RELEASE
    
    
    
      org.thymeleaf
      thymeleaf-spring4
      3.0.0.RELEASE
    
    
    70 của bạn
  3. Bạn nên nhận xét mã nội tuyến trong JavaScript của mình để Thymeleaf có thể sử dụng các giá trị mặc định

Cuối cùng, bạn có thể thoát khỏi việc KHÔNG nhận xét mã Thymeleaf được nội tuyến của mình, nhưng sau đó bạn sẽ không thực sự sử dụng các phương pháp hay với mã Thymeleaf của mình

Vì vậy, để hoàn thành, đây là đoạn mã trên sẽ trông như thế nào nếu bạn không sử dụng các nguyên tắc mã hóa Thymeleaf thích hợp

...

0

Một lần nữa, cả hai đoạn mã trên đều hoàn thành cùng một nhiệm vụ tổng thể, điểm khác biệt duy nhất là đoạn mã thứ hai sẽ không hoạt động tốt khi bạn tải trang bên ngoài máy chủ web đang chạy

Xây dựng URL động với Thymeleaf

Tại một số thời điểm trong hành trình mã hóa ứng dụng web của bạn, bạn có thể sẽ gặp phải tình huống cần tạo một URL động.

Có nghĩa là, bạn sẽ cần tạo một URL chứa thông tin sẽ thay đổi tùy theo tình huống

Một kịch bản rất phổ biến là bạn muốn nhấp vào một liên kết để xem thêm thông tin về một hàng cụ thể trong cơ sở dữ liệu của mình

Vì vậy, đối với tình huống cụ thể của chúng tôi, giả sử chúng tôi muốn có một trang liệt kê các liên kết đến tất cả các mục

...

7 của chúng tôi

...

2

Được rồi, vì vậy cú pháp này cũng hơi lạ, nhưng bạn có thể tìm ra nó với một số lời dạy của chuyên gia của tôi *nháy mắt nháy mắt, huých huých*

Điều đầu tiên cần lưu ý là chúng tôi sử dụng cú pháp “tại” cho các URL.

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

73. Đây là một cú pháp đặc biệt chỉ dành cho các URL vì chúng RẤT quan trọng

Điều tiếp theo bạn sẽ thấy là chúng tôi đã giới thiệu một cú pháp

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 cho các URL Thymeleaf. Thuộc tính
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 là thứ cho phép sử dụng ký hiệu
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

73

Ghi chú. nếu bạn là một lập trình viên sắc sảo, bạn có thể tự đặt câu hỏi. “Nếu tôi có thể sử dụng

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74, điều đó có nghĩa là tôi có thể đặt
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

78 trước bất kỳ thuộc tính html hiện có nào không? . Bạn có thể sử dụng
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

79 để gán ID động bằng cú pháp Thymeleaf + SpEL,
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

70 bên trong thẻ
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

71. Trên thực tế, bạn có thể xem toàn bộ danh sách các giá trị này

Tôi sẽ đề cập ở đây rằng chúng tôi có cả

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

72 và
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 vì lợi ích của các phương pháp hay nhất của Thymeleaf… một lần nữa, hãy nhớ rằng trình duyệt sẽ bỏ qua
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 khi được tải bên ngoài máy chủ web, vì vậy nếu
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 bị bỏ qua, chúng tôi có một . Khi điều này được chạy bên trong bối cảnh máy chủ web,
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

72 sẽ bị bỏ qua có lợi cho
  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74

Hy vọng rằng mọi thứ đều có ý nghĩa cho đến nay, nhưng bây giờ chúng ta hãy đi vào nội dung trong cú pháp “at” đặc biệt đó

Bên trong cú pháp

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 “tại” của chúng tôi, chúng tôi đã đưa vào như sau.
...

70

Điều này kết hợp một URL cũ đơn giản với khái niệm biến đường dẫn [như trong Spring]. Sự khác biệt là chúng ta cần xác định các biến đường dẫn ngay bên trong thuộc tính

  org.thymeleaf
  thymeleaf
  3.0.0.RELEASE



  org.thymeleaf
  thymeleaf-spring4
  3.0.0.RELEASE

74 của mình [không có bất kỳ chú thích nào như trong Spring]

Cú pháp khá đơn giản, trước tiên bạn xác định một biến đường dẫn bằng cách đặt nó vào URL của bạn với dấu ngoặc nhọn [i. e.

...

72]

Ghi chú. bạn có thể thêm nhiều hơn một biến đường dẫn trong một URL, bạn chỉ cần tiếp tục khai báo các biến đường dẫn giống như chúng ta đã làm với

...

72 trong URL. Bạn sẽ không gán giá trị cho các biến đường dẫn cho đến khi kết thúc URL

Khi bạn đã hoàn tất việc khai báo các biến đường dẫn, bạn sẽ cần gán giá trị cho chúng. Điều này được thực hiện bằng cách thêm dấu ngoặc tròn với câu lệnh gán.

...

74

Chúng tôi nói

...

75 vì đó là tên chúng tôi đã sử dụng khi khai báo biến đường dẫn của mình. Sau đó, chúng tôi kết thúc với
...

76 bằng cách sử dụng SpEL vì đó là cách chúng tôi có thể lấy một giá trị thực tế từ danh sách các mục
...

7 mà chúng tôi hiện đang lặp lại

Ngay và luôn

Sử dụng nhiều biến đường dẫn trong một URL động với Thymeleaf

Để hoàn thành một lần nữa, đây là một ví dụ nhanh về giao diện của việc có nhiều hơn một biến đường dẫn được xác định trong một URL

...

3

Điều chính cần lưu ý ở đây là chúng tôi không thực sự bắt đầu gán giá trị cho các biến đường dẫn của mình cho đến khi kết thúc URL… và cú pháp gán được phân tách bằng dấu phẩy

Mát mẻ?

Mát mẻ

Nhận chi tiết lặp lại khi thực hiện cho từng vòng lặp trong Thymeleaf

Chuyển bánh răng ngay bây giờ, hãy kết thúc mọi thứ bằng cách nói về các kỹ thuật lặp nâng cao hơn

Đôi khi, thật hữu ích khi có thêm thông tin về nội dung bạn đang lặp lại

Điều này trước đây có thể được thực hiện trong JSP bằng cách sử dụng cú pháp

...

78… và may mắn thay, Thymeleaf có cách để truy cập chính xác thông tin đó

Chịu đựng tôi một lần nữa, cú pháp hơi khác so với thư viện thẻ “c”, nhưng nó đơn giản. Hãy lặp lại các mục

...

7 của chúng tôi một lần nữa, nhưng tôi muốn có quyền truy cập vào thông tin lặp lại

...

1

Đoạn mã trên sẽ in ra một cái gì đó như thế này

0

Vì vậy, cách để truy cập thông tin về phép lặp chỉ là thêm dấu phẩy sau khi bạn khai báo tên biến cho phép lặp và đặt tên cho biến trạng thái phép lặp của bạn. Tôi tình cờ gọi nó là

1, nhưng bạn có thể gọi nó là gì tùy thích, nó chỉ là một tên biến

Sau đó, khi tôi đã khai báo biến trạng thái lặp của mình, tôi có thể truy cập nó trong phạm vi vòng lặp của mình [trong trường hợp phạm vi là thẻ

5

Có một số thuộc tính khác mà biến trạng thái lặp lại nắm giữ. Bạn có thể từ những người tốt tại thymeleaf

Làm cách nào để thêm Thymeleaf trong JavaScript?

Chúng tôi tải biểu định kiểu bằng cách sử dụng thẻ liên kết với thứ đặc biệt của Thymeleaf. thuộc tính href . Nếu chúng tôi đã sử dụng cấu trúc thư mục dự kiến, chúng tôi chỉ cần chỉ định đường dẫn bên dưới src/main/resources/static. Trong trường hợp này, đó là /styles/cssandjs/main.

Chúng tôi có thể sử dụng Thymeleaf với JSP không?

Nếu bạn đang xây dựng giao diện người dùng web với Spring Boot hoặc Spring MVC và bạn vẫn đang sử dụng JSP [Trang máy chủ Java] thì khóa học này là dành cho bạn. Thymeleaf là một công cụ tạo khuôn mẫu tuyệt vời thay thế cho JSP và bạn có thể dễ dàng sử dụng nó trong bất kỳ ứng dụng Spring MVC hoặc Spring Boot nào .

Thymeleaf là giao diện người dùng hay phụ trợ?

Thymeleaf được sử dụng để hiển thị giao diện người dùng , các mẫu e-mail và cả các đoạn Handlebars cho phần động của giao diện người dùng EnSupply của chúng tôi. Mặc dù Thymeleaf có một số lượng lớn các tính năng, nhưng đường cong học tập của nó tương đối bằng phẳng. Do khả năng tích hợp tốt vào hệ sinh thái Spring có thể hoạt động hiệu quả ngay từ ngày đầu tiên.

Chúng ta có thể sử dụng Thymeleaf mà không có Spring không?

Chắc chắn rồi. Thymeleaf cung cấp khả năng tích hợp tuyệt vời với Spring MVC thông qua phương ngữ SpringStandard của nó [có trong các gói thymeleaf-spring3 , thymeleaf-spring4 và thymeleaf-spring5], nhưng tích hợp Spring là hoàn toàn tùy chọn và phương ngữ Tiêu chuẩn có trong . .

Chủ Đề