PocketBase Docker 部署与 JS 扩展实现博客点赞计数器

services:
  pocketbase:
    image: ghcr.io/muchobien/pocketbase:${VERSION}
    container_name: ${CONTAINER_NAME}
    deploy:
      resources:
        limits:
          cpus: ${CPUS}
          memory: ${MEMORY_LIMIT}
    restart: always
    ports:
      - ${HOST_IP}:${WEB_HTTP_PORT}:8090
    environment:
      - PB_ADMIN_EMAIL=${PB_ADMIN_EMAIL}
      - PB_ADMIN_PASSWORD=${PB_ADMIN_PASSWORD}
      - TZ=Asia/Shanghai
    volumes:
      - ${APP_PATH}/pb_data:/pb_data
      - ${APP_PATH}/pb_hooks:/pb_hooks
      - ${APP_PATH}/pb_migrations:/pb_migrations
    networks:
      - your_network

networks:
  your_network:
    external: true

// pb_hooks/BlogLikes.pb.js

onRecordBeforeCreateRequest((e) => {
  const url = e.record.get("url");
  if (!url) {
    throw new BadRequestError("url is required");
  }

  const count = e.record.getFloat("count");
  if (count !== 0 && count !== 1) {
    // 自动修正为 1（首次创建即点赞）
    e.record.set("count", 1);
  }
}, "BlogLikes");

onRecordBeforeUpdateRequest((e) => {
  const dao = $app.dao();

  // 获取数据库中当前记录
  const original = dao.findRecordById("BlogLikes", e.record.id);
  const oldCount = original.getFloat("count");
  const newCount = e.record.getFloat("count");

  // 校验：count 只能增加 1
  if (newCount !== oldCount + 1) {
    throw new BadRequestError(
      "count can only be incremented by 1 (expected " +
        (oldCount + 1) +
        ", got " +
        newCount +
        ")",
    );
  }

  // 校验：不允许修改其他字段
  if (e.record.get("url") !== original.get("url")) {
    throw new BadRequestError("url cannot be modified");
  }
}, "BlogLikes");

{{- $like := .Site.Params.page.like | default dict -}} {{- if $like.enable -}}
<button class="like-btn" id="like-btn" onclick="toggleLike()" aria-label="点赞">
  <i class="far fa-thumbs-up like-icon"></i>
  <span class="like-count" id="like-count">0</span>
</button>
<script>
  (function () {
    var apiUrl = "{{ $like.apiUrl }}";
    var path = "{{ .Permalink }}";
    var storageKey = "liked:" + path;
    var btn = document.getElementById("like-btn");
    var countEl = document.getElementById("like-count");
    var icon = btn ? btn.querySelector(".like-icon") : null;
    if (!btn || !countEl || !icon) return;

    var liked = localStorage.getItem(storageKey) === "1";
    var recordId = null;
    var currentCount = 0;

    function render(count) {
      currentCount = count;
      countEl.textContent = count;
      if (liked) {
        icon.className = "fas fa-thumbs-up like-icon";
        btn.classList.add("liked");
      } else {
        icon.className = "far fa-thumbs-up like-icon";
        btn.classList.remove("liked");
      }
    }

    // 查询 BlogLikes 记录
    function fetchLike() {
      var filter = '(url="' + path + '")';
      fetch(
        apiUrl +
          "/api/collections/BlogLikes/records?filter=" +
          encodeURIComponent(filter),
      )
        .then(function (r) {
          return r.json();
        })
        .then(function (data) {
          if (data.items && data.items.length > 0) {
            recordId = data.items[0].id;
            render(data.items[0].count || 0);
          } else {
            render(0);
          }
        })
        .catch(function () {
          render(0);
        });
    }

    fetchLike();

    // 点赞（只增不减）
    window.toggleLike = function () {
      if (liked) return;
      liked = true;
      localStorage.setItem(storageKey, "1");
      render(currentCount + 1); // 乐观更新

      if (recordId) {
        // 已有记录 → count +1
        fetch(apiUrl + "/api/collections/BlogLikes/records/" + recordId, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ count: currentCount }),
        })
          .then(function (r) {
            return r.json();
          })
          .then(function (data) {
            render(data.count || currentCount);
          })
          .catch(function () {
            liked = false;
            localStorage.removeItem(storageKey);
            render(currentCount);
          });
      } else {
        // 首次点赞 → 创建记录
        fetch(apiUrl + "/api/collections/BlogLikes/records", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ url: path, count: 1 }),
        })
          .then(function (r) {
            return r.json();
          })
          .then(function (data) {
            recordId = data.id;
            render(data.count || 1);
          })
          .catch(function () {
            liked = false;
            localStorage.removeItem(storageKey);
            render(0);
          });
      }
    };
  })();
</script>
{{- end -}}

# 1. 健康检查
curl https://your-pocketbase-domain.com/api/health

# 2. 查询点赞记录
curl "https://your-pocketbase-domain.com/api/collections/BlogLikes/records?filter=(url='https://your-blog.com/posts/test/')"

# 3. 创建点赞记录
curl -X POST https://your-pocketbase-domain.com/api/collections/BlogLikes/records \
  -H "Content-Type: application/json" \
  -d '{"url":"https://your-blog.com/posts/test/","count":1}'

# 4. 验证钩子：尝试篡改 count（应返回 400）
curl -X PATCH https://your-pocketbase-domain.com/api/collections/BlogLikes/records/RECORD_ID \
  -H "Content-Type: application/json" \
  -d '{"count":999}'