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

實現效果: