Mi az MVC, és milyen egy szendvicsbolt?

A mai interneten a weboldalak általában interaktívak, dinamikusak és valamilyen funkciót töltenek be. Többek lehetnek, mint egy statikus HTML és CSS oldal. Itt jön be a Model View Controller (MVC) építészeti minta.

A felhasználói interakció lehetővé teszi olyan felhasználási eseteket, amelyek csak statikusan betöltött oldalak esetén lennének lehetetlenek. Éppen ezért a modern webfejlesztés során fontos megérteni a dinamikus oldalak létrehozásának módját. Ennek kulcsa talán az MVC építészeti mintázatának ismerete.

Ha kezdő vagy a webfejlesztésben, akkor az olyan szavak, mint az „építészeti minta”, ijesztően összetettnek és elvontnak tűnhetnek. De az MVC mögött álló általános gondolat valójában nagyon intuitív. Mindent megteszek, hogy ebben a cikkben ilyen módon elmagyarázzam.

Fontos megérteni az MVC-t?

Véleményem szerint a válasz erre a kérdésre igen.

Az MVC-t fontos megérteni, mert ez az az alapvető struktúra, amelyre a legtöbb webalkalmazás épül. Ugyanez vonatkozik a mobilalkalmazásokra és az asztali programokra is.

Az MVC alapgondolata körül számos variáció létezik. A kezdeti koncepciót 1978 körül, a Xerox PARC-n hozta létre Trygve Reenskaug. Célja volt, hogy segítse a végfelhasználókat az alapul szolgáló számítógépes rendszerek vizuálisabb és intuitívabb módon történő manipulálásában és irányításában.

Az MVC ezt úgy éri el, hogy hagyja, hogy a felhasználó interakcióba lépjen a felhasználói felülettel. Ez lehetővé teszi a rendszer manipulálását és ellenőrzését.

A magas szintű koncepció

Díszes szavak használata nélkül most egy egyszerű használati eseten keresztül ismertetem az MVC alapgondolatát.

Képzelje el, hogy szendvicsboltban van. Odamegy a pulthoz, és megnézed a menüt.

Ön úgy dönt, hogy szeretné a pulyka szendvicset (sőt, már elképzelheti, hogy beleharapjon). Tehát elmondja az ügyintézőnek a parancsát.

Az ügyintéző pontosan tudja, mit szeretne, amikor megrendeli a pulyka szendvicset. Megfordul a szendvicskészítő állomáson, és elmondja az ott élő embereknek, hogy mit kell tudniuk a megrendelés teljesítéséhez.

A szendvicskészítő csapatnak számos erőforrás áll a rendelkezésére. Sonka, pulyka, tonhal, saláta és sajt egyaránt kerülhet a szendvicsekbe. Elveszik a megrendeléséhez szükséges hozzávalókat, és összeállítják a megrendelt pulyka szendvicsbe.

A szendvics elkészülte után átadják neked. Most megvan a kívánt pulyka szendvics.

Egy magyarázat

Ebben az előző példában három különálló és különálló objektum volt, amelyek mindegyike az MVC egyik részét képviseli:

  • A szendvicskészítő állomás (modell)
  • A kész szendvics, amelyet végül kapott (Megtekintés)
  • Ügyintéző (vezérlő)

Amikor megrendelte a szendvicset, külön elképzelése volt arról, hogy mire számíthat a végeredmény: pulyka szendvics ( nézet ).

Ez ugyanaz, mint amikor egy webhelyen tartózkodik. Például a Facebookon megnyomhatja a "Barátok" gombot a barátai listájának megtekintéséhez. Arra számítana, hogy megjelenik a barátlistája, és máris elképzelheti azt.

Amikor megnyomja a "Barátok" gombot, kérelmet küld a Facebook szervereinek. A kérés az, hogy kiszolgáljuk Önt a barátok listájával, ugyanúgy, ahogy a szendvicset kérte az ügyintézőhöz ( ellenőr ).

Kérése a Facebook szervereire érkezik. Megtalálja az irányítójukat, amely megpróbálja megoldani. Ezután az összes barátját megragadja egy adatbázisból, ugyanúgy, mint a szendvicskészítő ( modell ) az összes hozzávalót.

Ezeket az erőforrásokat (a barátok listájának adatait) válaszként állítják össze. Ez hasonló ahhoz, ahogy a szendvicskészítő az összes hozzávalót kész szendvicsbe állította ( nézet ).

Ezt a barátlistát elküldjük Önnek fogyasztásra, például a szendvics a megrendelés végén volt.

Összegzés

Az ügyintéző az adatkezelő:

  • Tudja az összes lehetséges szendvics-kombinációt, amelyet megrendelhet
  • Összegyűjti az adatait, és visszaküldi a megoldást

A szendvicskészítők a modellek:

  • Tudják, milyen elemekre van szükség a kész szendvics összeállításához

A szendvics a kilátás:

  • Ez az a „dolog”, amelyet a végfelhasználó végül megkap

Webes keretrendszer használata

Vezérlő:

A vezérlő kezeli a beérkező kéréseket. Egy webes keretrendszerben ez egy meghatározott URL-ek deklarációja, amely leképezi a kérését alkotó speciális funkciókat.

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

Modell:

Így néznek ki az adatai a háttérben.

User:- userName- firstName- lastName- friends

Kilátás:

Ez a HTML sablon, amelyet a kérés megoldása után adunk vissza. Ha a kérés sikeres, kérjen egy oldalt a barátaival. Ellenkező esetben előfordulhat, hogy kap egy 404-es "Nem található" oldalt.

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

Következtetés

Amikor kölcsönhatásban áll a rendszer, akkor általában képesek C reate, R etreive, U pdate és D élete tárgyakat a mögöttes adatbázisban. Ezt gyakran rövidítik „ CRUD ” -nak . Itt az adatok visszakeresését vizsgáltuk.

I did not explain here how a user can modify the data in the database (the C, U and D in CRUD). Usually, you are able to add, update and delete things on a website.

The functionality for this is pretty much the same as explained above. The difference is, your data is attached to your request to the controller.

I hope that you now have a clearer understanding of what MVC architecture is and how it might work.

If you thought this explanation was helpful, or have any questions or thought about how to improve this article, please feel free to comment!