Bu və sonrakı məqalələr ASP.NET platformasına nisbətən yeni əlavə olan Web API alətini təsvir edəcək və bu, API-ni HTTP müştərilərinə təqdim edən veb xidmətlərini tez və asanlıqla yaratmağa imkan verir.
Veb API aləti ASP.NET MVC Çərçivə proqramları ilə eyni təmələ əsaslanır, lakin ASP.NET MVC Çərçivəsinin bir hissəsi deyil. Əvəzində Microsoft System.Web.Mvc ad məkanından bir sıra əsas siniflər və əlaqəli xüsusiyyətlər götürdü və onu adlar məkanında təkrarladı. System.Web.Http.
İdeya ondan ibarətdir ki, Web API əsas ASP.NET çərçivəsinin bir hissəsidir və digər növ veb proqramlarda və ya müstəqil veb xidmətləri mühərriki kimi istifadə edilə bilər. Web API alətinin əsas istifadələrindən biri Veb API-ni ASP.NET MVC Çərçivəsinin imkanları ilə birləşdirərək tək səhifəli proqramlar (SPA) yaratmaqdır. Sonra SPA proqramlarının nə olduğunu və necə işlədiyini sizə göstərəcəyik.
Veb xidmətlərinin yaradılmasının sadələşdirilməsi Web API-nin ayrılmaz xüsusiyyətidir. Bu, Microsoft-un son on ildə təklif etdiyi digər veb-xidmət texnologiyaları ilə müqayisədə əhəmiyyətli təkmilləşdirməni təmsil edir. Mən Web API alətini sevirəm və siz ondan layihələrinizdə istifadə etməlisiniz, çünki o, sadədir və ASP.NET MVC Çərçivəsi ilə eyni dizayn fəlsəfəsi üzərində qurulub.
Tək səhifə tətbiqi (SPA) termini kifayət qədər geniş istifadə olunur. Ən ardıcıl tərif ondan ibarətdir ki, bu, ilkin məzmunu HTML işarələməsi və JavaScript kodunun kombinasiyası kimi çatdırılan və sonrakı əməliyyatlar Ajax sorğularına cavab olaraq məlumatları JSON formatında çatdıran REST veb xidmətindən istifadə etməklə həyata keçirilən veb tətbiqidir.
Bu, istifadəçi əməliyyatlarının nəticələrinin sinxron HTTP sorğularına cavab olaraq yaradılan yeni HTML sənədləri olduğu əvvəlki nümunələrdə qurulmuş proqram növündən fərqlidir. Belə proqramlar gediş-gəliş proqramları (RTA) adlanacaq.
SPA tətbiqinin üstünlükləri ondan ibarətdir ki, o, daha az bant genişliyi tələb edir və istifadəçi daha hamar interfeys əldə edir. Dezavantajlara daxildir ki, bu daha parlaq interfeysə nail olmaq çətin ola bilər və SPA tətbiqi üçün tələb olunan JavaScript kodunun mürəkkəbliyi diqqətli dizayn və sınaq tələb olunur.
Əksər proqramlar SPA və RTA texnikalarını birləşdirir, SPA kimi təqdim edilən tətbiq funksionallığının hər bir əsas sahəsi və yeni HTML sənədi yaradan standart HTTP sorğularından istifadə etməklə idarə olunan funksionallıq sahələri arasında naviqasiya.
Bu məqalələrin məqsədləri üçün Boş şablondan istifadə edərək Visual Studio-da WebServices adlı yeni MVC layihəsi yaradılır. Bölmə üçün Qovluqlar və əsas istinadlar əlavə et bölməsində MVC və Web API qeyd xanaları aşağıdakı şəkildə göstərildiyi kimi yoxlanılıb:
Bu layihə adi ASP.NET MVC Framework proqramını yaratmaq və sonra Web API-dən istifadə edərək veb xidməti yaratmaq üçün istifadə olunacaq. Veb xidməti hazır olduqdan sonra ASP.NET MVC Framework proqramı tək səhifəli proqrama çevriləcək.
Tətbiq otaq rezervasiyası üçün bir sıra sorğular yaradacaq və saxlayacaq. Tətbiqin sadə saxlanılması planlaşdırılır ki, siz diqqətinizi təsvir olunan obyektin mexanikasına yönəldə biləsiniz, beləliklə, sifariş sorğuları yalnız müştərinin adı və binanın yerləşdiyi yerdən ibarət olacaq. Reservation.cs adlı sinif faylı Modellər qovluğuna əlavə edilmişdir, məzmunu aşağıdakı nümunədə göstərilmişdir:
Ad məkanı WebServices.Models ( ictimai sinif Rezervasyon ( ictimai int ReservationId ( almaq; təyin etmək; ) ictimai sətir ClientName ( almaq; təyin etmək; ) ictimai sətir Yer ( almaq; təyin etmək; ) ) )
Plan məlumat anbarı kimi çıxış edəcək Rezervasiya obyektlərinin sadə yaddaşdaxili kolleksiyasını yaratmaqdır. Verilənlər bazasını quraşdırmağa ehtiyac yoxdur, lakin Web API-nin bəzi mühüm aspektlərini nümayiş etdirmək üçün model obyektləri toplusunda CRUD əməliyyatlarını yerinə yetirə bilməlisiniz. ReservationRepository.cs adlı sinif faylı da Modellər qovluğuna əlavə olunur:
System.Collections.Generic istifadə; System.Linq istifadə edərək; ad sahəsi WebServices.Models ( ictimai sinif ReservationRepository ( şəxsi statik ReservationRepository repo = new ReservationRepository (); ictimai statik ReservationRepository Cari ( almaq ( repo; ) ) özəl Siyahı datası = yeni Siyahı (yeni Rezervasiya ( ReservationId = 1, ClientName) , Məkan = "Otel"), yeni Rezervasiya (ReservationId = 2, Müştəri Adı = "Vasya", Məkan = "Kitabxana"), yeni Rezervasiya (RezervasiyaId = 3, Müştəri Adı = "İqor", Məkan = "Yemək otağı"), ) ; ictimai IEnumerable GetAll() (məlumatları qaytarın; ) ictimai Rezervasiya Get(int id) (verilənləri qaytarın.Where(r => r.ReservationId == id).FirstOrDefault(); ) ictimai Rezervasiya Əlavəsi(Rezervasiya elementi) ( maddə. ReservationId = data.Count + 1; data.Add(item) qaytarın; ) ) ictimai bool Yeniləmə(Rezervasiya elementi) ( Rezervasyon storedItem = Get(item.ReservationId); if (storedItem != null) ( storedItem.ClientName = item.ClientName; storedItem.Location = item.Location; doğru qayıt; ) başqa ( yalan qaytar; ) ) ) )
Həqiqi bir layihədə biz siniflər arasında sıx əlaqəni pozmaq və tətbiqə interfeyslər təqdim etmək, həmçinin asılılıq inyeksiyasını təmin etmək üçün qayğı göstərməli olacaqdıq. Bununla belə, bu mövzu yalnız Web API və SPA proqramlarına diqqət yetirir, buna görə də standart təcrübələrə gəldikdə, bəzi sadələşdirmələr aparılacaqdır.
Yaddaş sinifində üç Rezervasiya obyektinin ilkin siyahısı var və kolleksiyaya baxmaq, əlavə etmək, silmək və yeniləmək imkanı verən metodları müəyyənləşdirir. Mağazada əzmkarlıq olmadığından, tətbiq dayandırıldıqda və yenidən işə salındıqda mağazada edilən hər hansı dəyişikliklər itirilir, lakin bu nümunə tamamilə məzmunun serverdə necə saxlandığından daha çox çatdırılma üsuluna yönəldilmişdir. Sorğular arasında müəyyən bir davamlılığı təmin etmək üçün Current statik mülkiyyəti vasitəsilə əldə edilə bilən ReservationRepository sinifinin nümunəsi yaradılır.
Bu və sonrakı məqalələr üç NuGet paketindən istifadə edəcək: jQuery, Bootstrap və Knockout. jQuery və Bootstrap kitabxanaları daha əvvəl təsvir edilmiş və istifadə edilmişdir. Knockout, Microsoft-un tək səhifəli proqramlar üçün uyğunlaşdırdığı kitabxanadır. Stiv Sanderson tərəfindən yaradılmışdır. Stiv Microsoft-da işləsə də, Knockout paketi Knockout kitabxanasının veb saytında açıq mənbə kimi mövcuddur və geniş şəkildə qəbul edilmişdir. Knockout-un necə işlədiyini sizə daha sonra göstərəcəyik, lakin hələlik siz yuxarıda qeyd olunan paketləri quraşdırmalısınız.
NuGet komanda xətti pəncərəsini açmaq üçün Alətlər -> Kitabxana Paket Meneceri -> Paket Meneceri Konsolu seçin və aşağıdakı əmrləri daxil edin:
Quraşdırma-Paket jquery -versiya 1.10.2 -layihə adı WebServices Quraşdırma-Paket yükləmə xətti -versiya 3.0.0 -layihə adı WebXidmətləri Quraşdırma-Paket nokautjs -versiya 3.0.0 -layihə adı WebServices
Nümunə layihəyə Home adlı nəzarətçi əlavə olunur, onun tərifini nümunədə görmək olar:
WebServices.Models istifadə; System.Web.Mvc istifadə edərək; ad sahəsi WebServices.Controllers ( ictimai sinif HomeController: Nəzarətçi ( ReservationRepository repository = ReservationRepository.Current; ictimai ViewResult Index() ( return View(repository.GetAll()); ) public ActionResult Add(Reservation element) ( if (ModelStatide.I) repository.Add(item); return RedirectToAction("İndex" else return View("İndex"); "); else return View("İndeks");
Bu, belə sadə bir tətbiq üçün tamamilə tipik bir nəzarətçidir. Hər bir hərəkət üsulu mağazadakı üsullardan birinə birbaşa uyğun gəlir. Nəzarətçinin yeganə faydalılığı modelin yoxlanılması, baxışların seçilməsi və yönləndirmənin həyata keçirilməsindən irəli gəlir. Əlbəttə ki, real layihədə əlavə domen məntiqi olardı, lakin nümunə tətbiqi çox sadə olduğundan, nəzarətçi mağazanın ətrafındakı sadə bir sarğıdan bir qədər çox şeyə çevrilir.
Tətbiq üçün məzmun yaratmaq üçün Baxışlar/Paylaşılan qovluq yaradılır və ona aşağıdakı nümunədə göstərilən məzmunla _Layout.cshtml adlı görünüş faylı əlavə olunur:
Bu əsas tərtibat Bootstrap kitabxanasının CSS faylları üçün elementləri təmin edir. Layout, tərtibata məzmun daxil etmək üçün istifadə ediləcək iki bölməni, Skriptlər və Bədəni müəyyən edir. Növbəti addım proqram üçün yüksək səviyyəli görünüş yaratmaqdır. Baxmayaraq ki, növbəti addım adi ASP.NET MVC Framework proqramını qurmaq olsa da, siz bilirsiniz ki, sonda tək səhifəli proqram yaradacaqsınız.
Nəticə əvvəlcə bir az qəribə görünsə belə, tətbiq üçün tələb olunan bütün HTML işarələmələrini ehtiva edən vahid görünüş yaratsanız, transformasiya etmək daha asan olacaq. Index.cshtml adlı görünüş faylı Views/Home qovluğuna əlavə edilir, məzmunu aşağıdakı nümunədə göstərilir:
@WebServices.Models istifadə edərək @model IEnumerable @( ViewBag.Title = "Reservations)";
}
@section Scripts {
}
@section Body {
@Html.Partial("Summary", Model)
@Html.Partial("Editor", new Reservation())
}!}
Bu görünüş üçün görünüş modeli Rezervasiya obyektlərinin sadalanmasıdır və istifadəçinin görəcəyi funksionallıq bloklarını təmin etmək üçün iki qismən görünüş yaradılmışdır. Birinci qismən görünüşü olan fayl Summary.cshtml adlanır. Bu fayl Views/Home qovluğunda yaradılmışdır:
Qismən görünüş üçün görünüş modeli Rezervasiya obyektlərinin eyni sadalanmasıdır və element kimi Bootstrap istifadə edərək üslublu cədvəl yaratmaq üçün istifadə olunur.
, bu obyektlərin xassə dəyərlərini göstərən. Html.ActionLink() köməkçi metodu Home nəzarətçisinin Sil hərəkətini çağıracaq keçid yaratmaq üçün istifadə olunur; Link Bootstrap istifadə edərək düymə kimi tərtib edilmişdir.
Başqa bir qismən görünüş Editor.cshtml adlanır və həmçinin Views/Home qovluğunda yerləşir. Bu faylın məzmunu aşağıdakı nümunədə göstərilmişdir. Qismən görünüşdə yeni sifariş sorğuları yaratmaq üçün istifadə olunan forma var. Formanın təqdim edilməsi Ev nəzarətçisinin Əlavə et əməliyyatının çağırılmasına səbəb olur.
@model WebServices.Models.Reservation Sifariş yaradın @istifadə edərək (Html.BeginForm("Əlavə et", "Ev")) ( Müştəri Adı @Html.TextBoxFor(m => m.ClientName, yeni ( @class = "forma nəzarəti") )) Yerləşdirmə @Html.TextBoxFor(m => m.Location, new ( @class = "form-control" )) Saxla )
Başlanğıc URL-nin təyin edilməsi və tətbiqin sınaqdan keçirilməsi Son hazırlıq addımı proqram başlayanda Visual Studio-nun gedəcəyi yeri təyin etməyi əhatə edir. Açılan dialoq qutusunda Visual Studio-da Layihə menyusundan WebServices Properties seçin, Veb sekmesine keçin və Fəaliyyətə Başla kateqoriyasında Xüsusi Səhifə radio düyməsini yoxlayın. Heç bir dəyəri daxil etməyə ehtiyac yoxdur - sadəcə radio düyməsini seçin.
Tətbiqi klassik ASP.NET MVC Framework formasında sınamaq üçün Visual Studio Debug menyusundan Start Debugging seçin. İstifadəçiyə cari rezervasiyaların siyahısını və onları yaratmaq və silmək imkanı verən (bir az qəribə) hamısı bir yerdə tərtibat görəcəksiniz:
Növbəti məqalədə tətbiqimizə Web API imkanlarını əlavə edəcəyik.
Bu məqalə Tək Səhifə Tətbiqinə (SPA) diqqət yetirəcəkdir. Tək səhifəli sayt (SPA) prinsipləri əsasında qurulmuş veb tətbiqinin müsbət və mənfi cəhətləri nəzərdən keçiriləcək.
SPA nədir Tək Səhifə Tətbiqi - SPA kimi qısaldılmış, rus dilinə tərcümədə "Bir Səhifəli Tətbiq" deməkdir. Başqa sözlə desək, SPA bir veb-səhifədə yerləşdirilən və işləməsini təmin etmək üçün səhifənin özünü yükləməklə yanaşı bütün lazımi kodu yükləyən veb proqramdır. Bu tip proqram nisbətən yaxınlarda, HTML5 erasının başlanğıcı ilə ortaya çıxdı və SPA HTML5 tətbiqlərinin tipik nümayəndəsidir.
Bildiyimiz kimi, HTML5 HTML + CSS3 + JavaScript + [bir neçə yeni teqdən] başqa bir şey deyil. Beləliklə, SPA-lar JavaScript-də yazılmış proqramlardır. Buna görə də əvvəlki tərifi bir az dəyişdirərək alırıq:
“SPA bir səhifədə yerləşdirilən veb proqramdır və əməliyyatı təmin etmək üçün səhifənin özünü yükləməklə yanaşı, bütün javascript fayllarını (modullar, vidjetlər, idarəetmə elementləri və s.), həmçinin CSS fayllarını yükləyir.”
Tətbiq kifayət qədər mürəkkəbdirsə və elektron sənəd idarəetmə sistemi kimi zəngin funksionallığı ehtiva edirsə, skriptləri olan faylların sayı bir neçə yüz, hətta minlərlə ola bilər. Və “...bütün skriptlərin yüklənməsi...” heç bir şəkildə saytı yükləyərkən skriptləri olan bütün yüzlərlə və minlərlə faylın bir anda endirilməsi demək deyil. Çox sayda skriptin SPA-ya yüklənməsi problemini həll etmək üçün AMD adlı API çağırılır. AMD, tələb olunan skriptləri yükləmək qabiliyyətini həyata keçirir. Yəni bir səhifəlik portalın “əsas səhifəsi” üçün 3 skript tələb olunurdusa, onlar proqram başlamazdan dərhal əvvəl yüklənəcəklər. İstifadəçi bir səhifəlik portalın başqa bir səhifəsinə, məsələn, "Proqram haqqında" klikləsə, AMD prinsipi modulu (skript + işarələmə) yalnız bu səhifəyə keçməzdən əvvəl yükləyir.
Bir az əzik çıxır: “Bir səhifə... başqa səhifə, üçüncü səhifə... bir səhifəlik portal”. Gəlin bütün "E" hərflərini qeyd edək. Bütün CSS-lərə və SPA-nın işləməsi üçün lazım olan skriptlərə keçidlərin olduğu saytın səhifəsini “Veb səhifə” adlandıracağıq. Belə bir səhifəyə malik fayl adətən “index.html” adlanır (ASP.NET MVC-də bu, index.cshtml və ya index.vbhtml və ya hətta index.aspx ola bilər) Və istifadəçinin bir səhifədə keçid etdiyi səhifələr. portal “modullar” adlanacaq.
Bu yanaşmanın müsbət və mənfi tərəflərinə baxaq. Bütün bunlar niyə lazımdır və SPA niyə bu qədər populyardır?
SPA: Pros Qeyd etmək lazımdır ki, birinci üstünlük SPA proqramlarının həm masaüstü, həm də mobil cihazlarda mükəmməl işləməsidir. "Böyük" kompüterlər, planşetlər, smartfonlar və nəhayət, sadə telefonlar (bəziləri) SPA prinsipi ilə qurulmuş saytlarla asanlıqla işləyə bilər. Beləliklə, birinci "artı" çox sayda cihazda işləməsidir, yəni bir tətbiq yaratmaqla standart yanaşmadan istifadə etdikdən daha çox istifadəçi auditoriyası əldə edirsiniz.
Sonra, ikinci "artı" istifadəçi təcrübəsi adlanan zəngin istifadəçi interfeysidir. Yalnız bir veb səhifə olduğundan, zəngin, zəngin istifadəçi interfeysi qurmaq daha asandır. Sessiya məlumatlarını saxlamaq, görünüş vəziyyətlərini idarə etmək və animasiyaya nəzarət etmək (bəzi hallarda) daha asandır.
Üçüncü "artı" ondan ibarətdir ki, SPA əhəmiyyətli dərəcədə (bir neçə dəfə) "dairəvi" deyilən şeyi azaldır, yəni eyni məzmunu təkrar-təkrar yükləməkdir. Portalınız (saytınız) şablondan istifadə edirsə, o zaman hər hansı səhifənin əsas məzmunu ilə yanaşı, saytın ziyarətçisi şablon işarələməsini endirməlidir. Bəli, WWW inkişafının bu mərhələsində məlumatların keşləşdirilməsi ən yüksək nəticələr əldə etdi, lakin keşləmə üçün heç bir şey yoxdursa, buna nə vaxt, nə də resurslar sərf edilmir.
SPA: Eksiler Əgər siz C# dilində proqramlaşdırırsınızsa, onda SPA-nın yeganə çatışmazlığı JavaScript öyrənmək ehtiyacıdır. Hər halda, başqa qlobal problem tapa bilmədim.
SPA komponentləri SPA paradiqmasını həyata keçirən hər hansı bir çərçivənin prinsipləri (onlardan sonra danışacağıq) aşağıdakı anlayış və təriflərə uyğun olmalıdır:
- SPA müştəri naviqasiyasını dəstəkləyir. İstifadəçinin səhifə modulları vasitəsilə bütün "gəzintiləri" naviqasiya tarixçəsində unikal şəkildə qeyd olunur və naviqasiya "dərin" olur, yəni istifadəçi daxili səhifə moduluna keçidi başqa brauzerdə və ya pəncərədə kopyalayıb açarsa, o, müvafiq səhifəyə aparılacaq.
- SPA bir veb-səhifədə yerləşir, bu o deməkdir ki, saytın (portalın) işləməsi üçün lazım olan hər şey, skriptlər və üslublar layihənin bir yerində - bir veb-səhifədə müəyyən edilməlidir.
- SPA müştərinin (müştəri skripti) vəziyyətini (vacib dəyişənləri) daimi olaraq brauzer önbelleğinde və ya Veb Yaddaşında saxlayır.
- SPA veb səhifə işə salındıqda tətbiqi işə salmaq üçün tələb olunan bütün skriptləri yükləyir.
- SPA modulları istəyə görə tədricən yükləyir.
SPA şablonları Yəqin ki, artıq təxmin etdiyiniz kimi, SPA mücərrəd bir anlayışdır. Tətbiq arxitekturasının prinsipi budur. Gəlin SPA prinsiplərinə uyğun veb-sayt hazırlayarkən haradan başlamaq barədə danışaq.
Tək Səhifə Tətbiq prinsipini həyata keçirən çoxlu sayda əsas kitabxanalar (framework - ingiliscə framework sözündən - “baza, struktur, çərçivə”) mövcuddur. Bu çərçivələr nə təmin edir:
- SPA-nın inkişafı üçün əsas prinsipləri təmin etmək, universal problemlərin həlli üçün əmək xərclərini minimuma endirmək (“SPA komponentləri” bölməsinə baxın);
- çərçivələr tərtibatçılar birliyi tərəfindən yaradılmışdır, yəni onlar bir çox proqramçının veb-saytlarının yaradılması təcrübəsindən istifadə edirlər;
- çərçivələr Tək Səhifəli Tətbiq əsasında struktur yaratmaq üçün başlanğıc nöqtəsidir.
Uzun illər NET platformasında işlədiyim üçün ASP.NET əsasında Tək Səhifə Tətbiq şablonlarına baxacağam. Aşağıdakı müqayisə cədvəlinə baxaq.
SPA şablon xüsusiyyətlərinin müqayisəsi Cədvəl Tək Səhifəli Tətbiq proqramının qurulması üçün ən ümumi şablonları göstərir. Nəzərə alın ki, yaşıl rənglə vurğulanan DurandalJS və HotTowel kimi tam hüquqlu çərçivə qurmaq üçün əsas tikinti blokları mavi rənglə vurğulanır.
Beləliklə, cədvəldə göstərilən məlumatlara əməl edərək, çılpaq ASP.NET və KnockoutJS-dən istifadə edərək Tək Səhifəli Tətbiq proqramı yarada bilərsiniz. Bununla belə, məlumatlarla işləməyi (DAL) özünüz yazmalı, naviqasiya və naviqasiya tarixçəsini idarə etməli olacaqsınız.
21 may 2017-ci il
Tək səhifəli saytlar və ya Tək Səhifəli Proqramlar (SPA) əladır. Onların əsas üstünlüyü ondan ibarətdir ki, SPA daha sürətli və istifadəçi hərəkətlərinə daha həssasdır. Bu, iş məntiqini müştəri tərəfinə köçürməklə və ajax vasitəsilə serverlə aktiv şəkildə qarşılıqlı əlaqədə olmaqla əldə edilir.
SPA-ların Angular və ya React-də güclü tətbiqlər olduğuna, bəzi idarəetmə panelində və ya mürəkkəb bir xidmətdə tonlarla məlumat daşıdığına dair bir fikir var. Və ümumiyyətlə, bu doğrudur. Amma əminəm ki, təkcə bu cür xidmətlər üçün deyil, həm də adi korporativ vizit kartı saytları üçün bir səhifəlik ərizələr yazmağın mənası var.
Bu niyə lazımdır və bir az səylə bunu necə etmək olar? Bu barədə aşağıda daha ətraflı. Get.
Yaxşı, niyə bu ərköyünlük? Ən vacibi işin sürətidir.
Əlbəttə ki, bir səhifəlik vizit kartı veb saytını hazırlayarkən bəzi problemlərlə qarşılaşacağıq:
- 1. Necə yanaşmaq, haradan başlamaq lazımdır?
- 2. History API ilə brauzer tarixçəsi ilə necə məşğul olmaq olar?
- 3. Hansı çərçivə və ya kitabxananı öyrənməliyəm: Angular, React? Və heç birini də tanımırıq...
- 4. Axtarış motorlarını bir səhifəlik saytı indeksləşdirməyə necə məcbur etmək olar?
Bu suallara cavablar:
- 1. Sadə veb sayt nümunəsindən istifadə edərək, eyni məqalədə buna baxaq
- 2. Mən də sizə aşağıda deyəcəyəm, bu, onlarla kod sətiridir
- 3. Yoxdur, biz köməkçi olaraq yerli javascript və jQuery ilə məşğul olacağıq
- 4. Bu silsilənin növbəti məqaləsi axtarış sistemləri haqqında olacaq.
Niyə bucaq reaksiyası olmadan?
Təbii ki, bunlar çox lazımlı mövzulardır, onları öyrənməyi məsləhət görürəm. Lakin bizim nümunəmiz üçün onlara ehtiyac olmayacaq;
Bir peycer birdən çox məqalənin mövzusudur. Bu, bütöv bir layihə, ən azı üç hissədən ibarət bir sıra məqalələr olacaq. Və müxtəlif mövzuları əhatə edəcək. Amma icazə verin aydınlaşdırım. Biz REST API vasitəsilə serverlə qarşılıqlı əlaqədə olan sadə admin paneli quracağıq (ən azı başlanğıcda). İlk dərslərdə bir səhifəlik saytımız onlarla səhifədən ibarət adi bir vizit kartı olacaq. Lakin sayt səhifələri yenidən yükləmədən işləyəcək və interfeysin sürəti və həssaslığı ilə istifadəçilərimizi sevindirəcək.
Saytın ideyası, necə işlədiyi Ən çox yayılmış korporativ veb-saytı götürək: ana səhifə, "Layihə haqqında" bölmə, kontaktlar və blog. Bloq bölməsində daxili səhifələrə bir neçə keçid olacaq. Hər səhifəyə bəzi məzmun əlavə edəcəyik və bəzi çarpaz istinadlar əlavə edəcəyik.
Saytdakı hər bir səhifə adətən təkrarlanan məzmuna malikdir. Bizim üçün bu başlıq və menyu olacaq. Və dəyişən səhifənin əsas məzmunu var. Biz bunu edəcəyik: səhifəni yalnız bir dəfə yükləyəcəyik, sonra isə linklərə klikləməklə, Ajax-dan istifadə edərək lazımi məzmunu dinamik şəkildə yükləyəcəyik. Eyni zamanda, brauzerin Geri/İrəli düymələri vasitəsilə naviqasiyanın işləməsi üçün brauzer sekmesinde səhifənin başlığını, ünvan çubuğundakı url-ni dəyişəcəyik və brauzerdə tarixi xatırlayacağıq.
Hər bir fərdi səhifə üçün məzmun ayrıca html faylında saxlanılacaq.
Nə ilə nəticələndiyimizi dərhal görə bilərsiniz -
Saytın quruluşu və hazırlıq işləri Fayl-qovluq strukturu aşağıdakı kimidir. Layihənin kökündə index.php və .htaccess faylı var. Niyə html deyil, php olduğunu daha sonra deyəcəyəm. css qovluğunda main.css faylında üslublar var. js qovluğunda jquery.js kitabxanası və əsas proqram faylı main.js var. Səhifələr qovluğunda saytın məzmunu olan html faylları var - hər səhifə üçün bir fayl.
Məzmun hazırlanması Nümunə olaraq webdevkin layihəmdən istifadə edərək demo sayt hazırlayacağam. Səhifələr dəsti belə olacaq:
- - əsas - Ev
- — haqqında - Layihə haqqında
- — blog - Bloq
- — mağaza - Onlayn mağazalar
- — frontend - Frontend
- — mysql - MySql verilənlər bazası
- — vidjetlər - Daxil edilə bilən vidjetlər
- — sadə - Layihə Sadə
- — kontaktlar - Kontaktlar
Müvafiq olaraq, səhifələr qovluğunda 9 html faylı olacaq. Məzmun üçün bütün işarələmələri -də tapa bilərsiniz. Nümunə olaraq yalnız bir faylın məzmununu verəcəyəm - simple.html
Sadə layihə bir blog saytından böyüdü. Layihənin ideyası saytınızın ziyarətçiləri ilə qarşılıqlı əlaqədə olmağa kömək edən sadə və asanlıqla daxil edilmiş vidjetlər etməkdir. Hal-hazırda hər hansı bir vebsaytda yaratmaq və yerləşdirmək asan olan sorğu vidceti artıq mövcuddur.
Gördüyünüz kimi, burada baş, bədən, html, skript yoxdur - yalnız müəyyən bir səhifə ilə əlaqəli işarələmə.
index.php və .htaccess Niyə index.html olmasın?
Fakt budur ki, saytımızda bir fiziki səhifə olacaq - indeks. Amma bizi site.ru/about, site.ru/contacts və s kimi ünvanlar da maraqlandırır. Amma saytımızın kökündə haqqında və əlaqə səhifələri yoxdur. Bir sıra html faylları olan səhifələr qovluğu tam hüquqlu bir səhifə deyil, sadəcə ümumi çərçivəyə daxil edilmiş html kodu parçalarıdır.
Buna görə də, site.ru/about saytına daxil olanda 500, 403 almamağımız və başqa hansı xətaların olduğunu Allah bilir, biz sayta daxil olan bütün sorğuları index.php-ə yönləndirməliyik ki, bu sorğuları həll edəcək. Bununla belə, hələlik bizim index.php php kodunun bir sətri olmayan adi html işarələməsidir (lakin bu yalnız indilikdir). Və .htaccess-də aşağıdakıları yazacağıq. Nadir hallarda ona qayıtmalı olacaqsınız.
RewriteEngine On Seçimlər +SymLinksIfOwnerMatch RewriteCond %(REQUEST_FILENAME) !-d RewriteCond %(REQUEST_FILENAME) !-f RewriteCond %(REQUEST_FILENAME) !-l RewriteRule ^x=$q indeksi ^(.+ph)
Nöqtəsinə
Mən bir dəfə yerli PHP-də Simple RESTful xidməti haqqında məqalə yazmışdım. Orada sorğuların yönləndirilməsinin bu üsulu haqqında bir az daha çox məlumat tapa bilərsiniz.
Html kodumuz çox sadə olacaq. Css/main.css üslubları başlığa daxil edilmişdir. Altbilgidə 2 js faylı var: js/jquery.js və js/main.js. Və bədəndə aşağıdakılar olacaq:
Əvvəlcə menyunu göstəririk. Sonra səhifənin başlığı gəlir. Aşağıda id=content ilə boş bir div var (style=""-a diqqət yetirməyin - təhlilçi nə vaxtsa məni əsəbiləşdirəcək və mən onu əvəz edəcəyəm). #content dinamik olaraq pages/*.html fayllarından səhifə məzmununu yükləyəcək. Hələ maraqlı heç nə yoxdur.
Sadəcə keçidlərin data-menyu və data-link="ajax" atributlarına diqqət yetirin. Onlar naviqasiya keçidlərini veb saytımızda da olacaq adi xarici keçidlərdən fərqləndirmək üçün təqdim edilir. data-link="ajax" o deməkdir ki, siz bu linkə kliklədiyiniz zaman biz brauzerin standart davranışını ələ keçirəcəyik və linklə işi öz əlimizə alacağıq. Data-menyu isə bu keçidə kliklədiyiniz zaman hansı əsas menyunun vurğulanacağını bildirir. Burada məlumat menyusu href atributu ilə təkrarlanır, lakin başqa seçimlər mümkündür. Məsələn, bloqun ön hissəsinə keçdiyimiz zaman data-menu="blog" işarəsini göstərəcəyik.
Aydınlıq üçün 2 nümunə:
simple.ru Əsas səhifə simple.ru Üslublar main.css Gəlin ən darıxdırıcı hissəni - css/main.css faylını cəld sürüşdürüb kopyalayıb yapışdıraq.
Bədən (vəzifə: nisbi; şrift ailəsi: "Helvetica Neue Light", "Helvetica Neue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; şrift ölçüsü: 1em; şrift-çəki: 400; rəng: #333 ; ) a, a:ziyaret (rəng: poladmavi; ) a:hover (rəng: göy; ) .wrapper ( en: 80%; kənar: 0 10%; ) .spa-title ( şrift ölçüsü: 1.2em; mətn - align: center; ) menyu ( yuxarı kənar: 2em; padding: 0; text-align: center; ) menu a ( display: inline-block; margin-right: 10px; padding: 5px 15px; text-decoration: none ; ) menyu a:hover, menyu a.active ( fon rəngi: poladmavi; rəng: ağ; ) .səhifə başlığı ( mətnin düzülməsi: mərkəz; ) ul li ( siyahı stili növü: dairə; )
İndi ən maraqlı hissə gəlir - fərdi fayllar dəstimizi bir səhifəlik vebsayta çevirəcək javascript kodu.
javascript Ümumi kod və konfiqurasiyalar js kod çərçivəsini təyin edək.
Var app = (function() ( var config = (); var ui = (); // Hadisəni bağlama funksiyası _bindHandlers() ( // ... ) // Proqramın işə salınması funksiyası init() ( // ... _bindHandlers ( ) // Qayıdışdan kənara qayıt ( init: init ) ))(); // Proqramı işə salın $(sənəd).ready(app.init);
Səhifə yükləndikdə init funksiyasını yerinə yetirən ayrıca proqram modulumuz var. Biz ona hadisə idarəçiləri əlavə edirik və daha bir neçə kod icra edirik. Biz həmçinin 2 obyekt görürük: konfiqurasiya və ui. İşimizdə ehtiyac duyacağımız bütün dom elementləri ui-də yaddaşda saxlanılacaq.
Var ui = ( $body: $("body"), $menu: $("#menu"), $pageTitle: $("#page-title"), $content: $("#content") );
Ayrı-ayrı menyu elementlərini vurğulamaq üçün bizə $menyu lazımdır, səhifələr arasında hərəkət edərkən $pageTitle dinamik olaraq dəyişdiriləcək və $content səhifələrin/*.html fayllarının məzmunu ilə yüklənəcək.
Ancaq konfiqurasiya daha maraqlı görünür.
Var config = ( siteTitle: "Webdevkin SPA", mainPage: "əsas", səhifələr: ( əsas: ( başlıq: "Əsas", menyu: "əsas" ), haqqında: ( başlıq: "Layihə haqqında", menyu: " haqqında " ), blog: ( başlıq: "Webdevkin-a Blog", menyu: "blog"), sadə: ( başlıq: "Sadə Layihə", menyu: "sadə"), kontaktlar: ( başlıq: "Kontaktlar", menyu : "əlaqələr" ), mağaza: ( başlıq: "Onlayn mağazalar", menyu: "blog"), frontend: ( başlıq: "Front haqqında məqalələr", menyu: "blog"), mysql: ( başlıq: "Mysql verilənlər bazası" ", menyu: "blog" ), vidjetlər: ( başlıq: "Daxil edilə bilən javascipt vidjetləri", menyu: "blog" ) );
siteTitle: "Webdevkin SPA" - sayt adı, bir neçə yerdə istifadə olunur.
mainPage: "əsas" - site.ru-ya daxil olduqda açılacaq saytın başlanğıc səhifəsini göstərin. İndi bu əsas səhifədir, ancaq başlanğıc səhifəsini, məsələn, "Layihə haqqında" - haqqında yerləşdirmək asanlıqla ağlınıza gələ bilər.
Bütün konfiqurasiyada ən vacib şey səhifələr obyektidir. Hər bir obyekt sahəsi saytın bir səhifəsini təsvir edir. İndi bizə yalnız 2 element lazımdır: səhifənin adı və bu səhifənin aid olduğu menyu. Obyekt düymələri, yəni səhifələr pages/*.html-dəki fayl adlarına və daxili keçidlərdəki href atributlarına uyğun gəlir.
Və nəhayət, hər şeyə başladığımız kodu yazacağıq. Təəccüblənə bilərsiniz, amma saytın saxlanması işini birbaşa yerinə yetirən kod onu yazmağa hazırlıqdan çox azdır.
Ajax istifadə edərək məzmun yüklənir. Tarix API Gəlin qaydada gedək. _bindHandlers lazımi hadisələrin bağlanmasını ehtiva edən init funksiyası üzərində işləyək
// Hadisəni bağlama funksiyası _bindHandlers() ( ui.$body.on("klik", "a", _navigate); window.onpopstate = _popState; )
Birinci sətirdə biz daxili keçidlərə klikləri tuturuq a və onları _navigate funksiyasına göndəririk. İndi biz nəhayət əmin olduq ki, data-link="ajax" üçün ayrıca atributlara ehtiyac var :-)
Növbəti pəncərə.onpopstate = _popState;
Sənədlərdən.
Eyni sənəd üçün iki tarix qeydi arasında aktiv tarix qeydi dəyişdikdə popstate hadisəsi pəncərə obyektinə göndərilir.
Sadəcə olaraq, bu, brauzerdə Geri/İrəli düymələrinin işləməsidir. Gördüyümüz kimi, brauzerin yerli davranışına da müdaxilə etmək lazımdır. Beləliklə, biz _popState funksiyasına nəzarəti verəcəyik.
Daha yaxşı başa düşmək üçün hər iki funksiyanın kodunu bir anda təqdim edəcəyəm
// _navigate(e) ( e.stopPropagation(); e.preventDefault(); var page = $(e.target).attr("href"); _loadPage(səhifə); history.pushState() keçid funksiyasına klikləyin (səhifə: səhifə), "", səhifə); ) // Geri/İrəli düymələr funksiyası _popState(e) ( var page = (e.state && e.state.page) || config.mainPage; _loadPage(səhifə); )
_navigate linkinə açıq bir klik baş verdikdə, biz klik hadisəsinin köpürməsini dayandırırıq və brauzerin standart davranışını ləğv edirik (linkdən sonra). Sonra yükləmək istədiyimiz səhifəni müəyyənləşdiririk (href atributu ilə başa düşülür) və yeni _loadPage funksiyasını çağırırıq. O, məzmunun yüklənməsi, başlığın dəyişdirilməsi və s. kimi bütün əsas işləri görəcək. Və sonunda, history.pushState istifadə edərək, biz brauzer tarixinə yeni bir giriş əlavə edirik. Bəli, biz özümüz açıq şəkildə brauzer tarixini yaradırıq. Sonra, lazım bildiyimiz zaman. Və biz yüklənmiş səhifə haqqında məlumatları obyektə (səhifə: səhifə) saxlayırıq. Bu məlumatlar növbəti _popState funksiyasında bizim üçün faydalı olacaq.
_popState-də ideya oxşardır: biz istədiyiniz səhifəni axtarırıq və eyni _loadPage-i işə salırıq.
Var səhifə = (e.state && e.state.page) || config.mainPage;
e.state && e.state.page - _navigate-də ehtiyatla qeyd etdiyimiz tarix obyektindən bizim üçün bir səhifə çıxarır. e.state obyekti mövcud deyilsə (məsələn, site.ru saytına ilk dəfə daxil olanda və hələ də orada dolaşmağa vaxtımız olmadıqda), onda biz konfiqurasiyamızda əsas kimi göstərilən səhifəni götürürük - konfiqurasiya. Əsas səhifə.
Ədalət naminə, history.pushState funksiyası və pushState-ə yazılmış verilənləri olan e.state obyektinin window.onpopstate-də mövcud olması Tarix API-si haqqında bilməli olduğumuz hər şeydir. Daha maraqlı yoldaşlar üçün şübhə etmirəm ki, googling sizə brauzer tarixçəsi ilə işləməyin digər yaxşı yollarını tapmağa kömək edəcək.
Biz dərin araşdırmalarla məşğul olmayacağıq, lakin _loadPage əsas funksiyasının kodunu yazacağıq
// Məzmunu səhifə funksiyası ilə yükləyin _loadPage(səhifə) ( var url = "səhifələr/" + səhifə + ".html", pageTitle = config.pages.title, menyu = config.pages.menu; $.get(url, funksiya) (html) ( document.title = pageTitle + " | " + config.siteTitle; ui.$menu.find("a").removeClass("aktiv"); ui.$menu.find("a").addClass ("aktiv" ui.$pageTitle.html(ui.$content.html(html));
O, olduqca adi görünür. Əvvəlcə url-ni, yəni səhifə üçün html-ni endirəcəyimiz yolu formalaşdırırıq. Sonra səhifənin başlığını və konfiqurasiyadan seçiləcək menyu elementini çıxarırıq. Sonra, banal jQuery.get vasitəsilə səhifənin html məzmununu əldə edirik və bir sıra sadə hərəkətləri yerinə yetiririk.
a) Səhifənin başlığını yeniləyin
b) 2 sətirdə istədiyiniz menyu elementini seçin
c) Səhifənin özündə, html kodunda başlığı dəyişdirin
d) URL-dən alınan səhifənin faktiki html məzmununu yükləyin
Demək olar ki, hamısı! Kiçik bir an qalıb. İndi, məsələn, site.ru/blog səhifəsinə keçsək və onu yeniləsək, o zaman yüklənəcək bloq yox, boş səhifə olacaq. Çünki inisializasiya zamanı biz _loadPage çağırmırıq. Bunu düzəltmək üçün init funksiyasına bir neçə sətir əlavə etməliyik ki, bu da sonda belə görünəcək.
// Tətbiq funksiyasını işə salın init() ( var page = document.location.pathname.substr(1) || config.mainPage; _loadPage(səhifə); _bindHandlers(); )
İndi hər şey əmindir!
Bağlantıları ümumiləşdirək və xatırlayaq Beləliklə, biz sadə, lakin tam funksional bir səhifəlik vebsayt yazdıq, həmçinin History API-nin necə işlədiyi haqqında bir az öyrəndik. Düzünü desəm, özümü pis filmin rejissoru kimi hiss edirəm, burada vaxtın 80%-i hansısa möhtəşəm nəticəyə gətirib çıxarır və sonda hər şey gözlənildiyindən daha asan olur.
Bir tərəfdən, demək olar ki, bütün kodlar sadəcə hazırlıq, naqillər, konfiqurasiyaların yazılması və digər cansıxıcı şeylərdir. Amma faktiki işi görən həqiqətən faydalı kod 2 onlarla sətir çəkir.
Ancaq digər tərəfdən, konfiqurasiya bizə yeni səhifələr əlavə edərkən asanlıqla genişləndirilə bilən bir quruluş yaratmağa imkan verdi. Bundan əlavə, növbəti məqalədə axtarış sistemlərinə bir səhifəlik veb saytımızı indeksləşdirməyi öyrətdiyimiz zaman bu kifayət qədər böyük konfiqurasiyanın əhəmiyyətini görəcəyik. Yaxşı, üslublar sadəcə daha gözəl görünmək üçün lazımdır :-)
Üçüncü tərəf də var. Bir səhifəlik saytlarla tanış olmayanlar üçün bu, heç də sadə bir şey deyil. Düşünürəm ki, əvvəlcə mürəkkəb görünən bir mövzu, ətraflı nəzərdən keçirildikdə, tamamilə həll edilə bilən və bizim tərəfimizdən çox səy göstərmədən ortaya çıxdıqda əladır.
Sonra demo saytımız tədricən inkişaf edəcəkdir. Növbəti məqalədə saytı axtarış sistemləri tərəfindən indeksləşdirməyə hazırlamağa başlayacağıq, çünki xüsusi tədbirlər görülmədikdə tək səhifəli saytların çox zəif indeksləşdirildiyi məlumdur. Ancaq bu, seriyanın növbəti məqalələrindəndir.
Və kiçik bir anket
Tək Səhifə Tətbiqləri (SPA) sürət, həqiqətən yaxşı UX və HTML işarələnməsinə tam nəzarət kimi bir çox üstünlüklərə malikdir. Getdikcə daha çox SPA saytları var; SPA inkişaf prosesini asanlaşdıran daha çox vasitə var. Yəqin ki, siz artıq gənc və perspektivli Vue.js çərçivəsi haqqında oxumusunuz. Mən sizə Vue-yə daha dərindən dalmağı və sadə bir SPA-nı başa düşmək üçün xüsusi bir nümunədən istifadə etməyi təklif edirəm.
Sadə bir bloq üçün müştəri-server tətbiqi yazacağıq. Tətbiq girişlərin siyahısını, eləcə də hər bir fərdi girişin tam mətnini göstərəcək. Və təbii ki, bütün bunlar səhifəni yenidən yükləmədən baş verəcək.
Bu nümunə tətbiqi oxuduqdan sonra siz Vue-da məlumat çıxarmağı, marşrutlar yaratmağı və Vue-nun maraqlı xüsusiyyətini - tək fayl komponentlərini başa düşməyi öyrənəcəksiniz.
Backend Bu dərslikdə biz əsasən Vue-də frontend üzərində dayanacağıq. REST backend yazmağı düşünməyəcəyik. Məsələn, xidmətdən istifadə edəcəyik jsonplaceholder.typicode.com REST API formasında stub təmin etmək FrontendTools Vue ilə işə başlamaq çox sadədir. Düzgün alətlərlə bu, daha da asandır. Vue-cli bütün hallar üçün alətlərin, komponentlərin, kitabxanaların və plaginlərin siyahısını ehtiva edən vue-awesome layihəsinə nəzər salmağı məsləhət görürəm. Yeni layihə yaratarkən Vue-cli-dən istifadə etmək tövsiyə olunur. Bu yolla siz rəsmi Vue şablon layihələrindən və ya bir çox açıq mənbə şablon layihələrindən birini istifadə edərək layihələr yarada bilərsiniz və təbii ki, özünüz yarada və hər yerdə istifadə edə bilərsiniz. Beləliklə, əvvəlcə vue-cli-ni qlobal paket kimi quraşdıraq:
$ npm quraşdırma -g vue-cli
Sonra seçilmiş şablonla layihəni işə salırıq; Bizim nümunəmiz üçün webpack-simple istifadə etmək kifayətdir.
$ vue init webpack-sadə vue-spa
Sonra, vue-spa qovluğuna gedin və qaçın npm quraşdırın terminalda. Bütün paketləri quraşdırdıqdan sonra tətbiqimizi inkişaf rejimində işlədə bilərik.
$ npm dev run
Bu əmr avtomatik olaraq layihəmizi yerli webpack dev serverində işlədəcək. Ən sadə Vue tətbiqimiz brauzerdə görünəcək. Əlbəttə ki, bu, heç də istədiyimiz kimi görünmür və yalnız daha böyük bir işə başlamaq üçün başlanğıc nöqtəsi kimi uyğun gəlir. İşə davam etmək üçün əvvəlcə şablonumuzun strukturu ilə tanış olmağı təklif edirəm.
Daxili olaraq, webpack-sadə şablon aşağıdakı quruluşa malikdir:
Fayl index.html bədəndə tək bir "tətbiq" elementi ilə sadə HTML işarələməsini ehtiva edir. O, vue tərəfindən yaradılan DOM ilə əvəz olunacaq. Bu səbəbdən etiket bədən Kök element kimi istifadə etmək tövsiyə edilmir.
Qovluqda src web paketinin giriş nöqtəsini ehtiva edən main.js faylı yerləşir. Vue komponentləri orada idxal olunur. O, həmçinin indiyə qədər iki xüsusiyyətə malik olan Vue-nin kök nümunəsini təsvir edir. 'el' xüsusiyyəti müəyyən edilmiş DOM elementi ilə assosiasiya ilə Vue nümunəsini təmin edir. Digəri, DOM-u yaradan bir göstərmə funksiyasıdır App.vue. Bütövlükdə, webpack-sadə şablon strukturu haqqında bilməli olduğumuz hər şey budur, elə deyilmi? Tətbiqimizin əsas hissəsi App.vue-də proqramlaşdırılacaq. .vue uzantısı faylı tək fayllı vue komponenti kimi müəyyən edir. Bu, indi daha yaxından nəzərdən keçirəcəyimiz Vue xüsusiyyətlərindən biridir.
Hər bir *.vue faylı üç növ blokdan ibarətdir: , və istəyə görə. Nəticədə layihəni əlaqəli komponentlərə ayıra bilərik. Komponent daxilində onun şablonu, məntiqi və üslubları mahiyyət etibarı ilə bağlıdır və onların birləşdirilməsi faktiki olaraq komponenti daha vahid və saxlanmasını asanlaşdırır. İndi biz Vue-də bloq yaratmağa hazırıq.
Gəlin görək əslində nəyi həyata keçirəcəyik. Səhifənin yuxarısında blogumuzun adı olan bir başlıq olacaq. Sol tərəfdə yazılarımızın başlıqlarını göstərəcəyimiz sabit bir yan panelimiz olacaq, məzmun cədvəli kimi bir şey olacaq. Səhifənin qalan hissəsini yazı mətninin özünün göstəriləcəyi dinamik blok tutacaq.
Addım 1 İlk növbədə, App.vue-dən bütün əlavə xətləri çıxaraq. Və şablonu tələblərimizə uyğun olaraq yenidən yazacağıq. Vue.js SPA
İkincisi, mesajlarımızla bir sıraya yerləşdirəcəyimiz məlumat xüsusiyyəti ilə Vue nümunəsi yaradacağıq. Hazırda boşdur, lakin tezliklə serverdən alınan məlumatları massivin içərisinə yerləşdirəcəyik.
İlk zəngdən sonra siz artıq kök verilənlər obyektinə reaktiv xüsusiyyətlər əlavə edə bilməyəcəksiniz. Buna görə də, Vue instansiyasını yaratmazdan əvvəl bütün reaktiv xassələri kök səviyyəsində elan etmək tövsiyə olunur.
defolt ixrac(məlumat()(qaytarma(yazılar:)))
Siz həmçinin tətbiqin daha yaxşı görünməsi üçün bəzi üslublar əlavə edə bilərsiniz.
Tətbiq kodu github.com saytında yerləşdirilib. Tətbiqin inkişafını addım-addım izləmək üçün deponu klonlaşdırmaq və filialı addım nömrəsi ilə dəyişmək kifayətdir, məsələn:
$ git yoxlama addım-1
Hazırda naviqasiya panelimizdə göstərmək üçün heç bir şeyimiz yoxdur, ona görə də serverdən məlumatları əldə edək. Bunun üçün istifadəsi asan HTTP müştərisi olan Axios-u seçdim. Siz həmçinin Vue resursu və ya xüsusi gətirmə və ya hətta jQuery Ajax kimi istədiyiniz üsuldan istifadə edə bilərsiniz.
Addım 2 Axios quraşdırın $ npm quraşdırma --save-dev axios
Sonra biz onu Tətbiq komponentinə idxal edirik və serverə sorğu göndərəcək və onu postların mülkiyyətinə təyin edəcək getAllPosts() metodunu təyin edirik. Vue instansiyasını yaratdıqdan və məlumat girişi parametrlərini təyin etdikdən sonra çağırılacaq yaradılmış() çəngəlindəki metodu çağırırıq.
Axiosları "axios"dan idxal et defolt ixrac ( data () ( qayıdış ( yazılar: null, son nöqtə: "https://jsonplaceholder.typicode.com/posts/", ) ), yaradılmış() ( this.getAllPosts(); ) , üsullar: ( getAllPosts() ( axios.get(this.endpoint) .then(cavab => ( this.posts = respond.data; )) .catch(error => ( console.log("----- xəta-------"); console.log(xəta); ))) ) ) )
İndi yan paneldə bütün yazı başlıqlarını göstərək.
((post.title))
İndiyə qədər biz yalnız yazı başlıqlarını göstərmişik, lakin hələ yazıların özlərini görə bilmirik. İndi tam yazını yan paneldə seçilmiş başlığa uyğun olaraq məzmun bölməsində göstərməlisiniz. Eyni zamanda, hər bir girişin özünəməxsus ünvanında olmasını istərdim.
Addım 3 Bunun üçün rəsmi Vue kitabxanası vue-routerindən istifadə edəcəyik. Adından da göründüyü kimi, kitabxana proqramımız üçün marşrutlaşdırmanı konfiqurasiya etməyə imkan verir.
Kitabxananı quraşdıraq: $ npm quraşdırın --save-dev vue-router
Marşrutlaşdırmanı konfiqurasiya etmək üçün main.js faylına qayıdaq. Burada marşrutlaşdırma parametrlərini təyin edəcəyik və onları Vue nümunəmizə əlavə edəcəyik.
Vue-ni "vue"-dan idxal edin Routeri "vue-router"-dan idxal edin Proqramı "./App.vue"-dan idxal edin "./components/Post.vue"-dan yazın idxal "./components/Hello.vue" Vue-dan Salam. use(Router) const router = new Router((marşrutlar: [ ( yol: "/", ad: "ev", komponent: Salam, ), ( yol: "/post/:id", ad: "post", komponent: Post, rekvizitlər: doğru, ] )) yeni Vue((el: "#app", render: h => h(App), marşrutlaşdırıcı ))
Marşrutlaşdırma parametrlərində hansı komponentin müvafiq yol boyunca göstərməyə səbəb olduğunu müəyyən etdik. Yalnız Post.vue komponenti hər bir yazının göstərilməsi üçün cavabdeh olacağından, hər bir postun yolunu müəyyən etməyə ehtiyacımız olmayacaq, sadəcə olaraq dinamik bir yol təyin etməliyik.
Yol: "/post/:id"
Bu yol dinamik seqmentdən ibarətdir: id hansı ki, konkret yazıya işarə edir. Üstəlik, bu seqmentə Post komponentində vasitəsilə daxil ola bilərik bu.$marşrut.params.id. Bununla belə, komponentimizdə $route istifadə etmək onu marşruta birləşdirəcək, bu da öz növbəsində komponentin çevikliyini məhdudlaşdırır, çünki o, yalnız müəyyən URL-lərdə istifadə edilə bilər. Bunun əvəzinə seçimdən istifadə edə bilərik rekvizit və onu quraşdırın doğru. Bundan sonra, $route.params Post komponentinin rekvizit seçimi ilə əlaqələndiriləcək.
İndi marşrutlaşdırıcını yaratdıqdan sonra tətbiqimizə qayıdıb şablona bir neçə sətir əlavə edə bilərik.
((post.id)). ((post.title))
Burada iki komponentimiz var vue-router: Və . Birincisi, marşrutlaşdırma ilə aktivləşdirilmiş proqramda istifadəçi naviqasiyasını təmin etmək üçün komponentdir. İkinci komponent müəyyən bir yol üçün ardıcıl komponenti göstərən funksional komponentdir.
Son addım qalır. Biz post girişinin məzmununu göstərməliyik.
Addım 4 Gəlin sadə bir şablon əlavə edəcəyimiz Post.vue faylına keçək:
((post.title)) ((post.bədən))
((post.id))
Sonra bu komponent üçün Vue nümunəsi parametrlərini təyin etməliyik. Burada hər şey bütün yazıları göstərmək üçün parametrlərdə olduğu kimidir. Gəlin bir variant elan edək rekvizit dəyişməsi ilə id, poçt nömrəmizi alacaq. Bundan sonra, App.vue-də etdiyimiz kimi, verilənlər obyektini elan edək: "Axios" dan axiosları idxal edin; defolt ixrac ( rekvizitlər: ["id"], data() ( qaytarma ( yazı: null, son nöqtə: "https://jsonplaceholder.typicode.com/posts/", ) ) )
Sonra üsulu təsvir edəcəyik getPost(), id ilə yalnız bir yazı girişi qəbul edəcək və onu çəngəldə çağıracaq yaradılmışdır().
Metodlar: ( getPost(id) ( axios(this.endpoint + id) .then(cavab => ( this.post = respond.data )) .catch(error => ( console.log(error) )) ) ), yaradılmış () ( this.getPost(this.id); ),
Demək olar ki, hazırdır. Tətbiqi indi işə salsaq, görə bilərik ki, URL dəyişsə də, ilk olaraq göstərilən tək yazını görürük. Məsələ burasındadır ki, bizdə fərqli postlar göstərmək üçün eyni komponent var və lazımsız resurs israfı səbəbindən Vue-nun onu yenidən yaratmasına ehtiyac yoxdur, bu da komponentin həyat dövrü qarmaqlarının çağırılmayacağı anlamına gəlir.
Bunu düzəltmək üçün sadəcə obyektə bir müşahidəçi təyin etməliyik $marşrut.
Baxın: ( "$route"() ( this.getPost(this.id); ) )
İndi hər şey lazım olduğu kimi işləyir. İstehsal versiyasını əldə etmək üçün sadəcə əmri yerinə yetirin npm run build konsolda.
Xülasə edək Vue-dan istifadə edərək dörd addımda sadə bir səhifəli proqram yazdıq. Layihənizi vue-cli ilə başlatmağın nə qədər asan olduğunu öyrəndik. Layihənizi daha çevik və genişlənə bilən tək fayllı Vue komponentləri konsepsiyasını əhatə etdik. Axios istifadə edərək xarici API-dən məlumat əldə etməyi öyrəndik. Və biz vue-routerdən istifadə edərək marşrutlaşdırmanın necə qurulacağını gördük. Əlbəttə, bu, əsas bilikdir, lakin ümid edirəm ki, bu, Vue.js-dən istifadə etməyə və onun qabaqcıl xüsusiyyətlərindən yararlanmağa başlamağınıza kömək edəcək. Hamıya salam! Bu yazıda veb inkişafında SPA-nın nə olduğunu və onun müsbət və mənfi cəhətlərinin nə olduğunu başa düşəcəyik.
Təsvir Yəqin ki, bəziləriniz SPA abbreviaturasını artıq eşitmisiniz. Ancaq hər kəs bunun nə olduğunu bilməyə bilər, gəlin öyrənək.
SPA (bir səhifə tətbiqi) bir səhifədə işləyən veb proqramdır. Səhifə ilk dəfə yükləndikdə bütün lazımi javascript və css fayllarını yükləyir, sonra isə müştəri ilə server arasında bütün əlaqə minimuma endirilir. Bunlar. Bu yanaşma ilə saytın işinin çox hissəsi müştəri tərəfində həyata keçirilir və əgər serverdən məlumat almaq lazımdırsa, bu, adətən JSON istifadə edərək edilir.
Veb saytların yaradılmasının bu üsulu nisbətən yaxınlarda, HTML5-in meydana çıxması ilə ortaya çıxdı, lakin artıq aktiv şəkildə təcil qazanır. Prinsipcə, burada təəccüblü bir şey yoxdur, çünki belə bir veb tətbiqi adi veb saytlardan daha sürətli işləyəcək və inkişaf çox vaxt aparmayacaq. Xoşbəxtlikdən, indi bu tip çox mürəkkəb saytları olduqca sadə və tez yaratmağa imkan verən bir dəstə çərçivə var. Hazırda React ən yaxşı çərçivə hesab olunur. Rəqiblərindən daha çox üstünlüklərə malikdir və öyrənmək və istifadə etmək də asandır. Onu necə istifadə edəcəyinizi öyrənmək istəyirsinizsə, nəzər salmağı məsləhət görürəm. Hələlik SPA-nın üstünlüklərinə keçək.
SPA-nın üstünlükləri - Çox sayda cihazı dəstəkləyir. Standart yanaşmadan fərqli olaraq, SPA proqramları həm masaüstü kompüterlərdə, həm də mobil cihazlarda eyni dərəcədə yaxşı işləyir. Beləliklə, siz bir proqram yarada bilərsiniz və onun yavaşlamayacağına və çox güclü olmayan cihazlarda belə mükəmməl işləyəcəyinə əmin ola bilərsiniz.
- Güclü UX. Bu yanaşmaya əsaslanan proqramlarda müxtəlif məlumatları saxlamaq, saytın təqdimatını və animasiyaları idarə etmək xeyli asandır. Həm də yalnız bir iş səhifəsi olduğundan, gözəl istifadəçi interfeysi yazmaq çətin olmayacaq
- Yüksək performans . Adi veb saytlarda eyni məzmunun yüklənməsini görmək çox yaygındır. Məsələn, saytın başlığı, altbilgisi, menyusu və səhifədən səhifəyə dəyişməyən digər elementlər, lakin hər dəfə serverdən yüklənir. SPA yanaşmasının istifadəsi ilə belə bir problem sadəcə olaraq olmayacaq, çünki məzmun lazım olduqda yüklənəcək, bu da tətbiqin sürətini əhəmiyyətli dərəcədə artıracaq
SPA-nın demək olar ki, heç bir mənfi tərəfi yoxdur. Diqqətə layiq olan yeganə şey, bu cür tətbiqlərin inkişafı olduqca diqqətlə aparılmalıdır. Məsələ ondadır ki, yaddaş sızması varsa, məsələn, proqram istədiyimizdən daha yavaş işləməyə başlaya bilər. Ancaq bütün bunlar tərtibatçıdan, onun bacarıqlarından asılıdır, buna görə də yüksək keyfiyyətli tətbiqlər etmək istəyirsinizsə, o zaman sizə "" video kursuna diqqət yetirməyi məsləhət görürəm. O, xüsusi olaraq peşəkar tərəfindən tərtib edilmişdir ki, siz də güclü və sürətli proqramlar hazırlamağı öyrənəsiniz və İnternetdə həqiqətən yüksək keyfiyyətli saytların sayı artıb.
Nəticə Beləliklə, bu gün biz SPA (bir səhifə tətbiqi) nədir, onun üstünlükləri və mənfi cəhətləri nələrə baxdıq.
