解决使用LeanCloud国际版时网站文章浏览次数不显示的bug

发表于 2021-03-28 更新于 2023-11-14 分类于 Web Waline：阅读次数：本文字数： 6.9k 阅读时长 ≈ 6 分钟

By Long Luo

之前个人网站文章阅读次数存储一直在Leancloud上，由于去年国内版要求网站必须备案才能使用之后，个人网站的浏览次数一直是不可用状态。几个月前切换到国际版，但是切换之后浏览次数一直是空白null值，正常应该是0，数据也不会更新。

后台查看Counter数据，也一直是没有数据的状态。当时花费了时间去检查，试图找到问题所在，当时还是怀疑LeanCloud国际版后台接口API的问题，但一直没能解决这个问题。

今天下午从原理入手，分析每个可能的步骤，找到了问题原因，在此记录下解决问题的过程。

如何显示阅读次数？

网站使用的是Hexo + Next主题，可以使用3种方式显示阅读次数：1. Leancloud; 2. FireStore; 3. Busuanzi

FireStore由于需要翻墙，尝试过发现不可行；

Busuanzi虽然也可以，设置之后发现首页数据显示紊乱，而且不准，使用了一段时间之后放弃；

LeanCloud是最合适的，数据也可以很方便的进行迁移。

在Next主题配置_config.yml文件中，可以设置使用哪种计数方式。注意文章阅读次数只能设置一个为true，否则页面会显示多个阅读次数。

leancloud_visitors:
  enable: true
  app_id: # <your app id> hdPFnwkCdbHRj5Q3OQk5vNJQ-gzGzoHsz
  app_key: # <your app key> p2mNUdDbqxrxOYMjs1xiS0zM 

# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
  enable: false
  collection: articles # Required, a string collection name to access firestore database
  apiKey:  # Required
  projectId:  # Required 

# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: false
  post_views_icon: fa fa-eye

如何读写阅读次数的？

这里以LeanCloud为例来说明阅读次数是如何读写的。首先打开网站首页，查看源代码：

<span class="post-meta-item-icon">
    <i class="far fa-eye"></i>
</span>
<span class="post-meta-item-text">阅读次数：</span>
<span class="leancloud-visitors-count"></span>

可以看出，阅读次数是通过leancloud-visitors-count这个class的值来显示的，搜索leancloud-visitors-count可以在网页的js代码中找到：

function leancloudSelector(url) {
  url = encodeURI(url);
  return document.getElementById(url).querySelector('.leancloud-visitors-count');
}

那么这段js代码在哪里呢？

通过查找，leancloud的js代码在themes\next\layout\_third-party\statistics目录下的lean-analytics.njk文件，代码如下：

