讲义

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

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

如果你把 node_modules 目录上传到 github，那么你的项目将变得非常大
请在每个项目里创建 .gitignore 文件，在文件里写上一行 /node_modules/ ，即可防止 node_modules 目录被提交
如果你已经手贱把 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）功能的后台系统。

拥有：

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

等功能。

image.png

没有见过的知识？！

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

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

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

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

//2.引入 av-min.js，得到 window.AV
 <script src="//cdn1.lncld.net/static/js/3.5.0/av-min.js"></script>
//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 集成到我们的简历

一个留言板

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

封装成一个 Model

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

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