Vue's Ajax

The first step is to install the AJAX components

NPM Install superagent--save-dev

Step Two: Write Api.js

//Configure API Interface addressvarroot = ' Https://cnodejs.org/api/v1 ';//Reference superagentvarRequest = require (' superagent ');//Custom Judgment element type JSfunctionToType (obj) {return({}). Tostring.call (obj). Match (/\s ([a-za-z]+)/) [1].tolowercase ()}//parameter filter functionfunctionfilter_null (o) { for(varKeyincho) {if(O[key] = =NULL) {      DeleteO[key]}if(ToType (O[key]) = = ' String ') {O[key]=O[key].trim ()if(O[key].length = = 0) {        DeleteO[key]}} }  returnO}/*Interface Handler function This function is different for each project, I am now adjusting the interface for HTTPS://CNODEJS.ORG/API/V1, if other interfaces need to be adjusted according to the parameters of the interface. Reference Document address: HTTPS://CNODEJS.ORG/TOPIC/5378720ED6E2D16149FA16BD*/function_api_base (method, URL, params, success, failure) {varR = Request (method, URL). Type (' Text/plain ')  if(params) {params=filter_null (params); if(method = = = ' POST ' | | method = = = ' PUT ')) {      if(ToType (params) = = ' object ') {params=json.stringify (params); } R=r.send (params)}Else if(method = = ' GET ' | | method = = = ' DELETE ') {R=r.query (params)}} R.end (function(Err, res) {if(ERR) {alert (' API error, HTTP CODE: ' +res.status); return;    }; if(Res.body.success = =true) {      if(Success) {success (res.body); }    } Else {      if(failure) {failure (res.body); } Else{alert (' ERROR: ' +json.stringify (res.body)); }    }  });};//returns the calling interface in the Vue templateExportdefault{get:function(URL, params, success, failure) {return_api_base (' GET ', root + '/' +URL, params, success, Failure)}, Post:function(URL, params, success, failure) {return_api_base (' POST ', root + '/' +URL, params, success, Failure)}, put:function(URL, params, success, failure) {return_api_base (' PUT ', root + '/' +URL, params, success, Failure)},Delete:function(URL, params, success, failure) {return_api_base (' DELETE ', root + '/' +URL, params, success, Failure)},}

The third step is to write Main.js

Import API from './config/api '= API;

Fourth step: Writing a template

<Template>  <Div>    <H1class= "logo">Cnodejs Api Test</H1>    <ulclass= "List">      <Liv-for= "Item in lists"V-text= "Item.title"></Li>    </ul>  </Div></Template><Script>Exportdefault{data () {return{lists:[]}}, created () {//after the component is created, get the data, which is not the same as 1.0, changed to this way     This. Get_data ()}, methods: {get_data:function(params) {varv=  This      if (!params) params= {}      //we use the global binding $api method to get the data, convenient ~v. $api. Get ('Topics', params,function(r) {v.lists=r.data})},}, }</Script>

Vue's Ajax