Node.js的路由、EJS模板引擎、GET和POST请求讲解

Node.js是一个非常流行的服务器端JavaScript运行环境，它提供了一些核心模块以及众多的第三方模块，可以用于开发各种类型的应用程序，包括Web应用程序。在开发Web应用程序时，有一些核心概念和技术是必须掌握的，包括路由、模板引擎以及HTTP请求处理等。

一、Node.js的路由

在Web应用程序中，路由就是根据请求的URL和HTTP方法（GET、POST、PUT、DELETE等）来确定执行哪个处理程序的过程。Node.js中有很多第三方模块可以用于实现路由功能，比如“express”模块和“koa”模块等，这里我们以“express”模块为例。

1. 安装和使用express模块

安装“express”模块：

npm install express

使用“express”模块：

const express = require('express');
const app = express();

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

2. 添加路由

添加路由的方法是使用“app”对象的方法，比如“app.get()”方法、 “app.post()”方法等。以下是几个例子：

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.get('/about', (req, res) => {
  res.send('This is the about page.');
});

app.post('/submit', (req, res) => {
  res.send('Data submitted successfully.');
});

上面的例子中，“app.get()”方法和“app.post()”方法分别添加了GET请求和POST请求的路由，“/”表示默认路由，“/about”和“/submit”是自定义路由。第一个参数是路径，第二个参数是处理请求的回调函数。

二、EJS模板引擎

EJS是一种嵌入式JavaScript模板引擎，它可以生成HTML标记和其他Web格式的内容，使开发人员更容易地创建动态的内容。Node.js中有很多第三方模块可以用于实现EJS模板引擎的功能，比如“ejs”模块。

1. 安装和使用ejs模块

安装“ejs”模块：

npm install ejs

使用“ejs”模块：

const express = require('express');
const app = express();

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

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

在上面的例子中，我们使用了“app.set()”方法来设置模板引擎为“ejs”，然后用“res.render()”方法来渲染模板，最终生成HTML代码并发送给客户端。模板的文件名是“index.ejs”，可以在当前目录或指定目录中找到。

2. 创建模板

EJS模板引擎的语法非常简单，它使用标签“<%”和“%>”来嵌入JavaScript代码，以生成动态内容。以下是一个例子：

<h1><%= title %></h1>

上面的代码中，“<%=”和“%>”之间的内容是一个JavaScript表达式，可以自由使用变量和函数等。在渲染模板时，这些表达式会被求值。

三、GET和POST请求讲解

在Web应用程序中，GET请求和POST请求是最常用的两种HTTP请求方法。GET请求用于从服务器获取数据，POST请求用于向服务器提交数据。在Node.js中，我们可以使用“req.method”属性来获取当前请求的HTTP方法，使用“req.query”对象来获取GET请求的参数，使用“req.body”对象来获取POST请求的参数。

以下是几个例子：

1. 处理GET请求

app.get('/search', (req, res) => {
  const keyword = req.query.keyword;
  res.send(`Search results for "${keyword}"`);
});

在上面的例子中，“/search”是一个GET请求的路由，它的参数是“keyword”。我们可以通过“req.query”对象来获取这个参数的值，然后使用“res.send()”方法来发送响应数据。

2. 处理POST请求

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  res.send(`Data submitted for ${name} (${email})`);
});

在上面的例子中，“/submit”是一个POST请求的路由，它的参数是“name”和“email”。我们可以通过“req.body”对象来获取这两个参数的值，然后使用“res.send()”方法来发送响应数据。

四、示例说明

以下是一个基于Node.js、express、EJS和MongoDB的Web应用程序的示例说明：

1. 创建项目

我们首先创建一个空项目，并在其中安装必要的依赖包：

mkdir webapp
cd webapp
npm init -y
npm install express ejs body-parser mongodb --save

2. 编写代码

在“webapp”目录下创建一个名为“app.js”的文件，然后粘贴以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
const app = express();
const url = 'mongodb://localhost:27017';

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));

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

app.post('/add', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  MongoClient.connect(url, function(err, client) {
    if (err) throw err;
    const collection = client.db('webappdb').collection('users');
    collection.insert({ name: name, email: email }, function(err, result) {
      if (err) throw err;
      res.redirect('/');
      client.close();
    });
  });
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

上面的代码中，“app.js”文件包含四个部分：引入依赖包、设置模板引擎和中间件、添加路由、开启服务。其中，“index.ejs”文件位于“views”目录下，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Web Application</title>
</head>
<body>
  <h1>Add User</h1>
  <form method="post" action="/add">
    <input type="text" name="name" placeholder="Name"><br>
    <input type="email" name="email" placeholder="Email"><br>
    <button type="submit">Add User</button>
  </form>
</body>
</html>

上面的代码中，“index.ejs”文件包含一个表单，用于添加用户的姓名和电子邮件地址。

3. 启动应用程序

最后，我们在“webapp”目录下运行以下命令，启动应用程序：

node app.js

然后在浏览器中访问“http://localhost:3000”，即可看到添加用户的表单。提交表单后，应用程序会将用户数据存储到MongoDB中，并重定向到主页。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js的路由、EJS模板引擎、GET和POST请求讲解 - Python技术站