使用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. 如果fn1fn2都没有报错,那么执行fn3,如果fn1fn2中有一个报错,那么执行fn4

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

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

实现效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏芋道源码1024

点我达分布式任务调度系统-DaJob

随着互联网的发展,应用服务中的定时任务数量日益增加,常规的垂直应用架构已无法应对,分布式服务架构势在必行。同时,也迫切需要一个分布式任务调度系统来管理分...

3322
来自专栏FreeBuf

如何通过Emond在macOS上实现持久化访问

在这篇文章中,我们会介绍如何通过emond在macOS上实现持久化访问。根据苹果公司的说法,事件监视进程(emond)会“接受来自各种服务的事件,通过一个简单的...

2019
来自专栏数据库

MySQL线程池问题个人整理

见识了智能合约以及以太坊的工作方式,现在我们就尝试将它部署到两种测试网络里面。

1.1K10
来自专栏linux驱动个人学习

Linux进程上下文切换过程context_switch详解--Linux进程的管理与调度(二十一)

因此当前linux的调度程序由两个调度器组成:主调度器,周期性调度器(两者又统称为通用调度器(generic scheduler)或核心调度器(core sch...

2422
来自专栏前端知识铺

tinypng upload一键压缩上传工具,告别人肉

有兴趣的可以玩一玩,因为平时经常会用到图片压缩,上传,如果你也觉得很繁琐的话,这个将会解决你的痛点。

1806
来自专栏java达人

项目本机部署过程中的若个问题

项目本机部署对老手来说纯粹是一个操作的过程,没有任何的技术难点,因此不会去关注,也不常去操作,有时候换一台计算机,或者在别人的计算机上开发一个新项目,部署的时候...

1915
来自专栏LanceToBigData

Maven(六)之依赖管理

前面讲了maven一些关于Maven的简单知识,今天我给大家分享一些Maven的依赖管理。我相信用过maven的人都知道,它很重要的功能就是通过依赖来添加jar...

2028
来自专栏北京马哥教育

巧用tmpfs加速你的linux服务器

默认系统就会加载/dev/shm ,它就是所谓的tmpfs,有人说跟ramdisk(虚拟磁盘),但不一样。象虚拟磁盘一样,tmpfs 可以使用您的 RAM,但它...

2873
来自专栏架构师之路

主从DB与cache一致性

本文主要讨论这么几个问题: (1)数据库主从延时为何会导致缓存数据不一致 (2)优化思路与方案 一、需求缘起 上一篇《缓存架构设计细节二三事》中有一个小优化点,...

58112
来自专栏潘嘉兴的专栏

手把手教你如何优化linux服务器

服务器的优化是我们最小化安装系统后应该做的事情,下面是一些常见的基本的优化服务器的方法。关闭不需要的服务。列出需要启动的的服务crond、network、ssh...

6230

扫码关注云+社区

领取腾讯云代金券