使用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版本库查看完整代码

实现效果: