Rumah >hujung hadapan web >tutorial js >Projek web menggunakan Node.js untuk melaksanakan fungsi pesanan dalam talian
Projek web menggunakan Node.js untuk melaksanakan fungsi pesanan dalam talian
- 王林asal
- 2023-11-08 11:27:28651semak imbas
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版本号
- Pengamatan projek
Gunakan pengurus pakej npm untuk memulakan projek dan menjana fail package.json.
npm init -y
- 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
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}`);
});Kod ini mencipta aplikasi Express dan mendengar port 3000. Jalankan arahan berikut untuk memulakan pelayan.
node server.js
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>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});
});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;
}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" />
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!