Dalam   , saya meletakkan asas untuk membina; sekarang adalah masa untuk memulakan "sebenarnya". catatan saya sebelum ini  Saya mendengar banyak   . Selain itu, rakan yang beralih daripada pembangun kepada pengurus memberitahu saya perkara yang baik tentang Vue, yang seterusnya menarik minat saya. Saya memutuskan untuk melihatnya: ia akan menjadi rangka kerja JavaScript "ringan" pertama yang akan saya kaji - dari sudut pandangan seorang pemula, iaitu saya. Vue.js  Meletakkan kerja  Saya menerangkan WebJars dan Thymeleaf dalam jawatan terakhir. Berikut ialah persediaan, bahagian pelayan dan pelanggan.  Bahagian pelayan  Inilah cara saya mengintegrasikan kedua-duanya dalam POM:   <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId>  </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId>  </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId>  <version>0.52</version> </dependency> <dependency> <groupId>org.webjars.npm</groupId> <artifactId>vue</artifactId>  <version>3.4.34</version> </dependency> </dependencies>  Spring Boot itu sendiri; Saya memutuskan pendekatan biasa, tidak reaktif  Penyepaduan Spring Boot Thymeleaf  WebJars locator, untuk mengelak daripada menentukan versi Vue pada bahagian klien  Vue, akhirnya!  Saya menggunakan Penghala Kotlin dan DSL Bean pada bahagian Spring Boot:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }  Lulus senarai statik objek  Todo  Lihat di bawah  Hantar model kepada Thymeleaf  Jika anda biasa membangunkan API, anda sudah biasa dengan fungsi   ; ia mengembalikan muatan secara langsung, mungkin dalam format JSON.   menghantar aliran ke teknologi paparan, dalam kes ini, Thymeleaf. Ia menerima dua parameter: body() render()  Nama pandangan. Secara lalai, laluannya ialah   dan awalan ialah   ; dalam kes ini, Thymeleaf menjangkakan paparan di  /templates .html /templates/vue.html  Peta model pasangan nilai kunci  Pihak pelanggan  Berikut ialah kod di sebelah HTML:   <script th:src="@{/webjars/axios/dist/axios.js}" src="https://cdn.jsdelivr.net/npm/axios@1.7/dist/axios.min.js"></script>  <script th:src="@{/webjars/vue/dist/vue.global.js}" src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>  <script th:src="@{/vue.js}" src="../static/vue.js"></script>  <script th:inline="javascript"> /*<![CDATA[*/ window.vueData = {  title: /*[[${ title }]]*/ 'A Title', todos: /*[[${ todos }]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }] }; /*]]>*/ </script>    membantu membuat permintaan HTTP Axios  Vue sendiri  Kod pihak pelanggan kami  Tetapkan data  Seperti yang dijelaskan dalam artikel minggu lepas, salah satu faedah Thymeleaf ialah ia membenarkan pemaparan fail statik dan pemaparan sebelah pelayan. Untuk membuat keajaiban berfungsi, saya menentukan laluan sisi klien,   ,   dan laluan sisi pelayan,   ,   .  iaitu src iaitu th:src  Kod Vue  Sekarang, mari kita selami kod Vue.  Kami ingin melaksanakan beberapa ciri:  Selepas halaman dimuatkan, halaman harus memaparkan semua item  Todo  Apabila mengklik pada kotak semak   complete, ia harus menetapkan/menyahset atribut  Todo completed  Apabila mengklik pada butang   , ia memadam semua   yang telah selesai Pembersihan Todo  Apabila mengklik pada butang   , ia harus menambah   ke senarai   dengan nilai berikut: Tambah Todo Todo    : ID pengiraan sebelah pelayan sebagai maksimum semua ID lain tambah 1 id    : nilai medan   untuk  label Label label    : ditetapkan kepada  completed false  Langkah pertama kami ke Vue  Langkah pertama ialah bootstrap rangka kerja. Kami telah menyediakan rujukan untuk fail   tersuai kami di atas. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  Jalankan blok apabila DOM telah selesai dimuatkan  Langkah seterusnya ialah membenarkan Vue mengurus sebahagian halaman. Dari segi HTML, kita mesti memutuskan bahagian peringkat teratas yang Vue uruskan. Kita boleh memilih   sewenang-wenangnya dan mengubahnya kemudian jika perlu. <div>   <div id="app"> </div>  Di sisi JavaScript, kami mencipta   , melepasi pemilih CSS bagi HTML sebelumnya   . apl <div>   Vue.createApp({}).mount('#app');  Pada ketika ini, kami melancarkan Vue apabila halaman dimuatkan, tetapi tiada apa yang kelihatan berlaku.  Langkah seterusnya ialah membuat   Vue . Templat Vue ialah   HTML biasa yang diuruskan oleh Vue. Anda boleh menentukan Vue dalam Javascript, tetapi saya lebih suka melakukannya pada halaman HTML. templat <template>  Mari kita mulakan dengan templat akar yang boleh memaparkan tajuk.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Tetapkan ID agar mudah diikat  Gunakan harta   ; ia masih perlu disediakan title  Di sisi JavaScript, kita mesti mencipta kod pengurusan.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  Isytiharkan harta   , yang digunakan dalam templat HTML title  Akhir sekali, kita mesti lulus objek ini apabila kita mencipta aplikasi:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Konfigurasikan komponen  Vue menjangkakan fungsi  render()    untuk   mencipta nod maya daripada objek dan sifatnya h() hiperskrip  Mulakan sifat   dengan bahagian pelayan yang dijana nilai title  Pada ketika ini, Vue memaparkan tajuk.  Interaksi asas  Pada ketika ini, kami boleh melaksanakan tindakan apabila pengguna mengklik pada kotak pilihan: ia perlu dikemas kini dalam keadaan sebelah pelayan.  Mula-mula, saya menambah templat Vue bersarang baharu untuk jadual yang memaparkan   . Untuk mengelak daripada memanjangkan siaran, saya akan mengelak daripada menerangkannya secara terperinci. Jika anda berminat, sila lihat   . Todo kod sumber  Berikut ialah kod templat baris permulaan, masing-masing JavaScript dan HTML:   const TodoLine = { props: ['todo'], template: document.getElementById('todo-line').innerHTML }   <template id="todo-line"> <tr> <td>{{ todo.id }}</td>  <td>{{ todo.label }}</td>  <td> <label> <input type="checkbox" :checked="todo.completed" /> </label> </td> </tr> </template>  Paparkan id  Todo  Paparkan label  Todo  Tandai kotak jika atribut   adalah  completed true  Vue membenarkan pengendalian acara melalui sintaks   . @   <input type="checkbox" :checked="todo.completed" @click="check" />  Vue memanggil fungsi   templat apabila pengguna mengklik pada baris. Kami mentakrifkan fungsi ini dalam parameter   : check() setup()   const TodoLine = { props: ['todo'], template: document.getElementById('todo-line').innerHTML, setup(props) { //1 const check = function (event) { //2 const { todo } = props axios.patch( //3 `/api/todo/${todo.id}`, //4 { checked: event.target.checked } //5 ) } return { check } //6 } }  Terima tatasusunan   , supaya kami boleh mengaksesnya kemudian props  Vue melepasi   yang mencetuskan panggilan event  Axios ialah lib JavaScript yang memudahkan panggilan HTTP  Bahagian pelayan   menyediakan API; ia di luar skop siaran ini, tetapi jangan ragu untuk menyemak kod sumber. mesti  Muatan JSON  Kami mengembalikan semua fungsi yang ditentukan untuk menjadikannya boleh diakses daripada HTML  Model sisi pelanggan  Dalam bahagian sebelumnya, saya membuat dua kesilapan:  Saya tidak menguruskan mana-mana model tempatan  Saya tidak menggunakan kaedah panggilan respons HTTP  Kami akan melakukannya dengan melaksanakan ciri seterusnya, iaitu pembersihan tugasan yang telah selesai.  Kami kini tahu cara mengendalikan acara melalui Vue:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>  Pada objek   , kami menambah fungsi dengan nama yang sama: TodosApp   const TodosApp = { props: ['title', 'todos'], components: { TodoLine }, template: document.getElementById('todos-app').innerHTML, setup() { const cleanup = function() { //1 axios.delete('/api/todo:cleanup').then(response => { //1 state.value.todos = response.data //2-3 }) } return { cleanup } //1 } }  Seperti di atas  Axios menawarkan penukaran JSON automatik bagi panggilan HTTP    adalah tempat kami menyimpan  state model  Dalam semantik Vue, model Vue ialah pembalut di sekeliling data yang kita mahu   . Reaktif bermaksud pengikatan dua hala antara pandangan dan model. Kita boleh membuat nilai sedia ada reaktif dengan menghantarnya ke kaedah   : reaktif ref()  Dalam API Komposisi, cara yang disyorkan untuk mengisytiharkan keadaan reaktif adalah menggunakan fungsi   . ref()    mengambil hujah dan mengembalikannya dibalut dalam objek ref dengan sifat .value. ref()  Untuk mengakses rujukan dalam templat komponen, isytiharkan dan kembalikannya daripada fungsi   komponen. setup()  --  Mengisytiharkan Keadaan Reaktif  Jom buat:   const state = ref({ title: window.vueData.title, //1-2 todos: window.vueData.todos, //1 }) createApp({ components: { TodosApp }, setup() { return { ...state.value } //3-4 }, render() { return h(TodosApp, { todos: state.value.todos, //5 title: state.value.title, //5 }) } }).mount('#app');  Dapatkan set data dalam halaman HTML, melalui Thymeleaf, seperti yang dijelaskan di atas  Kami mengubah cara kami menetapkan   . Ia tidak perlu kerana tiada pengikatan dua hala - kami tidak mengemas kini tajuk bahagian klien, tetapi saya lebih suka mengekalkan pengendalian yang koheren merentas semua nilai title  Kembalikan rujukan, mengikut jangkaan Vue  Lihat, ma, saya menggunakan operator spread JavaScript  Konfigurasikan objek yang diatributkan daripada  state  Pada ketika ini, kami mempunyai model sisi pelanggan   . yang reaktif  Di bahagian HTML, kami menggunakan atribut Vue yang berkaitan:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>  Gelung pada senarai objek  Todo  Atribut   adalah penting untuk mengatasi cara pelayar menghuraikan HTML. Lihat   untuk butiran lanjut is dokumentasi Vue  Saya telah menerangkan templat yang sepadan di atas.  Mengemas kini model  Kami kini boleh melaksanakan ciri baharu: tambah   baharu daripada klien. Apabila mengklik pada butang   , kami membaca nilai medan   , menghantar data ke API, dan menyegarkan model dengan respons. Todo Tambah Label  Berikut ialah kod yang dikemas kini:   const TodosApp = { props: ['title', 'todos'], components: { TodoLine }, template: document.getElementById('todos-app').innerHTML, setup() { const label = ref('') //1 const create = function() { //2 axios.post('/api/todo', { label: label.value }).then(response => { state.value.todos.push(response.data) //3 }).then(() => { label.value = '' //4 }) } const cleanup = function() { axios.delete('/api/todo:cleanup').then(response => { state.value.todos = response.data //5 }) } return { label, create, cleanup } } }  Buat pembalut reaktif di sekeliling tajuk yang skopnya terhad kepada fungsi  Fungsi   betul create()  Tambahkan objek JSON baharu yang dikembalikan oleh panggilan API ke senarai  Todo  Tetapkan semula nilai medan  Gantikan keseluruhan senarai apabila memadam; mekanismenya adalah sama  Di sebelah HTML, kami menambah butang dan mengikat kepada fungsi   . Begitu juga, kami menambah medan   dan mengikatnya pada model. create() Label   <form> <div class="form-group row"> <label for="new-todo-label" class="col-auto col-form-label">New task</label> <div class="col-10"> <input type="text" id="new-todo-label" placeholder="Label" class="form-control" v-model="label" /> </div> <div class="col-auto"> <button type="button" class="btn btn-success" @click="create">Add</button> </div> </div> </form>  Vue mengikat fungsi   pada butang HTML. Ia memanggilnya secara tidak segerak dan menyegarkan senarai   reaktif dengan item baharu yang dikembalikan melalui panggilan. Kami melakukan perkara yang sama untuk butang   , untuk mengalih keluar objek   yang diperiksa. create() Todo Pembersihan Todo  Ambil perhatian bahawa saya tidak sengaja melaksanakan sebarang kod pengendalian ralat untuk mengelakkan membuat kod lebih kompleks daripada yang diperlukan. Saya akan berhenti di sini kerana kami memperoleh cukup cerapan untuk pengalaman pertama.  Kesimpulan  Dalam siaran ini, saya mengambil langkah pertama saya dalam menambah apl SSR dengan Vue. Ia agak mudah. Isu terbesar yang saya temui ialah untuk Vue menggantikan templat baris: Saya tidak membaca dokumentasi secara meluas dan terlepas atribut   . is  Walau bagaimanapun, saya terpaksa menulis beberapa baris JavaScript, walaupun saya menggunakan Axios untuk membantu saya dengan panggilan HTTP dan tidak menguruskan ralat.  Dalam siaran seterusnya, saya akan melaksanakan ciri yang sama dengan Alpine.js.  Kod sumber lengkap untuk siaran ini boleh didapati di GitHub:   https://github.com/ajavageek/compare-frontends?embedable=true   Pergi lebih jauh:   Vue.js

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Audio ini dihasilkan dalam bahasa asal cerita!

Menambah Pelanggan Dengan Vue.js

About Author

KOMEN

GANTUNG TANDA

ARTIKEL INI DIBENTANGKAN DALAM

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps