Laravel5.5 搭建简单的社区（三）--展示数据

时间：2022-10-23 09:04:17

在Discussion模型中声明方法：

    // 关联到User
    public function user()
    {
        return $this->belongsTo(User::class);
    }

在User中声明方法：

    // 关联Discussion
    public function discussions()
    {
        return $this->hasMany(Discussion::class);
    }

 

设计首页 展示数据

首先我们创建一个PostsController

php artisan make:controller PostsController

注册一条路由：

Route::controller('/', 'PostsController');

编写前端页面，生成app.blade.php：

Laravel5.5 搭建简单的社区（三）--展示数据 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel App</title>
    <link rel="stylesheet" href="/css/app.css">
</head>

<body>
@yield('content')
</body>
</html>
Laravel5.5 搭建简单的社区（三）--展示数据

我们现在需要一个导航栏，我们可以在bootstrap官网中的 “起步”->"精选实例"->“导航条实例”中复制你喜欢的导航条源码到你的项目中，如： 

Laravel5.5 搭建简单的社区（三）--展示数据 
<body>
<div class="container">

    <!-- Static navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
                    <li><a href="../navbar-static-top/">Static top</a></li>
                    <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>

    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
            <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
        </p>
    </div>

</div>
@yield('content')
</body>
Laravel5.5 搭建简单的社区（三）--展示数据

根据你的喜好做一些更改就可以了

生成一个index.blade.php

@extends('app')

@section('content')

@stop

在这里我们添加一个横幅，在bootstrap中也可以找到

Laravel5.5 搭建简单的社区（三）--展示数据 
@extends('app')

@section('content')
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world! <a class="btn btn-primary btn-lg pull-right" href="#" role="button">Learn more »</a></h1>
        </div>
    </div>
@stop
Laravel5.5 搭建简单的社区（三）--展示数据

我们在Posts控制器中返回这个视图：

    public function getIndex()
    {
        $discussions = Discussion::all();
        return view('forum.index', compact('discussions'));
    }

在index中展示数据：

Laravel5.5 搭建简单的社区（三）--展示数据 
@extends('app')

@section('content')
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world! <a class="btn btn-primary btn-lg pull-right" href="#" role="button">Learn more »</a></h1>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-9">
                @foreach($discussions as $discussion)
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-circle" src="{{ $discussion->user->avatar }}" alt="64x64" width="64px">
                            </a>
                        </div>

                        <div class="media-body">
                            <h4 class="media-heading">{{ $discussion->title }}</h4>
                            {{ $discussion->user->name }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@stop
标签：

相关文章