Panduan praktikal untuk merancang aplikasi stack min

Artikel ini dikutip dari "Penguasaan Maksud: Menggunakan Mongo, Express, Sudut dan Node, Edisi Kedua". Edisi kedua telah disemak semula dan dikemas kini sepenuhnya untuk menutup Angular 2, Node 6 dan versi arus perdana JavaScript terkini ES2015 (ES6). Edisi ini akan membimbing anda melalui pembelajaran bagaimana untuk membangunkan aplikasi web menggunakan stack min yang dikemas kini.

mata utama

Apabila merancang aplikasi Stack Mean, anda mesti terlebih dahulu membayangkan skrin yang anda inginkan tanpa perlu menggali jauh ke dalam apa yang ada pada setiap halaman. Lakaran pada tahap ini membantu menggambarkan keseluruhan aplikasi dan menyusun skrin ke dalam koleksi dan proses.
Bahagikan skrin ke dalam set logik. Sebagai contoh, skrin di semua lokasi pemprosesan boleh digabungkan bersama, manakala halaman bebas seperti "About Us" boleh digabungkan dalam koleksi pelbagai.
Pertimbangkan seni bina aplikasi, mulakan dengan API. Membina API yang berinteraksi dengan data adalah asas seni bina. Tentukan sama ada untuk menyediakan HTML secara langsung dari pelayan atau pilih aplikasi halaman tunggal (SPA) berdasarkan keperluan khusus aplikasi.
Senibina boleh dikemas dalam projek ekspres, menjadikannya lebih mudah untuk mengurus dan menggunakannya. Walau bagaimanapun, adalah penting untuk menyusun kod anda dengan betul untuk memastikan bahagian -bahagian yang berlainan aplikasi anda terpisah antara satu sama lain supaya lebih mudah untuk memecahnya ke dalam projek berasingan apabila diperlukan pada masa akan datang.

Perancangan Aplikasi Praktikal: loc8r

Untuk kemudahan ilustrasi, mari kita anggap kita sedang membina aplikasi kerja yang dipanggil loc8r pada tumpukan min. LOC8R akan menyenaraikan tempat berdekatan dengan WiFi di mana orang boleh bekerja. Ia juga akan menunjukkan peta kemudahan, jam pembukaan, penarafan dan lokasi untuk setiap tempat.

Perancangan Aplikasi Mean Stack Advanced

Langkah pertama adalah untuk mempertimbangkan skrin mana yang diperlukan dalam aplikasi. Kami akan memberi tumpuan kepada paparan halaman berasingan dan perjalanan pengguna. Kita boleh melakukan ini pada tahap yang tinggi tanpa perlu memberi perhatian kepada butiran pada setiap halaman. Adalah lebih baik untuk melukis di atas kertas atau di papan putih pada peringkat ini, kerana ia membantu memvisualisasikan keseluruhan aplikasi. Ia juga membantu menyusun skrin ke dalam koleksi dan proses, sebagai titik rujukan yang baik ketika membina. Oleh kerana tiada data yang dilampirkan di belakang halaman atau logik aplikasi, mudah untuk menambah dan memadam bahagian, menukar kandungan dan lokasi yang dipaparkan, dan juga menukar bilangan halaman yang diperlukan. Ia sangat mungkin bahawa kita tidak akan melakukannya dengan betul untuk kali pertama;

Perancangan skrin

Baca JavaScript Moden Ikuti dunia JavaScript yang sentiasa berubah!

Baca buku ini Baca buku ini

mari kita pertimbangkan loc8r. Matlamat kami adalah seperti berikut:

loc8r akan menyenaraikan tempat -tempat yang berdekatan dengan WiFi di mana orang boleh bekerja. Ia menunjukkan kemudahan, jam pembukaan, penarafan dan peta lokasi setiap tempat. Pengunjung boleh mengemukakan penilaian dan komen.

dari ini kita dapat mempelajari beberapa skrin yang kita perlukan:

1. penyenaraian skrin tempat berdekatan
2. skrin menunjukkan butiran satu tempat
3. skrin untuk menambah komen mengenai tempat

kami juga mungkin ingin memberitahu pelawat apa loc8r dan mengapa kami perlu menambah skrin lain ke senarai:

1. skrin untuk maklumat "mengenai kami"

Bahagikan skrin ke dalam koleksi

