laravel關於前臺vue結合寫後臺介面拿資料渲染到頁面上的過程（vant時間元件的運用）
阿新 • • 發佈：2019-02-18
先展示下效果圖，要完成的功能就是通過時間篩選功能，查到每個月的交易資料
點選右上角時間篩選
這就是要完成的功能
先引進的vue元件庫的DatetimePicker 時間選擇元件
接下來編寫一個文字框，賦予一個id="time" 還有一個點選事件 @click="onclickIndex"：(這邊命名隨意取，只是用來渲染資料的時候弄來呼叫)
下一步，引入元件程式碼，這邊為了效果，多引入了vant的另外一個元件，彈出層：
<van-popup v-model="show">內容</van-popup>
引入完畢後，程式碼如下：
首先，剛進入這個頁面，這個時間篩選元件是隱藏的狀態，V-model=show,因此，我們在vue的data return那邊將show:false隱藏掉
這邊介紹下confirm的方法
confirm(v){ var endvalue = new Date(v) Y = endvalue.getFullYear() + '-'; M = (endvalue.getMonth()+1 < 10 ? '0'+(endvalue.getMonth()+1) : endvalue.getMonth()+1); var time = $('#time').val(Y+M)//呼叫到input框的id，將時間的選擇賦值到文字框 var time = $('#time').val() this.show=false;//點選確認後，show=false，元件隱藏掉，值已經傳過去了 var post_data2 = { id:data_id, method: 'month',//調取介面，後面講 nonce: 'month', time:time, type:3//介面設的判斷型別 }; var _self = this; //下面是從後臺接值，這邊把接到的值渲染到圖表上 axios.post('/api/v1', api_data_sign(post_data2, 'mrf')) .then(function (response) { var data = response.data; var wechat = response.data.wechat; var pay = response.data.pay; var month = response.data.month; var month_money = response.data.month_money; var month_number = response.data.month_number; var month_avg = response.data.month_avg; if (response.data.code == 200) { if(month_money==0){ $('#container1').hide() $('.mrf-hide').show() $('#container').hide() _self.month_number = month_number;//月交易筆數 _self.month_money = month_money;//月交易金額 _self.month_avg = month_avg;//月交易均價 _self.wechat = wechat / self.month_number * 100;//微信百分比分佈 _self.pay = pay / self.month_number * 100;//支付寶百分比分佈 _self.month = month[0];//月中金額大小分佈 return }else { $('#container1').show() $('.mrf-hide').hide() $('#container').show() _self.month_number = month_number;//月交易筆數 _self.month_money = month_money;//月交易金額 _self.month_avg = month_avg;//月交易均價 _self.wechat = wechat / _self.month_number * 100;//微信百分比分佈 _self.pay = pay / _self.month_number * 100;//支付寶百分比分佈 _self.month = month[0];//月中金額大小分佈 var chart = { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }; var title = { text: '通道交易佔比' }; var tooltip = { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }; var plotOptions = { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f}% ', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }; // console.log(_self.wechat) var series = [{ type: 'pie', name: '', data: [ ['微信', _self.wechat], ['支付寶', _self.pay], // ['其他',50.0] ] }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); var chart = { type: 'column' }; var title = { text: '本月交易金額' }; var subtitle = { // text: 'Source: runoob.com' }; var xAxis = { categories: ['1~10', '11~50', '51~100', '101~500', '500+'], crosshair: true }; var yAxis = { min: 0, title: { text: '數量' } }; var tooltip = { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} 筆</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }; var plotOptions = { column: { pointPadding: 0.2, borderWidth: 0 } }; var credits = { enabled: false }; var series = [{ name: '本月', data: [_self.month['1~10'], _self.month['11~50'], _self.month['51~100'], _self.month['101~500'], _self.month['500+']], }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.tooltip = tooltip; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; json.plotOptions = plotOptions; json.credits = credits; $('#container1').highcharts(json); } } else { if (response.data.code == '005') { this.login_check = false; window.localStorage.removeItem('WIS_MRF.user'); this.$dialog.confirm({ title: '請重新登入', message: response.data.msg }).then(() => { window.location.href = '../html/login.html'; }).catch(() => { window.location.href = '../index.html'; }); } } }).catch(function (error) { }); }
這邊提一下！從介面那邊接到後臺的資料後，渲染到柱狀圖和餅圖，兩個圖都是用hightcharts.js(可見菜鳥教程)
下面說下後臺介面讀資料的處理，註釋我會寫在程式碼邊上：
//type=3的時候，傳入method下的data return裡面 type=3，做的是下面的查詢 if ($params['type']==3){ $time = $params['time']; $atime = Carbon::createFromFormat('Y-m', $time)->startOfMonth();//laravel自帶時間函式，月開始 $btime = Carbon::createFromFormat('Y-m', $time)->endOfMonth();//laravel自帶時間函式，月結束 //查詢篩選的這個月的交易筆數 $month_number = Order::select() ->where('user_id','=',$params['id']) ->whereBetween('orders.created_at', [$atime,$btime])//查詢時間區間 ->where('orders.pay_status','=','2')->count(); //查詢篩選的這個月收益總和 $month_money = Order::select() ->where('user_id','=',$params['id']) ->whereBetween('orders.created_at', [$atime,$btime])//查詢時間區間 ->where('orders.pay_status','=','2')->sum('trade_amount'); //查詢篩選的這個月均價 $month_avg = Order::select() ->where('user_id','=',$params['id']) ->whereBetween('orders.created_at', [$atime,$btime])//查詢時間區間 ->where('orders.pay_status','=','2')->avg('trade_amount'); //本月收益微信通道佔比 $wechat = Order::select() ->where('user_id','=',$params['id']) ->join('channels','orders.channel_id','=','channels.id') ->join('tubes','channels.tube_id','=','tubes.id') ->whereBetween('orders.created_at', [$atime,$btime])//查詢時間區間 ->where('orders.pay_status','=','2') ->where('tubes.id','=','1') ->count(); //本月收益支付寶通道佔比 $pay = Order::select() ->where('user_id','=',$params['id']) ->join('channels','orders.channel_id','=','channels.id') ->join('tubes','channels.tube_id','=','tubes.id') ->whereBetween('orders.created_at', [$atime,$btime]) ->where('orders.pay_status','=','2') ->where('tubes.id','=','2') ->count(); $id = $params['id']; //查詢這個月所有金額的具體分佈明細 $tj = " SELECT COUNT(CASE WHEN IFNULL(trade_amount,0) >=100.00 AND IFNULL(trade_amount,0)<=1000.00 THEN a.id END ) AS '1~10', COUNT(CASE WHEN IFNULL(trade_amount,0) >=1100.00 AND IFNULL(trade_amount,0)<=5000.00 THEN a.id END ) AS '11~50', COUNT(CASE WHEN IFNULL(trade_amount,0) >=5100 AND IFNULL(trade_amount,0)<=10000 THEN a.id END ) AS '51~100', COUNT(CASE WHEN IFNULL(trade_amount,0) >=10100.00 AND IFNULL(trade_amount,0)<=50000.00 THEN a.id END ) AS '101~500', COUNT(CASE WHEN IFNULL(trade_amount,0) >=50100.00 THEN a.id END ) AS '500+' FROM orders AS a WHERE user_id = $id AND pay_status = '2' AND created_at >= '$atime' and created_at<='$btime' " ; $month = DB::select(DB::raw($tj)); // dd($month); return [ 'status' => true, 'code' => '200', 'month_number' => $month_number,//月交易筆數 'month_money'=> fenToYuan($month_money),//月交易金額 'month_avg'=>fenToYuan($month_avg),//月交易均價 'wechat'=>$wechat,//微信佔比 'pay'=>$pay,//支付寶佔比 'month'=>$month//月交易金額大小分佈 ]; } else{ //這邊type不再是等於3，執行下面這些查詢，只要在new的vue那邊的data return type=''即可！ $startOfMonth = Carbon::now()->startOfMonth(); $endOfMonth = Carbon::now()->endOfMonth(); $today = Carbon::today(); //今日交易金額 $dataToday = Order::select() ->where('user_id','=',$params['id']) ->whereDate('orders.created_at', $today) ->where('orders.pay_status','=','2') ->sum('trade_amount'); //本月交易筆數 $month_number = Order::select() ->where('user_id','=',$params['id']) ->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth]) ->where('orders.pay_status','=','2')->count(); //本月收益總和 $month_money = Order::select() ->where('user_id','=',$params['id']) ->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth]) ->where('orders.pay_status','=','2')->sum('trade_amount'); //本月收益均價 $month_avg = Order::select() ->where('user_id','=',$params['id']) ->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth]) ->where('orders.pay_status','=','2')->avg('trade_amount'); // dd($month_avg); //本月收益微信通道佔比 $wechat = Order::select() ->where('user_id','=',$params['id']) ->join('channels','orders.channel_id','=','channels.id') ->join('tubes','channels.tube_id','=','tubes.id') ->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth]) ->where('orders.pay_status','=','2') ->where('tubes.id','=','1') ->count(); //本月收益支付寶通道佔比 $pay = Order::select() ->where('user_id','=',$params['id']) ->join('channels','orders.channel_id','=','channels.id') ->join('tubes','channels.tube_id','=','tubes.id') ->whereBetween('orders.created_at', [$startOfMonth,$endOfMonth]) ->where('orders.pay_status','=','2') ->where('tubes.id','=','2') ->count(); $id = $params['id']; //查詢這個月所有金額的具體分佈明細 $tj = " SELECT COUNT(CASE WHEN IFNULL(trade_amount,0) >=100.00 AND IFNULL(trade_amount,0)<=1000.00 THEN a.id END ) AS '1~10', COUNT(CASE WHEN IFNULL(trade_amount,0) >=1100.00 AND IFNULL(trade_amount,0)<=5000.00 THEN a.id END ) AS '11~50', COUNT(CASE WHEN IFNULL(trade_amount,0) >=5100 AND IFNULL(trade_amount,0)<=10000 THEN a.id END ) AS '51~100', COUNT(CASE WHEN IFNULL(trade_amount,0) >=10100.00 AND IFNULL(trade_amount,0)<=50000.00 THEN a.id END ) AS '101~500', COUNT(CASE WHEN IFNULL(trade_amount,0) >=50100.00 THEN a.id END ) AS '500+' FROM orders AS a WHERE user_id = $id AND DATE_FORMAT(created_at,'%Y%m') = DATE_FORMAT( CURDATE( ) ,'%Y%m') AND pay_status = '2'" ; $month = DB::select(DB::raw($tj)); return [ 'status' => true, 'code' => '200', 'month_number' => $month_number,//月交易筆數 'month_money'=> fenToYuan($month_money),//月交易金額 'month_avg'=>fenToYuan($month_avg),//月交易均價 'wechat'=>$wechat,//微信佔比 'pay'=>$pay,//支付寶佔比 'dataToday'=>fenToYuan($dataToday),//今日交易量 'month'=>$month//月交易金額大小分佈 ]; };
我們通過兩個type的值進行頁面的渲染和method方法的呼叫，就可以進行時間篩選去獲取某個月的資料。
其實難點在於怎麼把值渲染到圖表上，好在最後克服了！
歡迎私我交流！