Pengenalan WebJars

1. Gambaran keseluruhan

Tutorial ini memperkenalkan WebJars dan cara menggunakannya dalam aplikasi Java.

Ringkasnya, WebJars adalah kebergantungan sisi pelanggan yang dikemas ke dalam fail arkib JAR. Mereka berfungsi dengan kebanyakan kontena dan kerangka web JVM.

Berikut adalah beberapa WebJars yang popular: Twitter Bootstrap , jQuery , Angular JS , Chart.js dll; senarai lengkap boleh didapati di laman web rasmi.

2. Mengapa Menggunakan WebJars?

Soalan ini mempunyai jawapan yang sangat mudah - kerana senang.

Menambah dan mengurus kebergantungan sisi pelanggan secara manual sering menyebabkan sukar untuk mengekalkan pangkalan data .

Juga, kebanyakan pembangun Java lebih suka menggunakan Maven dan Gradle sebagai alat pengurusan binaan dan pergantungan.

Masalah utama yang diselesaikan oleh WebJars ialah menjadikan kebergantungan sisi pelanggan tersedia di Maven Central dan boleh digunakan dalam mana-mana projek Maven standard.

Berikut adalah beberapa kelebihan WebJars yang menarik:

  1. Kami dapat menguruskan kebergantungan sisi pelanggan secara eksplisit dan mudah dalam aplikasi web berasaskan JVM
  2. Kami dapat menggunakannya dengan alat binaan yang biasa digunakan, misalnya: Maven, Gradle, dll
  3. WebJars berkelakuan seperti kebergantungan Maven lain - yang bermaksud bahawa kita juga mendapat pergantungan transitif

3. Ketergantungan Maven

Mari masuk ke dalamnya dan tambahkan Twitter Bootstrap dan jQuery ke pom.xml :

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Kini Twitter Bootstrap dan jQuery tersedia di classpath projek; kita hanya boleh merujuknya dan menggunakannya dalam aplikasi kita.

Catatan: Anda boleh menyemak versi terbaru Twitter Bootstrap dan kebergantungan jQuery di Maven Central.

4. Aplikasi Mudah

Dengan kedua-dua kebergantungan WebJar ini, mari kita siapkan projek Spring MVC sederhana untuk dapat menggunakan kebergantungan sisi pelanggan.

Sebelum kita sampai ke sana, penting untuk memahami bahawa WebJars tidak ada kaitan dengan Spring , dan kami hanya menggunakan Spring di sini kerana ini adalah cara yang sangat cepat dan mudah untuk menyiapkan projek MVC.

Inilah tempat yang baik untuk mula menyiapkan projek Spring MVC dan Spring Boot.

Dan, dengan penyediaan projet yang mudah, kami akan menentukan beberapa pemetaan untuk kebergantungan pelanggan baru kami:

@Configuration @EnableWebMvc public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/"); } }

Kita tentu boleh melakukannya melalui XML juga:

5. Ketergantungan Versi-Agnostik

Apabila menggunakan Spring Framework versi 4.2 atau yang lebih tinggi, secara automatik akan mengesan perpustakaan pencari webjars di classpath dan menggunakannya untuk menyelesaikan versi aset WebJars secara automatik.

Untuk mengaktifkan ciri ini, kami akan menambahkan pustaka webjars-locator sebagai pergantungan aplikasi:

 org.webjars webjars-locator 0.30 

Dalam kes ini, kita dapat merujuk aset WebJars tanpa menggunakan versi; lihat bahagian seterusnya untuk beberapa contoh sebenar.

6. WebJars pada Pelanggan

Mari tambahkan halaman selamat datang HTML biasa ke aplikasi kami (ini adalah index.html ):

 WebJars Demo 

Sekarang kita boleh menggunakan Twitter Bootstrap dan jQuery dalam projek - mari kita gunakan kedua-duanya di halaman selamat datang, bermula dengan Bootstrap:

Untuk pendekatan versi-agnostik:

Tambah jQuery:

Dan pendekatan versi-agnostik:

7. Menguji

Setelah kami menambah Twitter Bootstrap dan jQuery di halaman HTML kami, mari kita mengujinya.

Kami akan menambahkan amaran bootstrap ke halaman kami:

Success! It is working as we expected.

Perhatikan bahawa beberapa pemahaman asas mengenai Twitter Bootstrap diandaikan di sini; berikut adalah panduan memulakan pegawai rasmi.

Ini akan menunjukkan amaran seperti yang ditunjukkan di bawah ini, yang bermaksud kita berjaya menambahkan Twitter Bootstrap ke classpath kita.

Mari gunakan jQuery sekarang. Kami akan menambah butang tutup pada amaran ini:

× 

Sekarang kita perlu menambahkan jQuery dan bootstrap.min.js untuk fungsi butang tutup, jadi tambahkannya di dalam tag badan index.html, seperti di bawah:

Note: If you are using version-agnostic approach, be sure to remove only the version from the path, otherwise, relative imports may not work:

This is how our final welcome page should look like:

 WebJars Demo

× Success! It is working as we expected.

This is how the application should look like. (And the alert should disappear when clicking the close button.)

8. Conclusion

In this quick article, we focused on the basics of using WebJars in a JVM-based project, which makes development and maintenance a lot easier.

We implemented a Spring Boot backed project and used Twitter Bootstrap and jQuery in our project using WebJars.

The source code of the above-used example can be found in the Github project – this is a Maven project, so it should be easy to import and build.