LeanCloud-数据库使用

记录给自己网页添加留言功能的过程。

使用工具：LeanCloud，一个自带数据库和增删改查（CRUD）功能的后台系统。

在JS中引入`LeanCloud`官方库

在LeanCloud注册并添加应用的步骤： 进入leanCloud官方网站——注册（校验邮箱）——创建应用（不用选什么直接点创建，当然有钱也可以点商用的，随便花，反正我没钱）
安装SKD
在页面的右上角处点击 帮助——快速入门

选择开发语言或平台——选择 LeanCloud 应用后根据下文的文档根据实际情况安装SKD即可

我选择的是CDN方式，直接在HTML中通过 script 标签引入SDK
验证SKD是否安装成功
如果安装成功，在chrome的console输入AV，能打印出一串对象，如下图：
初始化SKD
在JS中加入如下代码初始化SKD
验证是可以访问 LeanCloud 服务器及添加测试代码
验证是可以访问 LeanCloud 服务器及添加测试代码，可看图操作：

添加了测试代码后，打开LeanCloud如果看到，Class多了一个项目，项目里内容是Hello World!，即表示测试成功，搬运结束，现在可以去自己的代码中去添加留言区啦。

在HTML中添加留言板

用HTML在页面布置留言板

<section class="message"><h2>留言</h2><form id="postMessage" class="postMessage" ><span>name:</span><input type="text"  class="name" name="name"><input type="text"  class="content" name="content"><input type="submit" class="submit" value="留言"></form><ol id="messageList" class="messageList"></ol>
</section>

JavaScript思路

思路：将AV 对象封装成 model 对象——通过 controller 操作 model 保存数据、获取数据（ 批量获取数据库中的内容并添加到页面中——监听submit事件——保存并提交输入的内容到数据库中——添加功能使新增加的内容自动添加到页面（不用刷新整个页面），同时清除输入框中的内容）
从数据库中获取对象可在LeanCloud中参考API文档：
采用MVC思想写的完整代码如下：

!function(){var model = {//只出现和数据相关的操作init: function(){var APP_ID = 'rkk77nVws72ECp28upJUiGec-gzGzoHsz'var APP_KEY = 'LiQjClXYJC8slzGNIYmcB5tO'AV.init({ appId: APP_ID, appKey: APP_KEY })},fetch: function(){var query = new AV.Query('Message')   //.find().then(fn1.fn2) 如果成功了调用then的第一个参数，失败了调用第二个参数return query.find()     //返回一个promise对象(后面接的是.then)},save: function(name,content){var Message = AV.Object.extend('Message')var message = new Message()return message.save({name: name,content: content,})     //返回一个promise对象}}var view = document.querySelector('section.message')var controller = {view: null,model: null,messageList: null,init: function(view,model){this.view = viewthis.model = modelthis.messageList = view.querySelector('#messageList')this.form = view.querySelector('form')this.model.init()this.loadMessage()this.bindEvents()},loadMessage: function(){       //批量获取数据库中的内容并添加到页面中this.model.fetch().then((messages)=> {//.find().then(fn1.fn2) 如果成功了调用then的第一个参数，失败了调用第二个参数let array = messages.map((item)=> item.attributes)  //console.log(messages[0].attributes)array.forEach((item)=> {let li = document.createElement('li')li.innerText = `${item.name}：${item.content}` //为什么不加$会直接显示整个字符串？this.messageList.appendChild(li)})}, function (error) {console.log('提交失败')    // 异常处理});},bindEvents: function(){     //监听submit事件this.form.addEventListener('submit', (e)=>{  console.log(e)e.preventDefault()  //阻止默认事件this.saveMessage()  //一定要使用箭头函数（箭头函数没有this），如果不使用箭头函数，这个this会变成submit的Event})},saveMessage: function(){      //保存并提交输入的内容到数据库，并使新增加的内容自动添加到页面，同时清除输入框中的内容var myForm=this.formlet content = myForm.querySelector('input[name=content]').valuelet name = myForm.querySelector('input[name=name]').valuethis.model.save(name,content).then(function(object) {console.log('存入成功');//window.location.reload()用户留言后自动刷新页面,但是会刷新整个页面  //如下方法会自动添加新生成的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 = ''})}}controller.init(view,model)
}.call()

转自：https://www.cnblogs.com/nolaaaaa/p/9185604.html

LeanCloud-数据库使用相关推荐

在微信小程序中使用LeanCloud（1）
之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门]https://leancloud.cn/docs/weapp.html.作为一个前端开发人员,了解后端及数据库是学习工作的需要 ...
vercel.app无法访问
在8.26下午vercel.app被墙,*.vercel.app已被DNS污染,基于此搭建的评论server端API无法访问,目前可行的解决方案只有绑定自己的域名. 另外sm.ms近期在境内被墙,官方 ...
[项目] 网易云音乐项目总结
最近准备把之前做的一个仿网易云音乐的自制音乐网页播放器项目做一个总结. 相关功能如下: 通过后台页面上传歌曲.编辑歌曲功能. 前端页面自动更新播放热度高的歌曲在线听歌.查看歌词.且配有相应的播放动画 ...
Spring Boot参考指南
Spring Boot参考指南作者菲利普·韦伯,戴夫 Syer,约什长,斯特凡尼科尔,罗布绞车,安迪·威尔金森,马塞尔 Overdijk,基督教杜普伊斯,塞巴斯蒂安·德勒兹,迈克尔·西蒙斯 ...
使用LeanCloud作为数据库
1. 注册这里使用 github 帐号进行注册 2. 创建应用点击应用--创建新应用 3. 创建数据库进入新创建的应用,可以点击创建Class进行数据库创建或者代码的形式进行创建. 4. 代码创 ...
Jekyll博客统计访问量，阅读量工具总结--LeanCloud，不蒜子，Valine，Google Analytics
我用 GitHub Pages搭建了jekyll的博客后,想要在页面上实现访问量的统计. 因为实在GitHub上搭建的静态博客,不能像WordPress一样可以操作php和数据库,自然只能借助第三方工 ...
解密小程序云开发数据库
作者:phoenixxliu,腾讯 TEG 后台开发工程师目录: 导语一.背景二.竞品分析三.需求和挑战四.架构和方案五.总结和展望导语小程序云开发(Tencent CloudBase ...
【专栏精选】实战：使用LeanCloud上传玩家分数，实现排行榜
本文节选自洪流学堂公众号技术专栏<大话Unity2019>,未经允许不可转载. 洪流学堂公众号回复专栏,查看更多专栏文章. 洪流学堂,让你快人几步.你好,我是郑洪智. 小新:"有 ...
php访问数据库例子,PHP访问MSSQL数据库（实例代码）
本例子只作为简单的引导,实现一个简单的查询: php中mssql数据库简单查询完整实例 //说明:测试的时候是连接的是远程的mssql数据库,没有在本机运行 //初始化mssql数据库连接,分别是主 ...
免费网站部署和免费数据库Serverless云存储资源汇总整理
名称网站所在地免费网站部署免费数据库 Deta https://www.deta.sh/ 国外支持(Python, Node.js) 支持 LeanCloud https://www.lea ...

LeanCloud-数据库使用

在JS中引入`LeanCloud`官方库

在HTML中添加留言板

JavaScript思路

LeanCloud-数据库使用相关推荐

最新文章

热门文章

LeanCloud-数据库使用

在JS中引入LeanCloud官方库

在HTML中添加留言板

JavaScript思路

LeanCloud-数据库使用相关推荐

最新文章

热门文章

在JS中引入`LeanCloud`官方库