如果到目前为止您一直在关注本系列的所有部分，那么您应该升级应用程序的数据库和命令以包含链接列表。
应用程序主路由当前显示数据库中的所有链接，没有关于列表的信息。 在本节中，您将更新主前端视图以反映新架构。
使用 ORM 系统的最大优势之一是能够将数据库表中的行作为代码库中的对象进行操作。 Eloquent 提供了几种可以直接从模型中访问的方法来查询数据库和过滤结果，而无需编写 SQL 语句。 从表中获取所有行的典型 SELECT 查询，在纯 SQL 中类似于 SELECT * FROM links，可以在 Eloquent 中使用如下代码完成：
$links = Link::all();
结果集以 Eloquent Collection 的形式返回，这是一个行为类似于数组的可迭代对象，但提供了扩展功能，例如 map/reduce 方法和“水合”（提取新数据）引用的能力仅在需要时使用对象，这有助于在与数据库交互时提高整体性能。
更新索引路由
如果您检查定义了索引路由的主应用程序路由文件，您会注意到当前应用程序代码使用 Link::all() 调用查询所有链接。 在代码编辑器中打开 routes/web.php 文件：
routes/web.php
这是当前在此文件中定义 / 路由的方式：
路线/web.php
…
Route::get('/', function () {
$links = Link::all()->sortDesc();
return view('index', [
'links' => $links
]);
});
…
顾名思义，sortDesc() 方法用于按降序对结果进行排序，从最后到第一个。 这与 SQL 查询中的 ORDER BY 子句不同，因为 sortDesc 方法在代码级别工作，对 集合 重新排序。 您现在可以忽略此方法，因为我们将在本系列的下一部分中详细讨论排序结果。
您现在将编辑此代码以获取当前在数据库中注册的所有列表的集合，以便您稍后可以在前端视图中使用它来显示所有列表名称。
首先，在文件开头包含一个 use 声明，引用 LinkList 模型。 此声明用于确保您无需在每次引用该类时都键入完整的类名。
路线/web.php
<?php use Illuminate\Support\Facades\Route; use App\Models\Link; use App\Models\LinkList; ...
然后，更改主路由定义的 return 以包含一个包含所有已注册列表的 lists 变量：
路线/web.php
…
return view('index', [
'links' => $links,
'lists' => LinkList::all()
]);
…
这就是完成文件的外观。 请注意突出显示的更改：
路线/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Models\Link;
use App\Models\LinkList;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
$links = Link::all()->sortDesc();
return view('index', [
'links' => $links,
'lists' => LinkList::all()
]);
});
完成更新后不要忘记保存文件。
更新索引视图
一旦您更新了主要路线以提供有关列表的信息，您就可以编辑引用的视图文件。 在代码编辑器中打开 resources/views/index.blade.php 文件：
resources/views/index.blade.php
此文件包含应用程序在其主索引页面中使用的单个前端视图文件。 在此文件中，找到循环 $links 变量的 @foreach 刀片块。 它看起来像这样：
资源/视图/index.blade.php
...
@foreach ($links as $link)
<div class="box link">
<h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
<p>{{$link->url}}</p>
</div>
@endforeach
...
循环中的代码尚不包含有关列表的任何信息。 现在，您将在链接 URL 之后添加一个新行，其中包含保存该链接的列表的标题。 您可以使用 Bulma 中的 tag CSS 类将此信息设置为标签：
资源/视图/index.blade.php
…
<p>{{$link->url}}</p>
<p class="mt-2"><a href="#" title="{{ $list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
…
将突出显示的行添加到您的文件中。 当您在本系列的下一部分中设置单个列表页面时，稍后将调整链接。
接下来，找到具有类 subtitle 的段落，该类位于 <h1> 标记之后和包含链接的部分之前。 您将使用基于链接列表的菜单替换该区域中使用的通用文本，当您在 routes/web.php 中编辑默认路由时，您之前在 lists 变量中提供了该菜单。
将 subtitle 部分中的文本替换为突出显示的内容：
资源/视图/index.blade.php
<p class="subtitle">
@foreach ($lists as $list)<a href="#" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
</p>
列表标签的样式与以前略有不同，使用 is-light 附加 CSS 类来反转每个标签的颜色。
这就是您的 index.blade.php 文件在您完成编辑后的样子。 突出显示的行表示更改：
资源/视图/index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Awesome Links</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<style>
html {
background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.link h3 {
font-size: large;
}
div.link p {
font-size: small;
color: #718096;
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Check out my awesome links
</h1>
<p class="subtitle">
@foreach ($lists as $list)<a href="#" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
</p>
<section class="links">
@foreach ($links as $link)
<div class="box link">
<h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
<p>{{$link->url}}</p>
<p class="mt-2"><a href="#" title="{{ $list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
</div>
@endforeach
</section>
</div>
</section>
</body>
</html>
完成后保存文件。 主前端视图现在已准备好显示有关链接列表的更新信息。
如果您愿意，现在可以使用 link:new Artisan 命令来包含新链接并测试更新后的应用程序：
docker-compose exec app php artisan link:new
[secondary_label Output Link URL: > https://laravel.com/docs/8.x/ Link Description: > Laravel Docs Link List (leave blank to use default): > laravel New Link: https://laravel.com/docs/8.x/ - Laravel Docs Listed in: laravel Is this information correct? (yes/no) [no]: > yes Saved.
然后，在浏览器上重新加载应用程序页面。 如果您使用包含的 Docker Compose 设置，则该应用程序应该在以下本地地址上可用：
http://localhost:8000
您将获得与此类似的页面：
在本系列的下一部分中，您将为链接列表设置单独的页面，并学习如何使用 where() 方法对数据库进行查询，以获得更细粒度的结果。
