Java菜鸟学习日记38

分析页面的数据模型

1. 确定数据模型要涵盖的页面范围（Vue对象要控制页面区域）
2. 把页面分成平等的区块，在每一个区块中，在继续细分不同层级的对象即属性

data:{

id:：学科id

name:：学科名字

courses:[{

id:：课程id

name:课程name

desc:课程描述

videos:[{

id:：videoId

name:：videoName

}]

}]

}

懒加载和代理类

Vue中data模型最佳实践

• vue中不能直接给data赋值
  • this.data = res.data //行不通
• 只能修改data的属性
• data自身的属性叫做根属性，从服务端获取的数据最好只在data中对应一个根属性
  • 好处是：
    • ajax请求成功后，赋值方便
    • 对vue对象的影响比较小，而且可控（data的根属性会被vue特殊对象，可以通过this直接访问到），也就是vue对象代理了data对象

现代前端开发中，Ajax的流行趋势

1. 基于Promise的异步编程模型

$.post(URL，function(){

$.post(url2,function(){

$.post(url3,function(){

})

})

})

axios.post(url1)：发起了第一个POST请求

.then(function(res){

return res.arg1;

})

.then(function(arg1){：arg1是从第一个请求的结果中拿到的

return axios.post(url2,arg1);：发起第二个请求

})

.then(function(res2){

。。。

})

组关键是，要么在promise对象上调用then，要么在then方法中返回promise对象。

如果返回的不是promise对象，就创建一个peomise包裹返回值

所以能形成.then().then().then()链式调用

2. RESTful风格的请求

以前：

• • • 在请求方法上只用：GET、POST
    • 在URL上习惯添加动词表示要进行的操作
      • 增：/user/add
      • 删：/user/remove/1
      • 改：/user/update
      • 查：/user/list
    • REST指出的2大问题

1. 错误地使用了URL
   1. URL中本不应该包含动词
   2. 一个资源应该只有一个URL
2. 错误地使用了HTTP协议的请求方法
   1. 认为只有GET和POST两个
   2. 实际上HTTP设计了很多请求方法，增删改查等都包含了

• REST风格的增删改差
  • 增：POST：/user
  • 删：DELETE：/user/id
  • 改：PUT：/user
    • PATCH：/user
  • 查：GET：/user
    • GET：/user/id