巧用LeanCloud实现在线留言板功能

简述

LeanCloud 是一个云服务器提供商,提供数据存储、文件存储、云引擎、容器、即时通讯、消息推送、短信、游戏云等多项服务,为移动开发提供强有力的后端支持。

需求

实现留言板功能,对于用户来说,无非就是“新增留言”和“获取留言”这两项功能。现在,我们利用LeanCloud的数据存储服务作为留言板的数据库,用于存放留言数据。

开始

我们要使用LeanCloud,首先注册LeanCloud账号,进入控制台创建一个应用。

点击设置-应用Keys-获取 AppIDAppKey

安装SDK

LeanClound 为我们提供了一套 JavaScript SDK 来操作数据库。进入LeanCloud文档,获取安装代码。
此处我们使用CDN方式引入SDK,即以下代码:

1
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-min.js"></script>

初始化

引入JavaScript SDK之后,我们可以在页面加载的时候调用一下初始函数:

1
2
3
4
5
6
7
8
const APP_ID = "rCKF43EaK1aMO************";
const APP_KEY = "0xukkn2pKr************";

AV.init({
appId: APP_ID,
appKey: APP_KEY,
serverURL: "leancloud.leeio.cn"
});

如果你使用的是国内版Leancloud应用,你需要在初始化SDK时传入服务器地址参数。服务器地址即为你绑定的自定义域名,如何绑定,请点击此处查看详情

验证

初始化完成后,确认本地网络环境是可以访问 LeanCloud 服务器的,可以执行以下命令:

1
ping "API_BASE_URL"  // API_BASE_URL 为绑定的API自定义域名

如果当前网路正常将会得到如下响应:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PING leancloud.leeio.cn (103.114.177.35): 56 data bytes
64 bytes from 103.114.177.35: icmp_seq=0 ttl=51 time=9.032 ms
64 bytes from 103.114.177.35: icmp_seq=1 ttl=51 time=7.290 ms
64 bytes from 103.114.177.35: icmp_seq=2 ttl=51 time=8.131 ms
64 bytes from 103.114.177.35: icmp_seq=3 ttl=51 time=9.689 ms
64 bytes from 103.114.177.35: icmp_seq=4 ttl=51 time=6.559 ms
64 bytes from 103.114.177.35: icmp_seq=5 ttl=51 time=8.665 ms
64 bytes from 103.114.177.35: icmp_seq=6 ttl=51 time=8.041 ms
64 bytes from 103.114.177.35: icmp_seq=7 ttl=51 time=8.203 ms
64 bytes from 103.114.177.35: icmp_seq=8 ttl=51 time=6.288 ms
64 bytes from 103.114.177.35: icmp_seq=9 ttl=51 time=7.938 ms

--- leancloud.leeio.cn ping statistics ---
10 packets transmitted, 10 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 6.288/7.984/9.689/0.997 ms

若你的本地网络环境没有问题,你可以通过 添加数据 进一步验证 SDK 是否初始化成功。

添加数据

向 LeanCould 数据库提交数据相当简单,你无需像MySQL那样设计表,直接提交 KeyValue

1
2
3
4
5
6
7
8
9
let TestObj = AV.Object.extend("TestObj");
let demo = new TestObj();
demo.save({
words: "Hello World."
}).then( result => {
console.log("Save successfully.")
}, error => {
console.log("Save error, connection fail!")
})

执行上述代码,然后打开 控制台 > 存储 > 数据 > TestObj,如果看到如下内容,说明 SDK 已经正确地执行了上述代码,数据添加成功。

查询数据

1
2
3
4
const query = new AV.Query("TestObj");
query.find().then( contents => {
console.log(contents);
})

执行上述代码,你可在控制台获取从 TestObj 表中查询到的所有数据。

简易留言板功能实现

基于以上的“增”和“查”方法,我们可以轻松实现一个简易留言板功能。

思路:

 1. 新增留言:使用js获取input框中的内容,然后保存到对应数据库中。
 2. 获取留言:通过官方文档中的对象操作获取表内所有数据,然后遍历数据,取出数据内的特定内容。

先看效果:

    具体代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    <body>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-min.js"></script>
    <ul id="message"></ul>

    <label for="name">姓名:</label>
    <input id="name" type="text" />

    <label for="content">内容:</label>
    <input id="content" type="text" />

    <script>
    const APP_ID = "rCKF43EaK1aMOJVIQJ********";
    const APP_KEY = "0xukkn2pKrF********";

    AV.init({
    appId: APP_ID,
    appKey: APP_KEY
    });

    let TestObj = AV.Object.extend("TestObj");
    let demo = new TestObj();

    <!-- 提交留言 -->
    function push(name, content) {
    const Name = document.getElementById("name").value;
    const Content = document.getElementById("content").value;
    console.log(Name, Content)
    demo.save({
    name: `${Name}`,
    content: `${Content}`
    }).then(result => {
    console.log("Save Successfully.")
    }, error => {
    console.log("Save Error.")
    })
    }
    <!-- 获取留言 -->
    const query = new AV.Query("TestObj");
    window.onload = function QueryAll() {
    const div = document.getElementById("message");
    query.find().then(contents => {
    for (let i = 0; i < contents.length; i++) {
    let name = contents[i].attributes.name;
    let content = contents[i].attributes.content;
    div.innerHTML += `<li>${name}说:${content}</li>`
    }
    })
    }
    </script>

    <button onclick="push()">提交留言</button>
    <button onclick="QueryAll()">获取留言</button>

    </body>

    其实,目前被广泛使用的 Valine 评论系统也是同样的思路实现的,它的评论存储服务是依赖于LeanCloud的,也是通过对LeanCloud的数据库进行新增和查询数据。

    文章内容有误?立即反馈
    2020 年 9 月 3 日巧用 LeanCloud 实现在线留言板功能
    2020 年 8 月 27 日利用腾讯云 COS 存储 Hexo 静态文件
    2020 年 3 月 9 日Hexo 网站部署到云服务器全流程