Rumah > Artikel > hujung hadapan web > 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 15:42:271168semak imbas

Sebuah projek web menggunakan Node.js untuk melaksanakan fungsi tempahan makanan dalam talian

Dengan populariti Internet dan perkembangan peranti mudah alih, ramai orang mula memilih untuk memesan makanan dalam talian berbanding pergi ke kedai fizikal. Bagi memenuhi keperluan pengguna, banyak restoran juga telah mula melancarkan platform tempahan dalam talian.

Artikel ini akan memperkenalkan cara menggunakan Node.js untuk membina projek web fungsi pesanan makanan dalam talian yang mudah, dan memberikan contoh kod khusus.

Persediaan persekitaran pembangunan
Pertama, pastikan anda memasang versi terkini Node.js. Anda boleh menyemak sama ada pemasangan berjaya dengan melaksanakan arahan berikut dalam terminal atau tetingkap baris arahan:
```
node -v
```
Ini akan memaparkan nombor versi Node.js anda yang sedang dipasang. Jika ia tidak dipasang, anda boleh pergi ke tapak web rasmi Node.js untuk memuat turun dan memasangnya.

Kedua, pastikan anda memasang editor kod yang sesuai, seperti Kod Visual Studio atau Atom.
Buat folder projek
Pilih lokasi yang sesuai pada komputer anda dan buat folder khusus untuk menyimpan kod projek. Dalam baris arahan atau terminal, pergi ke dalam folder dan laksanakan arahan berikut untuk memulakan projek:
```
npm init -y
```
Ini akan mencipta fail bernama package.json, yang mengandungi maklumat asas projek dan tanggungan. package.json的文件，其中包含了项目的基本信息和依赖项。
安装必要的依赖项
在项目文件夹中，执行以下命令来安装所需的依赖项：
```
npm install express body-parser ejs --save
```
这将安装Express、body-parser和ejs模块，并将其添加到package.json文件中的dependencies中。

创建项目文件结构
在项目文件夹中，创建以下目录和文件结构：

- public
  - css
    - main.css
- views
  - index.ejs
- server.js

在server.js中，添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');

const app = express();

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

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

app.get('/', (req, res) => {
  res.render('index');
});

app.post('/order', (req, res) => {
  const { name, items } = req.body;
  // 处理订单逻辑
  res.send('订单提交成功！');
});

app.listen(3000, () => {
  console.log('服务器已启动，监听端口3000');
});

完成上述操作后，你的项目文件结构应该如下所示：

- public
  - css
    - main.css
- views
  - index.ejs
- server.js
- package.json

编写前端页面
打开index.ejs文件，在其中编写HTML和CSS代码，创建一个简单的订单页面。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>在线订餐</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
  </head>
  <body>
    <h1>在线订餐</h1>
    <form action="/order" method="post">
      <input type="text" name="name" placeholder="姓名">
      <input type="checkbox" name="items" value="item1"> 餐点1
      <input type="checkbox" name="items" value="item2"> 餐点2
      <input type="checkbox" name="items" value="item3"> 餐点3
      <button type="submit">提交订单</button>
    </form>
  </body>
</html>

运行项目
在终端或命令行中，进入项目文件夹，并执行以下命令来启动服务器：
```
node server.js
```
如果一切正常，你应该在终端中看到服务器已启动的提示信息。

然后，打开浏览器，在地址栏中输入http://localhost:3000

Pasang kebergantungan yang diperlukan

rrreee

Ini akan memasang modul ekspres, body-parser dan ejs dan menambahkannya pada <code>dependencies dalam fail package.json.

Buat struktur fail projek

Dalam folder projek, cipta direktori dan struktur fail berikut:

rrreee🎜Dalam server.js, tambahkan kod berikut: 🎜rrreee🎜Selepas melengkapkan perkara di atas, Struktur fail projek anda sepatutnya kelihatan seperti ini: 🎜rrreee🎜🎜🎜Menulis halaman muka hadapan🎜Buka fail index.ejs dan tulis kod HTML dan CSS di dalamnya untuk membuat halaman pesanan ringkas. Kod sampel adalah seperti berikut: 🎜rrreee🎜🎜🎜Jalankan projek🎜Dalam terminal atau baris arahan, pergi ke folder projek dan laksanakan arahan berikut untuk memulakan pelayan:🎜rrreee🎜Jika semuanya baik, anda akan melihat pelayan bermula dalam terminal Maklumat segera. 🎜🎜Kemudian, buka penyemak imbas dan masukkan http://localhost:3000 dalam bar alamat untuk mengakses halaman pesanan. 🎜🎜Isi nama anda dan pilih hidangan yang dikehendaki Selepas mengklik butang hantar pesanan, halaman akan memaparkan mesej bahawa pesanan telah berjaya dihantar. 🎜🎜🎜🎜Pada ketika ini, anda telah berjaya membina projek web ringkas dengan fungsi pesanan dalam talian menggunakan Node.js. 🎜🎜Ringkasan🎜Artikel ini memperkenalkan secara terperinci cara menggunakan Node.js untuk membina projek web ringkas dengan fungsi pesanan dalam talian. Dengan mencipta struktur fail projek, memasang kebergantungan, dan menulis penghalaan asas dan halaman hadapan, fungsi pesanan dalam talian yang mudah boleh dilaksanakan. Sudah tentu, ini hanyalah contoh peringkat permulaan dan anda boleh melanjutkan dan mengoptimumkannya. 🎜🎜Saya harap artikel ini dapat membantu anda dalam memahami pembangunan Web Node.js dan melaksanakan fungsi pesanan dalam talian. Saya doakan anda berjaya dalam membangunkan projek web dengan Node.js! 🎜

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!

json css html express JS visual studio visual studio code http atom

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Projek web untuk visualisasi data menggunakan Node.jsArtikel seterusnya：Projek web untuk visualisasi data menggunakan Node.js

Artikel berkaitan

Lihat lagi