时间：2023-09-28 12:42:01 | 来源：网站运营
时间：2023-09-28 12:42:01 来源：网站运营
想发表看法？来看看如何使用LeanCloud开发网页上简易的评论留言功能：学习笔记：使用LeanCloud开发网页上简易的评论留言功能
在线咨询
<!-- 存储服务 --><script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js"></script>如果使用了CDN加载LeanCloud的SDK,那么第一步需要进行初始化：var APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';var APP_KEY = 'xxxxxxxxxxxxxxxxxxxxx';AV.init({ appId: APP_ID, appKey: APP_KEY});值得一提的是，在LeanCloud首页的快速入门项中关于初始化一项所给的示例则会自动替换成我们当前应用的APP_ID和APP_Key。快速入门的链接在这里：quickStart 。<div class="message"> <h1>Comment</h1> <hr> <ul class="messageList"></ul> <form action=""> <label for="">name</label> <input type="text" name="name"> <label for="">comment</label> <input type="text" name="comment"> <input type="submit" value="submit"> </form></div>首先我们要完成的功能是点击submit提交按钮后，两个input标签输入的内容能够上传至我们在LeanCloud新建的数据表Comment中。所以很显然我们需要绑定form表单的submit事件，实现代码如下:var form = document.querySelector('div.message>form'); form.addEventListener('submit',(e)=>{ // 首先要阻止 form表单默认功能 e.preventDefault(); // 在LeanCloud中已经创建了 Comment 数据表 var Comment = AV.Object.extend('Comment'); var c = new Comment(); let name = document.querySelector('input[name=name]').value; let comment = document.querySelector('input[name=comment]').value; c.save({ 'name': name, 'comment':comment }).then(function(object) { // 将数据新增到页面上 let ul = document.querySelector('.messageList'); let li = document.createElement('li'); li.innerText = name+' : '+comment; ul.appendChild(li); // 将两个input输入框的内容清空 document.querySelector('input[name=name]').value = ''; document.querySelector('input[name=comment]').value = ''; }) })关于此段代码，需要说明的是对于form表单来说，每次提交都会刷新页面所以需要阻止form表单的默认功能,即 e.preventDefault(); 。var query = new AV.Query('Todo'); query.find().then(function (todos) { todos.forEach(function(todo) { todo.set('status', 1); }); return AV.Object.saveAll(todos); }).then(function(todos) { // 更新成功 }, function (error) { // 异常处理 });如果将 query.find() 的结果打印在控制台上，我们就知道其结果是一个数组，并且数组的每一项的attributes中则存放着我们存储的用户留言名以及留言信息。我们只需要将数据库中的数据生成在页面上即可，代码如下：var query = new AV.Query('Comment'); query.find().then((e)=>{ let array = e.map((item)=>{return item.attributes}); let ul = document.querySelector('.messageList'); array.forEach((e)=>{ let li = document.createElement('li'); li.innerText = e.name+' : '+e.comment; ul.appendChild(li); }) })!function () { var view = document.querySelector('div.message'); var model = { init:function () { var APP_ID = 'xxxxxxxxxxx-xxxxxx'; var APP_KEY = 'xxxxxxxxxxxxxx'; AV.init({ appId: APP_ID, appKey: APP_KEY }); }, // 获取数据 fetch:function () { var query = new AV.Query('Comment'); return query.find()// 返回 Promise对象 }, // 保存数据 save:function (name,comment) { var Comment = AV.Object.extend('Comment'); var c = new Comment(); return c.save({ 'name': name, 'comment': comment }) // 返回 Promise对象 } }; var controller = { view:null, model:null, init: function(view,model) { this.view = view; this.model = model; this.model.init(); this.loadMessage(); this.bindEvents(); }, bindEvents:function(){ var form = this.view.querySelector('form'); form.addEventListener('submit',(e)=>{ e.preventDefault(); this.saveMessage(); }) }, saveMessage:function(){ let name = this.view.querySelector('input[name=name]').value; let comment = this.view.querySelector('input[name=comment]').value; this.model.save(name,comment) .then(function(object) { // 将数据新增到页面上 let ul = this.view.querySelector('.messageList'); let li = this.view.createElement('li'); li.innerText = name+' : '+comment; ul.appendChild(li); // 将两个input输入框的内容清空 this.view.querySelector('input[name=name]').value = ''; this.view.querySelector('input[name=comment]').value = ''; }) }, loadMessage:function(){ this.model.fetch() .then((e)=>{ let array = e.map((item)=>{return item.attributes}); let ul = document.querySelector('.messageList'); array.forEach((e)=>{ let li = document.createElement('li'); li.innerText = e.name+' : '+e.comment; ul.appendChild(li); }) }) } } controller.init.call(controller,view,model);}.call()关键词：简易,发网,留言,评论,功能,看法,发表,使用
