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
  • 相关阅读:
    js操作cookie
    非常好的前端报表控件,值得收藏一下
    html5 跳到拨打电话功能
    C# 判断客户端是PC还是手机登录
    Oracle RAW类型使用
    多条Json数据转换为泛型数据
    将指定的对象序列化成 JSON 数据。
    ASP.NET MVC4(Razor)从客户端中检测到有潜在危险的 Request.Form 值
    http://v3.bootcss.com/getting-started/
    SQL日期比较 .
  • 原文地址:https://www.cnblogs.com/Alex-sk/p/6658049.html
Copyright © 2011-2022 走看看