使用数据库制作简易的留言板

准备工作：

在 https://leancloud.cn/ 上注册一个账户。
创建一个应用 resume-2(名字随意)
引入 av-min.js，得到 window.AV

//帮助 >> 快速入门 >> npm安装 >> 引入代码

# 存储服务（包括推送和统计）
$ npm install leancloud-storage --save

//CDN 加速 >> 代码引入到html页面
<!-- 存储服务 -->
<script src="//cdn1.lncld.net/static/js/3.5.0/av-min.js"></script>

初始化 AV 对象（代码直接拷）

var APP_ID = '5zC0fMVT28TdVY8l2QfSdDyG-gzGzoHsz';
var APP_KEY = 'h0yECHy8dC6isqNCMHKHfbA8';

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

验证

//首先，确认本地网络环境是可以访问 LeanCloud 服务器的，可以执行以下命令行：

ping "5zc0fmvt.api.lncld.net"


//然后在项目中编写如下测试代码：

var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

//然后点击 ‘打开 控制台 > 存储 > 数据 > TestObject’，如果看到如下内容，说明 SDK 已经正确地执行了上述代码，安装完毕。

开始

创建form表单提交按钮

<h2>留言</h2>
<form id="postMessageForm" style="width: 700px; margin: 50px auto;">
    <input type="text" name="name">
    <input type="text" name="content">
    <input type="submit" value="提交">
</form>

使用form的submit监听用户的提交事件，这里使用submit而不使用button的click事件，是因为submit包含了用户点击提交按钮和任意一个input打回车事件。

let myForm = document.querySelector('#postMessageForm')

myForm.addEventListener('submit', function(e) {
    e.preventDefault()
    let content = myForm.querySelector('input[name=content]').value
    let name = myForm.querySelector('input[name=name]').value

把用户输入的内容(content)存入到message里面

var Message = AV.Object.extend('Message');
    var message = new Message();
        message.save({
            'name':name,
            'content': content
        }).then(function(object) { //obiect为存入的数据的相关信息
    })
})

现在我们的查看一下leanCloud数据库，可以发现多了一行‘xxxx’，说明我们已经成功把用户输入的信息存入到我们的数据库里了。

页面的提交按钮：

leanCloud后台：

获取历史留言，使用户能看到所有人的留言

添加消息列表<ol>

</section>
<section class="message">
    <h2>留言</h2>
    <ol id="messageList">
    </ol>
    <form id="postMessageForm" style="width: 700px; margin: 50px auto;">
        <label for="">姓名</label>
        <input type="text" name="name">
        <label for="">内容</label>
        <input type="text" name="content">
        <input type="submit" value="提交">
    </form>
</section>

在leanCloud引入获取对象代码并稍作修改：API文档>>JavaScript数据存储SDK API>>使用API文档>>数据存储开发指南 · JavaScript
对象>>获取对象

var query = new AV.Query('Message');
query.find()
.then(
    function(messages) {
        let array = messages.map((item) => item.attributes)
        array.forEach((item) => {
            let li = document.createElement('li')
            li.innerText = `${item.content}:${item.content}`
            let messageList = document.querySelector('#messageList')
            messageList.appendChild(li)
        })
    }
)

解决用户提交留言按钮后在不刷新整个页面的情况下，显示留言

let li = document.createElement('li')
li.innerText = `${object.attributes.name}:${object.attributes.content}`
let messageList = document.querySelector('#messageList')
messageList.appendChild(li)

处理提交按钮后信息还显示在内容框内的问题

//清空内容
myForm.querySelector('input[name=content]').value=''

全部代码(JS)：

// 初始化
var APP_ID = '5zC0fMVT28TdVY8l2QfSdDyG-gzGzoHsz';
var APP_KEY = 'h0yECHy8dC6isqNCMHKHfbA8';

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


var query = new AV.Query('Message');
query.find()
    .then(
        function(messages) {
            let array = messages.map((item) => item.attributes)
            array.forEach((item) => {
                let li = document.createElement('li')
                li.innerText = `${item.name}: ${item.content}`
                let messageList = document.querySelector('#messageList')
                messageList.appendChild(li)
            })
        }
    )

let myForm = document.querySelector('#postMessageForm')

myForm.addEventListener('submit', function(e) {
    e.preventDefault()
    let content = myForm.querySelector('input[name=content]').value
    let name = myForm.querySelector('input[name=name]').value
    var Message = AV.Object.extend('Message');
    var message = new Message();
    message.save({
        'name':name,
        'content':content
    }).then(function(object) { //obiect为存入的数据的相关信息
        let li = document.createElement('li')
        li.innerText = `${object.attributes.name}:${object.attributes.content}`
        let messageList = document.querySelector('#messageList')
        messageList.appendChild(li)
        myForm.querySelector('input[name=content]').value=''
    })
})

效果图：

做好啦！
这只是很简易的留言板个留言板，很多功能还没完善，这里只是简单记录一下自己的制作过程~