Web project using Node.js to implement online ordering function-JS Tutorial-php.cn

Web project using Node.js to implement online ordering function

王林

Release： 2023-11-08 15:42:27

Original

1202 people have browsed it

Web project using Node.js to implement online ordering function

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
```
Copy after login
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
```
Copy after login
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
```
Copy after login
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

Copy after login

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

Copy after login

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

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

Copy after login

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>

Copy after login

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
```
Copy after login
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!