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

最新推荐文章于 2024-01-24 18:04:05 发布

delun6896966

最新推荐文章于 2024-01-24 18:04:05 发布

阅读量146

点赞数

文章标签： javascript php 前端 ViewUI

原文链接：http://www.cnblogs.com/Alex-sk/p/6658049.html

版权

上篇笔记忘了在模型中声明关联方法，现在补上：

在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：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel App</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>

<body>
@yield('content')
</body>
</html>

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

<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>

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

生成一个index.blade.php

@extends('app')

@section('content')

@stop

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

@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

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

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

在index中展示数据：

@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

转载于:https://www.cnblogs.com/Alex-sk/p/6658049.html

delun6896966

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Laravel5.1 搭建简单的社区（三）--展示数据

上篇笔记忘了在模型中声明关联方法，现在补上：在Discussion模型中声明方法： // 关联到User public function user() { return $this->belongsTo(User::class); }在User中声明方法： // 关联Discussion ...
复制链接

扫一扫