打造用户评论社区：Node.js 助你体验前后端开发乐趣

前端

2024-01-05 11:27:15

Node.js 构建用户评论社区：体验前后端开发的乐趣

在互联网时代，用户评论社区已成为信息交流和观点分享的重要平台。本教程将引导你使用 Node.js 创建一个功能齐全的用户评论社区，让你深入了解前后端开发的精髓。

Node.js 简介

Node.js 是一个流行的 JavaScript 运行时环境，因其易用性和构建后端服务器的强大能力而受到追捧。对于初学者来说，Node.js 是一个绝佳的起点，它简化了 web 开发过程。

建立后端服务器

项目初始化：

创建项目文件夹并使用 npm init -y 初始化一个 Node.js 项目。这将生成一个 package.json 文件，其中包含项目的元数据。
依赖项安装：

使用以下命令安装必要的依赖项：
```
npm install express body-parser
```
express 是一个用于构建 web 服务器的 Node.js 框架，而 body-parser 是一个用于解析请求正文的中间件。

服务器创建：

在 app.js 文件中，创建并启动一个简单的 Node.js 服务器：

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

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

此服务器将监听 3000 端口。

请求处理：

添加代码来处理获取所有评论和添加新评论的请求：

app.get('/comments', (req, res) => {
  // 获取所有评论
  const comments = getComments();

  // 发送评论给客户端
  res.json(comments);
});

app.post('/comments', (req, res) => {
  // 获取评论内容
  const comment = req.body;

  // 保存评论到数据库
  saveComment(comment);

  // 发送评论给客户端
  res.json(comment);
});

构建前端页面

HTML 页面：

在 public 文件夹中，创建一个名为 index.html 的 HTML 页面：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <h1>用户评论社区</h1>

  <ul id="comments"></ul>

  <form id="comment-form">
    <label for="comment">评论：</label>
    <textarea id="comment" name="comment"></textarea>
    <input type="submit" value="提交">
  </form>

  <script src="script.js"></script>
</body>
</html>

此页面包含一个评论列表和一个评论表单。

JavaScript 文件：

创建一个名为 script.js 的 JavaScript 文件：

// 获取元素
const commentsList = document.getElementById('comments');
const commentForm = document.getElementById('comment-form');
const commentInput = document.getElementById('comment');

// 监听表单提交事件
commentForm.addEventListener('submit', (e) => {
  e.preventDefault();

  // 获取评论内容
  const comment = commentInput.value;

  // 发送评论到服务器
  fetch('/comments', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ comment })
  })
  .then(res => res.json())
  .then(data => {
    // 添加评论到列表
    const newComment = document.createElement('li');
    newComment.textContent = data.comment;
    commentsList.appendChild(newComment);

    // 清空输入框
    commentInput.value = '';
  })
  .catch(err => {
    console.error(err);
  });
});

// 加载评论列表
fetch('/comments')
.then(res => res.json())
.then(data => {
  // 添加评论到列表
  data.forEach(comment => {
    const newComment = document.createElement('li');
    newComment.textContent = comment;
    commentsList.appendChild(newComment);
  });
})
.catch(err => {
  console.error(err);
});