网站留言板是一个与访客互动的好地方，它拉近了网站与用户的距离。然而，如果没有适当的保护，留言板很快就会被各种垃圾信息、恶意提交甚至自动化脚本所淹没，这不仅影响了网站的整洁度，也可能占用服务器资源，甚至对网站的信誉造成损害。幸运的是，AnQiCMS 提供了一个简单而有效的解决方案：验证码功能。

在 AnQiCMS 中为留言表单开启和使用验证码功能，可以显著提高网站的安全性，有效阻止大部分垃圾信息的骚扰。整个过程分为后台开启和前端模板集成两大部分，接下来我们将详细介绍如何一步步实现。

第一步：在 AnQiCMS 后台开启验证码功能

首先，我们需要在 AnQiCMS 的后台管理界面中启用验证码功能。这是一个全局性的设置，一旦开启，系统就会在后台层面为留言表单提供验证码支持。

  1. 登录你的 AnQiCMS 后台。
  2. 在左侧导航栏中，找到并点击 “功能管理” 选项。
  3. 在展开的功能列表中，选择 “网站留言管理”。
  4. 进入网站留言管理页面后，你会看到一个名为 “开启留言评论验证码功能” 的选项。
  5. 勾选这个选项，然后点击页面底部的 “保存” 按钮。

完成这一步后，AnQiCMS 后台就完成了验证码功能的准备工作。但请注意，仅仅在后台开启并不会让验证码立刻显示在网站前台，我们还需要进行前端模板的修改。

第二步：在留言表单中集成验证码（前端模板）

为了让验证码真正显示出来并投入使用，我们还需要在网站的前端留言表单模板中添加相应的 HTML 和 JavaScript 代码。

通常，AnQiCMS 网站的留言表单模板文件位于 template 目录下的 /guestbook/index.html 或者类似命名的文件中。你需要通过 FTP、SSH 或宝塔等面板的文件管理功能，找到并编辑你正在使用的模板文件。

在留言表单的 <form> 标签内部，你需要找到一个合适的位置来插入验证码的输入框和图片。通常，我们会将其放在留言内容输入框的下方，提交按钮的上方，以确保用户在提交前能清晰地看到并输入验证码。

以下是需要添加到模板中的 HTML 和 JavaScript 代码片段：

<div style="display: flex; clear: both; margin-bottom: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px; height: 56px; cursor: pointer; border: 1px solid #e6e6e6;" alt="验证码" title="点击刷新验证码" />
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => {
                return response.json()
              })
              .then(res => {
                document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id)
                document.getElementById('get-captcha').setAttribute("src", res.data.captcha)
              }).catch(err =>{console.log(err)})
    });
    // 页面加载时自动获取一次验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

代码解释：

  • input type="hidden" name="captcha_id": 这是一个隐藏字段，用于存储当前验证码的唯一标识符。系统通过这个 ID 来匹配用户输入的验证码是否正确。
  • input type="text" name="captcha": 这是用户输入验证码的文本框。
  • img src="" id="get-captcha": 这是显示验证码图片的区域。
  • script 标签内的 JavaScript 代码：
    • 它为验证码图片（id="get-captcha"）添加了一个点击事件监听器。当用户点击图片时，会触发一个网络请求。
    • fetch('/api/captcha'): 这会向 AnQiCMS 后端提供的 /api/captcha 接口发送请求，获取新的验证码图片和其对应的 captcha_id。
    • document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id): 将获取到的 captcha_id 更新到隐藏字段中。
    • document.getElementById('get-captcha').setAttribute("src", res.data.captcha): 将获取到的验证码图片路径更新到 <img> 标签的 src 属性，从而显示新的验证码图片。
    • document.getElementById('get-captcha').click(): 这行代码的作用是在页面加载完成后，立即“点击”一次验证码图片，从而在页面首次加载时就自动显示一个验证码，方便用户。

如果你在项目中使用了 jQuery，可以将 script 部分替换为更简洁的 jQuery 写法：

<script>
  // jQuery 调用方式
  $('#get-captcha').on("click", function (e) {
    $.get('/api/captcha', function(res) {
      $('#captcha_id').attr("value", res.data.captcha_id)
      $('#get-captcha').attr("src", res.data.captcha)
    }, 'json')
  })
  // 页面加载时自动获取一次验证码
  $('#get-captcha').click();
</script>

保存你修改后的模板文件。

第三步：验证验证码功能是否生效

完成上述所有配置后，就可以在网站前端进行测试了：

  1. 打开你的网站，并访问含有留言表单的页面。
  2. 刷新页面，你应该能在留言表单中看到一个动态生成的验证码图片和一个用于输入验证码的文本框。
  3. 尝试点击验证码图片，验证码应该会刷新，显示一张新的图片。
  4. 填写留言内容和正确的验证码，然后提交。留言应该能够成功提交。
  5. 再次尝试提交留言，但这次故意输入错误的验证码，系统应该会提示验证码不正确，并且阻止留言提交。

如果一切如预期般运行，那么恭喜你，你的 AnQiCMS 留言表单的验证码功能已经成功开启并投入使用了！这不仅为网站增添了一层重要的安全防护，也极大地改善了内容运营环境。

常见问题 (FAQ)

1. 我在后台开启了验证码功能，但前台页面没有显示，是哪里出了问题？

后台开启验证码只是在系统层面激活了此功能，但验证码的显示和交互需要前端模板代码的配合。请务必检查你的留言表单模板文件（通常是 guestbook/index.html），确认已按照文章第二步的指引，正确添加了包含 captcha_id、captcha 输入框和 <img> 验证码图片的 HTML 代码，以及用于动态获取和刷新验证码的 JavaScript 代码。

2. 验证码图片不显示或点击后无法刷新怎么办？

这通常是由于前端 JavaScript 代码或网络请求问题导致的。你可以尝试以下排查步骤：

  • 检查浏览器控制台： 按 F12 打开浏览器开发者工具，查看“Console”（控制台）和“Network”（网络）标签页。
    • 如果 JavaScript 代码有错误，Console 会显示报错信息。
    • 在 Network 标签页中，点击验证码图片后，应该能看到一个对 /api/captcha 的请求，检查该请求的状态码（应为 200 OK）和响应内容，确认是否成功返回了 captcha_id 和 captcha 图片路径。
  • 检查路径： 确保 JavaScript 中的 /api/captcha 路径是正确的，没有多余的斜杠或拼写错误。
  • 网络问题： 偶尔也可能是服务器响应慢或网络连接问题，导致验证码图片未能及时加载。

3. AnQiCMS 的验证码功能支持哪些类型的验证码？我可以更换验证码样式吗？

AnQiCMS 内置的验证码功能通常提供一种常见的图片验证码，即由数字和字母组成的干扰图片。文档中并未提及支持多种验证码类型或更换内置验证码样式的功能。如果需要更高级或自定义的验证码类型（例如滑动验证、点选验证），可能需要进行二次开发或集成第三方验证码服务。对于大多数网站而言，AnQiCMS 默认提供的图片验证码已经足够应对常见的垃圾信息提交。