axios互動爬坑（一）---每天進步一點點
阿新 • • 發佈：2019-01-30
前言：接觸這麼久的前端，還沒有真正的和後端互動過，今天正式接觸前後端互動，這裡使用axios，由於使用的是vue框架，據說vue2.0版本之前使用的是vue-resource，但是已經不在維護了，目前主流的vue專案，用的都是axios來完成ajax請求，所以這裡主要介紹一下目前的互動情況與細節
一、使用npm安裝axios，首先要安裝node不用說了
Npm install axios -S二、安裝之後建立一個api資料夾，再建立indexJS檔案，裡面設定請求介面首先要引入axios
在這裡下面兩句話，通過設定來方便之後的請求，不然後面的請求資料就是data.data.data..這樣直接一個data就可以搞定，也保證了程式碼的美觀。
這裡是對應的模組介面，get方法獲取地址。
三、在配置完之後，在元件中 import 引入
在這裡，要配置axios，下方程式碼已經詳解了。
另外，由於value值有三個，並且不能直接在value值中直接渲染資料，要在data中先設定變數，然後上面的步驟獲取到data對應的值，就OK了
四、在echert的value值的配置中，真正的對資料的渲染，這裡是對echarts的環形圖進行資料渲染，這裡的資料拼接處理的不好，我也沒有對parseInt進行封裝處理，後臺給的資料是百分數，並且是個字串型別，但是這裡的value值要展示數字所有就通過slice截掉了%，然後轉成數字就ok了。
data:[ {value: parseInt(this.feelingOne.feelingIndex.slice(0,2)), name:'正面'+this.feelingOne.feelingIndex}, {value: parseInt(this.feelingTwo.feelingIndex.slice(0,2)), name:'中性'+this.feelingTwo.feelingIndex}, {value: parseInt(this.feelingThree.feelingIndex.slice(0,2)), name:'負面'+this.feelingThree.feelingIndex}, ]
經過不懈的努力，資料終於搞上去了。安排！但是最後data資料的渲染中寫的不太好，後期再進行完善。
由於後端把伺服器關了，我這邊沒有及時儲存效果圖。效果圖就自己YY吧，我這裡有一張樣圖
下面附上整體程式碼，下面是專案結構
/api/index.js中
import axios from "axios"; axios.defaults.baseURL = "http://192.168.0.107:8080/option"; // 增加預設的請求的路徑 axios.interceptors.response.use((res)=>{ // 在這裡統一攔截結果 把結果處理成res.data.data return res.data.data; }); //輿情指數 export let queryfeeling = ()=> { return axios.get("/queryfeeling") };
HelloWord中的程式碼
<script>
import {queryfeeling} from "../api"
import Red from './pages/Red'
import cloud from './pages/cloud'
export default {
name: 'HelloWorld',
data () {
return {
chartData:[],
feelingOne: [],
feelingTwo: [],
feelingThree: []
}
},
created(){
this.getqueryfeeling();
},
methods : {
//axios互動
getqueryfeeling(){
queryfeeling().then((data)=>{
this.trData = data; //本來是data.data.data
//console.log(this.trData);
this.feelingOne = data[0]; //第一個data值
this.feelingTwo = data[1];
this.feelingThree = data[2];
this.ring() //本來在mounted生命週期中，但是axios是非同步，所以會導致資料渲染不出來，放在請求資料之後可以保證資料完美渲染。
})
},
ring(){
// 基於準備好的dom，初始化echarts例項
console.log(parseInt(this.feelingOne.feelingIndex.slice(0,2)));
let myChart = this.$echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
myChart.title = '環形圖';
let option = {
title:{
text:'情感指數',
bottom:'35%',
left:'30%',
fontSize:'15',
textStyle: {
color:'white',
fontWeight:'100'
},
},
tooltip: {//滑鼠移上出現文字
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {//下面的字
orient: 'vertical',
x: '26%',
y:'68%',
textStyle: {
fontSize: '16',
fontWeight: '100',
color:'white'
},
data:['正面'+this.feelingOne.feelingIndex,'中性'+this.feelingTwo.feelingIndex,'負面'+this.feelingThree.feelingIndex]
},
graphic:{//中間字
type:'text',
left:'31%',
top:'30%',
style:{
text:'浙江旅遊\n正面情感指數\n排名第1',
textAlign:'center',
fontSize:16,
fill:'#fff',
width:30,
height:30,
}
},
series: [
{
name:'旅遊輿情',
type:'pie',
center:['50%','34%'],//圓環位置
radius: ['43%', '55%'],//圓環大小
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value: parseInt(this.feelingOne.feelingIndex.slice(0,2)), name:'正面'+this.feelingOne.feelingIndex},
{value: parseInt(this.feelingTwo.feelingIndex.slice(0,2)), name:'中性'+this.feelingTwo.feelingIndex},
{value: parseInt(this.feelingThree.feelingIndex.slice(0,2)), name:'負面'+this.feelingThree.feelingIndex},
]
}
],
color: ['#11898a','#75e7e8','#2cc4c5',]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
},
},
components:{Red,cloud},
}
</script>
希望各位大佬批評指正！