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
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
Salin selepas log masukIni 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
Salin selepas log masukIni akan mencipta fail bernama
package.json, yang mengandungi maklumat asas projek dan tanggungan.package.json的文件，其中包含了项目的基本信息和依赖项。安装必要的依赖项
在项目文件夹中，执行以下命令来安装所需的依赖项：npm install express body-parser ejs --save
Salin selepas log masuk这将安装Express、body-parser和ejs模块，并将其添加到
package.json文件中的dependencies中。创建项目文件结构
在项目文件夹中，创建以下目录和文件结构：- public - css - main.css - views - index.ejs - server.jsSalin selepas log masuk在
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'); });Salin selepas log masuk完成上述操作后，你的项目文件结构应该如下所示：
- public - css - main.css - views - index.ejs - server.js - package.jsonSalin selepas log masuk编写前端页面
打开index.ejs文件，在其中编写HTML和CSS代码，创建一个简单的订单页面。示例代码如下：<!DOCTYPE html> <html> <head> <title>在线订餐</title> <link rel="stylesheet" type="text/css" href="/css/main.css"> </head> <body> <h1 id="在线订餐">在线订餐</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>Salin selepas log masuk运行项目
在终端或命令行中，进入项目文件夹，并执行以下命令来启动服务器：node server.js
Salin selepas log masuk如果一切正常，你应该在终端中看到服务器已启动的提示信息。
然后，打开浏览器，在地址栏中输入
Pasang kebergantungan yang diperlukanhttp://localhost:3000Dalam folder projek, laksanakan arahan berikut untuk memasang kebergantungan yang diperlukan:
Ini akan memasang modul ekspres, body-parser dan ejs dan menambahkannya pada <code>dependencies dalam fail package.json.
Dalam folder projek, cipta direktori dan struktur fail berikut:
rrreee🎜Dalamserver.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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Perbezaan antara nodejs dan tomcat
Apr 21, 2024 am 04:16 AM
Perbezaan utama antara Node.js dan Tomcat ialah: Runtime: Node.js adalah berdasarkan masa jalan JavaScript, manakala Tomcat ialah bekas Java Servlet. Model I/O: Node.js menggunakan model tidak menyekat tak segerak, manakala Tomcat menyekat segerak. Pengendalian konkurensi: Node.js mengendalikan konkurensi melalui gelung peristiwa, manakala Tomcat menggunakan kumpulan benang. Senario aplikasi: Node.js sesuai untuk aplikasi masa nyata, intensif data dan konkurensi tinggi, dan Tomcat sesuai untuk aplikasi web Java tradisional.
lokasi penyimpanan projek gerhana
May 05, 2024 pm 07:36 PM
Tempat projek Eclipse disimpan bergantung pada jenis projek dan tetapan ruang kerja. Projek Java: Disimpan dalam folder projek dalam ruang kerja. Projek web: disimpan dalam folder projek dalam ruang kerja, dibahagikan kepada berbilang subfolder. Jenis projek lain: Fail disimpan dalam folder projek dalam ruang kerja dan organisasi mungkin berbeza-beza bergantung pada jenis projek. Lokasi ruang kerja terletak dalam "<direktori rumah>/ruang kerja" secara lalai dan boleh ditukar melalui pilihan Eclipse. Untuk mengubah suai lokasi storan projek, klik kanan projek dan pilih tab Sumber dalam Properties.
Perbezaan antara nodejs dan vuejs
Apr 21, 2024 am 04:17 AM
Node.js ialah masa jalan JavaScript bahagian pelayan, manakala Vue.js ialah rangka kerja JavaScript sisi klien untuk mencipta antara muka pengguna interaktif. Node.js digunakan untuk pembangunan bahagian pelayan, seperti pembangunan API perkhidmatan belakang dan pemprosesan data, manakala Vue.js digunakan untuk pembangunan sisi klien, seperti aplikasi satu halaman dan antara muka pengguna yang responsif.
Adakah nodejs rangka kerja bahagian belakang?
Apr 21, 2024 am 05:09 AM
Node.js boleh digunakan sebagai rangka kerja bahagian belakang kerana ia menawarkan ciri seperti prestasi tinggi, kebolehskalaan, sokongan merentas platform, ekosistem yang kaya dan kemudahan pembangunan.
Apakah perbezaan antara fail npm dan npm.cmd dalam direktori pemasangan nodejs?
Apr 21, 2024 am 05:18 AM
Terdapat dua fail berkaitan npm dalam direktori pemasangan Node.js: npm dan npm.cmd Perbezaannya adalah seperti berikut: sambungan berbeza: npm ialah fail boleh laku dan npm.cmd ialah pintasan tetingkap arahan. Pengguna Windows: npm.cmd boleh digunakan daripada command prompt, npm hanya boleh dijalankan dari baris arahan. Keserasian: npm.cmd adalah khusus untuk sistem Windows, npm tersedia merentas platform. Cadangan penggunaan: Pengguna Windows menggunakan npm.cmd, sistem pengendalian lain menggunakan npm.
Adakah nodejs bahasa pembangunan bahagian belakang?
Apr 21, 2024 am 05:09 AM
Ya, Node.js ialah bahasa pembangunan bahagian belakang. Ia digunakan untuk pembangunan bahagian belakang, termasuk mengendalikan logik perniagaan sebelah pelayan, mengurus sambungan pangkalan data dan menyediakan API.
Apakah pembolehubah global dalam nodejs
Apr 21, 2024 am 04:54 AM
Pembolehubah global berikut wujud dalam Node.js: Objek global: modul Teras global: proses, konsol, memerlukan pembolehubah persekitaran Runtime: __dirname, __filename, __line, __column Constants: undefined, null, NaN, Infinity, -Infinity
Adakah terdapat perbezaan besar antara nodejs dan java?
Apr 21, 2024 am 06:12 AM
Perbezaan utama antara Node.js dan Java ialah reka bentuk dan ciri: Didorong peristiwa vs. didorong benang: Node.js dipacu peristiwa dan Java dipacu benang. Satu-benang vs. berbilang benang: Node.js menggunakan gelung acara satu-benang dan Java menggunakan seni bina berbilang benang. Persekitaran masa jalan: Node.js berjalan pada enjin JavaScript V8, manakala Java berjalan pada JVM. Sintaks: Node.js menggunakan sintaks JavaScript, manakala Java menggunakan sintaks Java. Tujuan: Node.js sesuai untuk tugas intensif I/O, manakala Java sesuai untuk aplikasi perusahaan besar.
