1. Gambaran keseluruhan
Dalam tutorial ini, kami akan menunjukkan cara memanfaatkan Thymeleaf Fragments untuk menggunakan semula beberapa bahagian yang biasa di laman web . Setelah menyiapkan projek Spring MVC yang sangat sederhana, kami akan memfokuskan pandangan.
Sekiranya anda baru menggunakan Thymeleaf, anda boleh menyemak artikel lain di laman web ini seperti pengenalan ini, dan juga mengenai enjin versi 3.0 ini.
2. Pergantungan Maven
Kami memerlukan beberapa pergantungan untuk mengaktifkan Thymeleaf:
org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE Versi terbaru thymeleaf dan thymeleaf-spring5 boleh didapati di Maven Central.
3. Projek Musim Bunga
3.1. Konfigurasi Spring MVC
Untuk mengaktifkan Thymeleaf dan menetapkan akhiran templat, kita perlu mengkonfigurasi MVC dengan pemecah pandangan dan pemecah templat .
Kami juga akan menetapkan direktori untuk beberapa sumber statik:
@Bean public ViewResolver htmlViewResolver() { ThymeleafViewResolver resolver = new ThymeleafViewResolver(); resolver.setTemplateEngine(templateEngine(htmlTemplateResolver())); resolver.setContentType("text/html"); resolver.setCharacterEncoding("UTF-8"); resolver.setViewNames(ArrayUtil.array("*.html")); return resolver; } private ITemplateResolver htmlTemplateResolver() { SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setApplicationContext(applicationContext); resolver.setPrefix("/WEB-INF/views/"); resolver.setCacheable(false); resolver.setTemplateMode(TemplateMode.HTML); return resolver; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**", "/css/**") .addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/"); }Perhatikan bahawa jika kita menggunakan Spring Boot, konfigurasi ini mungkin tidak diperlukan kecuali kita perlu menerapkan penyesuaian kita sendiri.
3.2. Pengawal
Dalam kes ini, pengawal hanyalah kenderaan untuk pandangan. Setiap paparan menunjukkan senario penggunaan serpihan yang berbeza.
Yang terakhir memuat beberapa data yang disampaikan melalui model untuk dipaparkan pada paparan:
@Controller public class FragmentsController { @GetMapping("/fragments") public String getHome() { return "fragments.html"; } @GetMapping("/markup") public String markupPage() { return "markup.html"; } @GetMapping("/params") public String paramsPage() { return "params.html"; } @GetMapping("/other") public String otherPage(Model model) { model.addAttribute("data", StudentUtils.buildStudents()); return "other.html"; } }Perhatikan bahawa nama pandangan mesti mengandungi akhiran ".html" kerana cara kita mengkonfigurasi pemecah kita. Kami juga akan menentukan akhiran ketika merujuk kepada nama fragmen.
4. Pandangan
4.1. Penyertaan Fragmen Mudah
Pertama sekali, kami akan menggunakan semula bahagian biasa di halaman kami.
Kita boleh menentukan bahagian-bahagian ini sebagai fragmen, baik dalam fail terpencil atau di halaman umum. Dalam projek ini, bahagian-bahagian yang boleh digunakan semula ini ditentukan dalam folder bernama fragmen .
Terdapat tiga cara asas untuk memasukkan kandungan dari serpihan:
- masukkan - memasukkan kandungan di dalam teg
- ganti - menggantikan tag semasa dengan tag yang menentukan pecahan
- sertakan - ini tidak digunakan lagi tetapi masih boleh muncul dalam kod warisan
Contoh seterusnya, fragments.html, menunjukkan penggunaan ketiga-tiga cara. Templat Thymeleaf ini menambah serpihan di kepala dan badan dokumen:
Thymeleaf Fragments: home Go to the next page to see fragments in action
Sekarang, mari kita lihat halaman yang menyimpan beberapa serpihan. Ia dipanggil general.html , dan seperti keseluruhan halaman dengan beberapa bahagian ditakrifkan sebagai fragmen yang siap digunakan:
Go to the next page to see fragments in action
This is a sidebar This is another sidebar Fragments Index | Markup inclussion | Fragment params | Other The bahagian hanya mengandungi gaya gaya, tetapi kami dapat menggunakan alat lain seperti Bootstrap, jQuery, atau Foundation, baik secara langsung atau menggunakan Webjars.
Perhatikan bahawa semua tag yang boleh digunakan semula templat ini mempunyai atribut th: fragment , tetapi seterusnya kita akan melihat cara memasukkan bahagian lain dari halaman.
Setelah penyertaan rendering dan fragmen, kandungan yang dikembalikan adalah:
Thymeleaf Fragments: home Go to the next page to see fragments in action
Fragments Index | Markup inclussion | Fragment params | Other 4.2. Pemilih Markah untuk Fragmen
Salah satu perkara hebat mengenai Thymeleaf Fragments adalah bahawa kita juga dapat merebut mana-mana bahagian templat hanya dengan menggunakan pemilih sederhana , melalui kelas, id, atau hanya dengan tag.
Halaman ini, misalnya, merangkumi beberapa komponen dari fail general.html : blok samping dan blok div.another :
4.3. Pecahan Parametri
Kita boleh menyampaikan parameter ke aserpihan untuk mengubah beberapa bahagian tertentu daripadanya. Untuk melakukan itu, fragmen mesti didefinisikan sebagai fungsi panggilan, di mana kita mesti menyatakan senarai parameter.
Dalam contoh ini, kami menentukan fragmen untuk medan bentuk generik:
Field Dan inilah penggunaan mudah fragmen tersebut di mana kami menyampaikan parameter kepadanya:
Dan ini adalah bagaimana medan yang dikembalikan akan kelihatan:
Name 4.4. Ungkapan Penyertaan Fragmen
Fragmen thymeleaf menawarkan pilihan menarik lain seperti sokongan untuk ungkapan bersyarat untuk menentukan sama ada menyertakan fragmen .
Dengan menggunakan operator Elvis dengan salah satu ungkapan yang diberikan oleh Thymeleaf (contohnya keselamatan, rentetan, dan koleksi), kami dapat memuatkan serpihan yang berbeza.
Sebagai contoh, kita dapat menentukan fragmen ini dengan beberapa kandungan yang akan kita tunjukkan bergantung pada keadaan tertentu. Ini mungkin fail yang mengandungi pelbagai jenis blok:
Data received No data Dan ini adalah bagaimana kita dapat memuatkannya dengan ungkapan:
0} ? ~{fragments/menus.html :: dataPresent} : ~{fragments/menus.html :: noData}">Untuk mengetahui lebih lanjut mengenai Thymeleaf Expressions, lihat artikel kami di sini.
4.5. Susun atur Fleksibel
Contoh seterusnya juga menunjukkan dua penggunaan serpihan lain yang menarik untuk membuat jadual dengan data . Ini adalah pecahan meja yang dapat digunakan kembali, dengan dua bahagian penting: tajuk meja yang dapat diubah, dan isi tempat data diberikan:
0
Name
When we want to use this table, we can pass our own table header using the fields function. The header is referenced with the class myFields. The table body is loaded by passing data as a parameter to the tableBody function:
Id
Name
And this is how the final page will look:
Data received
Id
Name
1001
John Smith
1002
Jane Williams
Fragments Index | Markup inclussion | Fragment params | Other 5. Conclusion
In this article, we've shown how to reuse view components through the use of Thymeleaf Fragments, a powerful tool that can make template management easier.
We have also presented some other interesting features that go beyond the basics. We should take these into account when choosing Thymeleaf as our view rendering engine.
If you want to learn about other Thymeleaf features, you should definitely take a look at our article about Layout Dialects.
Seperti biasa, kod pelaksanaan lengkap contoh boleh didapati di GitHub.