day02-vuejs-vue-resource实现get, p

vue-resource实现get, post, jsonp]请求:

JSONP的实现原理:

• 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；

• 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；

• 具体实现过程：

• 先在客户端定义一个回调方法，预定义对数据的操作；

• 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；

• 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；

• 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
  来手动实现一个JSONP的请求例子：

    // 导入 http 内置模块
    const http = require('http')
   // 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
    const urlModule = require('url')
  
   // 创建一个 http 服务器
   const server = http.createServer()
   // 监听 http 服务器的 request 请求
   server.on('request', function (req, res) {
  
      // const url = req.url
      const { pathname: url, query } = urlModule.parse(req.url, true)
  
     if (url === '/getscript') {
   // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
   // var scriptStr = 'show()'
  
    var data = {
     name: 'xjj',
     age: 18,
     gender: '女孩子'
   }
  
    var scriptStr = `${query.callback}(${JSON.stringify(data)})`
   // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
   res.end(scriptStr)
   } else {
   res.end('404')
  }
   })
  
   // 指定端口号并启动服务器监听
   server.listen(3000, function () {
   console.log('server listen at http://127.0.0.1:3000')
   })
  

---

1. vue-resource 的配置步骤：

• 直接在页面中，通过script标签，引入 vue-resource 的脚本文件；

• 注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

    getInfo() { // 发起get请求
      //  当发起get请求之后， 通过 .then 来设置成功的回调函数
      this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
        // 通过 result.body 拿到服务器返回的成功的数据
        console.log(result.body)
      })
    },
    
    
   postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
      //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
      //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
      this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
        console.log(result.body)
      })
    },
    
    
    jsonpInfo() { // 发起JSONP 请求
      this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
        console.log(result.body)
      })
    }
  

---

项目：品牌列表的增删查项目

01.品牌列表-从数据库获取列表：

获取所有的品牌列表
分析：
1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.http.get('url').then(function(result){})
4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！

// 获取所有的品牌列表 
      getAllList() {
          this.$http.get('http://www.baidu.com').then(result => {
            if (result.status === 0) {
              // 成功了
              this.list = result.message
            } else {
              // 失败了
              alert('获取数据失败！')
            }

调用在data和methods之间：

当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数

    created() { 
       this.getAllList()
      }

02.品牌列表-完成添加功能:

添加品牌列表到后台服务器
分析：
1. 听过查看 数据API接口，发现，要发送一个 Post 请求， this.http.post() 中接收三个参数：
2.1 第一个参数： 要请求的URL地址
2.2 第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
3.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去， { emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
3. 在 post 方法中，使用 .then 来设置成功的回调函

add(){
this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
            if (result.body.status === 0) {
              // 成功了！
              // 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
              this.getAllList()
              // 清空 name 
              this.name = ''
            } else {
              // 失败了
              alert('添加失败！')
            }
          }) 
}

03.品牌列表-完成删除功能:

 del(id) { // 删除品牌
          this.$http.get('api/delproduct/' + id).then(result => {
            if (result.body.status === 0) {
              // 删除成功
              this.getAllList()
            } else {
              alert('删除失败！')
            }
          })
        }

04.品牌列表-全局配置数据接口的根域名与全局启用 emulateJSON 选项:

注意：程序应写在创建实例对象之前
如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则 不会启用根路径做拼接；

 Vue.http.options.root = 'http://xxxx';

全局启用 emulateJSON 选项:

Vue.http.options.emulateJSON = true;