node.js+express留言板功能实现示例

下面是关于“node.js+express留言板功能实现”的详细攻略。

简介

在网页中，留言板是十分常见的功能，能够让用户与网站管理员进行交流和反馈，并且提高用户与网站的互动性。本文将介绍如何使用Node.js和Express框架实现web留言板的功能。

环境配置

在开始实现前，需要先配置Node.js和Express框架。因此初次使用Node.js和Express框架的同学可以先参考这两篇安装指南：Node.js安装指南、Express框架安装指南。

实现步骤

实现留言板的功能，需要完成以下几步：

创建网站并配置路由
搭建前端页面
实现数据的存储与读取
实现留言板的提交和展示功能

下面我们将按照这几个步骤逐一讲解。

一、创建网站并配置路由

首先，我们需要创建一个Node.js的模块，并使用Express框架创建一个网站：

// 引入express框架
const express = require('express');
const app = express();

// 创建网站
const server = app.listen(3000, function () {
  console.log('Server running at http://127.0.0.1:3000/');
});

这里监听端口为3000，这个可以根据自己的需要进行修改。

然后，我们需要配置路由来响应用户的访问：

app.get('/', function (req, res) {
  res.send('Hello Express!');
});

app.get('/message', function (req, res) {
  res.send('This is the message board page!');
});

以上代码中，我们设置了两个路由。当用户访问网站时，'/‘ 路径将会打印出 ‘Hello Express!’ ，’/message‘路径将会显示 ‘This is the message board page!’ 。

二、搭建前端页面

接下来，我们需要搭建前端页面来完成留言板的展示和提交功能，这里我们将使用pug模板引擎来制作页面。

首先，我们需要在根目录下创建‘views‘文件夹，然后在views文件夹中创建名为 ‘index.pug’ 的文件。在这个文件中，我们可以使用pug语法来编写HTML代码。

html
  head
    title Message Board
  body
    h1 Message Board
    form(action='/post', method='post')
      textarea(name='message', cols='30', rows='10')
      button(type='submit') Submit
    hr
    ul
    each message in messages
      li=message

这里，我们添加了一个表单，用户可以通过表单来提交留言。同时，我们还使用了一个each循环来遍历留言列表，并将列表展示在网页上。

三、实现数据的存储与读取

在现实中，我们肯定不能将所有的留言都保存在一个变量或者数组中，否则它们将会随着服务器的关闭而消失。因此我们需要使用一些方法来存储数据，这里我们选择使用文件来保存。

为了实现数据的读写，我们需要安装一个用于读写文件的模块——fs模块。在终端使用以下指令进行安装：

npm install fs --save

安装完成后，在我们的Node.js模块中添加以下代码：

const fs = require('fs');
const messagesFile = 'messages.txt';

const saveMessage = function (message) {
  fs.appendFile(messagesFile, message + '\n', function (err) {
    if (err) {
      console.error('Failed to save message', err);
    }
  });
};

const loadMessages = function () {
  if (fs.existsSync(messagesFile)) {
    return fs.readFileSync(messagesFile).toString().split('\n').filter(Boolean);
  } else {
    return [];
  }
};

const messages = loadMessages();

以上代码中，我们首先定义了一个 ‘messagesFile‘ 变量来保存存储留言的文件名。然后，我们定义了两个方法，一个用于保存留言，一个用于读取留言列表。其中，’fs.appendFile()‘ 方法用于向文件中追加新的留言，’fs.existsSync()‘ 方法用于检查存储留言的文件是否存在， ‘fs.readFileSync()‘ 方法用于读取文件内容， ‘split()‘ 方法用于将文件内容用’\n‘进行分割，‘filter(Boolean)‘ 方法则是用于去除数组中的Falsy值。

四、实现留言板的提交和展示功能

最后，我们需要实现留言板的提交和展示功能。我们需要在路由中添加以下两个路由处理函数：

// GET /post
app.get('/post', function (req, res) {
  res.render('index', { messages: messages });
});

// POST /post
app.post('/post', function (req, res) {
  const message = req.body.message;
  saveMessage(message);
  messages.push(message);
  res.redirect('/message');
});

首先，当用户访问‘/post‘ 路径时，将会展示我们之前在 ‘index.pug‘ 文件中定义的表单和留言列表。然后，当用户通过表单提交留言时，将会触发 ‘app.post()‘ 路由，将提交的留言存储起来，然后将用户重定向到留言板页面。

示例说明一

假设我们在网站中增加了回复功能，接下来，我们需要在pug模板引擎中加入新增的回复表单。

首先，在 ‘index.pug‘ 文件中添加以下代码：

each message in messages
  li.message
    span= message
    form(action='/reply', method='post')
      input(type="text", name="reply")
      input(type="hidden", name="message", value=message)
      button(type='submit') Reply

以上代码中，我们添加了一个新的表单用于回复留言。在表单中，我们使用hidden input来存储要回复的留言，然后用户输入回复内容后，提交表单即可。

然后，在路由中添加以下代码：

// POST /reply
app.post('/reply', function (req, res) {
  const message = req.body.message;
  const reply = req.body.reply;

  messages.splice(messages.indexOf(message) + 1, 0, '- ' + reply);

  saveMessage(reply, true);
  res.redirect('/message');
});

以上代码中，我们首先获取用户的回复内容和要回复的留言。然后，我们使用 ‘Array.splice()‘ 方法将该条回复插入到留言列表中，并将留言列表写入到磁盘中。最后，我们重定向用户至留言板页面。

示例说明二

假设我们在网站中增加了删除留言的功能，接下来，我们需要在pug模板引擎中加入删除按钮。

首先，在 ‘index.pug‘ 文件中添加以下代码：

each message in messages
  li.message
    span= message
      form(action='/delete', method='post')
        input(type='hidden', name='message', value=message)
        button(type='submit') Delete

以上代码中，我们添加了一个新的按钮，用于删除留言。在按钮中，我们使用 hidden input 来保存留言内容。当用户点击删除按钮的时候，将会提交该表单来删除该条留言。