Laravel建站03--建立前台文章列表和文章详情

经过了前面的开发环境搭建和数据库配置、git配置的准备工作以后，现在可以开始动作做点什么了。

先从简单的开始，那就先来个文章列表和详情页吧。

这期间可以学习到路由、建立model、controller还有view的写法。

建立model

php artisan make:model Article

model文件目录是（基于Laravel5.4）app。目前简单例子中并不会在model中写点什么，但是没它不行。

建立数据表

php artisan make:migration create_article_table

执行以上命令后，会在database/migrations下生成2*_create_article_table.php文件。修改它的up方法：

public function up()
{
    Schema::create('articles', function(Blueprint $table)
    {
        $table->increments('id');
        $table->string('title');
        $table->text('body')->nullable();
        $table->integer('user_id');
        $table->timestamps();
    });
}

然后执行以下命令

php artisan migrate

数据库中会出现article表了。

---

 

建立controller

php artisan make:controller ArticleController

controller目录是app/Http/ 。以上语句执行成功后，会在该目录建立ArticleControllser.php

暂时只需要列表和详情两个方法。所以只需在ArticleControllser里写两个方法就够了。

    public function index()
    {
        $articles = DB::table('articles')
                ->select('id', 'body', 'title')
                ->orderBy('id', 'desc')
                ->paginate(5);
        return view('welcome', ['articles' => $articles]);
    }

    public function show($id)
    {
        return view('article')->withArticle(Article::find($id));
    }

还要添加两个引用：

use Illuminate\Support\Facades\DB;
use App\Article;

index方法是列表，这里通引用的db来查询数据库，指定了表、列和排序字段，最简单的是用gaginate(5)就可以实现翻页了。

当数据量大时可以用 simplePaginate 来实现 上一页/下一页的简单分页，这样速度会比较快。

show方法是显示文章详情，这里用article的model的find方法来实现，所以需要引用article的model。

---

 

建立view

Laravel的view就是自己手动创建的。文件目录是resources/views/ 。文件名一定是以.blade.php结尾的。

这里建立article.blade.php当做文章详情页，用自带的首页welcome.blade.php当文章列表页。

列表写法：

@foreach ($articles as $article)
<li style="margin: 50px 0;">
    <div class="title">
        <a href="{{ url('article/'.$article->id) }}">
            <h4>{{ $article->title }}</h4>
        </a>
    </div>
    <div class="body">
        <p>{{ $article->body }}</p>
    </div>
</li>
@endforeach

分页写法：

{{ $articles->links() }}

以上就是列表的写法，虽然简陋，但是可以看出很简单就可以实现列表和翻页。

详情页写法：

<h1 style="text-align: center; margin-top: 50px;">{{ $article->title }}</h1>
<hr>
<div id="date" style="text-align: right;">
    {{ $article->updated_at }}
</div>
<div id="content" style="margin: 20px;">
    <p>
        {{ $article->body }}
    </p>
</div>

以上就是view中涉及到动态内容的写法。其他就把它当做html写就可以了。

---

 

配置路由

路由目录是routes/ 这里配置目录下的web.php，为其增加文章详情的路由。

Route::get('/', 'ArticleController@index');
Route::get('article/{id}', 'ArticleController@show');

注释掉默认的'/'的处理。这样首页就可以进入articlecontroller的index方法，而详情页就进入show方法。

---

 

至此，前台文章列表和详情的页面已经写完。个人理解重点的代码就是以上那么多。源代码可以在我的 GitHub 上找到。

欢迎交流。