用 semantic-ui 如何写出评论功能

要使用 Semantic UI 来实现评论功能，你需要以下步骤：

1. 首先，你需要在页面中引入 Semantic UI 的 CSS 文件和 JavaScript 文件。你可以从官方网站下载并引入这些文件，或者使用 CDN 加载。

2. 在 HTML 中创建一个表单，这个表单包含一个输入框和一个提交按钮。你可以使用 Semantic UI 的表单组件来创建这个表单。

3. 在 JavaScript 中，你需要编写一个处理表单提交事件的函数。这个函数需要获取输入框中的内容，并将其发送到后端进行处理。

4. 在后端，你需要编写一个处理评论请求的 API。这个 API 需要接收前端发送的评论内容，并将其存储到数据库中。

5. 最后，你需要编写一个显示评论的组件。这个组件需要从后端获取评论数据，并使用 Semantic UI 的卡片组件来显示每条评论。

以下是一个简单的示例代码：

HTML 代码：

<div class="ui form">
  <div class="field">
    <label>发表评论</label>
    <textarea id="comment-text"></textarea>
  </div>
  <button class="ui button" onclick="submitComment()">提交</button>
</div>

<div id="comment-list" class="ui cards"></div>

JavaScript 代码：

function submitComment() {
  const commentText = document.getElementById('comment-text').value;
  fetch('/api/comments', {
    method: 'POST',
    body: JSON.stringify({ text: commentText }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 清空输入框
    document.getElementById('comment-text').value = '';
    // 刷新评论列表
    loadComments();
  });
}

function loadComments() {
  fetch('/api/comments')
  .then(response => response.json())
  .then(data => {
    const commentList = document.getElementById('comment-list');
    commentList.innerHTML = '';
    data.forEach(comment => {
      const card = document.createElement('div');
      card.classList.add('ui', 'card');
      card.innerHTML = `
        <div class="content">
          <div class="header">${comment.author}</div>
          <div class="meta">${comment.date}</div>
          <div class="description">${comment.text}</div>
        </div>
      `;
      commentList.appendChild(card);
    });
  });
}

// 页面加载完成后自动加载评论列表
document.addEventListener('DOMContentLoaded', loadComments);

后端代码（使用 Express 框架）：

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

app.use(bodyParser.json());

// 存储评论数据的数组
const comments = [];

// 处理评论请求的 API
app.post('/api/comments', (req, res) => {
  const { text } = req.body;
  const date = new Date().toLocaleString();
  const author = '匿名用户';
  const comment = { author, date, text };
  comments.push(comment);
  res.json(comment);
});

// 获取评论列表的 API
app.get('/api/comments', (req, res) => {
  res.json(comments);
});

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

请注意，这只是一个简单的示例，实际应用中还需要考虑很多因素，比如安全性、性能等。