资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用leancloud给简历加数据库,实现留言功能

使用leancloud给简历加数据库,实现留言功能

susheng / 2862人阅读

摘要：拥有登录注册手机验证码功能收费存储任意信息读取任意信息搜索任意信息删除任意信息更新任意信息等功能。

使用leancloud给简历加数据库,实现留言功能

这篇博客的源代码是我的正在写的在线简历
完整代码(项目暂未完成)
预览地址

在本地预览项目的时候用的http-server

前端的两大块:

操纵DOM:DOM API/jQuery

Ajax:http请求和响应/XMLHttpRequest的API

但是无法存储数据!

买个服务器,带数据库

数据必须存在服务器上,这样任何设备访问服务器都可以得到数据,如果存在客户端的本地,那么其他客户端设备无法读取到.所以数据必须存储在服务器的数据库上

我们必须买一个服务器,在上面安装数据库.

打开阿里云服务器,最低配置且带宽最小的服务器每月30人民币.

如果给简历加留言功能,我们可以使用一个简易的服务器

使用leancloud

使用leancloud,提供简易有廉价的服务器服务.

这个leancloud服务会提供给你api,调用API可以简单操作后台,包括数据库和服务器.但是,只能用他的api.不能自己写后端代码.不需要在服务器部署数据库,省去在服务器上创建表等一切繁琐的后台操作.直接调用API就可以操纵数据库.
用它提供的的API可以非常简单得创建表,保存数据等等,操作如后台一样.只是数据库和服务器都是这个平台帮你设置好的,你可以在前台直接发请求,操纵他的数据库.

只要会基本的js语法,了解http.使用他提供的API,就可以操作它提供的服务器了.是一个非常适用前端人员练习的产品
缺点:不安全!!!只能当练手用.前台就可以修改数据库代码.而且知道id之后,任何人任何地方都可以修改数据库

PS:我们学习js就是为了能看懂别人(大神)的代码和文档,然后使用他的功能.
用CRM(拷贝,运行,修改)套路去学习任何你没有学习的前端知识.
面试造飞机,工作拧螺丝是正确的面试方法.只有你懂了如何得到的这个文档,你就能看懂文档,然后就能熟练使用文档写的功能.
LeanCloud 介绍

leancloud
一个自带数据库和增删改查（CRUD）功能的后台系统。

拥有：

登录注册、手机验证码功能（收费）
存储任意信息
读取任意信息
搜索任意信息
删除任意信息
更新任意信息
等功能。

基本的增删改查功能

使用LeanCloud

请看下面两个官方的文档:
1.JavaScript SDK 安装指南
2.数据存储入门教程 · JavaScript

基本使用

我在此演示一下基本的使用.
下面演示如何使用 LeanCloud 存一个 Hello World到他的后台数据库上.
分为下面几步:

创建一个应用 resume

引入 av-min.js，得到 window.AV

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

新建一条数据来测试（代码直接拷,测试）

演示

详细截图预与演示:
下面这几步都是看1.JavaScript SDK 安装指南这个文档
第一步:首先创建一个应用

进入后

界面的基础用途如图所示
注意创建的应用要等几分钟才能部署好,等几分钟,刷新页面知道应用出现在进行下面的步骤

第二步:引入 av-min.js，得到 window.AV对象

如图:

引入存储服务的SDK

第三步:
拷贝初始化的代码

这里的id和key每个应用都不一样.是专属的.

第四步:
测试,看看是否能够成功存储到服务器中的数据库.这一步仍然拷贝文档中的代码,按照文档中的提示做


Hello Word!就是在数据库中新插入的数据

测试代码的详细解读

CRM学习代码法中C(拷贝)和R(运行)完毕,接下来实行M(修改),修改代码

下面用我的项目再重新看一下整个过程:
首先引入SDK,再引入一个message.js模块用来写添加数据到数据库的代码

接着按照文档中的要求拷贝代码,然后稍加修改

代码的解释都在注释里

刷新页面后会自动发送一个请求,然后把save({})里的对象里的属性添加到数据库的表中.

结果:

发送了两个请求:

不要管请求是什么

下面查看数据库,看看数据是否添加成功

table2表中多了一条记录,记录中的两个字段正是测试的两个字段

