Projek web menggunakan Node.js untuk melaksanakan fungsi pesanan dalam talian-tutorial js-php.cn

Projek web menggunakan Node.js untuk melaksanakan fungsi pesanan dalam talian

王林

Lepaskan： 2023-11-08 11:27:28

asal

640 orang telah melayarinya

Projek web menggunakan Node.js untuk melaksanakan fungsi pesanan dalam talian

Untuk memenuhi gaya hidup serba pantas orang moden, semakin banyak restoran telah mula melaksanakan perkhidmatan pesanan dalam talian, membolehkan pelanggan menempah, memesan dan membayar dengan lebih mudah dan cepat. Artikel ini akan memperkenalkan cara menggunakan Node.js untuk melaksanakan projek web pesanan dalam talian yang mudah dan menyediakan contoh kod.

Konfigurasi persekitaran

Mula-mula anda perlu memasang pengurus pakej Node.js dan npm. Anda boleh memuat turun pakej pemasangan dari tapak web rasmi atau gunakan pengurus pakej untuk memasangnya. Selepas pemasangan selesai, buka alat baris arahan dan masukkan arahan berikut untuk mengesahkan versi.

node -v //输出node版本号
npm -v //输出npm版本号

Salin selepas log masuk

Pengamatan projek

Gunakan pengurus pakej npm untuk memulakan projek dan menjana fail package.json.

npm init -y

Salin selepas log masuk

Pasang modul bergantung

Dalam direktori akar projek, gunakan npm untuk memasang rangka kerja Express dan modul lain yang diperlukan.

npm install express body-parser ejs --save

Salin selepas log masuk

Antaranya, Express ialah rangka kerja aplikasi web yang biasa digunakan dalam Node.js, yang boleh dengan mudah dan cepat membuat pelayan web digunakan untuk memproses badan permintaan HTTP, termasuk rentetan pertanyaan, data borang, dll.; ejs ialah enjin templat, digunakan untuk memaparkan halaman dinamik.

Buat Pelayan

Untuk membolehkan pengguna mengakses aplikasi web kami, kami perlu mencipta pelayan. Dalam direktori akar projek, cipta fail server.js baharu dan tulis kod berikut:

const express = require('express');
const app = express();
const port = 3000;

app.listen(port, function() {
  console.log(`listening on port ${port}`);
});

Salin selepas log masuk

Kod ini mencipta aplikasi Express dan mendengar port 3000. Jalankan arahan berikut untuk memulakan pelayan.

node server.js

Salin selepas log masuk

Masukkan http://localhost:3000 dalam penyemak imbas, anda akan melihat halaman "Tidak Dapat /", menunjukkan bahawa pelayan telah dimulakan.

Menulis halaman

Untuk membolehkan pengguna memesan makanan, beberapa halaman web perlu dibuat. Dalam direktori akar projek, cipta folder pandangan baharu untuk menyimpan halaman. Cipta fail index.ejs dan tulis kod berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在线点餐</title>
</head>
<body>
  <h1>欢迎来到我们的餐厅</h1>
  <h2>我们的菜单如下：</h2>
  <ul>
    <% for(var i = 0; i < menu.length; i++) { %>
      <li><%= menu[i].name %> - <%= menu[i].price %>元</li>
    <% } %>
  </ul>
</body>
</html>

Salin selepas log masuk

Kod ini menggunakan enjin templat ejs untuk memaparkan halaman menu. Antaranya, menu ialah pembolehubah dinamik, dan data akan diperolehi daripada pelayan apabila kod tersebut dilaksanakan.

Pemprosesan laluan

Untuk membolehkan halaman memaparkan data menu, anda perlu menulis fungsi pemprosesan penghalaan. Dalam server.js, tambahkan kod berikut:

app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  const menu = [
    {name: '鸡蛋炒饭', price: 12},
    {name: '牛肉面', price: 15},
    {name: '鱼香肉丝', price: 18},
    {name: '红烧肉', price: 30},
  ];
  res.render('index', {menu: menu});
});

Salin selepas log masuk

Kod ini mengikat fungsi pengendali laluan dengan permintaan GET Apabila laluan akar / diakses, pelayan akan menghantar data menu, memaparkan templat index.ejs dan menukar. data yang dihantar ke enjin templat, halaman HTML akhirnya dihasilkan.

Tambah gaya CSS

Untuk mencantikkan halaman, anda perlu menambah beberapa gaya CSS. Cipta folder awam baharu dalam direktori akar dan buat fail style.css. Tambahkan kod berikut:

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  margin-top: 50px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

Salin selepas log masuk

Kod ini mentakrifkan warna latar belakang, fon, penjajaran dan gaya lain untuk menjadikan halaman lebih cantik.

Ubah suai fail templat

Untuk halaman HTML dipautkan ke fail gaya CSS, fail templat perlu diubah suai. Tambahkan kod berikut pada fail index.ejs:

<link rel="stylesheet" href="/style.css" />

Salin selepas log masuk

Kod ini memberitahu penyemak imbas untuk merujuk fail style.css dalam folder awam dan menambah gaya halaman.

Ringkasan

Artikel ini memperkenalkan cara menggunakan enjin templat Node.js, Express dan ejs untuk melaksanakan projek web pesanan dalam talian dan menyediakan contoh kod. Melalui artikel ini, pembaca boleh mempelajari cara untuk memulakan projek, memasang modul bergantung, mencipta pelayan, menulis halaman, mengendalikan penghalaan, menambah gaya CSS dan operasi lain. Pembaca boleh membangunkan lagi sistem pesanan dalam talian yang lebih lengkap berdasarkan kod ini.

Atas ialah kandungan terperinci Projek web menggunakan Node.js untuk melaksanakan fungsi pesanan dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!