{"id":230608,"date":"2022-11-30T19:29:00","date_gmt":"2022-11-30T16:29:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230608"},"modified":"2022-11-09T23:10:31","modified_gmt":"2022-11-09T20:10:31","slug":"oliolaehtoeinen-tapa-tyoeskennellae-mallien-ja-verkkosovellusten-kanssa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/oliolaehtoeinen-tapa-tyoeskennellae-mallien-ja-verkkosovellusten-kanssa\/","title":{"rendered":"Oliol\u00e4ht\u00f6inen tapa ty\u00f6skennell\u00e4 mallien ja verkkosovellusten kanssa"},"content":{"rendered":"\n<p>Kun puhumme mallien k\u00e4sitteest\u00e4 olio-ohjelmoinnissa, tarkoitamme yleens\u00e4 luokkaa, joka on esitys tietokantaan tallennetusta tiedosta.<\/p>\n<p>Eli kun tietoja tallennetaan riveihin ja sarakkeisiin, t\u00e4yt\u00e4mme luokan, sen attribuutit ja niin edelleen n\u00e4ill\u00e4 tiedoilla, jotta voimme v\u00e4litt\u00e4\u00e4 sen sovelluksen ymp\u00e4ri, muokata sit\u00e4 tarpeen mukaan ja mahdollisesti sarjoittaa tiedot takaisin tietokantaan.<\/p>\n<p>Mutta verkkosovelluksessa on kohtuullista olettaa, ett\u00e4 mallin on ehk\u00e4 oltava mahdollista k\u00e4ytt\u00f6liittym\u00e4ss\u00e4. Eli kuvittele, ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4n pyynt\u00f6 soittaa palvelimelle, pyyt\u00e4\u00e4 mallia (tai mallistoa) ja render\u00f6i ne sitten k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n<p>Vaikka t\u00e4m\u00e4 viesti ei ole koodisuuntautunut, mielest\u00e4ni kannattaa silti harkita mallin k\u00e4\u00e4nt\u00e4mist\u00e4 palvelimelta ja sen j\u00e4lkeen hahmontamista verkkosovelluksen etup\u00e4\u00e4ss\u00e4.<\/p>\n<h2>Ty\u00f6skentely mallien ja verkkosovellusten kanssa<\/h2>\n<p>Kuvittele hetkeksi, ett\u00e4 sovelluksessasi on ty\u00f6ntekij\u00e4malli. T\u00e4m\u00e4 malli voi sis\u00e4lt\u00e4\u00e4 useita ominaisuuksia, mutta on turvallista olettaa, ett\u00e4 kaikilla ty\u00f6ntekij\u00f6ill\u00e4 on:<\/p>\n<ul>\n<li>etunimi,<\/li>\n<li>sukunimi,<\/li>\n<li>ty\u00f6ntekij\u00e4n henkil\u00f6llisyystodistus,<\/li>\n<li>ja s\u00e4hk\u00f6postiosoite<\/li>\n<\/ul>\n<p>Se, miten n\u00e4m\u00e4 tiedot tallennetaan tietokantaan, ei ole t\u00e4ysin yhdentekev\u00e4\u00e4, mutta se ei ole niin t\u00e4rke\u00e4\u00e4 t\u00e4m\u00e4n keskustelun kannalta.<\/p>\n<p>Esimerkiksi ehk\u00e4 yksi tietue sis\u00e4lt\u00e4\u00e4 kaikki n\u00e4m\u00e4 tiedot tallennettuna JSON-merkkijonoon. Toisaalta, ehk\u00e4 siell\u00e4 on ty\u00f6ntekij\u00e4taulukko, jossa jokainen rivi edustaa ty\u00f6ntekij\u00e4\u00e4, ja sitten jokainen sarake edustaa attribuuttia.<\/p>\n<p>Yksityiskohdat, kuinka tiedot k\u00e4\u00e4nnet\u00e4\u00e4n tietokannasta (tai yleisemmin tietovarastosta) luokkaan, eiv\u00e4t ole yht\u00e4 t\u00e4rkeit\u00e4.<\/p>\n<p>Yleens\u00e4 n\u00e4emme kuitenkin jotain t\u00e4llaista:<\/p>\n<ol>\n<li>On luokka, joka pyyt\u00e4\u00e4 tietoja,<\/li>\n<li>Tiedot v\u00e4litet\u00e4\u00e4n <strong>yksinkertaiselle tehtaalle<\/strong> ,<\/li>\n<li><strong>Simple<\/strong> <strong>Factory<\/strong> instantoi mallin ,<\/li>\n<li>Malli <strong>v\u00e4litet\u00e4\u00e4n<\/strong> sitten sit\u00e4 pyyt\u00e4neelle kolmannen osapuolen luokalle.<\/li>\n<\/ol>\n<p>Kuvan n\u00e4k\u00f6kulmasta voit tarkastella sit\u00e4 n\u00e4in:<\/p>\n<p>T\u00e4st\u00e4 pisteest\u00e4 <strong>mallia<\/strong> siirret\u00e4\u00e4n l\u00e4pi koko sovelluksen. Mutta t\u00e4ss\u00e4 tulee esiin t\u00e4m\u00e4n viestin aloituskohta: Miten <strong>mallin esiintym\u00e4 (tai<\/strong> <strong>mallien<\/strong> kokoelma) v\u00e4litet\u00e4\u00e4n sovelluksen k\u00e4ytt\u00f6liittym\u00e4\u00e4n?<\/p>\n<h2>Web-sovelluksen virtaus<\/h2>\n<p>Yksinkertaisuuden vuoksi oletetaan, ett\u00e4 aiomme k\u00e4ytt\u00e4\u00e4 yht\u00e4 mallia, ja sitten, jos minun pit\u00e4isi tarkastella t\u00e4t\u00e4 konseptia uudelleen koodin n\u00e4k\u00f6kulmasta, voimme sukeltaa hieman enemm\u00e4n.<\/p>\n<p>Verkkosovelluksen yleinen kulku on kuitenkin jotain t\u00e4llaista:<\/p>\n<ol>\n<li>K\u00e4ytt\u00e4j\u00e4 k\u00e4ynnist\u00e4\u00e4 toiminnon, joka pyyt\u00e4\u00e4 mallin esiintym\u00e4\u00e4,<\/li>\n<li>K\u00e4ytt\u00f6liittym\u00e4 soittaa palvelimen p\u00e4\u00e4tepisteeseen,<\/li>\n<li>Palvelin lukee pyynn\u00f6t ja varmistaa, ett\u00e4 ne ovat kelvollisia,<\/li>\n<li>Sitten l\u00e4hett\u00e4\u00e4 mallin esityksen k\u00e4ytt\u00f6liittym\u00e4\u00e4n.<\/li>\n<\/ol>\n<p>Muut kehitt\u00e4j\u00e4t saattavat olla eri mielt\u00e4 (mik\u00e4 on mielest\u00e4ni aina tervetullutta ja keskustelun arvoista), mutta olen huomannut, ett\u00e4 mallin esiintym\u00e4n sarjoittaminen JSON-muotoon helpottaa sen k\u00e4ytt\u00f6\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 JavaScript-toiminnallisuuden vuoksi. liittyy, ahem, JSON.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-163595-61e75570192c9.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-163595-61e75570192c9.png\" alt=\"Oliol\u00e4ht\u00f6inen tapa ty\u00f6skennell\u00e4 mallien ja verkkosovellusten kanssa\" ><\/a><\/p>\n<p>Toisin sanoen:<\/p>\n<ol>\n<li>otamme mallin,<\/li>\n<li>sarjoi se JSONiin,<\/li>\n<li>l\u00e4het\u00e4 se langan yli,<\/li>\n<li>sitten de-sarjoi se k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 JavaScript-esitykseen itsest\u00e4\u00e4n.<\/li>\n<\/ol>\n<p>T\u00e4m\u00e4 antaa meille mahdollisuuden manipuloida sit\u00e4 samalla tavalla kuin palvelinpuolella; kyseess\u00e4 on kuitenkin JavaScript-objekti. Lis\u00e4ksi sen avulla voimme my\u00f6s tehd\u00e4 tiettyj\u00e4 muutoksia ja l\u00e4hett\u00e4\u00e4 tiedot takaisin palvelimelle eri tilassa, josta ne on l\u00e4hetetty.<\/p>\n<p>Viime k\u00e4dess\u00e4 t\u00e4m\u00e4 antaa meille mahdollisuuden tallentaa tiedot takaisin tietokantaan.<\/p>\n<h2>Korkean tason n\u00e4k\u00f6kulma<\/h2>\n<p>Ja se on korkean tason elinkaari tiedon siirt\u00e4misess\u00e4 tietokannasta malliin k\u00e4ytt\u00f6liittym\u00e4\u00e4n ja takaisin.<\/p>\n<p>Usein kuitenkin auttaa t\u00e4m\u00e4n n\u00e4keminen koodissa, joten ehk\u00e4 tulevassa postauksessa annan joukon artikkeleita, jotka voivat k\u00e4yd\u00e4 l\u00e4pi, kuinka t\u00e4m\u00e4 tehd\u00e4\u00e4n.<\/p>\n<p>Sill\u00e4 v\u00e4lin ei kuitenkaan pit\u00e4isi olla vaikeaa k\u00e4\u00e4nt\u00e4\u00e4 toteutuksiasi Model-Serialization-Request-Send-ty\u00f6nkulkuun, kuten t\u00e4ss\u00e4 viestiss\u00e4 on kuvattu.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Palvelinpuolen mallien ja verkkosovellusten kanssa ty\u00f6skentelyprosessin ymm\u00e4rt\u00e4minen mallien, tehtaiden ja muiden kautta.<\/p>\n","protected":false},"author":1,"featured_media":224094,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[730,719],"tags":[1166],"class_list":["post-230608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-kehittaejae","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230608"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230608\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224094"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}