task39 前后端分离之使用 LeanCloud API

讲义

---

完整代码：https://github.com/FrankFang/resume-15-7
我的代码

注意，不允许上传 node_modules 到 github ！

1. 如果你把 node_modules 目录上传到 github，那么你的项目将变得非常大
2. 请在每个项目里创建 .gitignore 文件，在文件里写上一行 /node_modules/ ，即可防止 node_modules 目录被提交
3. 如果你已经手贱把 node_modules 提交到了 github，那么请这样来撤销：
   1. touch .gitignore
   2. echo /node_modules/ >> .gitignore
   3. git rm -r --cached node_modules
   4. git add . -A
   5. git commit -m "remove node_modules"
   6. git push
   7. npm install 或者 yarn install

LeanCloud 介绍

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

拥有：

1. 登录注册、手机验证码功能（收费）
2. 存储任意信息
3. 读取任意信息
4. 搜索任意信息
5. 删除任意信息
6. 更新任意信息

等功能。

image.png

没有见过的知识？！

不要慌，使用 Copy-Run-Modify（CRM） 套路即可。

• copy:先把示例demo的代码copy下来
• run:把copy的代码运行起来
• modify:修改代码，对比看出每一步代码的作用

演示如何使用 LeanCloud 存一个 Hello World

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

//2.引入 av-min.js，得到 window.AV
 
//3.  初始化 AV 对象（代码直接拷）
var APP_ID = 'uIQT5JXoPdHEPMqCzad2vOe8-gzGzoHsz';
var APP_KEY = 'P5pS899uPr2lEMbFgEPLfcSu';

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});
console.log('运行到这里没有报错')
//4.  新建一条数据（代码直接拷）
//创建TestObject表
var TestObject = AV.Object.extend('TestObject');
//在表中创建一行数据
var testObject = new TestObject();
//数据内容是words: 'Hello World!' 保存
//如果保存成功，则运行alert('LeanCloud Rocks!')
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');
})

上面的代码运行成功后，LeanCloud的控制台就多了一个表TestObject，表里面有一条记录

image.png

接下来我们开始改写代码，实现resume中的留言功能

let myForm = document.querySelector('#postMessageForm')
//监听form的submit事件，保存输入的数据
myForm.addEventListener('submit',function(e){
  e.preventDefault()
  let content = myForm.querySelector('input[name=content]').value
  var Message = AV.Object.extend('Message');
  var message = new Message();
  message.save({
    'content': content
  }).then(function(object) {
    alert('存入成功');
    console.log(object)
  })    
})

为什么监听form的submit而不是btn的onclick?
——因为如果监听按钮的话，输入框按enter键提交需要另外再监听（如下）。监听form的submit事件就能同时监听了

//监听submit按钮的click事件
let button=myForm.querySelector('input[type=submit]')
button.addEventListener('click',function(){
  //....
})
//监听input输入框按下enter事件
let input = myForm.querySelector('input[name=content]')
input.addEventListener('keypress',function(e){
  if(e.keyCode===13){//13是enter键
    //....
  }
})

前面已经实现了存数据的功能，接下来实现读取数据并渲染到页面上的功能
如何使用leancloud的查询功能呢？leancloud查询api

//读取数据
var query = new AV.Query('Message');
query.find().then(function (messages) {
  console.log(messages)
  let array=messages.map((item)=>item.attributes)
  console.log(array)
  //将数据渲染到页面
  array.forEach((item)=>{
    let li = document.createElement('li')
    li.innerText=item.content
    let messageList = document.querySelector('#messageList')
    messageList.appendChild(li)
  })
});

不要刷新页面↓

let myForm = document.querySelector('#postMessageForm')
//监听form的submit事件，保存输入的数据
myForm.addEventListener('submit',function(e){
  e.preventDefault()
  let content = myForm.querySelector('input[name=content]').value
  let name = myForm.querySelector('input[name=user_name]').value
  var Message = AV.Object.extend('Message');
  var message = new Message();
  message.save({
    'name':name,
    'content': content
  }).then(function(object) {
    // window.location.reload()//不刷新页面！！！
    let li = document.createElement('li')
    li.innerText=`${object.attributes.name}:${object.attributes.content}`
    let messageList = document.querySelector('#messageList')
    messageList.appendChild(li)
    console.log(object)
  })    
})

没有使用mvc前的代码地址

把 LeanCloud 集成到我们的简历

一个留言板

1. 用户可以新增留言
2. 没有其他功能

封装成一个 Model

Model 就是一个操作数据的对象而已……
按照mvc格式封装

image.png

image.png

什么是mvc？
mvc就是把你的代码分成3块

• view 负责告诉你代码在页面哪一块，长什么样子
• model 告诉你的数据有哪些操作？初始化、获取、保存等
• controller负责其他的所有事情
  
  

  图片
  
  课后习题：
  我的答卷
  同学的答卷
  MVC 是什么？

参考答案
Model 操作数据
View 表示视图
Controller 是控制器
Model 和服务器交互，Model 将得到的数据交给 Controller，Controller 把数据填入 View，并监听 View
用户操作 View，如点击按钮，Controller 就会接受到点击事件，Controller 这时会去调用 Model，Model 会与服务器交互，得到数据后返回给 Controller，Controller 得到数据就去更新 View