Vue-Resource（json-server模拟数据）

Vue-Resource简述

一如往常，学习怎么用之前必须了解这是个什么东西

Vue-Resource简介

• vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，$.ajax可以做的事情，vue-resource插件也一样能够做到，并且vue-resource的API更为简洁。
• vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，例如可以使用inteceptor在ajax请求时显示loading界面

Vue-Resource特点

• 体积小
  vue-resource非常小，在压缩之后只有大约12KB,服务启用gzip压缩后只有4.5KB大小，远比jQuery的体积要小得多。
• 支持主流浏览器
  和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器外，其他的主流浏览器它都支持
• 支持Promise API和URI Templates
  Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算
  URI Templates是URI的模板，有些类似于ASP.NET MVC的路由模板
• 支持拦截器
  拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理
  拦截器在一些场景下非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供通用的处理方式

Vue-Resource使用

准备工作

• 使用命令创建vue-cli工程项目，使用webstorm打开
  
  为编写代码时有合适的提示，需要在setting里配置一下
  
• 安装vue-resource
  推荐去看vue-resource 的git仓库里的ReadMe文档学习使用 Vue-resource git仓库
  
  这里使用–save只进行本地安装
  package.json文件里的dependencies里可以看到
  

开始造

• main.js中引入并使用
  
• mock数据：模拟服务端的资源，这里通过json-server来模拟数据
  JSON-Server是一个Node模块，运行Express服务器，我们可以指定一个json文件作为数据源，可以把它理解为模拟了一个底层数据库
  json-server可以直接把一个json文件托管成一个具备全RESTful风格的API，并且支持跨域、jsonp、路由订制、数据快照保存等功能的web服务器
  json-server git仓库（含入门操作）
  首先，全局安装json-server
  
  创建文件db.json模拟数据
  
  数据模拟后，使用命令进行启动
  出现笑脸即为启动成功了
  
  我们使用postMan进行请求数据测试一下
  
  可以看到获取到了我们在db.json中编写的数据
• App.vue中使用vue-resource进行请求
  
  
  通过火狐浏览器的Vue.js devtools插件进行查看数据
  
  
  
  post、delete、put请求就是相应的将$http后的关键字进行更改。