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

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

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

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

前端的两大块:

1. 操纵DOM:DOM API/jQuery
2. 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到他的后台数据库上.
分为下面几步:

1. 建立一个应用 resume
2. 引入 av-min.js，获得 window.AV
3. 初始化 AV 对象（代码直接拷）
4. 新建一条数据来测试（代码直接拷,测试）

演示

详细截图预与演示:
下面这几步都是看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完成简历的留言功能

两个功能:

1. 用户能够添加留言
2. 留言能够显示

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

完整代码:

结果

注意:

1. 要监听form表单的submit事件,不要监听提交按钮的点击事件.由于若是用户输入了信息,点击回车,那么用户的意愿仍是提交,可是他并无点击按钮,因此不会触发提交事件.

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

1. 阻止提交的默认事件,由于点了提交按钮就会刷新当前页
2. 注意map()和forEach()的使用
3. 注意promise中

例如

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

含义是:

1. 若是成功执行回调函数fn1,若是失败执行回调函数fn2.
2. 若是fn1和fn2都没有报错,那么执行fn3,若是fn1 和fn2中有一个报错,那么执行fn4

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

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

实现效果: