常州模板建站哪家好四年級寫一小段新聞
題記
? ? ? ? ?用vue調(diào)用第三方接口,以下是全部代碼和操作流程。
尋找第三方接口網(wǎng)站?
????????推薦:免費(fèi)API - 提供免費(fèi)接口調(diào)用平臺 (aa1.cn)
? ? ? ? 下面的代碼以下圖中的接口為例?
?????????
安裝axios模塊?
? ? ? ? 在終端輸入以下命令:?
?????????npm install axios
?調(diào)用第三方接口代碼
?調(diào)用不需要設(shè)置參數(shù)的接口
? ? ? ? TestView.vue文件如下:?
<template>
? <div >
? ? <ul>
? ? ??<!--<li v-for="item in items" :key="item.id">{{ item }}</li>-->
? ? ? <!--使用了Vue的指令v-html,它會將組件的data屬性的值作為HTML內(nèi)容進(jìn)行渲染-->
? ? ? <div v-html="data"></div>
? ? ? <!--使用了Vue的插值語法{{ }},它會將組件的data屬性的值作為文本進(jìn)行渲染-->
? ? ? <!--沒有去掉p標(biāo)簽-->
? ? ? <div>{{ data }}</div>
? ? </ul>
? </div>
</template>
<script>
// 導(dǎo)入axios模塊,使用axios來發(fā)送HTTP請求了
//export default是用于導(dǎo)出模塊的語法
import axios from 'axios';
// const data = ref()
// const ?items = ref([])
export default {
? //data()函數(shù)是用于定義組件的數(shù)據(jù)屬性的方法
? //data屬性被初始化為空字符串,可以用來存儲數(shù)據(jù)
? data() {
? ? return {
? ? ? //items: [],
? ? ? data:''
? ? }; ?
? },
? //mounted()是一個(gè)生命周期鉤子函數(shù),它會在組件被掛載到DOM后調(diào)用
? mounted() {
? ? this.fetchData();
? },
? //methods對象用于定義組件的方法
? //fetchData()方法使用axios庫發(fā)送一個(gè)GET請求到指定的URL
? //通過Promise的.then()方法處理請求成功的響應(yīng),this.data = response.data將響應(yīng)的數(shù)據(jù)設(shè)置到組件的data屬性中
? //如果請求失敗,將通過.catch()方法捕獲錯(cuò)誤,并通過console.error()方法將錯(cuò)誤打印到控制臺。
? methods: {
? ? fetchData() {
? ? ? axios.get('https://v.api.aa1.cn/api/yiyan/index.php')
? ? ? ? .then(response => {
? ? ? ? ? // 將返回的數(shù)據(jù)設(shè)置到items數(shù)組
? ? ? ? ? // this.items = response.data;
? ? ? ? ? this.data = response.data
? ? ? ? ? // document.body.innerHTML = this.items,用這種方式也可以去掉返回內(nèi)容中的p標(biāo)簽
? ? ? ? ? console.log(response.data)
? ? ? ? })
? ? ? ? .catch(error => {
? ? ? ? ? console.error(error);
? ? ? ? });
? ? }
? }
}
</script>?
<template><div ><ul><!--<li v-for="item in items" :key="item.id">{{ item }}</li>--><!--使用了Vue的指令v-html,它會將組件的data屬性的值作為HTML內(nèi)容進(jìn)行渲染--><div v-html="data"></div><!--使用了Vue的插值語法{{ }},它會將組件的data屬性的值作為文本進(jìn)行渲染--><!--沒有去掉p標(biāo)簽--><div>{{ data }}</div></ul></div>
</template><script>
// 導(dǎo)入axios模塊,使用axios來發(fā)送HTTP請求了
// export default是用于導(dǎo)出模塊的語法
import axios from 'axios';
// const data = ref()
// const items = ref([])
export default {//data()函數(shù)是用于定義組件的數(shù)據(jù)屬性的方法//data屬性被初始化為空字符串,可以用來存儲數(shù)據(jù)data() {return {//items: [],data:''}; },//mounted()是一個(gè)生命周期鉤子函數(shù),它會在組件被掛載到DOM后調(diào)用mounted() {this.fetchData();},//methods對象用于定義組件的方法//fetchData()方法使用axios庫發(fā)送一個(gè)GET請求到指定的URL//通過Promise的.then()方法處理請求成功的響應(yīng),this.data = response.data將響應(yīng)的數(shù)據(jù)設(shè)置到組件的data屬性中//如果請求失敗,將通過.catch()方法捕獲錯(cuò)誤,并通過console.error()方法將錯(cuò)誤打印到控制臺。methods: {fetchData() {axios.get('https://v.api.aa1.cn/api/yiyan/index.php').then(response => {// 將返回的數(shù)據(jù)設(shè)置到items數(shù)組// this.items = response.data;this.data = response.data// document.body.innerHTML = this.items,用這種方式也可以去掉返回內(nèi)容中的p標(biāo)簽console.log(response.data)}).catch(error => {console.error(error);});}}}
</script>
調(diào)用需要設(shè)置參數(shù)的接口?
? ? ? ? TestView2.vue文件如下:
<template>
? <div >
? ? <ul>
? ? <!--使用Vue的事件修飾符@submit.prevent,表示在表單提交時(shí)會觸發(fā)名為handleSubmit的方法。
? ? ? prevent修飾符用于阻止表單默認(rèn)的提交行為,以便可以使用自定義的邏輯來處理提交事件。-->
? ? <form @submit.prevent="handleSubmit">
? ? ? <!--使用Vue的雙向綁定指令v-model,將輸入框的值綁定到了組件的message屬性。-->
? ? ? <input type="text" v-model="message" placeholder="請輸入內(nèi)容">
? ? ? <input type="number" v-model="type" placeholder="請輸入類型">
? ? ? <button type="submit">提交</button>
? ? </form>
? ? ? {{ message }}
? ? ? <!--v-for="(item, index) in data.data"是一個(gè)指令,表示要對data.data數(shù)組進(jìn)行循環(huán)遍歷。
? ? ? ? 在每次循環(huán)中,item表示當(dāng)前項(xiàng)的值,index表示當(dāng)前項(xiàng)的索引。
? ? ? ? :key="item.id"是一個(gè)特殊的屬性綁定語法,用于為循環(huán)渲染的每個(gè)項(xiàng)提供一個(gè)唯一的標(biāo)識符。-->
? ? ? <li v-for="(item,index) in data.data" :key="item.id">
? ? ? ? ? {{index + 1 }}
? ? ? ? ? {{ item.riqi }}
? ? ? ? ? {{ item.wendu }}
? ? ? ? ? {{ item.tianqi }}
? ? ? </li>
? ? ? </ul>
? </div>
</template>
<script>
import axios from 'axios';
// const data = ref()
// const ?items = ref([])
export default {
? data() {
? ? return {
? ? ? //items: [],
? ? ? data:'',
? ? ? message: '',
? ? ? type: '1',
? ? };
? ?
? },
? mounted() {
? ? this.handleSubmit()
? },
? methods: {
? ? handleSubmit() {
? ? ? axios.get('https://v.api.aa1.cn/api/api-tianqi-3/index.php', {
? ? ? ? ? // 使用 axios.get 發(fā)送一個(gè) GET 請求,通過第二個(gè)參數(shù)的 params 屬性傳遞了這個(gè)參數(shù)對象,
? ? ? ? ? // 將 msg 和 type 作為查詢參數(shù)傳遞給服務(wù)器。
? ? ? ? ? params: {
? ? ? ? ? ? ? msg: this.message,
? ? ? ? ? ? ? type: this.type
? ? ? ? ? },
? ? ? ? ? })
? ? ? ? ? .then(response => {
? ? ? ? ? ? ? // 在這里處理返回的數(shù)據(jù)
? ? ? ? ? ? ? this.data=response.data;
? ? ? ? ? ? ? console.log(response.data);
? ? ? ? ? ? ?
? ? ? ? ? })
? ? ? ? ? .catch(error => {
? ? ? ? ? ? ? // 在這里處理錯(cuò)誤
? ? ? ? ? ? ? console.error(error);
? ? ? ? ? ? ?
? ? ? ? ? });
? ? }
? }
}
</script>
<template><div ><ul><!--使用Vue的事件修飾符@submit.prevent,表示在表單提交時(shí)會觸發(fā)名為handleSubmit的方法。prevent修飾符用于阻止表單默認(rèn)的提交行為,以便可以使用自定義的邏輯來處理提交事件。--><form @submit.prevent="handleSubmit"><!--使用Vue的雙向綁定指令v-model,將輸入框的值綁定到了組件的message屬性。--><input type="text" v-model="message" placeholder="請輸入內(nèi)容"><input type="number" v-model="type" placeholder="請輸入類型"><button type="submit">提交</button></form>{{ message }}<!--v-for="(item, index) in data.data"是一個(gè)指令,表示要對data.data數(shù)組進(jìn)行循環(huán)遍歷。在每次循環(huán)中,item表示當(dāng)前項(xiàng)的值,index表示當(dāng)前項(xiàng)的索引。:key="item.id"是一個(gè)特殊的屬性綁定語法,用于為循環(huán)渲染的每個(gè)項(xiàng)提供一個(gè)唯一的標(biāo)識符。--><li v-for="(item,index) in data.data" :key="item.id">{{index + 1 }} {{ item.riqi }}{{ item.wendu }}{{ item.tianqi }}</li></ul></div>
</template><script>
import axios from 'axios';
// const data = ref()
// const items = ref([])
export default {data() {return {//items: [],data:'',message: '',type: '1',};},mounted() {this.handleSubmit()},methods: {handleSubmit() {axios.get('https://v.api.aa1.cn/api/api-tianqi-3/index.php', {// 使用 axios.get 發(fā)送一個(gè) GET 請求,通過第二個(gè)參數(shù)的 params 屬性傳遞了這個(gè)參數(shù)對象,// 將 msg 和 type 作為查詢參數(shù)傳遞給服務(wù)器。params: {msg: this.message,type: this.type},}).then(response => {// 在這里處理返回的數(shù)據(jù)this.data=response.data;console.log(response.data);}).catch(error => {// 在這里處理錯(cuò)誤console.error(error);});}}
}
</script>
?執(zhí)行程序
? ? ? ? 可以參考在vue中搭建路由:3.Vue-在Vue框架中搭建路由-CSDN博客?
? ? ? ? 成功訪問到網(wǎng)頁后,如果沒有顯示,需要多刷新幾次,屬于網(wǎng)絡(luò)問題。如果一直沒有請求成功,則是請求次數(shù)太多,官方不會返回響應(yīng),需要等待一段時(shí)間再次發(fā)起請求,或者自行更換接口進(jìn)行測試
?展示圖?
?
后記?
? ? ? ? 覺得有用可以點(diǎn)贊或收藏!?