Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》《新手友

本文链接：https://blog.csdn.net/qq_22182989/article/details/145369295

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

以下是基于 Vue 2 和 Element UI 的评论关键词过滤功能实现，使用 CDN 引入 Vue 和 Element UI，方便在浏览器中直接预览。

在线预览：Vue 2 + Element UI 实现评论关键词过滤功能

需求场景

在网站或应用中，用户评论功能是常见的交互模块。为了防止用户发布不当内容，我们需要对评论内容进行关键词过滤，确保只有符合要求的评论才能发布成功。

技术选型

Vue 2：用于构建评论界面。
Element UI：提供美观的 UI 组件。
JavaScript：实现关键词过滤逻辑。

实现步骤

1. 引入 Vue 2 和 Element UI

通过 CDN 引入 Vue 2 和 Element UI 的库文件。

<!-- 引入 Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 Element UI 的 CSS 和 JS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 创建评论界面

使用 Element UI 的组件构建评论界面，包括输入框、提交按钮和评论列表。

3. 实现关键词过滤

定义一个敏感词列表，并在用户提交评论时检查内容是否包含敏感词。如果包含敏感词，则阻止发布并提示用户。

4. 发布评论

如果评论内容通过关键词过滤，则将其添加到评论列表中。

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>评论关键词过滤功能</title>
  <!-- 引入 Vue 2 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入 Element UI 的 CSS 和 JS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .comment-section {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .error-message {
      color: red;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="comment-section">
      <h2>发表评论</h2>
      <el-input
        type="textarea"
        v-model="newComment"
        placeholder="请输入您的评论..."
        :rows="4"
      ></el-input>
      <el-button type="primary" @click="submitComment" style="margin-top: 10px;">提交评论</el-button>

      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>

      <h3>评论列表</h3>
      <ul>
        <li v-for="(comment, index) in comments" :key="index">
          {{ comment }}
        </li>
      </ul>
    </div>
  </div>

  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          newComment: "", // 用户输入的评论内容
          comments: [], // 已发布的评论列表
          errorMessage: "", // 错误提示信息
          sensitiveWords: ["敏感词1", "敏感词2", "不良词"], // 敏感词列表
        };
      },
      methods: {
        // 检查评论内容是否包含敏感词
        containsSensitiveWords(content) {
          return this.sensitiveWords.some((word) => content.includes(word));
        },
        // 提交评论
        submitComment() {
          // 清空错误提示
          this.errorMessage = "";

          // 检查评论内容是否为空
          if (!this.newComment.trim()) {
            this.errorMessage = "评论内容不能为空！";
            return;
          }

          // 检查评论内容是否包含敏感词
          if (this.containsSensitiveWords(this.newComment)) {
            this.errorMessage = "评论内容包含敏感词，请修改后重新提交！";
            return;
          }

          // 通过检查，发布评论
          this.comments.push(this.newComment);
          this.newComment = ""; // 清空输入框
        },
      },
    });
  </script>
</body>
</html>

功能详解

1. 评论界面

使用 Element UI 的 el-input 组件作为评论输入框，通过 v-model 绑定到 newComment。
使用 el-button 组件触发 submitComment 方法，提交评论。
使用 ul 和 li 展示已发布的评论。

2. 关键词过滤

在 data 中定义 sensitiveWords 数组，存储敏感词列表。
在 containsSensitiveWords 方法中，使用 Array.prototype.some 检查评论内容是否包含敏感词。

3. 发布评论

在 submitComment 方法中，依次检查评论内容是否为空、是否包含敏感词。
如果通过检查，则将评论内容添加到 comments 数组中，并清空输入框。

常见问题与解决方案

敏感词列表如何动态更新？

可以将敏感词列表存储在服务器，通过 API 动态获取。

示例：

async fetchSensitiveWords() {
  const response = await fetch("/api/sensitive-words");
  this.sensitiveWords = await response.json();
}

如何实现更复杂的过滤规则？

可以使用正则表达式匹配敏感词。

示例：

const regex = new RegExp(this.sensitiveWords.join("|"), "gi");
return regex.test(content);

如何优化性能？
- 对于大量敏感词，可以使用 Trie 树 数据结构进行高效匹配。

总结

通过本教程，你已经学会了如何使用 Vue 2 和 Element UI 实现一个带有关键词过滤功能的评论界面。这个功能可以有效防止用户发布不当内容，提升网站的安全性。希望这篇教程对你的开发工作有所帮助！

如果有其他问题，欢迎在评论区留言讨论！