мен негізін салуға негіз салдым; енді «шынайы үшін» басталатын уақыт. Алдыңғы жазбамда  Мен   көп естідім. Сонымен қатар, әзірлеушіден менеджерге ауысқан досым маған Vue туралы жақсы нәрселер айтты, бұл менің қызығушылығымды арттырды. Мен оны қарап шығуды шештім: бұл мен зерттейтін бірінші «жеңіл» JavaScript құрылымы болады - мен жаңадан келген адам тұрғысынан. Vue.js  Жұмысты орналастыру  Мен соңғы постта WebJars және Thymeleaf түсіндірдім. Мұнда орнату, сервер және клиент жағы.  Сервер жағы  Міне, мен екеуін де 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 өзі; Мен тұрақты, реактивті емес тәсілді шештім  Spring Boot Thymeleaf интеграциясы  Клиент жағында Vue нұсқасын көрсетпеу үшін WebJars локаторы  Vue, ақырында!  Мен Spring Boot жағында Kotlin Router және Bean DSL пайдаланамын:   fun vue(todos: List<Todo>) = router { //1 GET("/vue") { ok().render("vue", mapOf("title" to "Vue.js", "todos" to todos)) //2-3 } }    нысандарының статикалық тізімін өткізіңіз Todo  Төменде қараңыз  Үлгіні Thymeleaf-ке беріңіз  Егер сіз API әзірлеуге үйренген болсаңыз,   функциясымен таныссыз; ол пайдалы жүктемені тікелей қайтарады, мүмкін JSON пішімінде.   ағынды көру технологиясына береді, бұл жағдайда Thymeleaf. Ол екі параметрді қабылдайды: body() render()  Көрініс атауы. Әдепкі бойынша, жол   және префикс   ; бұл жағдайда Thymeleaf   мекенжайында көрініс күтеді /templates .html /templates/vue.html  Кілт-мән жұптарының үлгі картасы  Клиенттік  Міне, 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>    HTTP сұрауларын жасауға көмектеседі Axios  Vue өзі  Біздің клиенттік код  Деректерді орнатыңыз  Өткен аптадағы мақалада түсіндірілгендей, Thymeleaf артықшылықтарының бірі - ол статикалық файлдарды көрсетуге де, серверлік көрсетуге де мүмкіндік береді. Сиқырлы жұмыс істеу үшін мен клиенттік жолды,     және серверлік жолды,     жолын көрсетемін.  яғни src яғни th:src  Vue коды  Енді Vue кодын қарастырайық.  Біз бірнеше мүмкіндіктерді іске асырғымыз келеді:  Бет жүктелгеннен кейін бет барлық   элементтерін көрсетуі керек Todo    орындалған құсбелгіні басқан кезде, ол   төлсипатты орнату/өшіру керек Todo completed    түймесін басқан кезде, ол барлық аяқталған   жояды «Тазалау» Todo    түймешігін басқан кезде, ол келесі мәндері бар   тізіміне   қосуы керек: Қосу Todo Todo    : барлық басқа идентификаторлардың максимумы ретінде сервер тарапынан есептелген идентификатор плюс 1 id    :   арналған   өрісінің мәні label label Белгі    :   мәніне орнатылды completed false  Vue-ге алғашқы қадамдарымыз  Бірінші қадам - фреймворкті жүктеу. Жоғарыдағы пайдаланушы   файлы үшін сілтемені орнатып қойғанбыз. vue.js   document.addEventListener('DOMContentLoaded', () => { //1 // The next JavaScript code snippets will be inside the block }  DOM жүктеуді аяқтаған кезде блокты іске қосыңыз  Келесі қадам - Vue-ге беттің бір бөлігін басқаруға мүмкіндік беру. HTML жағында біз Vue жоғарғы деңгейдің қай бөлігін басқаратынын шешуіміз керек. Біз ерікті   таңдай аламыз және қажет болса, оны кейінірек өзгерте аламыз. <div>   <div id="app"> </div>  JavaScript жағында біз алдыңғы HTML   CSS селекторын өткізіп,   жасаймыз. <div> қолданба   Vue.createApp({}).mount('#app');  Осы сәтте біз бет жүктелген кезде Vue іске қосамыз, бірақ көрінетін ештеңе болмайды.  Келесі қадам Vue   жасау болып табылады. Vue үлгісі — Vue басқаратын кәдімгі HTML   . Сіз Javascript-те Vue-ді анықтай аласыз, бірақ мен оны HTML бетінде жасағанды қалаймын. үлгісін <template>  Тақырыпты көрсете алатын түбірлік үлгіден бастайық.   <template id="todos-app">  <h1>{{ title }}</h1>  </template>  Оңай байлау үшін идентификаторды орнатыңыз    қасиетін пайдаланыңыз; орнату керек title  JavaScript жағында біз басқару кодын жасауымыз керек.   const TodosApp = { props: ['title'], //1 template: document.getElementById('todos-app').innerHTML, }  HTML үлгісінде қолданылатын   сипатын жариялаңыз title  Соңында, біз қолданбаны жасаған кезде осы нысанды өткізуіміз керек:   Vue.createApp({ components: { TodosApp }, //1 render() { //2 return Vue.h(TodosApp, { //3 title: window.vueData.title, //4 }) } }).mount('#app');  Құрамдас бөлікті конфигурациялаңыз  Vue   функциясын күтеді render()      үшін объект пен оның қасиеттерінен виртуалды түйін жасайды h() гиперскрипт  Сервер жағында жасалған мәнмен   сипатын инициализациялаңыз title  Осы кезде Vue тақырыпты көрсетеді.  Негізгі өзара әрекеттесулер  Осы сәтте пайдаланушы құсбелгіні басқанда әрекетті орындай аламыз: оны серверлік күйде жаңарту қажет.  Біріншіден, мен   көрсететін кесте үшін жаңа кірістірілген Vue үлгісін қостым. Жазбаны ұзартпау үшін мен оны егжей-тегжейлі сипаттаудан аулақ боламын. Егер сізді қызықтырса,   қараңыз. Todo бастапқы кодты  Міне, бастапқы жол үлгісінің коды, сәйкесінше JavaScript және 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>    идентификаторын көрсетіңіз Todo    белгісін көрсетіңіз Todo    төлсипаты   болса, құсбелгіні қойыңыз completed true  Vue оқиғаны   синтаксисі арқылы өңдеуге мүмкіндік береді. @   <input type="checkbox" :checked="todo.completed" @click="check" />  Пайдаланушы желіні басқан кезде Vue шаблонның   функциясын шақырады. Бұл функцияны   параметрінде анықтаймыз: 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 } }  Кейінірек оған қол жеткізуіміз үшін   массивін қабылдаңыз props  Vue қоңырауды тудырған   өтеді event  Axios — HTTP қоңырауларын жеңілдететін JavaScript lib  Сервер жағы API қамтамасыз етуі   ; бұл осы жазбаның ауқымынан тыс, бірақ бастапқы кодты тексеріңіз. керек  JSON пайдалы жүктемесі  Біз барлық анықталған функцияларды HTML арқылы қолжетімді ету үшін қайтарамыз  Клиенттік модель  Алдыңғы бөлімде мен екі қате жібердім:  Мен ешқандай жергілікті модельді басқармадым  Мен HTTP жауабының қоңырау әдісін пайдаланбадым  Біз мұны келесі мүмкіндікті, яғни аяқталған тапсырмаларды тазалау арқылы орындаймыз.  Біз енді Vue арқылы оқиғаларды қалай өңдеу керектігін білеміз:   <button class="btn btn-warning" @click="cleanup">Cleanup</button>    нысанында біз аттас функцияны қосамыз: 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 } }  Жоғарыдағыдай  Axios HTTP қоңырауының автоматтандырылған JSON түрлендіруін ұсынады    - біз   сақтайтын жер state үлгіні  Vue семантикасында Vue үлгісі - біз   болғымыз келетін деректердің айналасындағы орауыш. Реактивті көрініс пен модель арасындағы екі жақты байланысты білдіреді. Біз бар мәнді   әдісіне беру арқылы реактивті ете аламыз: реактивті ref()  Composition API ішінде реактивті күйді жариялаудың ұсынылатын жолы   функциясын пайдалану болып табылады. ref()    аргументті қабылдайды және оны .value сипаты бар ref нысанына оралған күйде қайтарады. ref()  Компонент үлгісіндегі сілтемелерге қол жеткізу үшін оларды құрамдастың   функциясынан жариялаңыз және қайтарыңыз. setup()  --  Реактивті күйді жариялау  Қанекей мынаны істейік:   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');  Жоғарыда түсіндірілгендей, Thymeleaf арқылы HTML бетіндегі деректер жинағын алыңыз  Біз   орнату жолын өзгертеміз. Бұл қажет емес, өйткені екі жақты байланыстыру жоқ - біз клиенттік тақырыпты жаңартпаймыз, бірақ мен өңдеуді барлық мәндер бойынша когерентті сақтауды қалаймын title  Vue күткендегідей рефлектерді қайтарыңыз  Қараңызшы, ана, мен JavaScript тарату операторын пайдаланып жатырмын    атрибутталған нысанды теңшеңіз state  Осы кезде бізде   клиенттік үлгі бар. реактивті  HTML жағында біз сәйкес Vue атрибуттарын қолданамыз:   <tbody> <tr is="vue:todo-line" v-for="todo in todos" :key="todo.id" :todo="todo"></tr>  </tbody>    нысандарының тізімін айналдырыңыз Todo    атрибуты браузердің HTML талдау әдісімен күресу үшін өте маңызды. Қосымша мәліметтер алу үшін   қараңыз is Vue құжаттамасын  Мен жоғарыда сәйкес үлгіні сипаттадым.  Модельді жаңарту  Енді біз жаңа мүмкіндікті іске асыра аламыз: клиенттен жаңа   қосыңыз.   түймешігін басқан кезде біз   өрісінің мәнін оқимыз, деректерді API-ге жібереміз және модельді жауаппен жаңартамыз. Todo Қосу Label  Мұнда жаңартылған код:   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 } } }  Ауқымы функциямен шектелген тақырыптың айналасында реактивті қаптама жасаңыз    функциясы дұрыс create()  API шақыруы арқылы қайтарылған жаңа JSON нысанын   тізіміне қосыңыз Todo  Өрістің мәнін қалпына келтіріңіз  Жою кезінде бүкіл тізімді ауыстырыңыз; механизмі бірдей  HTML жағында біз түймені қосамыз және   функциясына байланыстырамыз. Сол сияқты, біз   өрісін қосып, оны үлгіге байланыстырамыз. 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   функциясын HTML түймешігімен байланыстырады. Ол оны асинхронды түрде шақырады және қоңырау арқылы қайтарылған жаңа элементпен реактивті   тізімін жаңартады. Белгіленген   нысандарын жою үшін   түймесі үшін де солай істейміз. create() Todo Todo «Тазалау»  Кодты қажет болғаннан күрделірек етпеу үшін қателерді өңдеу кодын әдейі енгізбегенімді ескеріңіз. Мен осы жерде тоқтаймын, өйткені біз бірінші тәжірибе үшін жеткілікті түсінік алдық.  Қорытынды  Бұл постта мен Vue көмегімен SSR қолданбасын кеңейтудегі алғашқы қадамдарымды жасадым. Бұл өте қарапайым болды. Мен кездестірген ең үлкен мәселе Vue желісі үлгісін ауыстыру болды: мен құжаттаманы көп оқымадым және   атрибутын жіберіп алдым. is  Дегенмен, мен HTTP қоңырауларына көмектесу үшін Axios қолданбасын пайдалансам да, қателерді басқармасам да, JavaScript-тің бірнеше жолын жазуға тура келді.  Келесі постта мен Alpine.js бағдарламасымен бірдей мүмкіндіктерді жүзеге асырамын.  Бұл жазбаның толық бастапқы кодын GitHub сайтында табуға болады:   https://github.com/ajavageek/compare-frontends?embedable=true   Әрі қарай жүріңіз:   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

Бұл аудио оқиғаның түпнұсқа тілінде жасалған!

Тым ұзақ; Оқу

Make resilience your competitive advantage

Клиентті Vue.js көмегімен кеңейту

About Author

Пікірлер

ТЕГТЕРДІ АЛУ

БҰЛ МАҚАЛА БАСҚАРҒАН

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps