記一次vue數據請求，數據渲染實例
安裝配置環境就不細說了，各位看官請移步至百度
Nodejs環境安裝教程 https://www.runoob.com/nodejs/nodejs-install-setup.html
我們由搭建vue腳手架開始講解,引用網上的一篇博文，寫的很詳細
vue腳手架搭建
我這里使用的是Windows下Cmd安裝初始化模板，在HBuilderX運行和編輯項目
搭建完成之后我們需要安裝初始化環境，安裝請求需要的插件（目錄結構）
教程源碼
//初始化(要在項目目錄下運行，需耐心等待...)
npm install
//安裝數據請求插件
npm instal axios
//運行程序
npm run dev
//打包程序（部署用）
npm run build
接着我們運行項目
npm run dev
運行成功之后，會給我們路徑地址，我們去訪問就可以看到初始化的頁面了（樓主的截圖和運行端口不是在同一時間進行的所以會有偏差）
項目搭建好之后，我們對這個文件進行編輯
主要代碼邏輯部分
<template>
<div style="height: 100%;" class="hello">
<!--消息提示回顯部分-->
<h1>{{ msg }}</h1>
<h3>{{ info }}</h3>
<!--屏幕左邊部分-->
<div style="width: 50%;float: left;">
<span style="color: red;font-size: 2em;">GET請求測試部分：</span>
//使用for循環，循環渲染出接收到的數據
<div v-for="item in getValue">
<span>
//使用這種方式獲取數據內容
{{item.name}}
<a :href="item.apiUrl">點我跳轉到{{item.name}}詳情頁面</a>
</span>
</div>
</div>
<!--屏幕右邊部分-->
<div style="width: 50%;float: right;">
<span style="color: red;font-size: 2em;">POST請求測試部分：</span>
<div v-for="item in postValue">
<span>
{{item.name}}
<a :href="item.apiUrl">點我跳轉到{{item.name}}詳情頁面</a>
</span>
</div>
</div>
<!--測試按鈕部分-->
<br/>
<button @click="requestDemo" title="請求測試">點擊開始請求測試</button>
<button @click="requestDemoRe" title="請求測試">點擊清空請求數據</button>
</div>
</template>
<script>
//引入封裝的請求腳本
import {requestDemoPost,requestDemoGet} from "../../api/request.js"
export default {
name: 'HelloWorld',
data () {
return {
msg: '封裝請求測試模板 Get Post',
//get請求得到的數據
getValue:[],
//post請求得到的數據
postValue:[],
info:"詳細的請求以及返回信息請按F12查看控制台輸出信息 或自行查看網絡請求信息"
}
},
//頁面加載完成之后事件
created() {
console.log(" Author：孤水寒月\n Time:2020/09/17\n BlogAddress：https://www.cnblogs.com/nanstar/\n",new Date);
},
methods:{
/* 獲取請求的Demo方法部分*/
requestDemo(){
/*Post請求Demo,數據測試參數部分，需要的話可以寫到這里*/
// let postData = {
// ip:'127.0.0.1',
// type:1
// }
//postData寫的是數據部分
// requestDemoPost(postData).then(res=>{
/*Post請求Demo*/
requestDemoPost().then(res=>{
//其中code代表的是返回的狀態值，200表示返回正常
if(res.data.code === 200){
//在這里進行組件賦值操作
this.postValue = res.data.result;
console.log("POST請求測試獲取值: ",res.data.result);
console.log(" Author：孤水寒月\n Time:2020/09/17\n BlogAddress：https://www.cnblogs.com/nanstar/\n",new Date);
}
})
/*Get請求Demo*/
requestDemoGet().then(resp=>{
if(resp.data.code === 200){
this.getValue = resp.data.result;
console.log("GET請求測試獲取值: ",resp.data.result);
console.log(" Author：孤水寒月\n Time:2020/09/17\n BlogAddress：https://www.cnblogs.com/nanstar/\n",new Date);
}
})
},
//點擊清空數組參數信息
requestDemoRe(){
this.getValue = [];
this.postValue = [];
}
}
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
效果預覽------請求接口獲取到的數據
效果預覽------請求獲取數據，頁內數據渲染之后的頁面
接下來講解代碼部分，來分析下封裝的請求如何調用接口，如何獲取數據並渲染到頁面組件的
我們把接口請求封裝起來了，使用的時候，只需要在頁內調用引入的接口就可以直接發送請求，這樣使我們代碼更加的緊湊
api接口js部分(我新建了api文件夾，專門存放api接口腳本)
//需要在這里引入 axios
import request from "axios"
/**
* post請求
* @param data
*/
export const requestDemoPost = (data) =>{
return request({
//url地址（地址可以使用拼接的方法，讓我們只需要寫后部分，前部分連接地址我們可以固定）
url: "https://api.apiopen.top/videoHomeTab",
//請求方法
method: 'post',
//數據類型（post請求使用的是data，get請求使用的是params）
data:data
})
}
/**
* get請求
*/
export const requestDemoGet = (params) =>{
return request({
url: "https://api.apiopen.top/videoHomeTab",
method: 'get',
params:params
})
}