Seterusnya, kami ingin mendapatkan senarai skrin dan mengaturnya ke mana mereka secara logiknya bersama. Sebagai contoh, tiga pertama dalam senarai semuanya berkaitan dengan kedudukan. Page mengenai tidak berada di mana -mana sahaja, ia boleh diletakkan dalam koleksi "lain" yang lain. Melukis lakaran akan menghasilkan serupa dengan Rajah 1.

Rajah 1: Susun skrin berasingan aplikasi ke dalam koleksi logik.

lakaran cepat seperti fasa pertama perancangan, dan kita perlu melengkapkan fasa ini sebelum kita mula memikirkan seni bina. Tahap ini memberi kita peluang untuk melihat halaman asas dan mempertimbangkan prosesnya. Sebagai contoh, Rajah 1 menunjukkan perjalanan pengguna asas dalam koleksi lokasi, dari halaman senarai ke halaman butiran, dan kemudian ke borang di mana anda menambah komen.

Reka bentuk seni bina

loc8r kelihatan mudah, dengan hanya beberapa skrin. Tetapi kita masih perlu memikirkan cara membina seni bina, kerana kita akan memindahkan data dari pangkalan data ke pelayar, yang membolehkan pengguna berinteraksi dengan data dan membenarkan data dihantar kembali ke pangkalan data.

mulakan dengan API

Oleh kerana aplikasi akan menggunakan pangkalan data dan lulus data, kami akan mula membina seni bina dari bahagian yang kami perlukan. Rajah 2 menunjukkan titik permulaan, API REST yang dibina menggunakan Express dan Node.js untuk membolehkan interaksi dengan pangkalan data MongoDB.

Rajah 2 Bermula dengan API REST min standard, gunakan MongoDB, Express, dan Node.js.

Membina API yang berinteraksi dengan data kami adalah asas seni bina. Soalan yang lebih menarik dan sukar ialah: Bagaimana kita membina seni bina permohonan kita?

Pilihan Senibina Aplikasi

Pada ketika ini, kita perlu melihat keperluan khusus aplikasi dan bagaimana untuk menggabungkan bahagian -bahagian stack min bersama -sama untuk membina penyelesaian terbaik. Adakah kita memerlukan beberapa ciri khas MongoDB, Ekspres, Angular, atau Node.js untuk mengubah keputusan? Adakah kita mahu melayani HTML secara langsung dari pelayan, atau spa pilihan yang lebih baik?

Untuk loc8r, tidak ada keperluan khusus atau khusus, dan sama ada ia harus mudah merangkak oleh enjin carian bergantung kepada pelan pertumbuhan perniagaan. Sekiranya matlamatnya adalah untuk membawa trafik organik dari enjin carian, maka ya, ia perlu merangkak. Jika matlamatnya adalah untuk mempromosikan aplikasi sebagai aplikasi dan penggunaan pemacu dengan cara ini, penglihatan enjin carian kelihatan kurang penting.

kita dapat membayangkan tiga arkitek aplikasi yang mungkin, seperti yang ditunjukkan dalam Rajah 3:

1. node.js dan aplikasi ekspres
2. node.js dan aplikasi ekspres dengan interaksi sudut
3. SPA sudut

dengan ketiga -tiga pilihan ini, yang mana yang terbaik untuk loc8r?

Rajah 3 Tiga pilihan untuk membina aplikasi LOC8R, dari aplikasi Server-Side Express dan Node.js ke SPA sudut klien penuh.

Pilih Senibina Aplikasi

Tidak ada keperluan perniagaan khusus yang mendorong kita untuk memilih satu seni bina yang lain. Membina ketiga -tiga seni bina membolehkan kita meneroka bagaimana setiap pendekatan berfungsi dan membolehkan kita melihat setiap teknologi pada gilirannya, membina lapisan aplikasi dengan lapisan.

Kami akan membina skema dalam urutan yang ditunjukkan dalam Rajah 3, bermula dengan node.js dan aplikasi ekspres, kemudian terus menambah beberapa sudut dan refactoringnya ke spa sudut. Walaupun ini bukan cara anda biasanya membina laman web, ia memberikan anda peluang yang baik untuk mempelajari semua aspek tumpukan min.

merangkumi segala -galanya dalam satu projek ekspres

