Laravel博客开发｜项目列表

在前面已经创建了项目数据表&＃xff0c;并且为项目表填充了假数据&＃xff0c;现在来实现项目列表页&＃xff0c;将项目数据展示出来。

添加控制器

创建一个项目控制器&＃xff1a;

php artisan make:controller ProjectsController


打开文件&＃xff0c;修改为如下内容&＃xff1a;

namespace App\Http\Controllers;use App\Models\Project;
use Illuminate\Http\Request;class ProjectsController extends Controller
{public function index(){$projects &＃61; Project::orderBy(&＃39;created_at&＃39;, &＃39;desc&＃39;)->paginate(5);return view(&＃39;projects.index&＃39;,compact(&＃39;projects&＃39;));}
}


添加视图

在 resources/views目录下添加一个projects目录&＃xff1a;

mkdir resources/views/projects


然后在 projects目录下添加 index.blade.php文件&＃xff1a;

touch resources/views/projects/index.blade.php


打开文件&＃xff0c;输入如下内容&＃xff1a;
resources/views/projects/index.blade.php。

&＃64;extends(&＃39;layouts.app&＃39;)
&＃64;section(&＃39;title&＃39;)项目
&＃64;stop
&＃64;section(&＃39;content&＃39;)<section class&＃61;"hero is-link"><div class&＃61;"hero-body"><div class&＃61;"has-text-centered mt-2"><h1 class&＃61;"title is-4">业余项目</h1><p class&＃61;"subtitle is-6">业余时间通过构建项目来提升自己</p><a href&＃61;"" class&＃61;"button is-outlined is-info">联系</a></div></div></section><section class&＃61;"section"><div class&＃61;"container is-max-widescreen"><div class&＃61;"columns"><div class&＃61;"column is-9">&＃64;foreach($projects as $key&＃61;>$value)<div class&＃61;"box is-flex is-justify-content-space-between is-align-items-center"><div class&＃61;"is-flex"><div class&＃61;"cover"><figure class&＃61;"image is-128x128"><img class&＃61;"is-rounded-2" src&＃61;"%7B%7Basset(%24value->cover)%7D%7D" alt&＃61;""></figure></div><div class&＃61;"ml-2"><h2 class&＃61;"is-size-4"><a href&＃61;"">{{$value->name}}</a></h2><p class&＃61;"is-size-7 has-text-grey-light">开始时间 {{$value->created_at->toDateString()}}</p><p class&＃61;"is-size-6 has-text-grey">{{$value->description}}</p></div></div></div>&＃64;endforeach<div class&＃61;"box">{{$projects->render()}}</div></div><div class&＃61;"column is-3"><div class&＃61;"box"><p class&＃61;"has-text-centered">站长&＃xff1a;<a href&＃61;"%7B%7Burl(&＃39;/contact&＃39;)%7D%7D" target&＃61;"_blank">SevDot</a></p><hr><div class&＃61;"is-flex is-justify-content-center"><figure class&＃61;"image is-96x96"><img class&＃61;"is-rounded" style&＃61;"" src&＃61;"%7B%7Basset(&＃39;images/sevdot_avatar.jpg&＃39;)%7D%7D" alt&＃61;"SevDot 的头像"></figure></div><hr><div class&＃61;"has-text-centered"><a href&＃61;"" class&＃61;"button is-light"><span class&＃61;"icon"><i class&＃61;"fa fa-github"></i></span></a><a href&＃61;"" class&＃61;"button is-info"><span class&＃61;"icon"><i class&＃61;"fa fa-weibo"></i></span></a><a href&＃61;"" class&＃61;"button is-success"><span class&＃61;"icon"><i class&＃61;"fa fa-weixin"></i></span></a></div></div><div class&＃61;"box"><h2 class&＃61;"title is-5 has-text-centered has-text-success">微信公众号</h2><hr><img src&＃61;"%7B%7Basset(&＃39;images/sevdots.png&＃39;)%7D%7D" alt&＃61;""></div></div></div></div></section>
&＃64;stop


添加路由

使用 Laravel 提供的 resource 方法来定义项目资源路由。

routes/web.php

use App\Http\Controllers\ArticlesController;
use App\Http\Controllers\PagesController;
use Illuminate\Support\Facades\Route;Route::get(&＃39;/&＃39;, [PagesController::class, &＃39;root&＃39;])->name(&＃39;root&＃39;);
Route::get(&＃39;/about&＃39;, [PagesController::class, &＃39;about&＃39;])->name(&＃39;about&＃39;);
Route::get(&＃39;/contact&＃39;, [PagesController::class, &＃39;contact&＃39;])->name(&＃39;contact&＃39;);
Route::get(&＃39;/blog&＃39;, [ArticlesController::class, &＃39;index&＃39;])->name(&＃39;articles&＃39;);
Route::get(&＃39;/blog/{article}&＃39;, [ArticlesController::class, &＃39;show&＃39;])->name(&＃39;article.show&＃39;);Route::resource(&＃39;projects&＃39;, ProjectsController::class);


新增的 resource 方法将遵从 RESTful 架构为项目资源生成路由。该方法接收两个参数&＃xff0c;第一个参数为资源名称&＃xff0c;第二个参数为控制器名称。

Route::resource(&＃39;projects&＃39;, ProjectsController::class);


上面代码将等同于&＃xff1a;

Route::get(&＃39;/projects&＃39;, [ProjectsController::class, &＃39;index&＃39;])->name(&＃39;projects.index&＃39;);
Route::get(&＃39;/projects/create&＃39;, [ProjectsController::class, &＃39;create&＃39;])->name(&＃39;projects.create&＃39;);
Route::get(&＃39;/projects/{user}&＃39;, [ProjectsController::class, &＃39;show&＃39;])->name(&＃39;projects.show&＃39;);
Route::post(&＃39;/projects&＃39;, [ProjectsController::class, &＃39;store&＃39;])->name(&＃39;projects.store&＃39;);
Route::get(&＃39;/projects/{user}/edit&＃39;, [ProjectsController::class, &＃39;store&＃39;])->name(&＃39;projects.edit&＃39;);
Route::patch(&＃39;/projects/{user}&＃39;, [ProjectsController::class, &＃39;update&＃39;])->name(&＃39;projects.update&＃39;);
Route::delete(&＃39;/users/{user}&＃39;, [ProjectsController::class, &＃39;destroy&＃39;])->name(&＃39;projects.destroy&＃39;);


展示

使用浏览器访问 [http://blog.test/projects](http://blog.test/projects)可看到如下所示&＃xff1a;