Lego tutorial Az alábbiakban a Lego készletek című feladat megoldását fogom részletezni. A kék infoboxokban a feladat eredeti szövegei találhatóak, alattuk pedig a kifejtés, hogy hogyan kell megoldani. Ezt követően minden nagyobb egység alatt, a zöld lenyitható dobozokban látható a teljes fájl kódja. Útvonalak Készítse el a következő útvonalakat: Útvonal neve Komponens Url Paraméterek home index.vue / set sets/[id].vue /sets/:id id : A készlet azonosítója create-set sets/create.vue /sets/create < template > < BaseLayout > < h1 class = "text-6xl my-10" >Hello! 👋 < script > import BaseLayout from "@layouts/BaseLayout.vue" export default { components: { BaseLayout } } < route lang = "yaml" > name: home < template > < BaseLayout > < script > import BaseLayout from "@layouts/BaseLayout.vue" export default { components: { BaseLayout } } < route lang = "yaml" > name: set < template > < BaseLayout > < script > import BaseLayout from "@layouts/BaseLayout.vue" export default { components: { BaseLayout } } < route lang = "yaml" > name: create-set Tárolók ThemeStore Bővítse ki a stores/ThemeStore.js fájlban található tárolót egy themes állapottal. Készítse el az alábbi függvényeket: state () { return { themes: [] } }, getThemes() : Kérje le az összes témát a Backendben elkészült végpontról és tárolja el az előbbi állapotban. import { http } from "@utils/http" actions : { async getThemes () { const response = await http. get ( `themes` ) this .themes = response.data.data }, }, getTheme(id) : Azonosító alapján kérjen le egy témát és adja vissza. async getTheme (id) { const response = await http. get ( `themes/${ id }` ) return response.data.data }, A @stores/ThemeStore.mjs teljes tartalma... import { defineStore } from 'pinia' import { http } from '@utils/http' export const useThemeStore = defineStore ( 'theme-store' , { state () { return { themes: [] } }, actions: { async getThemes () { const response = await http. get ( `themes` ) this .themes = response.data.data }, async getTheme ( id ) { const response = await http. get ( `themes/${ id }` ) return response.data.data }, }, getters: { themeOptions () { const options = {} for ( const theme of this .themes) { options[theme.id] = theme.name } return options } } }) SetStore Készítsen tárolót SetStore néven, amely tartalmaz egy sets állapotot. Készítse el az alábbi függvényeket Hozzuk létre az src/stores mappában a SetStore.mjs fájlt, és készítsük el a tárolót az alábbi módon. Figyeljünk oda rá, hogy a state() függvény esetén, mindig térjünk vissza magával az állapottal, különben nem fog helyesen működni a tároló! import { defineStore } from "pinia" export const useSetStore = defineStore ( 'set-store' ,{ state (){ return { sets:[] } }, }) getSets() : Kérje le az összes készletet a Backendben elkészült végpontról és tárolja el az előbbi állapotban import { http } from '@utils/http' actions :{ async getSets (){ const response = await http. get ( `sets` ) this .sets = response.data.data }, } getSet(id) : Azonosító alapján kérjen le egy készletet és adja vissza. async getSet (id){ const response = await http. get ( `sets/${ id }` ) return response.data.data }, createSet(data) : Töltse fel a Backend megfelelő végpontjára a paraméterként kapott adatot. async createSet (data){ const response = await http. post ( `sets` ,data) this .sets. push (response.data.data) } A @stores/SetStore.mjs teljes tartalma... import { defineStore } from 'pinia' import { http } from '@utils/http' export const useSetStore = defineStore ( 'set-store' ,{ state (){ return { sets:[] } }, actions:{ async getSets (){ const response = await http. get ( `sets` ) this .sets = response.data.data }, async getSet ( id ){ const response = await http. get ( `sets/${ id }` ) return response.data.data }, async createSet ( data ){ const response = await http. post ( `sets` ,data) this .sets. push (response.data.data) } } }) Komponensek BaseTable Készítsen csíkozott táblázatot amber-100 és orange-100 színekkel, amely a következő oszlopokat tartalmazza rendre: Név, Korosztály, Elemszám, Értékelés, Ár Hozzuk létre először is magát a komponents a components mappában BaseTable.vue néven és adjuk meg az alap tag-eket hozzá. < template > < script > Ezt követően a

Frontend Programozás