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
  • 相关阅读:
    iOS
    iOS
    iOS
    CS页面-Asp.net+Spring.Net.Framework--SNF快速开发平台3.0
    SNF快速开发平台3.0之-界面个性化配置+10种皮肤+7种菜单-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout
    SNF快速开发平台3.0之BS页面展示和九大优点-部分页面显示效果-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout
    MVC通用控件库展示-MVC4.0+WebAPI+EasyUI+Knockout--SNF快速开发平台3.0
    已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭。
    转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
    转:zTree树控件入门之checkbox:如何动态设置节点的checkbox选择框启用与禁用状态(chkDisabled)
  • 原文地址:https://www.cnblogs.com/Alex-sk/p/6658049.html
Copyright © 2011-2022 走看看