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

简介

本网站是基于 NodeJS 平台搭建，使用 MongoDB 数据库和 Express 框架，前端页面使用 Pug 模板引擎。该网站旨在收集用户反馈，提升产品质量和用户体验。

功能模块

用户反馈模块

用户可以通过该模块提交反馈信息，包括反馈类型、反馈内容、联系方式等。提交反馈后，系统将自动分配反馈编号，并显示反馈提交成功提示信息。

Pug模板代码

<form method="post" action="/feedback">
  <div class="form-group">
    <label for="type">反馈类型</label>
    <select class="form-control" name="type">
      <option value="bug">Bug报告</option>
      <option value="feature">功能建议</option>
      <option value="comment">其他意见和建议</option>
    </select>
  </div>
  <div class="form-group">
    <label for="content">反馈内容</label>
    <textarea class="form-control" name="content" rows="3" required></textarea>
  </div>
  <div class="form-group">
    <label for="contact">联系方式</label>
    <input type="text" class="form-control" name="contact" required>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

NodeJS 后端代码

const express = require('express');
const bodyParser = require('body-parser');
const Feedback = require('./models/feedback');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static('public'));

app.post('/feedback', async (req, res) => {
  const { type, content, contact } = req.body;
  const feedback = new Feedback({ type, content, contact });
  await feedback.save();
  res.send('反馈提交成功！您的反馈编号为：' + feedback.id);
});

app.listen(3000, () => {
  console.log('应用已启动，监听端口3000...');
});

反馈列表模块

管理员可以通过该模块查看所有用户提交的反馈信息，并可以对反馈信息进行处理和回复。系统会默认按照反馈编号倒叙排列反馈列表，并提供根据关键词搜索的功能。

Pug模板代码

<table class="table">
  <thead>
    <tr>
      <th>反馈编号</th>
      <th>反馈类型</th>
      <th>反馈内容</th>
      <th>联系方式</th>
      <th>提交时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  each feedback in feedbacks
    tr
      td= feedback.id
      td= feedback.type
      td= feedback.content
      td= feedback.contact
      td= feedback.createdAt.toLocaleString()
      td
        a.btn.btn-primary(href='/feedbacks/' + feedback.id) 查看
  </tbody>
</table>

NodeJS 后端代码

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

const app = express();

app.use(express.static('public'));

app.get('/feedbacks', async (req, res) => {
  const { q } = req.query;
  const filter = q ? { content: { $regex: q, $options: 'i' } } : {};
  const feedbacks = await Feedback.find(filter).sort('-createdAt').exec();
  res.render('feedbacks.pug', { feedbacks, query: req.query });
});

app.get('/feedbacks/:id', async (req, res) => {
  const { id } = req.params;
  const feedback = await Feedback.findById(id).exec();
  res.render('feedback.pug', { feedback });
});

app.listen(3000, () => {
  console.log('应用已启动，监听端口3000...');
});

数据库模块

MongoDB 数据库设计

| 字段名 | 类型 | 说明 | | --------- | -------- | --------------------- | | id | ObjectId | 反馈编号 | | type | String | 反馈类型，取值包括bug、feature和comment | | content | String | 反馈内容 | | contact | String | 联系方式，可能为空 | | createdAt | Date | 反馈提交时间 |

Mongoose 数据模型定义

const mongoose = require('mongoose');

const feedbackSchema = new mongoose.Schema({
  type: { type: String, required: true },
  content: { type: String, required: true },
  contact: String,
}, { timestamps: true });

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

NodeJS 数据库连接

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/feedbacks', { useNewUrlParser: true, useUnifiedTopology: true });
mongoose.connection.on('error', err => console.error(err));
mongoose.connection.once('open', () => console.log('已连接数据库！'));

总结

以上就是本网站的主要功能，通过 PugJs、NodeJS、MongoDB 和 Express 的组合使用，实现了用户反馈的收集、统计和处理。希望这个例子能给你带来一些灵感和启示，让你更好地理解和使用这些工具和技术。