Bina laman web MVC yang lengkap dengan Express

---

Apa itu Ekspres?

Express adalah salah satu kerangka terbaik untuk Node.js. Ia mempunyai sokongan yang hebat dan sekumpulan ciri yang berguna. Terdapat banyak artikel hebat di luar sana, yang meliputi semua asas. Walau bagaimanapun, kali ini saya ingin menggali sedikit lebih mendalam dan berkongsi aliran kerja saya untuk membuat laman web yang lengkap. Secara umum, artikel ini bukan sahaja untuk Express, tetapi untuk menggunakannya dalam kombinasi dengan beberapa alat hebat lain yang tersedia untuk pemaju nod.

Untuk mengikuti tutorial ini, saya mengandaikan anda agak akrab dengan Node dan memasangnya pada sistem anda.

Memahami middleware di Express

Di tengah -tengah Express adalah bersambung. Ini adalah rangka kerja middleware, yang dilengkapi dengan banyak perkara yang berguna. Jika anda tertanya -tanya apa sebenarnya middleware, inilah contoh yang cepat:

 const connect = memerlukan ('bersambung'),<br> http = memerlukan ('http');<br><br> const app = connect ()<br> .Use (fungsi (req, res, seterusnya) {<br> Console.log ("Itu middleware pertama saya");<br> seterusnya ();<br> })<br> .Use (fungsi (req, res, seterusnya) {<br> Console.log ("Itulah middleware kedua saya");<br> seterusnya ();<br> })<br> .Use (fungsi (req, res, seterusnya) {<br> console.log ("akhir");<br> res.end ("Hello World");<br> });<br><br> http.CreateServer (App) .Listen (3000);<br>

Middleware pada dasarnya adalah fungsi yang menerima objek tindak balas dan objek tindak balas atau lulus aliran ke fungsi seterusnya dengan memanggil panggilan kaedah seterusnya () di middleware kedua, badan parser parses meminta badan dan menyokong aplikasi/json, aplikasi/x-www-form-urlencoded, dan multipart/form-data. Dan Req.Cookies dengan objek yang diketengahkan oleh nama cookie.

Express sebenarnya membungkus menyambung dan menambah beberapa fungsi baru di sekelilingnya, seperti logik penghalaan, yang menjadikan proses itu lebih lancar. Berikut adalah contoh mengendalikan permintaan mendapatkan di Express:

 app.get ('/hello.txt', fungsi (req, res) {<br> var body = 'hello world';<br> res.setheader ('kandungan-jenis', 'teks/kosong');<br> res.setheader ('kandungan panjang', body.length);<br> res.end (badan);<br> });<br>

Kod sumber

Kod sumber untuk laman sampel ini yang kami bina boleh didapati di GitHub. Jangan ragu untuk memadamkannya dan bermain dengannya. Berikut adalah langkah -langkah untuk menjalankan laman web ini.

