快捷導(dǎo)航

Vue實(shí)現(xiàn)讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)

更新時(shí)間：2022年08月13日 11:06:08 作者：蒼穹之躍

這篇文章主要介紹了Vue實(shí)現(xiàn)讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)

讓頁(yè)面加載時(shí)請(qǐng)求后臺(tái)接口數(shù)據(jù)

<template>
? <div class="hello">
? ? <div>
? ? ? {{title}}
? ? </div>
? ? <hr>
? ? <button @click="convert">點(diǎn)擊獲取數(shù)據(jù)</button>
? </div>
</template>

<script>
? import axios from 'axios'
? export default {
? ? name: 'HelloWorld',
? ? data() {
? ? ? return {
? ? ? ? title: "靜態(tài)數(shù)據(jù)"
? ? ? }
? ? },
? ? //在這里調(diào)用ajax請(qǐng)求方法
? ? created(){
? ? ? this.convert();
? ? },
? ? methods: {
? ? ? convert: function () {
? ? ? ? axios.get("api/sysUser/getSomething").then(res => {
? ? ? ? ? this.title = res.data;
? ? ? ? })
? ? ? }
? ? }
? }
</script>

Vue請(qǐng)求后臺(tái)數(shù)據(jù)幾種方式

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

1、vue-resource官方提供的vue的一個(gè)插件

①安裝：在項(xiàng)目根目錄進(jìn)行安裝：cnpm install vue-resource --save

save說(shuō)明：將此插件名插入到pachage.json文件中，別人在使用時(shí)，直接npm install，就會(huì)安裝package.json里的所配置的軟件插件名稱了。

②引入vue-resource

在main.js中引入這個(gè)插件，并使用這個(gè)插件

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

③示例：

export default{
? ? ? ? data(){
? ? ? ? ? ? return {
?
? ? ? ? ? ? ? ? msg:'我是一個(gè)首頁(yè)組件msg',
? ? ? ? ? ? ? ? flag:true,
? ? ? ? ? ? ? ? list:[]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
?
? ? ? ? ? ? getData(){
? ? ? ? ? ? ? ? ? ? //請(qǐng)求數(shù)據(jù)
?
? ? ? ? ? ? ? ? ? ? var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';?
?
? ? ? ? ? ? ? ? ? ? this.$http.get(api).then((response)=>{
? ? ? ? ? ? ? ? ? ? ? ? console.log(response);
?
? ? ? ? ? ? ? ? ? ? ? ? //注意this指向?
? ? ? ? ? ? ? ? ? ? ? ? this.list=response.body.result;???
? ? ? ? ? ? ? ? ? ? },function(err){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(err);?
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted(){ ?/*生命周期函數(shù)*/?
? ? ? ? ? ? ? ? this.getData();?
? ? ? ? }
? ? }

2、axios的使用

安裝 cnpm install axios --save

哪里用哪里引入axios

import Axios from 'axios';
? ? export default{
? ? ? ? data(){
? ? ? ? ? ? return { ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? list:[]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
?
? ? ? ? ? ? getData(){
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? var api='http://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(){ ?/*生命周期函數(shù)*/
?
? ? ? ? ? ? this.getData();
? ? ? ? } ? ? ?
? ? }

3、fetch-jsonp不受跨域限制

安裝 cnpm i fetch-jsonp -S

用法：在項(xiàng)目中引入

import ?fetchJsonp ?from ?fetch-jsonp
let domain=`http://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)
? ? ? ? })

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: