Čo je to MVC a ako to vyzerá v obchode so sendvičmi?

V dnešnom internete majú webové stránky tendenciu byť interaktívne, dynamické a majú určitý druh funkcií. Môžu to byť viac ako statická stránka HTML a CSS. Tu prichádza na rad architektonický vzor Model View Controller (MVC).

Interakcia používateľa umožňuje prípady použitia, ktoré by boli nemožné iba pri staticky načítanej stránke. Preto je pri modernom vývoji webu dôležité pochopiť, ako sa vytvárajú dynamické stránky. Kľúčom k tomu je asi znalosť architektonického vzoru MVC.

Ak ste začiatočníkom vo vývoji webových aplikácií, slová ako „architektonický vzor“ môžu znieť skľučujúco zložito a abstraktne. Ale všeobecná myšlienka za MVC je v skutočnosti veľmi intuitívna. Budem sa snažiť, aby som to v tomto článku takto vysvetlil.

Je MVC dôležité rozumieť?

Podľa môjho názoru je odpoveď na túto otázku áno.

Je dôležité pochopiť, že je to MVC, pretože je to základná štruktúra, na ktorej je postavená väčšina webových aplikácií. To isté platí aj pre mobilné aplikácie a programy pre počítače.

Okolo základnej myšlienky MVC je veľa variácií. Prvotný koncept vytvoril okolo roku 1978 v Xerox PARC Trygve Reenskaug. Jeho cieľom bolo pomôcť koncovému používateľovi manipulovať a ovládať základný počítačový systém vizuálnejším a intuitívnejším spôsobom.

Spoločnosť MVC toho dosahuje, keď umožňuje používateľovi interakciu s používateľským rozhraním. To umožňuje manipuláciu a kontrolu nad systémom.

Koncept na vysokej úrovni

Bez použitia akýchkoľvek fantazijných slov teraz vysvetlím základnú myšlienku MVC na jednoduchom prípade použitia.

Predstavte si, že ste v obchode so sendvičmi. Podídete k pultu a pozriete sa na menu.

Rozhodnete sa, že chcete morčací sendvič (v skutočnosti si už viete predstaviť, že by ste sa do neho zahryzli). Takže poviete úradníčke svoju objednávku.

Úradník presne vie, čo chcete, keď si objednáte morčací sendvič. Otočí sa k stanici na výrobu sendvičov a hovorí tamojším ľuďom, čo potrebujú vedieť, aby splnili vašu objednávku.

Tím na výrobu sendvičov má k dispozícii veľa zdrojov. Šunka, morka, tuniak, šalát a syr môžu byť súčasťou sendvičov. Vezmú ingrediencie potrebné pre vašu objednávku a zhromaždia ich do morčacieho sendviča, ktorý ste si objednali.

Po dokončení je sendvič odovzdaný vám. Teraz máte morčací sendvič, ktorý ste chceli.

Vysvetlenie

V tomto predchádzajúcom príklade boli tri samostatné a odlišné objekty, ktoré všetky predstavujú jednu časť v našom MVC:

  • Stanica na výrobu sendvičov (model)
  • Hotový sendvič, ktorý ste nakoniec dostali (Zobraziť)
  • Úradník (kontrolór)

Keď ste si objednávali svoj sendvič, mali ste jasnú predstavu o tom, čo očakávate, že bude konečným výsledkom: morčací sendvič ( pohľad ).

Je to rovnaké, ako keď ste na webových stránkach. Napríklad na Facebooku môžete stlačením tlačidla „Priatelia“ zobraziť zoznam svojich priateľov. Očakávali by ste, že sa váš zoznam priateľov objaví, a už si ho môžete zobraziť vo svojej mysli.

Po stlačení tlačidla „Priatelia“ odošlete žiadosť na servery Facebooku. Žiadosťou je poskytnúť vám zoznam vašich priateľov, rovnako ako ste požiadali o sendvič pred úradníkom ( kontrolórom ).

Vaša žiadosť je doručená na servery Facebooku. Zasiahne ich kontrolóra, ktorý sa to snaží vyriešiť. Potom vezme všetkých vašich priateľov z databázy, rovnako ako sendvičovač ( model ) všetky ingrediencie.

Tieto zdroje (údaje zo zoznamu vašich priateľov) sú zhromaždené do odpovede. Je to podobné, ako keď sendvičovač zostavil všetky ingrediencie do hotového sendviča ( pohľad ).

Tento zoznam priateľov vám potom pošleme na konzumáciu, akoby bol sendvič na konci vašej objednávky.

Zhrnutie

Úradník je kontrolór:

  • Pozná všetky možné kombinácie sendvičov, ktoré si môžete objednať
  • Zhromaždí vaše informácie a odošle objednávku späť na vyriešenie

Výrobníkmi sendvičov sú tieto modely:

  • Vedia, aké položky sú potrebné na zloženie hotového sendviča

Sendvič je výhľad:

  • Je to „vec“, ktorú konečný užívateľ nakoniec dostane

Používanie webového rámca

Radič:

Kontrolór vybavuje prichádzajúce požiadavky. Vo webovom rámci by to bola deklarácia konkrétnych adries URL, ktoré sa mapujú na konkrétnu funkčnosť, ktorá tvorí vašu požiadavku.

Example URLswebsite.com/profile/ --> returns your profilewebsite.com/friends/ --> returns list of friendswebsite.com/friend={userName}/ --> returns specific friend

Model:

Takto vyzerajú vaše dáta na zadnej strane.

User:- userName- firstName- lastName- friends

Vyhliadka:

Toto je šablóna HTML, ktorá sa vráti po vyriešení vašej žiadosti. Ak je žiadosť úspešná, mali by ste získať stránku so svojimi priateľmi. Inak by sa vám mohla zobraziť stránka 404 „Nenájdené“.


    
  • Friend 1: {friendList[0].userName}
  • Friend 2: {friendList[1].userName}
  • Friend 3: {friendList[2].userName}
  • ...

Záver

Pri interakcii so systémom, ste zvyčajne schopné C reate, R etreive, U pdate a D élet objekty v podkladovej databáze. Toto sa často označuje ako „ CRUD “. Tu sme sa pozreli na načítanie údajov.

Nevysvetlil som tu, ako môže používateľ upravovať údaje v databáze ( C , U a D v CRUD ). Spravidla môžete na webe pridávať, aktualizovať a mazať položky.

Funkčnosť je v podstate rovnaká, ako je vysvetlené vyššie. Rozdiel je v tom, že vaše údaje sú pripojené k vašej požiadavke na správcu.

Dúfam, že teraz jasnejšie rozumiete tomu, čo je architektúra MVC a ako by mohla fungovať.

Ak ste si mysleli, že toto vysvetlenie je užitočné, alebo máte nejaké otázky alebo premýšľanie o tom, ako vylepšiť tento článok, neváhajte komentovať!