使用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美化留言板,並且無刷新添加留言
實現效果: