Artikel ini dan artikel berikutnya akan menjelaskan alat Web API, yang merupakan tambahan yang relatif baru pada platform ASP.NET yang memungkinkan Anda membuat layanan web dengan cepat dan mudah yang mengekspos API ke klien HTTP.
Alat Web API didasarkan pada landasan yang sama dengan aplikasi ASP.NET MVC Framework, namun bukan bagian dari ASP.NET MVC Framework. Sebaliknya, Microsoft mengambil sekumpulan kelas kunci dan karakteristik terkait dari namespace System.Web.Mvc dan menduplikasinya di namespace Sistem.Web.Http.
Idenya adalah bahwa Web API adalah bagian dari kerangka ASP.NET utama dan dapat digunakan dalam jenis aplikasi web lain atau sebagai mesin layanan web mandiri. Salah satu kegunaan utama alat Web API adalah untuk membuat aplikasi satu halaman (SPA) dengan menggabungkan Web API dengan kemampuan ASP.NET MVC Framework. Selanjutnya kami akan menunjukkan kepada Anda apa itu aplikasi SPA dan cara kerjanya.
Menyederhanakan pembuatan layanan web merupakan fitur integral dari Web API. Ini mewakili peningkatan signifikan dibandingkan teknologi layanan web lain yang ditawarkan Microsoft selama dekade terakhir. Saya menyukai alat Web API dan Anda harus menggunakannya dalam proyek Anda, terutama karena alat ini sederhana dan dibangun berdasarkan filosofi desain yang sama dengan ASP.NET MVC Framework.
Istilah aplikasi satu halaman (SPA) digunakan cukup luas. Definisi yang paling konsisten adalah bahwa ini adalah aplikasi web yang konten awalnya dikirimkan sebagai kombinasi markup HTML dan kode JavaScript, dan operasi selanjutnya dilakukan menggunakan layanan web REST yang mengirimkan data dalam format JSON sebagai respons terhadap permintaan Ajax.
Hal ini berbeda dengan jenis aplikasi yang dibangun pada contoh sebelumnya, dimana hasil operasi pengguna berupa dokumen HTML baru yang dihasilkan sebagai respons terhadap permintaan HTTP sinkron. Aplikasi seperti ini akan disebut aplikasi pulang pergi (RTA).
Kelebihan aplikasi SPA adalah membutuhkan bandwidth yang lebih sedikit dan pengguna mendapatkan antarmuka yang lebih lancar. Kekurangannya mencakup antarmuka yang lebih ramping ini mungkin sulit dicapai, dan kompleksitas kode JavaScript yang diperlukan untuk aplikasi SPA berarti diperlukan desain dan pengujian yang cermat.
Sebagian besar aplikasi menggabungkan teknik SPA dan RTA, dengan setiap area utama fungsionalitas aplikasi dikirimkan sebagai SPA, dan navigasi antar area fungsionalitas dikelola menggunakan permintaan HTTP standar yang membuat dokumen HTML baru.
Untuk keperluan artikel ini, proyek MVC baru bernama WebServices dibuat di Visual Studio menggunakan templat Kosong. Di bagian Tambahkan folder dan referensi inti untuk, kotak centang MVC dan Web API telah dicentang seperti yang ditunjukkan pada gambar di bawah ini:
Proyek ini akan digunakan untuk membuat aplikasi ASP.NET MVC Framework biasa dan kemudian membuat layanan web menggunakan Web API. Setelah layanan web siap, aplikasi ASP.NET MVC Framework akan diubah menjadi aplikasi satu halaman.
Aplikasi akan membuat dan memelihara serangkaian permintaan reservasi kamar. Aplikasi ini direncanakan dibuat sederhana sehingga orang dapat fokus pada mekanisme fasilitas yang dijelaskan, sehingga permintaan pemesanan hanya akan terdiri dari nama pelanggan dan lokasi lokasi. File kelas bernama Reservation.cs telah ditambahkan ke folder Models, yang isinya ditunjukkan pada contoh di bawah ini:
Namespace WebServices.Models ( Reservasi kelas publik ( public int ReservationId ( get; set; ) string publik Nama Klien ( get; set; ) Lokasi string publik ( get; set; ) ) )
Rencananya adalah membuat kumpulan objek Reservasi sederhana di dalam memori yang akan bertindak sebagai penyimpan data. Tidak perlu menginstal database, tetapi Anda harus mampu melakukan operasi CRUD pada kumpulan objek model untuk mendemonstrasikan beberapa aspek penting dari Web API. File kelas bernama ReservationRepository.cs juga ditambahkan ke folder Models:
Menggunakan System.Collections.Generik; menggunakan System.Linq; namespace WebServices.Models ( ReservationRepository kelas publik ( private static ReservationRepository repo = new ReservationRepository(); public static ReservationRepository Saat ini ( get ( return repo; ) ) private List data = Daftar baru ( ReservationId baru ( ReservationId = 1, ClientName = "Peter" , Lokasi = "Hotel"), Reservasi baru (ReservationId = 2, ClientName = "Vasya", Lokasi = "Perpustakaan"), Reservasi baru (ReservationId = 3, ClientName = "Igor", Lokasi = "Ruang Makan"), ) ; IEnumerable GetAll() ( mengembalikan data; ) GetReservasi publik (int id) ( mengembalikan data.Where(r => r.ReservationId == id).FirstOrDefault(); ) Tambah Reservasi publik (item Reservasi) ( item. ReservationId = data.Count + 1; data.Add(item); return item; ) public void Hapus(int id) ( Reservasi item = Dapatkan(id); if (item != null) ( data.Remove(item); ) ) public bool Update(Reservasi item) ( ReservasistoredItem = Dapatkan(item.ReservationId);if (storedItem != null) (storedItem.ClientName = item.ClientName; item tersimpan.Lokasi = item.Lokasi; kembali benar; ) lain ( kembalikan salah; ) ) ) )
Dalam proyek nyata, kita harus berhati-hati dalam memutus hubungan erat antar kelas dan memperkenalkan antarmuka ke dalam aplikasi, serta menyediakan injeksi ketergantungan. Namun, topik ini hanya berfokus pada API Web dan aplikasi SPA, jadi jika menyangkut praktik standar, beberapa penyederhanaan akan dilakukan.
Kelas penyimpanan memiliki daftar awal tiga objek Reservasi dan menentukan metode yang memungkinkan Anda melihat, menambah, menghapus, dan memperbarui koleksi. Karena tidak ada persistensi di penyimpanan, setiap perubahan yang dilakukan pada penyimpanan akan hilang ketika aplikasi dihentikan dan dimulai ulang, namun contoh ini sepenuhnya berfokus pada cara konten dikirimkan, bukan bagaimana konten disimpan di server. Untuk memberikan sejumlah persistensi antar permintaan, sebuah instance dari kelas ReservationRepository dibuat, yang dapat diakses melalui properti statis Saat Ini.
Artikel ini dan artikel selanjutnya akan menggunakan tiga paket NuGet: jQuery, Bootstrap, dan Knockout. Pustaka jQuery dan Bootstrap telah dijelaskan dan digunakan sebelumnya. Knockout adalah perpustakaan yang telah diadaptasi oleh Microsoft untuk aplikasi satu halaman. Itu diciptakan oleh Steve Sanderson. Meskipun Steve bekerja untuk Microsoft, paket Knockout tersedia sebagai sumber terbuka di situs perpustakaan Knockout dan telah diadopsi secara luas. Kami akan menunjukkan cara kerja Knockout nanti, tetapi untuk saat ini Anda perlu menginstal paket yang disebutkan di atas.
Pilih Tools --> Library Package Manager --> Package Manager Console untuk membuka jendela baris perintah NuGet dan masukkan perintah berikut:
Instal-Paket jquery -versi 1.10.2 -nama proyek Layanan Web Instal-Paket bootstrap -versi 3.0.0 -nama proyek Layanan Web Instal-Paket knockoutjs -versi 3.0.0 -nama proyek Layanan Web
Sebuah pengontrol bernama Home ditambahkan ke proyek contoh, yang definisinya dapat dilihat pada contoh:
Menggunakan WebServices.Models; menggunakan Sistem.Web.Mvc; namespace WebServices.Controllers ( kelas publik HomeController: Controller ( ReservationRepository repositori = ReservationRepository.Current; public ViewResult Index() ( return View(repository.GetAll()); ) public ActionResult Add(Item reservasi) ( if (ModelState.IsValid) ( repositori.Tambahkan(item); return RedirectToAction("Indeks"); lain kembali Lihat("Indeks"); publik ActionResult Update(Reservasi item) ( if (ModelState.IsValid && repositori.Update(item)) return RedirectToAction( "Indeks "); lain kembali Lihat("Indeks");
Ini adalah pengontrol yang sangat khas untuk aplikasi sederhana. Setiap metode tindakan berhubungan langsung dengan salah satu metode di penyimpanan. Kegunaan pengontrol hanya berasal dari melakukan validasi model, memilih tampilan, dan melakukan pengalihan. Tentu saja, dalam proyek nyata akan ada logika domain tambahan, tetapi karena contoh aplikasinya sangat mendasar, pengontrolnya hanya menjadi pembungkus sederhana di sekitar toko.
Untuk menghasilkan konten bagi aplikasi, folder Views/Shared dibuat dan file tampilan bernama _Layout.cshtml ditambahkan ke dalamnya dengan konten yang ditunjukkan pada contoh di bawah ini:
Tata letak dasar ini menyediakan elemen untuk file CSS pustaka Bootstrap. Tata letak mendefinisikan dua bagian, Skrip dan Isi, yang akan digunakan untuk menyisipkan konten ke dalam tata letak. Langkah selanjutnya adalah membuat tampilan tingkat atas untuk aplikasi tersebut. Meskipun langkah selanjutnya adalah membangun aplikasi ASP.NET MVC Framework biasa, Anda tahu bahwa pada akhirnya Anda akan membangun aplikasi satu halaman.
Transformasi akan lebih mudah dilakukan jika Anda membuat satu tampilan yang berisi semua markup HTML yang diperlukan untuk aplikasi, meskipun hasilnya awalnya terlihat sedikit aneh. File tampilan bernama Index.cshtml ditambahkan ke folder Views/Home, yang isinya ditunjukkan pada contoh di bawah ini:
@menggunakan WebServices.Models @model IEnumerable @( ViewBag.Title = "Reservasi";
}
@section Scripts {
}
@section Body {
@Html.Partial("Summary", Model)
@Html.Partial("Editor", new Reservation())
}!}
Model tampilan untuk tampilan ini adalah enumerasi objek Reservasi, dan dua tampilan parsial dibuat untuk menyediakan blok penyusun fungsionalitas yang akan dilihat pengguna. File dengan tampilan parsial pertama disebut Summary.cshtml. File ini dibuat di folder Views/Home:
Model tampilan untuk tampilan parsial adalah enumerasi yang sama dari objek Reservasi dan digunakan untuk menghasilkan tabel bergaya menggunakan Bootstrap sebagai elemen
, yang menampilkan nilai properti objek tersebut. Metode pembantu Html.ActionLink() digunakan untuk menghasilkan tautan yang akan memanggil tindakan Hapus pengontrol Rumah; tautannya ditata sebagai tombol menggunakan Bootstrap.
Tampilan parsial lainnya disebut Editor.cshtml dan juga terletak di folder Views/Home. Isi file ini ditunjukkan pada contoh di bawah ini. Tampilan sebagian berisi formulir yang digunakan untuk membuat permintaan pemesanan baru. Mengirimkan formulir menyebabkan tindakan Tambah pengontrol Rumah dipanggil.
@model WebServices.Models.Reservation Buat pesanan @using (Html.BeginForm("Add", "Home")) ( Nama Klien @Html.TextBoxFor(m => m.ClientName, new ( @class = "form-control" )) Penempatan @Html.TextBoxFor(m => m.Location, new ( @class = "form-control" )) Simpan )
Menetapkan URL awal dan menguji aplikasi Langkah persiapan terakhir melibatkan pengaturan lokasi di mana Visual Studio akan dituju saat aplikasi dimulai. Pilih Properti WebServices dari menu Proyek di Visual Studio, di kotak dialog yang terbuka, buka tab Web dan centang tombol radio Halaman Tertentu di kategori Mulai Tindakan. Tidak perlu memasukkan nilai apa pun - cukup pilih tombol radio.
Untuk menguji aplikasi dalam bentuk klasik ASP.NET MVC Framework, pilih Mulai Debugging dari menu Visual Studio Debug. Anda akan melihat tata letak lengkap (sedikit aneh) yang menyediakan daftar pemesanan saat ini kepada pengguna beserta kemampuan untuk membuat dan menghapusnya:
Pada artikel berikutnya kita akan menambahkan fasilitas Web API ke aplikasi kita.
Artikel ini akan fokus pada Aplikasi Satu Halaman (SPA). Pro dan kontra dari aplikasi web yang dibangun berdasarkan prinsip situs satu halaman (SPA) akan dipertimbangkan.
Apa itu SPA Aplikasi Satu Halaman - disingkat SPA, diterjemahkan ke dalam bahasa Rusia berarti "Aplikasi Satu Halaman". Dengan kata lain, SPA adalah aplikasi web yang dihosting di satu halaman web, yang, untuk memastikan pengoperasian, memuat semua kode yang diperlukan bersamaan dengan memuat halaman itu sendiri. Jenis aplikasi ini muncul relatif baru, dengan dimulainya era HTML5 dan SPA merupakan representasi khas dari aplikasi HTML5.
Seperti kita ketahui, HTML5 tidak lebih dari HTML + CSS3 + JavaScript + [beberapa tag baru]. Jadi, SPA adalah aplikasi yang ditulis dalam JavaScript. Dan, oleh karena itu, dengan sedikit memparafrasekan definisi sebelumnya, kita mendapatkan:
“SPA adalah aplikasi web yang dihosting di satu halaman, yang, untuk memastikan pengoperasian, memuat semua file javascript (modul, widget, kontrol, dll.), serta file CSS, bersamaan dengan memuat halaman itu sendiri.”
Jika aplikasinya cukup kompleks dan berisi fungsionalitas yang kaya, seperti sistem manajemen dokumen elektronik, maka jumlah file dengan skrip bisa mencapai beberapa ratus, atau bahkan ribuan. Dan "...memuat semua skrip..." sama sekali tidak berarti bahwa ketika situs dimuat, ratusan dan ribuan file dengan skrip akan diunduh sekaligus. Untuk mengatasi masalah memuat skrip dalam jumlah besar ke SPA, API yang disebut AMD dipanggil. AMD mengimplementasikan kemampuan untuk mendownload skrip sesuai permintaan. Artinya, jika “halaman utama” dari portal satu halaman memerlukan 3 skrip, skrip tersebut akan dimuat segera sebelum program dimulai. Dan jika pengguna mengklik halaman lain dari portal satu halaman, misalnya, “Tentang program”, maka prinsip AMD akan memuat modul (skrip + markup) hanya sebelum membuka halaman ini.
Ternyata sedikit kusut: “Satu halaman… halaman lain, halaman ketiga… portal satu halaman.” Mari kita beri tanda titik pada semua huruf “E”. Kami akan menyebut halaman situs tempat semua link ke semua CSS dan link ke skrip yang diperlukan agar SPA berfungsi sebagai "halaman Web". File dengan halaman seperti itu biasanya disebut "index.html" (dalam ASP.NET MVC bisa berupa index.cshtml atau index.vbhtml atau bahkan index.aspx) Dan halaman yang dialihkan pengguna di dalam satu halaman portal akan disebut "modul".
Mari kita lihat pro dan kontra dari pendekatan ini. Mengapa semua ini diperlukan dan mengapa SPA begitu populer?
SPA: Kelebihan Keuntungan pertama yang perlu diperhatikan adalah kenyataan bahwa aplikasi SPA bekerja dengan sempurna di desktop dan perangkat seluler. Komputer “besar”, tablet, ponsel pintar, dan, pada akhirnya, telepon sederhana (beberapa) dapat dengan mudah bekerja dengan situs yang dibangun berdasarkan prinsip SPA. Jadi, “kelebihan” pertama adalah ia berfungsi pada banyak perangkat, yang berarti dengan membuat satu aplikasi, Anda mendapatkan lebih banyak pengguna dibandingkan saat menggunakan pendekatan standar.
Selanjutnya, “plus” kedua adalah antarmuka pengguna yang kaya, yang disebut Pengalaman Pengguna. Karena hanya ada satu halaman web, lebih mudah untuk membangun antarmuka pengguna yang kaya dan kaya. Lebih mudah untuk menyimpan informasi sesi, mengelola status tampilan, dan mengontrol animasi (dalam beberapa kasus).
“Kelebihan” ketiga adalah SPA secara signifikan (beberapa kali lipat) mengurangi apa yang disebut “lingkaran”, yaitu mengunduh konten yang sama berulang kali. Jika portal (situs) Anda menggunakan templat, maka bersama dengan konten utama halaman mana pun, pengunjung situs harus mengunduh markup templat. Ya, cache data pada tahap pengembangan WWW ini telah mencapai hasil tertinggi, tetapi jika tidak ada yang perlu di-cache, maka baik waktu maupun sumber daya tidak akan terbuang sia-sia.
SPA: Kontra Jika Anda memprogram dalam C#, satu-satunya kelemahan SPA adalah kebutuhan untuk mempelajari JavaScript. Bagaimanapun, saya tidak dapat menemukan masalah global lainnya.
Komponen SPA Prinsip kerangka apa pun (kita akan membicarakannya nanti) yang menerapkan paradigma SPA harus mematuhi konsep dan definisi berikut:
- SPA mendukung navigasi klien. Semua "perjalanan" pengguna melalui modul halaman dicatat secara unik dalam riwayat navigasi, dan navigasinya "dalam", yaitu, jika pengguna menyalin dan membuka tautan ke modul halaman internal di browser atau jendela lain, dia akan dibawa ke halaman yang sesuai.
- SPA terletak di satu halaman web, yang berarti bahwa semua yang diperlukan untuk pengoperasian situs (portal), skrip dan gaya, harus ditentukan di satu tempat dalam proyek - di satu halaman web.
- SPA secara permanen menyimpan status (variabel penting) klien (skrip klien) di cache browser atau di Penyimpanan Web.
- SPA memuat semua skrip yang diperlukan untuk memulai aplikasi saat halaman web diinisialisasi.
- SPA secara bertahap memuat modul sesuai permintaan.
Templat SPA Seperti yang mungkin sudah Anda duga, SPA adalah konsep abstrak. Ini adalah prinsip arsitektur aplikasi. Mari kita bicara tentang mulai dari mana ketika mengembangkan situs web sesuai dengan prinsip SPA.
Ada sejumlah besar perpustakaan dasar (kerangka - dari kata bahasa Inggris kerangka - “dasar, struktur, bingkai”) yang menerapkan prinsip Aplikasi Halaman Tunggal. Apa yang disediakan oleh kerangka kerja ini:
- memberikan prinsip dasar untuk pengembangan SPA, meminimalkan biaya tenaga kerja untuk memecahkan masalah universal (lihat bagian “Komponen SPA);
- kerangka kerja dibuat oleh komunitas pengembang, yang berarti mereka menggunakan pengalaman membuat situs web dari banyak pemrogram;
- kerangka kerja adalah titik awal untuk membuat struktur berdasarkan Aplikasi Halaman Tunggal.
Karena saya telah bekerja di platform NET selama bertahun-tahun, saya akan melihat template Aplikasi Halaman Tunggal berdasarkan ASP.NET. Mari kita lihat grafik perbandingan berikut.
Perbandingan fitur template SPA Tabel ini menunjukkan templat yang paling umum sebagai dasar pembuatan aplikasi Aplikasi Halaman Tunggal. Harap dicatat bahwa blok penyusun dasar untuk membangun kerangka kerja lengkap, seperti DurandalJS dan HotTowel, yang disorot dengan warna hijau, disorot dengan warna biru.
Jadi, mengikuti data yang disediakan dalam tabel, Anda dapat membuat aplikasi Aplikasi Satu Halaman menggunakan ASP.NET dan KnockoutJS. Namun, Anda harus menulis sendiri implementasi bekerja dengan data (DAL), serta mengelola navigasi dan riwayat navigasi, antara lain.
21 Mei 2017
Situs satu halaman atau Single Page Applications (SPA) memang keren. Keuntungan utama mereka adalah SPA lebih cepat dan responsif terhadap tindakan pengguna. Hal ini dicapai dengan mentransfer logika kerja ke sisi klien dan secara aktif berinteraksi dengan server melalui ajax.
Ada pendapat bahwa SPA adalah aplikasi kuat di Angular atau React yang memindahkan banyak data ke beberapa panel kontrol atau ke layanan yang kompleks. Dan secara umum hal ini benar. Namun saya yakin bahwa masuk akal untuk menulis aplikasi satu halaman tidak hanya untuk layanan tersebut, tetapi juga untuk situs kartu nama perusahaan biasa.
Mengapa ini perlu dan bagaimana melakukannya dengan sedikit usaha? Lebih lanjut tentang ini di bawah. Pergi.
Jadi, mengapa ini memanjakan? Yang terpenting adalah kecepatan kerja.
Tentu saja, ketika mengembangkan situs kartu nama satu halaman, kita akan menemui beberapa masalah:
- 1. Bagaimana pendekatannya, mulai dari mana?
- 2. Bagaimana cara menangani riwayat browser, dengan History API?
- 3. Kerangka kerja atau perpustakaan mana yang harus saya pelajari: Angular, React? Dan kita tidak tahu satu pun...
- 4. Bagaimana cara memaksa mesin pencari untuk mengindeks situs satu halaman?
Jawaban atas pertanyaan-pertanyaan ini:
- 1. Mari kita lihat ini di artikel yang sama, dengan menggunakan contoh website sederhana
- 2. Saya juga akan memberi tahu Anda di bawah, ini selusin baris kode
- 3. Tidak ada, kami akan menggunakan javascript asli dan jQuery sebagai asisten
- 4. Artikel selanjutnya dalam seri ini akan membahas tentang mesin pencari.
Mengapa tanpa reaksi sudut?
Tentu saja, ini adalah topik yang sangat penting, saya sarankan untuk mempelajarinya. Namun untuk contoh kita, mereka tidak diperlukan; kita hanya perlu memiliki pengetahuan minimal tentang javascript.
Satu halaman adalah topik lebih dari satu artikel. Ini akan menjadi keseluruhan proyek, serangkaian artikel yang terdiri dari setidaknya tiga bagian. Dan itu akan mencakup berbagai topik. Tapi izinkan saya menjelaskan. Kami akan membangun panel admin sederhana dengan interaksi dengan server melalui REST API (setidaknya di awal). Dalam pelajaran pertama, situs satu halaman kita akan menjadi kartu nama biasa yang terdiri dari selusin halaman. Namun situs ini akan berfungsi tanpa memuat ulang halaman dan akan menyenangkan pengguna kami dengan kecepatan dan daya tanggap antarmuka.
Ide situs, cara kerjanya Mari kita ambil situs web perusahaan yang paling umum: halaman beranda, bagian "Tentang proyek", kontak, dan blog. Bagian Blog akan memiliki beberapa link ke halaman internal. Pada setiap halaman kami akan menambahkan beberapa konten dan menyisipkan beberapa referensi silang.
Setiap halaman di situs biasanya memiliki konten yang berulang. Bagi kami ini akan menjadi header dan menu. Dan ada konten utama halaman yang berubah. Kami akan melakukan ini: kami akan memuat halaman sekali saja, dan kemudian dengan mengklik link, kami akan memuat konten yang diperlukan secara dinamis menggunakan Ajax. Pada saat yang sama, kita akan mengubah judul halaman di tab browser, url di bilah alamat dan mengingat riwayat di browser sehingga navigasi melalui tombol Mundur/Maju di browser berfungsi.
Konten untuk setiap halaman akan disimpan dalam file html terpisah.
Anda dapat segera melihat apa yang kami dapatkan -
Struktur lokasi dan pekerjaan persiapan Struktur folder file adalah sebagai berikut. Di root proyek ada file index.php dan .htaccess. Saya akan memberi tahu Anda alasannya tepatnya php dan bukan html nanti. Folder css berisi gaya dalam file main.css. Folder js berisi perpustakaan jquery.js dan file aplikasi utama main.js. Folder halaman berisi file html dengan konten situs - satu file untuk setiap halaman.
Mempersiapkan konten Saya akan membuat situs demo menggunakan proyek webdevkin saya sebagai contoh. Kumpulan halamannya akan seperti ini:
- — utama - Rumah
- — tentang - Tentang proyek
- — blog - Blog
- — toko - Toko online
- — bagian depan - Bagian depan
- — mysql - Basis Data MySql
- — widget - Widget yang dapat disematkan
- — sederhana - Proyek Sederhana
- — kontak - Kontak
Dengan demikian, folder halaman akan berisi 9 file html. Anda dapat menemukan semua markup untuk konten di . Sebagai contoh, saya akan memberikan konten hanya satu file - simple.html
Proyek Sederhana tumbuh dari sebuah situs blog. Ide proyek ini adalah membuat widget sederhana dan mudah disematkan yang membantu berinteraksi dengan pengunjung situs Anda. Saat ini sudah ada widget survei yang mudah dibuat dan disematkan di website mana pun.
Seperti yang Anda lihat, tidak ada kepala, badan, html, skrip di sini - hanya markup yang terkait dengan halaman tertentu.
indeks.php dan .htaccess Mengapa tidak index.html?
Faktanya adalah bahwa di situs kami akan ada satu halaman fisik - indeks. Namun kami juga tertarik dengan alamat seperti site.ru/about, site.ru/contacts, dll. Namun tidak ada halaman tentang dan kontak di root situs kami. Folder halaman dengan kumpulan file html bukanlah halaman lengkap, tetapi hanya potongan kode html yang dibangun ke dalam kerangka keseluruhan.
Oleh karena itu, agar ketika mengakses site.ru/about kita tidak mendapatkan 500, 403 dan entah kesalahan apa lagi, kita harus mengarahkan semua permintaan masuk ke situs ke index.php, yang akan menyelesaikan permintaan tersebut. Namun, untuk saat ini index.php kita hanyalah markup html biasa tanpa satu baris kode php (tapi ini hanya untuk saat ini). Dan di .htaccess kami akan menulis yang berikut ini. Anda jarang harus kembali ke sana.
RewriteEngine Aktif Opsi +SymLinksIfOwnerMatch RewriteCond %(REQUEST_FILENAME) !-d RewriteCond %(REQUEST_FILENAME) !-f RewriteCond %(REQUEST_FILENAME) !-l RewriteRule ^(.+)$ index.php?q=$1
Ke titik
Saya pernah menulis artikel tentang layanan Simple RESTful di PHP asli. Di sana Anda akan menemukan lebih banyak informasi tentang metode pengalihan permintaan ini.
Kode html kita akan sangat sederhana. Gaya css/main.css disertakan di head. Ada 2 file js di footer: js/jquery.js dan js/main.js. Dan di dalam tubuhnya akan ada yang berikut ini:
Pertama kita tampilkan menunya. Berikutnya adalah judul halaman. Dan di bawah ini adalah div kosong dengan id=content (jangan perhatikan style="" - parser suatu hari nanti akan membuatku kesal dan aku akan menggantinya). #content akan memuat konten halaman secara dinamis dari file halaman/*.html. Belum ada yang menarik.
Perhatikan saja atribut data-menu dan data-link="ajax" dari tautan tersebut. Mereka diperkenalkan untuk membedakan tautan navigasi dari tautan eksternal biasa, yang juga akan ada di situs web kami. data-link="ajax" berarti ketika Anda mengeklik tautan ini, kami akan mencegat perilaku standar browser dan mengambil alih pekerjaan yang terkait dengan tautan tersebut. Dan menu data berarti item menu utama mana yang akan disorot ketika Anda mengklik link ini. Di sini menu data diduplikasi dengan atribut href, tetapi opsi lain dimungkinkan. Misalnya, ketika kita masuk ke bagian frontend blog, kita akan menunjukkan data-menu="blog".
2 contoh untuk kejelasan:
simple.ru Halaman beranda simple.ru Gaya main.css Mari kita gulir cepat dan salin-tempel bagian yang paling membosankan - file css/main.css.
Badan ( posisi: relatif; keluarga font: "Helvetica Neue Light", "Helvetica Neue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; ukuran font: 1em; berat font: 400; warna: #333 ; ) a, a:visited ( warna: steelblue; ) a:hover ( warna: navy; ) .wrapper ( lebar: 80%; margin: 0 10%; ) .spa-title ( ukuran font: 1.2em; teks - align: center; ) menu ( margin-atas: 2em; padding: 0; perataan teks: tengah; ) menu a ( tampilan: blok-sebaris; margin-kanan: 10px; padding: 5px 15px; dekorasi teks: tidak ada ; ) menu a:hover, menu a.active ( warna latar: steelblue; warna: putih; ) .page-title ( perataan teks: tengah; ) ul li ( tipe gaya daftar: lingkaran; )
Sekarang sampai pada bagian yang paling menarik - kode javascript yang akan mengubah kumpulan file individual kita menjadi situs web satu halaman.
javascript Kode umum dan konfigurasi Mari kita atur kerangka kode js.
Var app = (function() ( var config = (); var ui = (); // Fungsi pengikatan peristiwa _bindHandlers() ( // ... ) // Fungsi inisialisasi aplikasi init() ( // ... _bindHandlers (); ) // Kembali ke luar kembali ( init: init ) ))(); // Luncurkan aplikasi $(document).ready(app.init);
Kami memiliki modul aplikasi terpisah, yang menjalankan fungsi initnya saat halaman dimuat. Di dalamnya kami melampirkan event handler dan mengeksekusi beberapa kode lagi. Kami juga melihat 2 objek: config dan ui. Semua elemen dom yang kita perlukan dalam pekerjaan kita akan di-cache di ui.
Var ui = ( $body: $("body"), $menu: $("#menu"), $pageTitle: $("#page-title"), $content: $("#content") );
Kita memerlukan $menu untuk menyorot masing-masing item menu, $pageTitle akan diubah secara dinamis saat berpindah antar halaman, dan $content akan dimuat dengan konten file halaman/*.html
Namun konfigurasi terlihat lebih menarik.
Var config = ( siteTitle: "Webdevkin SPA", mainPage: "main", halaman: ( main: ( judul: "Utama", menu: "utama" ), tentang: ( judul: "Tentang proyek", menu: " tentang " ), blog: ( judul: "Webdevkin-a Blog", menu: "blog"), sederhana: ( judul: "Proyek Sederhana", menu: "sederhana"), kontak: ( judul: "Kontak", menu : "kontak" ), toko: ( judul: "Toko online", menu: "blog"), frontend: ( judul: "Artikel tentang frontend", menu: "blog"), mysql: ( judul: "Database Mysql ", menu: "blog" ), widget: ( title: "Widget javascipt yang dapat disematkan", menu: "blog" ) ) );
siteTitle: "Webdevkin SPA" - judul situs, digunakan di beberapa tempat.
mainPage: "main" - tunjukkan halaman awal situs, halaman yang akan terbuka saat Anda memasuki site.ru. Sekarang ini adalah halaman utama, tetapi mungkin terlintas di benak Anda untuk meletakkan halaman awal, misalnya, "Tentang proyek" - tentang.
Hal terpenting dalam keseluruhan konfigurasi adalah objek halaman. Setiap bidang objek menjelaskan satu halaman situs. Sekarang kita hanya membutuhkan 2 item: judul halaman dan menu milik halaman ini. Kunci objek, yaitu halaman, cocok dengan nama file di halaman/*.html dan atribut href di tautan internal.
Dan terakhir, kita akan menulis kode yang digunakan untuk memulai semuanya. Anda mungkin terkejut, tetapi kode yang secara langsung melakukan pekerjaan pemeliharaan situs jauh lebih sedikit dibandingkan dengan persiapan untuk menulisnya.
Memuat konten menggunakan ajax. API Sejarah Ayo berangkat secara berurutan. Mari kita kerjakan fungsi init, yang berisi pengikatan event yang diperlukan _bindHandlers
// Fungsi pengikatan peristiwa _bindHandlers() ( ui.$body.on("click", "a", _navigate); window.onpopstate = _popState; )
Di baris pertama, kami menangkap klik pada tautan internal a dan mengirimkannya ke fungsi _navigate. Sekarang kami akhirnya yakin bahwa atribut terpisah data-link="ajax" diperlukan :-)
Jendela berikutnya.onpopstate = _popState;
Dari dokumentasi.
Acara popstate dikirim ke objek window setiap kali entri riwayat aktif berubah antara dua entri riwayat untuk dokumen yang sama.
Sederhananya, ini adalah pengoperasian tombol Mundur/Maju di browser. Seperti yang bisa kita lihat, perilaku asli browser juga perlu dicegat. Oleh karena itu, kami akan memberikan kontrol pada fungsi _popState.
Untuk pemahaman yang lebih baik, saya akan memberikan kode untuk kedua fungsi tersebut sekaligus
// Klik pada tautan fungsi _navigate(e) ( e.stopPropagation(); e.preventDefault(); var page = $(e.target).attr("href"); _loadPage(page); history.pushState( ( halaman: halaman), "", halaman ) // Fungsi tombol Mundur/Maju _popState(e) ( var halaman = (e.state && e.state.page) || config.mainPage; _loadPage(halaman); )
Ketika klik eksplisit pada tautan _navigate terjadi, kami menghentikan peristiwa klik agar tidak menggelembung dan membatalkan perilaku default browser (mengikuti tautan). Kami kemudian mengidentifikasi halaman yang ingin kami muat (dipahami dengan atribut href) dan memanggil fungsi _loadPage yang baru. Dia akan melakukan semua pekerjaan utama memuat konten, mengubah judul, dan sebagainya. Dan pada akhirnya, menggunakan history.pushState, kami menambahkan entri baru di riwayat browser. Ya, kami sendiri yang secara eksplisit membuat riwayat browser. Lalu, bila kita menganggapnya perlu. Dan kami menyimpan data tentang halaman yang dimuat ke dalam sebuah objek (halaman: halaman). Data ini akan berguna bagi kita di fungsi _popState berikutnya.
Di _popState, idenya serupa: kita mencari halaman yang diinginkan dan meluncurkan _loadPage yang sama.
Var halaman = (e.state && e.state.halaman) || config.Halaman Utama;
e.state && e.state.page - mengeluarkan halaman untuk kita dari objek riwayat, yang dengan hati-hati kita catat di _navigate. Jika objek e.state tidak tersedia (misalnya, ketika kita pertama kali mengunjungi situs site.ru dan belum sempat menjelajahinya), maka kita mengambil halaman yang ditentukan sebagai halaman utama di config - config kita. halaman Utama.
Sejujurnya, hanya fungsi history.pushState dan fakta bahwa objek e.state dengan data yang ditulis ke pushState tersedia di window.onpopstate yang perlu kita ketahui tentang History API. Untuk rekan-rekan yang lebih penasaran, saya yakin googling akan membantu Anda menemukan cara lain yang baik untuk bekerja dengan riwayat browser.
Kami tidak akan melakukan penelitian mendalam, tetapi akan menulis kode untuk fungsi utama _loadPage
// Memuat konten berdasarkan fungsi halaman _loadPage(halaman) ( var url = "pages/" + halaman + ".html", pageTitle = config.pages.title, menu = config.pages.menu; $.get(url, function (html) ( document.title = pageTitle + " | " + config.siteTitle; ui.$menu.find("a").removeClass("active"); ui.$menu.find("a").addClass ("aktif"); ui.$pageTitle.html(pageTitle);
Dia terlihat biasa saja. Pertama kita bentuk urlnya, yaitu path dimana kita akan mendownload html untuk halaman tersebut. Kemudian kami mengeluarkan judul halaman dan item menu yang akan dipilih dari konfigurasi. Selanjutnya, kita mendapatkan konten html halaman melalui jQuery.get dangkal dan melakukan sejumlah tindakan sederhana.
a) Perbarui judul halaman
b) Dalam 2 baris, pilih item menu yang diinginkan
c) Ubah judul pada halaman itu sendiri, dalam kode html
d) Muat konten html sebenarnya dari halaman yang diperoleh dari url
Hampir semua! Ada sedikit waktu tersisa. Jika sekarang kita pergi, misalnya, ke halaman site.ru/blog dan memperbaruinya, maka yang dimuat bukan blognya, melainkan halaman kosong. Karena pada saat inisialisasi kita tidak memanggil _loadPage. Untuk memperbaikinya, kita perlu menambahkan beberapa baris ke fungsi init, yang pada akhirnya akan terlihat seperti ini
// Inisialisasi fungsi aplikasi init() ( var page = document.location.pathname.substr(1) || config.mainPage; _loadPage(page); _bindHandlers(); )
Itu saja yang pasti sekarang!
Mari kita rangkum dan ingat tautannya Jadi, kami menulis situs web satu halaman yang sederhana namun berfungsi penuh, dan juga belajar sedikit tentang cara kerja History API. Sejujurnya, saya merasa seperti sutradara film buruk yang 80% waktunya mengarah pada hasil yang luar biasa, dan pada akhirnya semuanya menjadi jauh lebih mudah dari yang diharapkan.
Di satu sisi, hampir semua kode hanyalah persiapan, pengkabelan, penulisan konfigurasi, dan hal-hal membosankan lainnya. Tapi kode yang sangat berguna yang melakukan pekerjaan sebenarnya membutuhkan 2 lusin baris.
Namun di sisi lain, konfigurasi memungkinkan kami membuat struktur yang mudah diperluas saat menambahkan halaman baru. Plus, di artikel berikutnya kita akan melihat pentingnya konfigurasi yang agak besar ini ketika kita mengajari mesin pencari untuk mengindeks situs web satu halaman kita. Nah, gaya memang diperlukan agar terlihat lebih cantik :-)
Ada juga pihak ketiga. Bagi mereka yang belum familiar dengan situs satu halaman, ini bukanlah hal yang sederhana. Dan menurut saya, sangat bagus bila topik yang awalnya tampak rumit, setelah dipertimbangkan secara mendetail, ternyata dapat diselesaikan sepenuhnya, dan tanpa usaha keras dari pihak kita.
Selanjutnya, situs demo kami akan berkembang secara bertahap. Pada artikel selanjutnya, kita akan mulai mempersiapkan situs untuk diindeks oleh mesin pencari, karena diketahui bahwa situs web satu halaman diindeks dengan sangat buruk jika tidak dilakukan tindakan khusus. Tapi ini dari artikel berikutnya dalam seri ini.
Dan survei kecil
Single Page Applications (SPA) memiliki banyak keunggulan, seperti kecepatan, UX yang sangat bagus, dan kontrol penuh terhadap markup HTML. Ada semakin banyak situs SPA; Ada semakin banyak alat yang menyederhanakan proses pengembangan SPA. Anda mungkin sudah membaca tentang framework Vue.js yang muda dan menjanjikan. Saya sarankan Anda mendalami Vue lebih dalam dan menggunakan contoh spesifik untuk memahami SPA sederhana.
Kami akan menulis aplikasi client-server untuk blog sederhana. Aplikasi akan menampilkan daftar entri serta teks lengkap setiap entri. Dan tentu saja, semua ini akan terjadi tanpa memuat ulang halaman tersebut.
Setelah membaca contoh aplikasi ini, Anda akan mempelajari cara mengekstrak data di Vue, membuat rute, dan memahami fitur menarik dari Vue - komponen file tunggal.
Backend Dalam tutorial ini, kita terutama akan fokus pada frontend di Vue. Kami tidak akan berpikir untuk menulis backend REST. Misalnya kita akan menggunakan layanan tersebut jsonplaceholder.typicode.com menyediakan stub dalam bentuk REST API. FrontendTools Memulai Vue sangatlah sederhana. Dengan alat yang tepat, semuanya menjadi lebih mudah. Saya sarankan untuk melihat proyek vue-awesome, yang berisi daftar alat, komponen, perpustakaan, dan plugin untuk semua kesempatan. Vue-cli Saat membuat proyek baru, disarankan untuk menggunakan Vue-cli. Dengan cara ini Anda dapat membuat proyek menggunakan proyek template resmi Vue, atau salah satu dari banyak proyek template sumber terbuka, dan tentu saja Anda dapat membuatnya sendiri dan menggunakannya di mana saja. Jadi, pertama-tama, mari kita instal vue-cli sebagai paket global:
$ npm instal -g vue-cli
Kemudian kami menginisialisasi proyek dengan template yang dipilih; Sebagai contoh kita, menggunakan webpack-simple sudah lebih dari cukup.
$vue init webpack-simple vue-spa
Selanjutnya, buka folder vue-spa dan jalankan instalasi npm di terminal. Setelah menginstal semua paket, kita dapat menjalankan aplikasi kita dalam mode pengembangan.
$npm jalankan dev
Perintah ini secara otomatis akan menjalankan proyek kita di server dev webpack lokal. Aplikasi Vue kita yang paling sederhana akan muncul di browser. Tentu saja, hal tersebut sama sekali tidak terlihat seperti yang kita inginkan, dan hanya cocok sebagai titik awal untuk memulai sesuatu yang lebih besar. Untuk terus bekerja, saya sarankan Anda terlebih dahulu membiasakan diri dengan struktur template kami.
Secara internal, templat webpack-simple memiliki struktur berikut:
Mengajukan indeks.html berisi markup HTML sederhana dengan satu elemen "aplikasi" di badan. Itu akan diganti dengan DOM yang dihasilkan oleh vue. Untuk alasan ini tagnya tubuh Tidak disarankan untuk digunakan sebagai elemen root.
Di folder src terletak file main.js, yang berisi titik masuk webpack. Komponen Vue diimpor ke sana. Ini juga menjelaskan instance root dari Vue, yang sejauh ini memiliki dua properti. Properti 'el' menyediakan instance Vue dengan asosiasi dengan elemen DOM yang ditentukan. Yang lainnya adalah fungsi rendering yang menghasilkan DOM dari Aplikasi.vue. Secara keseluruhan, hanya itu yang perlu kita ketahui tentang struktur template sederhana webpack, tidak banyak, bukan? Bagian utama dari aplikasi kita akan diprogram di App.vue. Ekstensi .vue mengidentifikasi file sebagai komponen vue file tunggal. Ini adalah salah satu fitur Vue yang sekarang akan kita lihat lebih dekat.
Setiap file *.vue terdiri dari tiga jenis blok: , dan opsional . Hasilnya, kita dapat membagi proyek menjadi komponen-komponen terkait. Dalam sebuah komponen, templat, logika, dan gayanya saling terkait secara intrinsik, dan menggabungkannya akan membuat komponen lebih kohesif dan lebih mudah dipelihara. Sekarang kita siap untuk mulai membuat blog di Vue.
Mari kita lihat apa yang sebenarnya akan kita terapkan. Kami akan memiliki header dengan nama blog kami di bagian atas halaman. Di sisi kiri kita akan memiliki sidebar tetap di mana kita akan menampilkan judul posting kita, itu akan menjadi seperti daftar isi. Sisa halaman akan ditempati oleh blok dinamis di mana teks posting itu sendiri akan ditampilkan.
Langkah 1 Pertama-tama, mari hapus semua baris tambahan dari App.vue. Dan kami akan menulis ulang template sesuai dengan kebutuhan kami. SPA Vue.js
Kedua, kita akan membuat instance Vue dengan properti data, yang akan kita tempatkan dalam array dengan pesan-pesan kita. Saat ini kosong, tapi segera kami akan menempatkan data yang diterima dari server di dalam array.
Setelah panggilan pertama, Anda tidak lagi dapat menambahkan properti reaktif ke objek data root. Oleh karena itu, sebelum membuat instance Vue, disarankan untuk mendeklarasikan semua properti reaktif di tingkat root.
ekspor default(data()(kembali(postingan:)))
Anda juga dapat menambahkan beberapa gaya untuk membuat aplikasi terlihat lebih baik.
Kode aplikasi dihosting di github.com. Cukup dengan mengkloning repositori dan mengganti cabang dengan nomor langkah untuk melacak perkembangan aplikasi langkah demi langkah, misalnya:
$ git checkout langkah-1
Saat ini kami tidak memiliki apa pun untuk ditampilkan di bilah navigasi kami, jadi mari kita ambil data dari server. Untuk ini saya memilih Axios, klien HTTP yang mudah digunakan. Anda juga dapat menggunakan metode apa pun yang Anda suka, seperti sumber daya Vue atau pengambilan khusus atau bahkan jQuery Ajax.
Langkah 2 Instal Axios $ npm install --simpan-dev aksio
Kemudian kita mengimpornya ke dalam komponen App dan mendefinisikan metode getAllPosts() yang akan membuat permintaan ke server dan menugaskannya ke properti posts. Kita memanggil metode ini di hook create(), yang akan dipanggil setelah membuat instance Vue dan setelah mengatur pengaturan akses data.
Impor aksio dari "axios" ekspor default ( data () ( kembali ( kiriman: null, titik akhir: "https://jsonplaceholder.typicode.com/posts/", ) ), dibuat() ( this.getAllPosts(); ) , metode: ( getAllPosts() ( axios.get(this.endpoint) .then(response => ( this.posts = respon.data; )) .catch(error => ( console.log("----- kesalahan-------"); console.log(kesalahan); )) ) ) )
Sekarang mari kita tampilkan semua judul postingan di sidebar.
((postingan.judul))
Sejauh ini kami hanya menampilkan judul postingan, namun kami belum bisa melihat postingannya sendiri. Sekarang Anda perlu menampilkan postingan lengkap di bagian konten sesuai dengan judul yang dipilih di sidebar. Pada saat yang sama, saya ingin setiap catatan tersedia di alamat uniknya masing-masing.
Langkah 3 Untuk melakukan ini, kita akan menggunakan perpustakaan Vue resmi, vue-router. Seperti namanya, perpustakaan memungkinkan Anda mengonfigurasi perutean untuk aplikasi kita.
Mari kita instal perpustakaan: $ npm install --save-dev vue-router
Untuk mengonfigurasi perutean, mari kembali ke file main.js. Di sini kita akan menentukan pengaturan perutean dan menambahkannya ke instance Vue kita.
Impor Vue dari "vue" impor Router dari "vue-router" impor Aplikasi dari "./App.vue" impor Posting dari "./components/Post.vue" impor Halo dari "./components/Hello.vue" Vue. use(Router) const router = new Router(( rute: [ ( jalur: "/", nama: "home", komponen: Halo, ), ( jalur: "/post/:id", nama: "post", komponen: Posting, props: true, ] )) new Vue(( el: "#app", render: h => h(App), router ))
Dalam pengaturan perutean, kami menentukan komponen mana yang menyebabkan rendering di sepanjang jalur yang sesuai. Karena hanya komponen Post.vue yang bertanggung jawab untuk merender setiap postingan, kita tidak perlu menentukan jalur ke setiap postingan, cukup tentukan jalur dinamis.
Jalur: "/post/:id"
Jalur ini berisi segmen dinamis:id yang menunjuk ke postingan tertentu. Selain itu, kami memiliki akses ke segmen ini di komponen Post melalui ini.$route.params.id. Namun, menggunakan $route dalam komponen kita akan menghubungkan rute, yang pada gilirannya membatasi fleksibilitas komponen karena hanya dapat digunakan pada URL tertentu. Sebagai gantinya kita bisa menggunakan opsi tersebut Atribut dan menginstalnya BENAR. Setelah ini, $route.params akan dikaitkan dengan opsi props dari komponen Post.
Sekarang kita telah membuat router, kita dapat kembali ke aplikasi kita dan menambahkan beberapa baris lagi ke template.
((post.id)). ((postingan.judul))
Di sini kita memiliki dua komponen vue-router: Dan . Yang pertama adalah komponen untuk mengaktifkan navigasi pengguna dalam aplikasi yang mendukung perutean. Komponen kedua adalah komponen fungsional yang menjadikan komponen konsisten untuk jalur tertentu.
Langkah terakhir masih tersisa. Kita perlu menampilkan isi entri postingan.
Langkah 4 Mari beralih ke file Post.vue, di mana kita akan menambahkan template sederhana:
((postingan.judul)) ((postingan.tubuh))
((post.id))
Selanjutnya kita perlu mengatur parameter instance Vue untuk komponen ini. Semuanya di sini sama seperti pada pengaturan untuk menampilkan semua postingan. Mari kita nyatakan sebuah pilihan Atribut dengan perubahan pengenal, yang akan menerima nomor pos kami. Selanjutnya, mari kita deklarasikan objek data, seperti yang telah kita lakukan di App.vue: Impor aksio dari "aksios"; ekspor default ( props: ["id"], data() ( return ( post: null, endpoint: "https://jsonplaceholder.typicode.com/posts/", ) ) )
Selanjutnya kami akan menjelaskan caranya dapatkanPostingan(), yang hanya akan menerima satu entri posting berdasarkan id dan memanggilnya di hook dibuat().
Metode: ( getPost(id) ( axios(this.endpoint + id) .then(response => ( this.post = respon.data )) .catch(error => ( console.log(error) )) ) ), dibuat() ( ini.getPost(ini.id); ),
Hampir selesai. Jika kita menjalankan aplikasinya sekarang, kita dapat melihat bahwa meskipun URL-nya berubah, kita melihat satu postingan yang dirender terlebih dahulu. Intinya adalah kita memiliki komponen yang sama untuk merender postingan yang berbeda, dan Vue tidak perlu membuatnya ulang karena pemborosan sumber daya yang tidak perlu, yang juga berarti bahwa hook siklus hidup komponen tidak akan dipanggil.
Untuk mengatasinya kita hanya perlu mengatur watcher pada objek tersebut $rute.
Tonton: ( "$route"() ( this.getPost(this.id); ) )
Sekarang semuanya berjalan sebagaimana mestinya. Untuk mendapatkan versi produksi, jalankan saja perintahnya npm jalankan pembangunan di konsol.
Mari kita rangkum Kami menulis aplikasi satu halaman sederhana menggunakan Vue dalam empat langkah. Kami mempelajari betapa mudahnya memulai proyek Anda dengan vue-cli. Kami telah membahas konsep komponen Vue file tunggal yang membuat proyek Anda lebih fleksibel dan terukur. Kami mempelajari cara mengambil data dari API eksternal menggunakan Axios. Dan kami melihat cara mengkonfigurasi perutean menggunakan vue-router. Tentu saja, ini adalah pengetahuan dasar, namun saya harap ini dapat membantu Anda mulai menggunakan Vue.js dan memanfaatkan fitur-fitur lanjutannya. Halo semua! Pada artikel kali ini kita akan memahami apa itu SPA dalam pengembangan web dan apa kelebihan dan kekurangannya.
Keterangan Mungkin sebagian dari Anda sudah pernah mendengar singkatan SPA. Namun, tidak semua orang tahu apa itu, jadi mari kita cari tahu.
SPA (aplikasi satu halaman) adalah aplikasi web yang berjalan pada satu halaman. Ini memuat semua file javascript dan css yang diperlukan saat halaman pertama kali dimuat, dan kemudian semua komunikasi antara klien dan server dikurangi seminimal mungkin. Itu. Dengan pendekatan ini, sebagian besar pekerjaan situs dilakukan di sisi klien, dan jika Anda perlu mendapatkan data dari server, biasanya dilakukan menggunakan JSON.
Metode pembuatan situs web ini muncul relatif baru, dengan munculnya HTML5, namun sudah secara aktif mendapatkan momentum. Pada prinsipnya, tidak ada yang mengejutkan di sini, karena aplikasi web semacam itu akan bekerja lebih cepat daripada situs web biasa, dan pengembangannya tidak akan memakan banyak waktu. Untungnya, sekarang ada banyak kerangka kerja yang memungkinkan Anda membuat situs yang sangat kompleks seperti ini dengan cukup sederhana dan cepat. Saat ini, React dianggap sebagai framework terbaik. Ini memiliki lebih banyak keunggulan dibandingkan pesaingnya, dan juga mudah dipelajari dan digunakan. Jika Anda ingin mempelajari lebih lanjut tentang cara menggunakannya, saya sarankan untuk melihatnya. Untuk saat ini, mari beralih ke keunggulan SPA.
Kelebihan SPA - Mendukung sejumlah besar perangkat. Berbeda dengan pendekatan standar, aplikasi SPA bekerja dengan baik di komputer desktop dan perangkat seluler. Dengan cara ini, Anda dapat membuat satu aplikasi dan memastikan aplikasi tersebut tidak melambat dan akan bekerja dengan sempurna bahkan pada perangkat yang tidak terlalu kuat
- UX yang kuat. Dalam aplikasi berdasarkan pendekatan ini, menyimpan berbagai informasi, mengelola presentasi situs, dan animasi menjadi lebih mudah. Selain itu, karena hanya ada satu halaman kerja, menulis antarmuka pengguna yang indah tidaklah sulit
- Kinerja tinggi. Sangat umum melihat pemuatan konten yang sama di situs web biasa. Misalnya, header situs, footer, menu, dan elemen lain yang tidak berubah dari halaman ke halaman, namun dimuat dari server setiap saat. Dengan menggunakan pendekatan SPA, masalah seperti itu tidak akan ada, karena konten akan dimuat sesuai kebutuhan, yang secara signifikan akan meningkatkan kecepatan aplikasi
SPA hampir tidak memiliki kelemahan. Satu-satunya hal yang perlu diperhatikan adalah pengembangan aplikasi semacam itu harus dilakukan dengan cukup hati-hati. Masalahnya adalah jika ada kebocoran memori, misalnya, aplikasi mungkin mulai bekerja lebih lambat dari yang kita inginkan. Tetapi semua ini tergantung pada pengembangnya, pada keahliannya, oleh karena itu, jika Anda ingin membuat aplikasi berkualitas tinggi, maka saya menyarankan Anda untuk memperhatikan kursus video "". Itu disusun secara khusus oleh seorang profesional sehingga Anda juga dapat mempelajari cara membuat aplikasi yang kuat dan cepat, dan jumlah situs yang benar-benar berkualitas tinggi di Internet telah meningkat.
Kesimpulan Nah, hari ini kita membahas apa itu SPA (aplikasi satu halaman), apa kelebihan dan kekurangannya.
