使用 PugJS、NodeJS、MongoDB、Express 的反馈表

本文介绍如何使用 PugJS、NodeJS、MongoDB、Express 来创建一个反馈表，并将填写的数据存储到 MongoDB 中。

目录

• 安装依赖
• 创建表单页面
• 处理表单提交
• 存储数据到 MongoDB 中

安装依赖

首先在项目根目录下执行以下命令来初始化项目：

npm init -y

然后安装所需的依赖：

npm install express mongoose body-parser pug --save

其中，express 用于创建 Web 服务器，mongoose 用于连接 MongoDB，body-parser 用于解析 HTTP 请求体中的数据，pug 用于创建表单页面。

创建表单页面

我们使用 PugJS 来创建表单页面。先在项目的 views 目录下创建一个 feedback.pug 文件，代码如下：

html
  head
    title 反馈表
  body
    h1 反馈表
    form(action='/feedback', method='post')
      label(for='name') 姓名
      input(type='text', name='name')
      br
      label(for='email') 电子邮件
      input(type='email', name='email')
      br
      label(for='message') 反馈信息
      textarea(name='message')
      br
      button(type='submit') 提交

然后在项目根目录下创建一个名为 index.js 的文件，并编写以下代码：

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

const app = express();

app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));

app.use(bodyParser.urlencoded({ extended: true }));

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

app.listen(3000, () => {
  console.log('Listening on port 3000...');
});

这里我们使用了 express 的中间件来解析 HTTP 请求体中的数据，并使用 render 方法来渲染 feedback.pug 页面。

接下来在浏览器中访问 http://localhost:3000/，你应该会看到一个反馈表。

处理表单提交

我们需要在 index.js 中添加一个处理表单提交的路由：

app.post('/feedback', (req, res) => {
  const { name, email, message } = req.body;
  console.log(`Name: ${name}`);
  console.log(`Email: ${email}`);
  console.log(`Message: ${message}`);
  res.send('Thank you for your feedback!');
});

这里我们使用了解构赋值来获取表单提交的每个字段的值，并在控制台中输出。

存储数据到 MongoDB 中

最后，我们需要使用 mongoose 来将填写的数据存储到 MongoDB 数据库中。

首先在 index.js 中引入 mongoose 并连接到本地 MongoDB 服务器：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/feedback', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('Connected to MongoDB...')).catch(err => console.error('Could not connect to MongoDB...', err));

然后定义 Feedback 模型，并在表单提交的时候创建新的数据并保存到数据库中：

const feedbackSchema = new mongoose.Schema({
  name: String,
  email: String,
  message: String
});

const Feedback = mongoose.model('Feedback', feedbackSchema);

app.post('/feedback', async (req, res) => {
  const { name, email, message } = req.body;
  const feedback = new Feedback({ name, email, message });
  await feedback.save();
  res.send('Thank you for your feedback!');
});

这里我们使用了 async/await 来等待 feedback.save() 方法完成，以便能够在 res.send() 方法之前成功保存数据。

完整的 index.js 文件内容如下：

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

const app = express();

app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));

app.use(bodyParser.urlencoded({ extended: true }));

mongoose.connect('mongodb://localhost:27017/feedback', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('Connected to MongoDB...')).catch(err => console.error('Could not connect to MongoDB...', err));

const feedbackSchema = new mongoose.Schema({
  name: String,
  email: String,
  message: String
});

const Feedback = mongoose.model('Feedback', feedbackSchema);

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

app.post('/feedback', async (req, res) => {
  const { name, email, message } = req.body;
  const feedback = new Feedback({ name, email, message });
  await feedback.save();
  res.send('Thank you for your feedback!');
});

app.listen(3000, () => {
  console.log('Listening on port 3000...');
});

现在我们已经成功地创建了一个反馈表，并将其提交的数据存储到 MongoDB 中了。