Gambar rajah seni bina yang kami lihat menunjukkan bahawa kami akan mempunyai aplikasi ekspres berasingan untuk API dan logik aplikasi. Ini mungkin sepenuhnya dan juga pilihan yang baik untuk projek besar. Sekiranya kami menjangkakan banyak lalu lintas, kami mungkin mahu aplikasi utama kami dan API kami berada di pelayan yang berbeza. Manfaat tambahan ini ialah kami dapat menetapkan tetapan yang lebih khusus untuk setiap pelayan dan aplikasi yang paling sesuai dengan keperluan masing -masing.

cara lain adalah untuk memastikan ia mudah dan ringkas dan meletakkan segala -galanya dalam satu projek ekspres tunggal. Dengan pendekatan ini, kita hanya perlu bimbang tentang hosting dan menggunakan aplikasi, serta menguruskan satu set kod sumber. Inilah yang akan kita lakukan dengan LOC8R, yang memberi kita projek ekspres dengan beberapa sub-apps. Rajah 4 menggambarkan pendekatan ini.

Rajah 4 Senibina aplikasi yang merangkumi API dan logik aplikasi dalam projek Express yang sama.

Apabila menggabungkan aplikasi dengan cara ini, pastikan untuk mengatur kod dengan betul supaya bahagian -bahagian yang berlainan aplikasi dapat dipisahkan. Di samping menjadikan kod kami lebih mudah untuk dikekalkan, ia juga memudahkan kami memecahnya ke dalam projek berasingan kemudian apabila kami memutuskan untuk mengambil laluan yang betul. Ini adalah topik utama yang akan kami bincangkan dalam buku ini.

Produk Akhir

Seperti yang anda lihat, kami akan menggunakan semua lapisan stack min untuk membuat LOC8R. Kami juga akan memasukkan Twitter Bootstrap untuk membantu kami membuat susun atur responsif. Rajah 5 menunjukkan tangkapan skrin beberapa kandungan yang boleh dibina.

Rajah 5 LOC8R adalah aplikasi sampel. Ia memaparkan berbeza pada peranti yang berbeza, memaparkan senarai tempat dan butiran setiap tempat, dan membolehkan pelawat untuk log masuk dan meninggalkan komen.

Kesimpulan

Ini semua mengenai artikel ini. Sekiranya anda ingin memulakan langkah -langkah ini, lawati laman web Manning, di mana anda boleh memuat turun Bab Pertama Percuma Penguasaan Maksud: Menggunakan Mongo, Express, Angular, dan Node, Edisi Kedua, atau Beli Buku. Jika tidak, jika anda mempunyai sebarang soalan mengenai apa yang telah saya sampaikan dalam artikel ini, sila hantarnya dalam komen di bawah.

FAQs Mengenai Perancangan Mean Stack Applications (FAQ)

Apakah stack min dan mengapa penting dalam pembangunan aplikasi?

Mean Stack adalah koleksi teknologi berasaskan JavaScript yang digunakan untuk membangunkan aplikasi web. Maksudnya adalah akronim untuk MongoDB, Expressjs, AngularJS, dan Node.js. MongoDB adalah pangkalan data NoSQL, ExpressJS adalah kerangka aplikasi web, AngularJS adalah kerangka JavaScript, dan Node.js adalah platform pelayan. Kepentingan timbunan min dalam pembangunan aplikasi terletak pada kecekapan dan fleksibiliti. Ia membolehkan pemaju menulis kod untuk kedua -dua pelayan dan klien menggunakan JavaScript, membolehkan integrasi lancar dan pemprosesan data yang cekap.

Bagaimanakah seni bina aplikasi stack min berfungsi?

Senibina aplikasi stack min adalah fleksibel dan cekap. MongoDB (pangkalan data NoSQL) menyimpan data aplikasi. Expressjs berjalan pada pelayan Node.js mengendalikan fungsi pelayan sisi. AngularJS menguruskan fungsi pelanggan (berorientasikan pengguna). Keseluruhan aplikasi ditulis dalam JavaScript, yang membolehkan data mengalir dengan lancar dari interaksi pengguna ke pelayan dan pangkalan data.

Apakah faedah menggunakan stack min untuk pembangunan aplikasi?

