使用 Pugjs、Node.js、MongoDB、Express 的反馈表

本篇介绍如何使用 Pugjs、Node.js、MongoDB、Express 搭建一个简单的反馈表应用。反馈表可以用来收集用户对产品的反馈意见，以便开发团队及时了解用户需求并作出相应的调整。

技术栈介绍

Pugjs

Pugjs 是一个非常强大的 templating engine，它可以将基于缩进的模板语法转换成 HTML。Pugjs 可以帮助我们更轻松地编写模板文件，并提供更好的可读性，让前端开发者更快地上手。在本应用中，我们使用 Pugjs 来编写前端页面。

Node.js

Node.js 是一个基于 JavaScript 的运行时环境，它可以跨平台运行，并提供了一系列强大的 API，以便处理 I/O、网络和文件系统等任务。在本应用中，我们使用 Node.js 来编写后端服务器代码。

MongoDB

MongoDB 是一款流行的 NoSQL 数据库，它支持灵活的数据模型设计、高效的读写操作、可靠的数据存储和分布式部署。在本应用中，我们使用 MongoDB 来存储用户提交的反馈数据。

Express

Express 是一个流行的 Node.js Web 框架，它提供了一系列强大的路由、中间件、错误处理和模板引擎等功能，以便快速搭建 web 应用。在本应用中，我们使用 Express 来搭建后端服务器和处理用户请求。

应用架构设计

数据模型设计

在该应用中，我们需要存储用户反馈数据，因此需要设计相应的数据模型。我们可以使用 Mongoose 库来定义数据模型，并将其映射到 MongoDB 数据库中。

// app/models/feedback.js

const mongoose = require('mongoose');

const feedbackSchema = mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true },
  message: { type: String, required: true },
  createTime: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Feedback', feedbackSchema);

在上面的代码中，我们定义了 Feedback 数据模型，包含四个字段：name（用户名）、email（用户邮箱）、message（用户反馈信息）和 createTime（反馈时间）。其中，name、email 和 message 字段都是必需的，createTime 字段默认为当前时间。

路由设计

在该应用中，我们需要处理两个主要的请求：渲染反馈表页面和提交反馈数据。

// app/routes/index.js

const express = require('express');
const router = express.Router();
const Feedback = require('../models/feedback');

// 渲染反馈表页面
router.get('/', (req, res) => {
  res.render('index', { title: 'Feedback Form', message: 'Please leave your feedback below:' });
});

// 提交反馈数据
router.post('/', (req, res) => {
  const feedback = new Feedback({
    name: req.body.name,
    email: req.body.email,
    message: req.body.message,
  });

  feedback.save((err) => {
    if (err) {
      console.error(err);
      res.sendStatus(500);
    } else {
      res.redirect('/');
    }
  });
});

module.exports = router;

在上面的代码中，我们定义了两个路由：GET / 和 POST /。GET / 路由用于渲染反馈表页面，POST / 路由用于提交反馈数据。当用户提交反馈数据时，我们创建一个 Feedback 实例，并调用 save 方法保存到数据库中。如果保存成功，我们重定向到首页；否则，返回 500 状态码并输出错误信息。

中间件设计

在该应用中，我们需要使用一些中间件来处理请求和响应数据。其中，body-parser 中间件用于解析请求体数据，morgan 中间件用于记录请求日志，errorhandler 中间件用于处理错误信息。

// app.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const mongoose = require('mongoose');
const errorHandler = require('errorhandler');
const indexRouter = require('./routes/index');

const app = express();

// 连接 MongoDB 数据库
mongoose
  .connect('mongodb://localhost/feedback-form', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then(() => console.log('Database connected successfully'))
  .catch((err) => console.error(err));

// 配置模板引擎和静态资源目录
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

// 使用中间件
app.use(bodyParser.urlencoded({ extended: false }));
app.use(morgan('dev'));
app.use(errorHandler());

// 使用路由
app.use('/', indexRouter);

// 启动服务器
app.listen(3000, () => console.log('Server started on port 3000'));

module.exports = app;

在上面的代码中，我们使用了 body-parser、morgan 和 errorHandler 中间件，并定义了一个 / 路由来处理用户请求。其中，body-parser 中间件用于解析请求体数据；morgan 中间件用于记录请求日志；errorHandler 中间件用于处理代码中的错误信息。我们还使用了 Mongoose 库来连接 MongoDB 数据库，并在启动服务器时监听 3000 端口。

页面设计

在该应用中，我们需要使用 Pugjs 模板引擎来编写反馈表页面。

// views/index.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= message
    form(method='post')
      label(for='name') Name:
      input(type='text', name='name', required)
      br

      label(for='email') Email:
      input(type='email', name='email', required)
      br

      label(for='message') Message:
      textarea(name='message', rows='5', required)
      br

      button(type='submit') Submit

在上面的代码中，我们定义了一个反馈表页面，包含三个必需字段：name、email 和 message。当用户输入完毕后，可以点击 Submit 按钮提交反馈数据。该页面使用了 Bootstrap 样式表，并通过 Pughs 模板引擎渲染获得想要的HTML代码。

总结

该应用使用 Pugjs、Node.js、MongoDB、Express 技术栈，帮助开发者快速搭建一个简单的反馈表应用。我们介绍了各个部分展示所用的技术，并演示了如何从数据模型设计、路由设计、中间件设计以及页面设计等方面构建该应用。有了这些知识作为基础，您可以更快地掌握这一技术栈，写出更高效、更灵活的应用。