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

LeanCloud 介绍

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

拥有:

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

LeanCLoud基本使用

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

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

demo

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


使用leancloud给简历加数据库,实现留言功能_第1张图片
image.png

进入


使用leancloud给简历加数据库,实现留言功能_第2张图片
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!');
})

可以得到后台


使用leancloud给简历加数据库,实现留言功能_第3张图片
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

    你可能感兴趣的:(使用leancloud给简历加数据库,实现留言功能)