Home > Article > Web Front-end > Web project using Node.js to implement online ordering function

Web project using Node.js to implement online ordering function

王林Original: 2023-11-08 15:42:271199browse

Web project using Node.js to implement online food ordering function

With the popularity of the Internet and the development of mobile devices, many people begin to prefer ordering food through the Internet instead of Go to a physical store and order food. In order to meet the needs of users, many restaurants have also begun to launch online ordering platforms.

This article will introduce how to use Node.js to build a simple web project with online ordering function, and provide specific code examples.

Development environment preparation
First, make sure you have the latest version of Node.js installed. You can check whether the installation was successful by executing the following command in a terminal or command line window:
```
node -v
```
This will display the version number of your currently installed Node.js. If it is not installed, you can go to the Node.js official website to download and install it.

Secondly, make sure you have an appropriate code editor installed, such as Visual Studio Code or Atom.
Create project folder
Choose a suitable location on your computer and create a folder specifically for storing project code. In the command line or terminal, go into the folder and execute the following command to initialize the project:
```
npm init -y
```
This will create a file named package.json, which contains the project's Basic information and dependencies.
Install the necessary dependencies
In the project folder, execute the following command to install the required dependencies:
```
npm install express body-parser ejs --save
```
This will install Express, body -parser and ejs modules and add them to dependencies in the package.json file.

Create project file structure
In the project folder, create the following directory and file structure:

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

In server.js , add the following code:

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');
});

After completing the above operations, your project file structure should look like this:

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

Write the front-end page
Open index.ejs file, write HTML and CSS code in it to create a simple order page. The sample code is as follows:

<!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>

Run the project
In the terminal or command line, go to the project folder and execute the following command to start the server:
```
node server.js
```
If Everything is fine and you should see the server started message in the terminal.

Then, open the browser and enter http://localhost:3000 in the address bar to access the order page.

Fill in your name and select the desired meal. After clicking the submit order button, the page will display a message that the order has been successfully submitted.

So far, you have successfully built a simple web project with online food ordering function using Node.js.

Summary
This article introduces in detail how to use Node.js to build a simple web project with online ordering function. By creating the project file structure, installing dependencies, and writing basic routing and front-end pages, a simple online ordering function can be implemented. Of course, this is just an entry-level example and you can further extend and optimize it.

I hope this article can be of some help to you in understanding Node.js Web development and implementing the online ordering function. I wish you success in developing web projects with Node.js!

The above is the detailed content of Web project using Node.js to implement online ordering function. For more information, please follow other related articles on the PHP Chinese website!

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Web project for data visualization using Node.jsNext article：Web project for data visualization using Node.js

See more

Web project using Node.js to implement online ordering function

Related articles