前回までの状況はこちら。

【LARAVEL】【ダイエット支援】入力ダイアログ画面を作成する

最新ソースはこちら(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'));

これで動くはず。

• 

以前、課題で作成したホテル予約管理のコードを参照して作成しました。

こういうの取っておくと便利よね。