[Day 50] 留言板后台及前台(六) - 前端显示资料

昨天我们已经把资料写进去了,
今天要开始显示留言板了,
但是首先我们需要抓使用者的图片,
所以要先在 app/Entity/Board.php 里面加入关联

public function User(){    return $this->hasOne('App\Entity\User', 'id', 'user_id');}

hasOne表示一个留言板(Board)资料只会对应一个使用者(User)资料,
而用User的id栏位跟Board的user_id栏位相对应,

后端的部分不用修改,
前端的部分改成这样子
resources/views/blog/board.blade.php

<!-- 指定继承 layout.master 母模板 -->@extends('layout.master')<!-- 传送资料到母模板，并指定变数为title -->@section('title', $title)<!-- 传送资料到母模板，并指定变数为content -->@section('content')<div>    <p class="body_title">留言板</p></div><div class="body_show_region form_radius">    <table>    @foreach($boardList as $data)    <tr>        <td class="form_td">            <div>            <img class="upload_img"             @if($data->User->picture == "")                src="/images/nopic.png"             @else                src="/{{ $data->User->picture }}"             @endif            />            </div>            <div class="td_text">                {{ $data->User->name }}            </div>        </td>        <td class="form_td form_text">            <div class="td_title">E-mail：{{ $data->email }}</div>            <div class="td_main">{{!! $data->content !!}}</div>            <div class="td_text">发表时间：{{ $data->created_at }}</div>        </td>    </tr>    @endforeach    </table>    <form action = "" method="POST" class="normal_form" />        <!-- 自动产生 csrf_token 隐藏栏位-->        {!! csrf_field() !!}        <div class="col-sm-6">            <div class="form_label">电子邮件:</div>            <div class="form_textbox_region">                <input name="email" class="form_textbox" type="text" value="{{ $input['email'] ?? '' }}" placeholder="请输入电子邮件"/>            </div>        </div>        <div class="div_clear"/>        <textarea name="content" id="content">            {{ $input['content'] ?? '' }}        </textarea>        <div class="btn_group">            <input class="btn btn-primary btn_form" type = 'submit' value = '送出'>        <div>        <div class="form_error">            <!-- 错误讯息模板元件 -->            @include('layout.ValidatorError')        </div>    </form></div><script>    ClassicEditor        .create( document.querySelector( '#content' ) )        .catch( error => {            console.error( error );        } );</script>@endsection

就可以看到前端显示出资料了,

这部分我们明天还有东西要讨论.