Mean Stack menyediakan banyak manfaat untuk pembangunan aplikasi. Terima kasih kepada Node.js, ia membolehkan penggunaan semula kod dan kelajuan tinggi. MongoDB menyediakan fleksibiliti untuk menyimpan data yang kompleks, manakala AngularJS menyediakan cara yang bersih untuk menambah ciri interaktif. ExpressJS memudahkan proses membuat dan menguruskan penghalaan pelayan. Di samping itu, kerana segala -galanya ditulis dalam JavaScript, ia memudahkan dan mempercepatkan proses pembangunan.

Bagaimanakah MongoDB meningkatkan kecekapan aplikasi stack min?

MongoDB adalah pangkalan data NoSQL yang menyediakan prestasi tinggi, ketersediaan tinggi dan kemudahan skalabilitas. Ia berdasarkan konsep koleksi dan dokumen, bukannya pangkalan data relasi tradisional menggunakan jadual dan baris. Ini menjadikan MongoDB sangat baik untuk mengendalikan sejumlah besar data dan struktur data hierarki yang kompleks, yang membantu meningkatkan kecekapan aplikasi stack min.

Apakah peranan yang dimainkan oleh AngularJ dalam aplikasi stack min?

AngularJS adalah rangka kerja JavaScript yang kuat untuk membina aplikasi dalam timbunan min. Ia membolehkan pemaju mengembangkan perbendaharaan kata HTML untuk mewujudkan persekitaran pembangunan yang lebih ekspresif, boleh dibaca, dan lebih cepat. AngularJS juga menyediakan keupayaan mengikat data untuk HTML, membolehkan penyegerakan data automatik antara model dan komponen Lihat.

Expressjs Bagaimana untuk memudahkan operasi pelayan dalam aplikasi stack min?

ExpressJS adalah rangka kerja aplikasi Node.js yang minimum dan fleksibel yang menyediakan satu set ciri yang kuat untuk kedua -dua aplikasi web dan mudah alih. Ia memudahkan operasi pelayan dengan menyediakan antara muka yang mudah untuk membina aplikasi web tunggal, multi-halaman, dan hibrid. Ia juga membantu menguruskan penghalaan, permintaan, dan pandangan, dan melakukan operasi middleware.

Bagaimana node.js meningkatkan prestasi aplikasi stack min?

node.js adalah platform yang dibina di atas runtime JavaScript berasaskan krom untuk membina aplikasi web yang cepat dan berskala. Ia menggunakan model I/O yang didorong oleh peristiwa, tidak menyekat, menjadikannya ringan dan cekap, menjadikannya sesuai untuk aplikasi masa nyata intensif data yang berjalan di seluruh peranti yang diedarkan. Ini meningkatkan prestasi aplikasi stack min dengan membenarkannya memproses permintaan pelanggan berganda secara serentak tanpa ketinggalan.

Apakah prasyarat untuk membangunkan aplikasi stack min?

Untuk membangunkan aplikasi stack min, anda memerlukan pemahaman asas tentang JavaScript dan HTML. Anda juga perlu tahu mengenai pangkalan data NoSQL (terutamanya MongoDB), serta memahami skrip klien dan pelayan. Adalah penting untuk mengenali AngularJS, ExpressJs, dan Node.js. Di samping itu, pemahaman teknologi JSON dan AJAX akan memberi manfaat yang besar.

Bagaimana maksud stack berbanding dengan pilihan stack penuh yang lain?

Stack min sepenuhnya berdasarkan JavaScript dan menyediakan proses pembangunan yang lancar kerana bahasa yang sama dapat digunakan pada sisi klien dan pelayan. Ini adalah kelebihan utama pilihan stack penuh yang memerlukan kemahiran dalam pelbagai bahasa. Di samping itu, seni bina yang tidak menyekat Node.js menjadikan aplikasi stack min dengan cepat dan berskala, menjadikannya pilihan pertama untuk aplikasi masa nyata.

Bolehkah saya menggunakan pangkalan data lain dalam timbunan min?

Walaupun MongoDB adalah pangkalan data lalai dalam timbunan min kerana ia serasi dengan JavaScript, pangkalan data lain tersedia. Walau bagaimanapun, ini mungkin memerlukan konfigurasi tambahan dan tweak kod, dan aliran data lancar yang diketahui oleh timbunan min mungkin terjejas. Oleh itu, melainkan jika terdapat keperluan khusus untuk menggunakan pangkalan data yang berbeza, adalah disyorkan untuk menggunakan MongoDB.

Atas ialah kandungan terperinci Panduan praktikal untuk merancang aplikasi stack min. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!