Vue如何实现页面启动时自动调用后台接口获取数据？

本文共计510个文字，预计阅读时间需要3分钟。

目录+ 加载页面时请求后台接口+ Vue请求后台数据几种方式 + 1. vue-resource官方提供的vue插件 + 2. axios的使用 + 3. fetch-jsonp不受跨域限制+ 加载页面时请求后台接口数据+ template

目录

• 让页面加载时请求后台接口数据
• Vue请求后台数据几种方式
• 1、vue-resource官方提供的vue的一个插件
• 2、axios的使用
• 3、fetch-jsonp不受跨域限制

让页面加载时请求后台接口数据

<template>   <div class="hello">     <div>       {{title}}     </div>     <hr>     <button @click="convert">点击获取数据</button>   </div> </template>

<script>   import axios from 'axios'   export default {     name: 'HelloWorld',     data() {       return {         title: "静态数据"       }     },     //在这里调用ajax请求方法     created(){       this.convert();     },     methods: {       convert: function () {         axios.get("api/sysUser/getSomething").then(res => {           this.title = res.data;         })       }     }   } </script>

Vue请求后台数据几种方式

常用的为：vue-resource、axios、fetch-jsonp

1、vue-resource官方提供的vue的一个插件

①安装：在项目根目录进行安装：cnpm install vue-resource --save

save说明：将此插件名插入到pachage.json文件中，别人在使用时，直接npm install，就会安装package.json里的所配置的软件插件名称了。

②引入vue-resource

在main.js中引入这个插件，并使用这个插件

import VueResource from 'vue-resource' Vue.use(VueResource );

③示例：

export default{         data(){             return {                   msg:'我是一个首页组件msg',                 flag:true,                 list:[]             }         },         methods:{               getData(){                     //请求数据                       var api='www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';                        this.$www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';                 Axios.get(api).then((response)=>{                     this.list=response.data.result;                 }).catch((error)=>{                     console.log(error);                  })              }         },         mounted(){  /*生命周期函数*/               this.getData();         }           }

3、fetch-jsonp不受跨域限制

安装 cnpm i fetch-jsonp -S

用法：在项目中引入

import  fetchJsonp  from  fetch-jsonp let domain=`api.douban.com/v2/movie/top250`         fetch(this.domain,{             start:0,             count:20,             method:'GET',             mode:'no-cors'         }).then(response=>{             console.log(response)             console.log(response.json())             return response.json()         }).then(res=>{             console.log(res)         }).catch(e=>{             console.log(e)         })

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。