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

LeanCloud 介绍

一个自带数据库和增删改查（CRUD）功能的后台系统。

拥有：

• 登录注册、手机验证码功能（收费）
• 存储任意信息
• 读取任意信息
• 搜索任意信息
• 删除任意信息
• 更新任意信息

LeanCLoud基本使用

我在此演示一下基本的使用.
下面演示如何使用 LeanCloud 存一个 Hello World到他的后台数据库上.
分为下面几步:

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

demo

第一步:首先创建一个应用

image.png

进入

image.png

第二步，通过CDN引入，并初始化
html脚本引入

新建一个message.js文件，加入如下代码

var APP_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';
var APP_KEY = 'xxxxxxxx';

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});//id和key比较敏感用xxx代替

ping一下

ping "w3ti0i9b.api.lncld.net"

加入如下测试代码

var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

可以得到后台

image.png

可见

var TestObject = AV.Object.extend('TestObject');//创造了一个新class

testObject.save({
  words: 'Hello World!'//用TestOBject构造testObject，save的字符串就是传入后台的字符串。

下面用mvc模式搭建完整的留言功能
var view = document.querySelector("section.message");

我们对数据库的操作是获取和存储。

  var model = {
    fetch: function() {
      var query = new AV.Query("Message")
      return query.find()
    }, //获取一个promise对象，记录后台已有的数据显示在页面上。
    save: function(name,content) {
        var Message = AV.Object.extend("Message")
        var message = new Message()
       return message
          .save({
            name: name,
            content: content
          })
    }
  }; //获取一个promise对象，是用户新生成的留言数据，存储到后台。
 

下面理清楚一下逻辑
1.首先需要从后台获取历史数据，并显示在页面上。
2.对于用户新生成的留言存储到后台，并无刷新地显示在页面上。

var controller = {
    view: null,
    model:null,
    messagesList: null,
    init: function(view) {
      this.view = view
      this.model =model
      this.messagesList = view.querySelector("#messageList");
      this.form = view.querySelector("form");
      this.initAV();
      this.loadMessages();
      this.bindEvents();
    },//进行初始化操作
    initAV: function() {
      var APP_ID = "W3ti0I9b2cFxpPiitq31a9U8-gzGzoHsz";
      var APP_KEY = "bSj0qYqb7ng9ymDI2FvpMYoq";

      AV.init({
        appId: APP_ID,
        appKey: APP_KEY
      });
    },//初始化leancloud
    loadMessages: function() {
      //获取历史留言
      this.model.fetch().then(
        messages => {
          let array = messages.map(item => item.attributes);
          array.forEach(item => {
            let li = document.createElement("li");
            li.innerText = `${item.name}:${item.content}`;
            let messagesList = document.querySelector("#messagesList");
            messagesList.appendChild(li);
          });
        },
        () => {}
      );
    },//获取后台历史留言数据，其内容存储在attributes属性上，通过map遍历返回一个数组。在用foreach方法新建
显示历史留言。
    bindEvents: function() {
      this.form.addEventListener("submit", e => {
        e.preventDefault();
        this.saveMessage();
      });//事件绑定，阻止form表达提交默认刷新事件。
    },
    saveMessage: function() {
      let myform = this.form;
      let content = myform.querySelector("input[name=content]").value;
      let name = myform.querySelector("input[name=name").value;
        this.model.save(name,content).then(object => {
          let li = document.createElement("li");
          li.innerText = `${object.attributes.name}:${
            object.attributes.content
          }`;
          let messagesList = document.querySelector("#messagesList");
          messagesList.appendChild(li);
          myform.querySelector("input[name=content]").value = "";
        });//获取新建留言，并直接添加到页面。
    }
  };
  controller.init(view,model);
}.call();

注意点
promise中
例如

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

含义是:
如果成功执行回调函数fn1,如果失败执行回调函数fn2.
如果fn1和fn2都没有报错,那么执行fn3,如果fn1 和fn2中有一个报错,那么执行fn4