以上就是LeanCloud的基本使用过程
下面用LeanCloud完成留言功能

用LeanCloud完成简历的留言功能

两个功能:

用户可以添加留言

留言可以显示

批量获取对象的API(一个对象在这里就是数据库一个表中的一条记录)

完整代码:

结果

注意:

要监听form表单的submit事件,不要监听提交按钮的点击事件.因为如果用户输入了信息,点击回车,那么用户的意愿还是提交,但是他并没有点击按钮,所以不会触发提交事件.

这个form表单的submit事件包含submit按钮被点击和在任意input打回车.用户提交有可能打回车,有可能点按钮

阻止提交的默认事件,因为点了提交按钮就会刷新当前页

注意map()和forEach()的使用

注意promise中

例如

query.find().then(fn1,fn2)
.then(fn3.fn4)

含义是:

如果成功执行回调函数fn1,如果失败执行回调函数fn2.

如果fn1和fn2都没有报错,那么执行fn3,如果fn1 和fn2中有一个报错,那么执行fn4

使用bootstrop美化留言板,并且无刷新添加留言

代码较多,不粘贴在此,请去git版本库查看完整代码

实现效果:

云数据库MySQL 云内存存储UMem Redis JS留言功能实现 留言功能php jq如何给动态数据加js 微信公众号留言功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96901.html

相关文章

  • MVC 学习使用及总结

    摘要：中间的一层，就是控制层，它负责根据用户从视图层输入的指令，选取数据层中的数据，然后对其进行相应的操作，产生最终结果。这三层之间紧密联系，又互相独立，每层内部的变化不影响其他层。用做简历学习了思想后，用思想做了简历的留言板。 模块化 什么是模块化？就是把一个东西分成几个块（模块），块与块之间互相独立。 在台式机时代，很多人都自己主装过电脑，选购自己喜欢的显示器，鼠标，键盘，主机，配备性能...

    djfml 评论0 收藏0

  • 搭建公众号自动回复功能

    摘要：今天的主角是如何搭建一个公众号自动回复功能。对于大网站或者项目来说，找一家如阿里云腾讯云等云服务平台，但对于个人只是想简单的搭建一个公众号管理自动回复功能，终究有些大材小用了结合使用相得映彰，而且可以根据需要升级扩展。 程序员爱炫技，写个公众号文章，都想拿点技术整整【自动回复】；程序员爱偷懒，什么都想做个【自动化】，最好所有事情系统都给做了，点点手指头就能达到目标。 今天的主角是如何搭...

    MobService 评论0 收藏0

  • 手游开发如何选择后端服务

    摘要：云函数是万金油为实现用户游戏数据存储和每日任务分发，我们最先用了存储服务和云引擎。不过我们并没有用提供的来直接调用存储服务，而是选择用调用云引擎里面的云函数，然后通过云函数调用存储服务来实现相应的逻辑。 【 玩转 LeanCloud 】开发者投稿分享： 作者：赵天泽 作为一个通过 LeanCloud 入门后端开发的小白，一年多的开发历程让我收获满满。多个项目也在 LeanCloud 可...

    codecook 评论0 收藏0

  • 3年，从工程师到创始人

    摘要：我们的产品覆盖了和，目前项目全都架在的云引擎之上。我们的方案是把业务代码从中抽出来了，做成了移动端，这样业务能在和中共用，移动端是基于的云引擎环境下开发的。在这个过程中，云引擎和都发挥了重要作用。 【玩转 LeanCloud 】活动开发经验分享： 作者：黄涛 大家好，我是 htoooth，在一家电商公司做 Node.js 开发，爱折腾，喜欢追新语言，像 golang、elixir、cl...

    AlienZHOU 评论0 收藏0

  • 什么样的简历不会被丢进回收站

    摘要：总共大概花费分钟的时间，平均算下来差不多一份简历只有。哪怕里面的内容不是非常吸引人，但相比来说这样的简历会比其他多花上一些阅读时间，自然印象就更加深刻。首先是少用精通的字眼，真的精通也就算了，不然一定会被仔细询问。 showImg(https://segmentfault.com/img/remote/1460000016085004?w=1880&h=1254); 前言 从去年校招开...

    zzzmh 评论0 收藏0

发表评论

登陆后可评论

0条评论

susheng

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<