zoukankan      html  css  js  c++  java
  • Laravel5.1 搭建简单的社区(三)--展示数据

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

    在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
  • 相关阅读:
    java中反射
    mysql 的锁机制和ACID
    名词记忆
    switch语法之PHP
    PHP代码批量加密
    windows 20003 扩展安装后不成功的原因
    apache配置虚拟目录
    移动web在ios和android下点击元素出现阴影问题
    同时屏蔽ios和android下点击元素时出现的阴影
    DES
  • 原文地址:https://www.cnblogs.com/Alex-sk/p/6658049.html
Copyright © 2011-2022 走看看