前回までの状況はこちら。
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/diet-mng
データ一覧画面を作成します。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">体重管理</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
</div>
<weight-list-component></weight-list-component>
</div>
</div>
</div>
</div>
@endsection
実際に表示するのはVue.jsで作成します。
<template>
<div>
<table class="weightlist">
<tbody>
<tr>
<th class="date">日時</th>
<th class="weight">体重(kg)</th>
<th class="fat_rate">体脂肪(%)</th>
<th class="bmi">BMI</th>
<th class="edit"></th>
<th class="delele"></th>
</tr>
<tr v-for="data in datalists">
<td class="date">{{ data.date}}</td>
<td class="weight">{{ data.weight}}</td>
<td class="fat_rate">{{ data.fat_rate}}</td>
<td class="bmi">{{ data.bmi}}</td>
<td class="edit"><a href="">Edit</a></td>
<td class="delele"><a href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</template>データ一覧を取得するAPIを作成します。
class WeightManagementRepository
{
public function list($user)
{
return $user->WeightManagements()->get();
}
}
class ApiController extends Controller
{
/**
* データを取得する
*/
public function list(Request $request)
{
return response()->json(['dataLists' => $this->weightManagement->list(Auth::user())]);
}
Route::post('api/weight/list', 'Weight\ApiController@list');
このAPIを使用してVue.js側からデータの取得を行います。
<script>
export default {
data() {
return {
datalists: [],
};
},
created: function() {
var self = this;
axios.post('api/weight/list').then(function(response){
response.data.dataLists.forEach(element => {
self.datalists.push({
date: element.datetime,
weight: element.weight,
fat_rate: element.fat_rate,
bmi: element.bmi
})
});
}).catch(function(error){
});
}
}
</script>Vue.component('weight-list-component', require('./components/WeightListComponent.vue'));
これで動くはず。
以前、課題で作成したホテル予約管理のコードを参照して作成しました。
こういうの取っておくと便利よね。