• Muat turun kod sumber
• Pergi ke pemasangan NPM
• Jalankan Daemon Mongodb
• Jalankan NPM Pasang.

   {<br> "Nama": "mywebsite",<br> "Penerangan": "Laman Web Saya",<br> "Versi": "0.0.1",<br> "Ketergantungan": {<br> "Ekspres": "5.x"<br> }<br> }<br>

  Kod kerangka akan diletakkan di Node_modules , dan anda akan dapat membuat contohnya. Walau bagaimanapun, saya lebih suka pilihan alternatif, dengan menggunakan alat baris arahan. Dengan menggunakan arahan NPX Express-Generator:

   Penggunaan: Express [Options] [Dir]<br><br> Pilihan:<br><br> --versi Output nombor versi<br> -e, --ejs tambah sokongan enjin ejs<br> --Pug Tambah Sokongan Enjin Pug<br> -HBS Tambah sokongan enjin hendal<br> -H, - -hogan tambah sokongan enjin hogan.js<br> -v, --View <sinal> Tambah View <sourment> Sokongan (debu | ejs | hbs | hjs | jade | pug | twig | vash) (lalai ke jade)<br> -Tidak ada pandangan Gunakan HTML statik dan bukannya enjin Lihat<br> -c, ---css <sents> tambah stylesheet <jelis> sokongan (kurang | stylus | compass | sass) (lalai ke css biasa)<br> --git tambah .gitignore<br> -F,-Kekuatan Direktori Tidak Kroses<br> -H, -Maklumat Penggunaan Output Output<br></jelis></sents></sourment></sinal>

  Seperti yang anda lihat, terdapat hanya beberapa pilihan yang tersedia, tetapi bagi saya mereka sudah cukup. Biasanya, saya menggunakan kurang sebagai preprocessor CSS dan hendal sebagai enjin templating. Dalam contoh ini, kami juga memerlukan sokongan sesi, jadi pemasangan NPM, dan folder node_modules akan muncul.

  Saya menyedari bahawa pendekatan di atas tidak selalu sesuai. Anda mungkin mahu meletakkan pengendali laluan anda di direktori lain atau yang serupa. Tetapi, seperti yang anda lihat dalam beberapa bahagian akan datang, saya akan membuat perubahan kepada struktur yang telah dihasilkan, dan ia cukup mudah dilakukan. Oleh itu, anda hanya perlu memikirkan app.js untuk bekerja dengan struktur fail baru kami. Kita perlu mengeluarkan kedua -dua baris ini:

   const usersRouter = memerlukan ("./ Laluan/Pengguna");<br> …<br> app.use ("/Users", UsersRouter);<br>

  Langkah 2. Konfigurasi

  Sekarang, kita perlu menyediakan konfigurasi. Mari kita bayangkan laman web kecil kami harus digunakan ke tiga tempat yang berbeza: pelayan tempatan, pelayan pementasan, dan pelayan pengeluaran. Sudah tentu, tetapan untuk setiap persekitaran adalah berbeza, dan kita harus melaksanakan mekanisme yang cukup fleksibel. Seperti yang anda ketahui, setiap skrip nod dijalankan sebagai program konsol. Oleh itu, kita boleh dengan mudah menghantar hujah-hujah garis arahan yang akan menentukan persekitaran semasa. Saya membungkus bahagian itu dalam modul yang berasingan untuk menulis ujian untuknya kemudian. Berikut adalah fail /config/index.js :

   const config = {<br> Tempatan: {<br> Mod: 'Tempatan',<br> Pelabuhan: 3000<br> },<br> pementasan: {<br> mod: 'pementasan',<br> Port: 4000<br> },<br> Pengeluaran: {<br> Mod: 'Pengeluaran',<br> Pelabuhan: 5000<br> }<br> }<br> modul.exports = fungsi (mod) {<br> Kembali Config [Mode || Process.Argv [2] || 'tempatan'] || config.local;<br> }<br>

  Hanya ada dua tetapan (untuk sekarang): port. Seperti yang mungkin anda fikirkan, aplikasi itu menggunakan pelabuhan yang berbeza untuk pelayan yang berbeza. Itulah sebabnya kita perlu mengemas kini titik masuk tapak di app.js.

   const config = memerlukan ('./ config') ();<br> process.env.port = config.port;<br>

  Untuk beralih antara konfigurasi, tambahkan persekitaran pada akhir. Contohnya:

   NPM mula pementasan<br>

  Akan menjalankan pelayan di port 4000.

  Sekarang kita mempunyai semua tetapan kami di satu tempat, dan mereka mudah diurus.

  ---

  Langkah 3. Buat Rangka Kerja Ujian

  Saya peminat besar pembangunan yang didorong oleh ujian (TDD). Saya akan cuba merangkumi semua kelas asas yang digunakan dalam artikel ini. Sudah tentu, mempunyai ujian untuk segala -galanya akan membuat penulisan ini terlalu lama, tetapi secara umum, itulah cara anda perlu meneruskan ketika membuat aplikasi anda sendiri. Salah satu kerangka kegemaran saya untuk ujian adalah UVU, kerana ia sangat mudah digunakan dan cepat. Sudah tentu, ia boleh didapati dalam pendaftaran NPM:

   Pemasangan NPM--Save-Dev UVU<br>

  Kemudian, buat skrip baru di dalam ujian NPM dan anda harus melihat perkara berikut:

   config.js<br> • • • (3/3)<br><br> Jumlah: 3<br> Lulus: 3<br> Dilangkau: 0<br> Tempoh: 0.81ms<br>

  Kali ini, saya menulis pelaksanaan pertama dan ujian kedua. Itu bukan cara TDD untuk melakukan sesuatu, tetapi dalam beberapa bahagian akan datang saya akan melakukan sebaliknya.

  Saya sangat mengesyorkan menghabiskan banyak ujian masa menulis. Tidak ada yang lebih baik daripada aplikasi yang diuji sepenuhnya.

  Beberapa tahun yang lalu, saya menyedari sesuatu yang sangat penting, yang boleh membantu anda menghasilkan program yang lebih baik. Setiap kali anda mula menulis kelas baru, modul baru, atau hanya sekeping logik baru, tanya diri anda:

  Bagaimana saya boleh menguji ini?

  Jawapan untuk soalan ini akan membantu anda untuk kod lebih cekap, membuat API yang lebih baik, dan meletakkan semuanya ke dalam blok yang dipisahkan dengan baik. Anda tidak boleh menulis ujian untuk kod spageti. Sebagai contoh, dalam fail konfigurasi di atas ( /config/index.js ) saya menambah kemungkinan untuk menghantar konfigurasi pengeluaran, tetapi skrip nod dijalankan dengan NPM memasang MongoDB.

  Seterusnya, kami akan menulis ujian, yang memeriksa jika terdapat pelayan MongoDB yang berjalan. Berikut adalah fail /tests/mongodb.js :

   const {test} = memerlukan ("uvu");<br> const {mongoclient} = memerlukan ("mongoDB");<br><br> Ujian ("MongoDB Server Active", fungsi async () {<br> const client = mongoclient baru ("MongoDB: //127.0.0.1: 27017/fastDelivery");<br> menunggu klien.connect ();<br> });<br><br> test.run ();<br><br>

  Kami tidak perlu menambahkan sebarang kaedah Connect pelanggan MongoDB menerima objek Mongoclient setiap kali kami perlu membuat permintaan ke pangkalan data. Kerana itu, kita harus menyambung ke pangkalan data dalam penciptaan pelayan awal. Untuk melakukan ini, dalam harta Req.db yang tersedia, kerana middleware secara automatik berjalan sebelum setiap permintaan.

  ---

  4. Sediakan corak MVC dengan ekspres

  Kita semua tahu corak MVC. Persoalannya ialah bagaimana ini berlaku untuk menyatakan. Lebih kurang, itu adalah soal tafsiran. Dalam beberapa langkah seterusnya saya akan membuat modul, yang bertindak sebagai model, pandangan, dan pengawal.

  Langkah 1. Model

  Model ini adalah apa yang akan mengendalikan data yang ada dalam aplikasi kami. Ia sepatutnya mempunyai akses kepada mongoclient. Model kami juga harus mempunyai kaedah untuk memperluaskannya, kerana kami mungkin ingin membuat pelbagai jenis model. Sebagai contoh, kami mungkin mahukan ContactSmodel. Oleh itu, kita perlu menulis spec baru, /tests/base.model.js , untuk menguji kedua -dua ciri model ini. Dan ingatlah, dengan menentukan fungsi ini sebelum kita mula mengodkan pelaksanaan, kita dapat menjamin bahawa modul kita hanya akan melakukan apa yang kita mahu lakukan.

   const {test} = memerlukan ("uvu");<br> const menegaskan = memerlukan ("uvu/menegaskan");<br> const ModelClass = memerlukan ("../ model/asas");<br> const dbmockup = {};<br> ujian ("penciptaan modul", fungsi async () {<br> model const = ModelClass baru (dbMockup);<br> assert.ok (model.db);<br> assert.ok (model.setdb);<br> assert.ok (model.collection);<br> });<br> test.run ();<br>

  Daripada objek DB sebenar dan getter untuk direktori pandangan pangkalan data kami akan ditukar kepada kelas Pandangan Base. Perubahan kecil ini kini memerlukan perubahan lain. Kami harus memberitahu menyatakan bahawa fail templat kami kini diletakkan di direktori lain:

   app.set ("views", path.join (__ dirname, "templates"));<br>

  Pertama, saya akan menentukan apa yang saya perlukan, menulis ujian, dan kemudian menulis pelaksanaannya. Kami memerlukan modul yang sepadan dengan peraturan berikut:

  • Pembangunnya harus menerima objek respons dan nama templat.
  • Ia sepatutnya mempunyai kelas pandangan. Bukankah hanya memanggil objek tindak balas entah bagaimana, melayani data JSON:

     const data = {pemaju: "Krasimir tsonev"};<br> response.contentType ("Application/JSON");<br> response.send (json.stringify (data));<br>

    Daripada melakukan ini setiap kali, adalah lebih baik untuk mempunyai kelas jsonview, atau bahkan direktori ujian, dan jika anda menjalankan '/' selepas laluan-yang, dalam contoh di atas, sebenarnya pengawal-hanya fungsi middleware yang menerima respons, dan mengekspresikan (1)

  • Harus ada kaedah larian, bersama -sama dengan logiknya sendiri.

    ---

    5. Buat laman web FastDelivery

    Ok, kami mempunyai set kelas yang baik untuk seni bina MVC kami, dan kami telah meliputi modul yang baru dibuat dengan ujian. Sekarang kami bersedia untuk meneruskan tapak syarikat palsu kami, FastDelivery.

    Mari kita bayangkan laman web ini mempunyai dua bahagian: front-end dan panel pentadbiran. Bahagian depan akan digunakan untuk memaparkan maklumat yang ditulis dalam pangkalan data kepada pengguna akhir kami. Panel admin akan digunakan untuk menguruskan data tersebut. Mari kita mulakan dengan panel Admin (Kawalan) kami.

    Langkah 1. Panel Kawalan

    Mari kita buat terlebih dahulu pengawal mudah yang akan berfungsi sebagai halaman pentadbiran. Inilah fail /ROUTES/ADMIN.JS :

     const baseController = memerlukan ("./ asas"),<br> Lihat = memerlukan ("../ paparan/asas");<br> modul.exports = new (kelas admkontroller memanjangkan basecontroller {<br> pembina () {<br> super ("admin");<br> }<br> Run (Req, res, seterusnya) {<br> jika (this.authorize (req)) {<br> Req.Session.fastDelivery = true;<br> req.session.save (fungsi (err) {<br> var v = pandangan baru (res, "admin");<br> v.render ({<br> Tajuk: "Pentadbiran",<br> Kandungan: "Selamat datang ke panel kawalan",<br> });<br> });<br> } else {<br> const v = pandangan baru (res, "admin-login");<br> v.render ({<br> Tajuk: "Sila Log Masuk",<br> });<br> }<br> }<br> memberi kuasa (req) {<br> kembali (<br> (Req.Session &&<br> req.session.fastdelivery &&<br> req.session.fastdelivery === true) ||<br> (req.body &&<br> req.body.username === this.username &&<br> req.body.password === this.password)<br> );<br> }<br> }) ();<br>

    Dengan menggunakan kelas asas pra-ditulis untuk pengawal dan pandangan kami, kami dapat dengan mudah membuat titik masuk untuk panel kawalan. Kaedah admin.run secara langsung sebagai middleware. Itu kerana kita mahu mengekalkan konteksnya. Sekiranya kita melakukan ini:

     app.all ('/admin*', admin.run);<br>

    Pentadbir perkataan akan menunjuk kepada sesuatu yang lain.

    Melindungi Panel Pentadbiran

    Setiap halaman yang bermula dengan /admin harus dilindungi. Untuk mencapai matlamat ini, kami akan menggunakan middleware Express: sesi. Ia hanya melampirkan objek ke permintaan yang dipanggil pengawal admin untuk melakukan dua perkara tambahan:

    • Ia harus memeriksa sama ada terdapat sesi yang tersedia. Jika tidak, kemudian paparkan borang log masuk.
    • Ia harus menerima data yang dihantar oleh borang log masuk dan membenarkan pengguna jika nama pengguna dan kata laluan sepadan.

    Berikut adalah fungsi pembantu kecil yang boleh kita gunakan untuk mencapai ini:

     memberi kuasa (req) {<br> kembali (<br> (Req.Session &&<br> req.session.fastdelivery &&<br> req.session.fastdelivery === true) ||<br> (req.body &&<br> req.body.username === this.username &&<br> req.body.password === this.password)<br> );<br> }<br>

    Pertama, kami mempunyai pernyataan yang cuba mengenali pengguna melalui objek Sesi. Kedua, kami periksa sama ada borang telah dihantar. Jika ya, data dari borang itu boleh didapati di middleware bodyparser. Kemudian kami hanya menyemak sama ada nama pengguna dan kata laluan sepadan.

    Dan sekarang di sini adalah tajuk, gambar, dan jenis harta akan menentukan pemilik rekod. Sebagai contoh, halaman kenalan hanya memerlukan satu rekod dengan pengawal admin perlu diubah agak sedikit. Untuk memudahkan tugas, saya memutuskan untuk menggabungkan senarai rekod tambahan dan borang untuk menambah/mengeditnya. Seperti yang dapat anda lihat dalam tangkapan skrin di bawah, bahagian kiri halaman dikhaskan untuk senarai dan bahagian yang tepat untuk borang tersebut.

    

    Mempunyai segala -galanya pada satu halaman bermakna kita perlu memberi tumpuan kepada bahagian yang menjadikan halaman atau, menjadi lebih spesifik, pada data yang kami hantar ke templat. Itulah sebabnya saya mencipta beberapa fungsi penolong yang digabungkan, seperti itu:

     this.del (req, function () {<br> this.form (req, res, fungsi (formMarkup) {<br> this.list (fungsi (listMarkup) {<br> v.render ({<br> Tajuk: "Pentadbiran",<br> Kandungan: "Selamat datang ke panel kawalan",<br> Senarai: ListMarkup,<br> Borang: Formmarkup,<br> });<br> });<br> });<br> });<br> const v = pandangan baru (res, "admin");<br>

    Ia kelihatan agak hodoh, tetapi ia berfungsi seperti yang saya mahu. Pembantu pertama adalah tindakan = padam & id = [id rekod], ia menghilangkan data dari koleksi. Fungsi kedua dipanggil kaedah senarai mengambil maklumat dan menyediakan jadual HTML, yang kemudiannya dihantar ke templat. Pelaksanaan ketiga -tiga pembantu ini boleh didapati dalam kod sumber untuk tutorial ini.

    Di sini, saya telah memutuskan untuk menunjukkan kepada anda fungsi yang mengendalikan muat naik fail dalam admin.js :

     HandleFileUpload (Req) {<br> jika (! req.files ||! req.files.picture ||! req.files.picture.name) {<br> kembali req.body.currentpicture || "";<br> }<br> const data = fs.readFileSync (req.files.picture.path);<br> const fileName = req.files.picture.name;<br> const uid = crypto.randombytes (10) .toString ("hex");<br> const dir = __dirname "/../public/uploads/" uid;<br> fs.mkdirsync (dir, "0777");<br> fs.writeFileSync (dir "/" nama fail, data);<br> kembali "/muat naik/" uid "/" nama fail;<br> }<br>

    Jika fail dihantar, skrip nod req.files.picture. Dalam coretan kod di atas, ReadFileSync, WriteFileSync.

    Langkah 3.

    Kerja keras kini selesai. Panel Pentadbiran berfungsi, dan kami mempunyai rumah dan empat rekod dengan jenis objek DB ke blog, tetapi hubungi berbeza /blog /: ID String. Laluan ini akan sepadan dengan URL seperti req.params.id. Dalam erti kata lain, kita dapat menentukan parameter dinamik. Dalam kes kami, itulah ID rekod. Sebaik sahaja kami mempunyai maklumat ini, kami boleh membuat halaman yang unik untuk setiap artikel.

    Bahagian menarik kedua ialah bagaimana saya membina halaman perkhidmatan, kerjaya, dan kenalan. Sudah jelas bahawa mereka hanya menggunakan satu rekod dari pangkalan data. Jika kita terpaksa membuat pengawal yang berbeza untuk setiap halaman, maka kita perlu menyalin/tampal kod yang sama dan hanya menukar jenis dalam perintah pemasangan NPM harus dijalankan untuk memasang kebergantungan baru (jika ada).

  • Skrip utama perlu dijalankan semula.

  Perlu diingat bahawa Node masih cukup muda, jadi tidak semuanya boleh berfungsi seperti yang anda harapkan, tetapi ada penambahbaikan yang dibuat sepanjang masa. Sebagai contoh, selamanya menjamin bahawa program Node.js anda akan berjalan secara berterusan. Anda boleh melakukan ini dengan mengeluarkan arahan berikut:

   selamanya mulakan yourapp.js<br>

  Inilah yang saya gunakan di pelayan saya juga. Ini alat kecil yang bagus, tetapi ia menyelesaikan masalah besar. Sekiranya anda menjalankan aplikasi anda dengan selamanya, semak semula permohonan.

  Sekarang saya bukan pentadbir sistem, tetapi saya ingin berkongsi pengalaman saya mengintegrasikan aplikasi nod dengan Apache atau Nginx kerana saya fikir ini adalah sebahagian daripada aliran kerja pembangunan.

  Seperti yang anda ketahui, Apache biasanya berjalan di port 80, yang bermaksud bahawa jika anda membuka http: // localhost: 80, anda akan melihat halaman yang disampaikan oleh pelayan Apache anda, dan kemungkinan skrip nod anda sedang mendengar di port yang berbeza. Oleh itu, anda perlu menambah hos maya yang menerima permintaan dan menghantarnya ke port yang betul. Sebagai contoh, katakan bahawa saya ingin menjadi tuan rumah laman web yang baru saja kami bina di atas pelayan Apache tempatan saya di bawah fail tuan rumah.

   127.0.0.1 ExpressCompleteWebsite.dev<br>

  Selepas itu, kita perlu mengedit fail httpd-vhosts.conf di bawah direktori konfigurasi Apache dan tambahkan:

   # ExpressCompleteWebsite.dev<br> <virtualhost><br> ServerName ExpressCompleteWebsite.dev<br> Serveralias www.expresscompletewebsite.dev<br> Proxyrequests off<br> <proksi><br> Perintah menafikan, biarkan<br> Benarkan dari semua<br> </proksi><br> <lokasi></lokasi><br> Proxypass http: // localhost: 3000/<br> Proxypassreverse http: // localhost: 3000/<br> <br> </virtualhost><br>

  Pelayan masih menerima permintaan pada port 80 tetapi meneruskannya ke port 3000, di mana nod sedang mendengar.

  Persediaan Nginx lebih mudah dan, jujur, ia adalah pilihan yang lebih baik untuk menganjurkan aplikasi berasaskan Node.js. Anda masih perlu menambah nama domain dalam fail hos anda. Selepas itu, hanya buat fail baru di direktori /diadakan di bawah Pemasangan Nginx. Kandungan fail akan kelihatan seperti ini:

   pelayan {<br> Dengar 80;<br> server_name ExpressCompleteWebsite.dev<br> lokasi / {<br> proxy_pass http://127.0.0.1:3000;<br> proxy_set_header host $ http_host;<br> }<br> }<br>

  Perlu diingat bahawa anda tidak boleh menjalankan kedua -dua Apache dan Nginx dengan persediaan tuan rumah di atas. Itu kerana kedua -duanya memerlukan port 80. Juga, anda mungkin ingin melakukan sedikit penyelidikan tambahan mengenai konfigurasi pelayan yang lebih baik jika anda merancang untuk menggunakan coretan kod di atas dalam persekitaran pengeluaran. Seperti yang saya katakan, saya bukan pakar dalam bidang ini.

  ---

  Kesimpulan

  Express adalah rangka kerja yang hebat, yang memberi anda titik permulaan yang baik untuk mula membina aplikasi anda. Seperti yang anda dapat lihat, ini adalah pilihan bagaimana anda akan memperluaskannya dan apa yang akan anda gunakan untuk membinanya. Ia memudahkan tugas -tugas yang membosankan dengan menggunakan beberapa middleware yang hebat dan meninggalkan bahagian yang menyeronokkan kepada pemaju.

  Siaran ini telah dikemas kini dengan sumbangan dari Jacob Jackson. Jacob adalah pemaju web, penulis teknikal, freelancer, dan penyumbang sumber terbuka.

Atas ialah kandungan terperinci Bina laman web MVC yang lengkap dengan Express. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!