2024.11.13 日常

前言

逛博客的时候发现一个很好玩的小组件Do you like me ，折腾半天才发现问题所在有感而发写下此文字，绝对不是水文`(>﹏<)′。具体功能可在我的博客体验~

第一步

打开项目地址 按照教程做就可以了，看多几次就会了，是不是很简单 (￣y▽,￣)╭

看不会来参考我的教程

1. 登录 或 注册 LeanCloud 国际版 并进入控制台

2. 点击右上角创建应用起一个你喜欢的名字，最好选免费的开发版。

3. 创建Class， likeCount 。

4. 在Class likeCount里面新建一行。

5. 创建Class， likeUser 。

6. 到vercel部署，不想写了，教程说的很明白。

7. 在你的博客上引入html，就完成了。

<div id="likeme">
    <link rel="stylesheet" href="https://unpkg.com/@5ime/likeme@1.0.1/static/css/likeme.css">
    <script src="https://unpkg.com/@5ime/likeme@1.0.1/static/js/likeme.js"></script>
    <script>new limeMe({ el: "#likeme", serverURL: "https://your-domain.vercel.app", color: "#ff4e6ae6" })</script>
</div>

第二步

1. 没有数据，异常。

这时候应该怎么办呢，我们去到LeanCloud里面，添加一列 count 。

2. 通常会出现acl没有权限这种，该怎么办呢？

Failed to create new object, with error message: Forbidden to add new fields by class 'likeUser' permissions. [403 POST https://yjqopchz.api.lncldglobal.com/1.1/classes/likeUser]

简单粗暴的方法把所有ACL权限全部改成所有用户，再去点一下奇迹发生了。


然后怎么办？再把ACL改回去看看？再去试试？

3. 通常来说点一次就应该+1点第二次的时候就应该是，你的爱意已经收到啦~

我们右键打开检查或审查元素，发现点第二次的时候是报以下错，我们应该怎么办？

Uncaught TypeError: Cannot read properties of undefined (reading 'count')
    at xhr.onreadystatechange (likeme.js:1:1009)

其实也很简单我们去问一下AI这句话是什么意思，AI给出以下回答，

问题分析
错误信息 Uncaught TypeError: Cannot read properties of undefined (reading 'count') 表示在 likeme.js 文件的第 1 行，大约第 1009 个字符处，你试图访问一个未定义对象的 count 属性。这个错误发生在 xhr.onreadystatechange 函数中。
可能的原因
1. 服务器返回的数据不正确：服务器可能没有返回预期的 JSON 数据，或者返回的数据中没有 count 属性。
2. 数据解析失败：即使服务器返回了数据，你的代码可能未能正确解析 JSON 数据。
3. 异步操作的时机：如果 count 属性依赖于其他异步操作的结果，确保在访问 count 属性之前，这些异步操作已经完成。

怎么办呢？那我们去检查以下返回数据到底有什么，接下来我们直接使用 地址/like去检查一下。

结合俩次刷新，发现了一个是带count的数据，一个是不带的，符合AI给出来的第一点原因。发现问题了，我们该怎么解决问题？我们去到GitHub找自己的仓库。

看看源代码，找一下原因。发现代码第50行，跟问题是一样的所以我们修改一下,然后保存等待vercel的重新部署。

const data = {code: '201', msg: 'error', data: {count: '你的爱意已经收到啦~'}}

这时候我们再去试试，看看是什么效果。

至此，我们可以欢呼了，我们成功了。

4. html引入代码是有少量缺少的，可以用我的代码，记得更改serverURL，color也是可以改的你喜欢就好。

<div id="likeme">
    <link rel="stylesheet" href="https://unpkg.com/@5ime/likeme@1.0.1/static/css/likeme.css">
    <script src="https://unpkg.com/@5ime/likeme@1.0.1/static/js/likeme.js"></script>
    <script>new limeMe({ el: "#likeme", serverURL: "https://your-domain.vercel.app", color: "#ff4e6ae6" })</script>
</div>

本文参考

https://5ime.cn/doyoulikeme.html
https://github.com/5ime/likeMe