{%- if theme.leancloud_visitors.enable %}
<script{{ pjax }}>
  (function() {
    function leancloudSelector(url) {
      url = encodeURI(url);
      return document.getElementById(url).querySelector('.leancloud-visitors-count');
    }

    function addCount(Counter) {
      const visitors = document.querySelector('.leancloud_visitors');
      const url = decodeURI(visitors.id);
      const title = visitors.dataset.flagTitle;

      Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({ url })))
        .then(response => response.json())
        .then(({ results }) => {
          if (results.length > 0) {
            const counter = results[0];
            leancloudSelector(url).innerText = counter.time + 1;
            Counter('put', '/classes/Counter/' + counter.objectId, { time: { '__op': 'Increment', 'amount': 1 } })
              .catch(error => {
                console.error('Failed to save visitor count', error);
              });
          } else {
            {%- if theme.leancloud_visitors.security %}
              leancloudSelector(url).innerText = 'Counter not initialized! More info at console err msg.';
              console.error('ATTENTION! LeanCloud counter has security bug, see how to solve it here: https://github.com/theme-next/hexo-leancloud-counter-security. \n However, you can still use LeanCloud without security, by setting `security` option to `false`.');
            {% else %}
              Counter('post', '/classes/Counter', { title, url, time: 1 })
                .then(response => response.json())
                .then(() => {
                  leancloudSelector(url).innerText = 1;
                })
                .catch(error => {
                  console.error('Failed to create', error);
                });
            {%- endif %}
          }
        })
        .catch(error => {
          console.error('LeanCloud Counter Error', error);
        });
    }

    function showTime(Counter) {
      const visitors = document.querySelectorAll('.leancloud_visitors');
      const entries = [...visitors].map(element => {
        return decodeURI(element.id);
      });

      Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({ url: { '$in': entries } })))
        .then(response => response.json())
        .then(({ results }) => {
          for (let url of entries) {
            const target = results.find(item => item.url === url);
            leancloudSelector(url).innerText = target ? target.time : 0;
          }
        })
        .catch(error => {
          console.error('LeanCloud Counter Error', error);
        });
    }

    const { app_id, app_key, server_url } = {{ theme.leancloud_visitors | safedump }};
    function fetchData(api_server) {
      const Counter = (method, url, data) => {
        return fetch(`${api_server}/1.1${url}`, {
          method,
          headers: {
            'X-LC-Id'     : app_id,
            'X-LC-Key'    : app_key,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data)
        });
      };
      if (CONFIG.page.isPost) {
        addCount(Counter);
      } else if (document.querySelectorAll('.post-title-link').length >= 1) {
        showTime(Counter);
      }
    }

    const api_server = app_id.slice(-9) === '-MdYXbMMI' ? `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com` : server_url;

    if (api_server) {
      fetchData(api_server);
    } else {
      fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
        .then(response => response.json())
        .then(({ api_server }) => {
          fetchData('https://' + api_server);
        });
    }
  })();
</script>

{%- endif %}

这段代码主要包含以下几个函数：

addCount：进入文章页面，请求数据库，显示及写入数据库；
showTime：不进入具体文章页面，请求数据库，显示阅读次数；
fetchData：从Leancloud数据库获取数据；

函数调用顺序：

fetchData –> addCount / showTime

问题原因出在哪？

显示原理弄明白了，那么为什么数据没有显示呢？

那我们就Debug这个页面吧，打断点，看看js代码每一步执行，执行过程和变量数据是否和我们预期一致。

在首页界面调试时，showTime会直接进入：

1
2
3

.catch(error => {
  console.error('LeanCloud Counter Error', error);
});

所以数据就显示为null了，也不显示0。

在具体文章页面进行Debug：

if (CONFIG.page.isPost) {
  if (CONFIG.hostname !== location.hostname) return;
  addCount(Counter);
} else if (document.querySelectorAll('.post-title-link').length >= 1) {
  showTime(Counter);
}

进入fetchData之后， if (CONFIG.hostname !== location.hostname) return;，没有进入addCount流程，因此数据为null。

而if (CONFIG.hostname !== location.hostname) return;这行代码的目的是：

因为页面也可以在本地上运行，所以这行代码是将在本地localhost的刷新次数不视为一个刷新次数，所以就直接return了。

Bingo，问题根源找到了！！！

————— 2021.04.05 Update —————

在网站主配置文件_config.yml中，之前的配置文件的url地址如下：

1
2
3

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://longluo.me

调试时发现location.hostname的值为www.longluo.me，而CONFIG.hostname的值为http://longluo.me，所以就会出现上述问题。

问题是如何解决的？

解决方法也很简单，去除if (CONFIG.hostname !== location.hostname) return;这行代码。

重新编译发布，Okay，阅读次数有了，后台查看数据也存在，问题解决。

————— 2021.04.05 Update —————

将网站主配置文件_config.yml中的url值从http://longluo.me修改为www.longluo.me即可，问题即得以解决。

小结

通过解决这个问题，当出现问题时，要先理清楚逻辑，然后一步一步跟踪解决，定位问题，最终解决问题。