如果你到目前为止一直在关注这个系列的所有部分，你应该已经升级了应用程序的数据库和命令，以包括链接的列表。
应用程序的主路径目前显示数据库中的所有链接，没有关于列表的信息。在本节中，你将更新主前端视图，以反映新的架构。
使用ORM系统的最大优势之一是能够在你的代码库中把数据库表中的行作为对象进行操作。Eloquent提供了几种方法，可以直接从模型中访问，以查询数据库和过滤结果，而不需要编写SQL语句。一个典型的SELECT ，从一个表中获取所有的行，在纯SQL中看起来像SELECT * FROM links ，可以在Eloquent中用这样的代码完成。
$links = Link::all();
复制代码结果集以Eloquent Collection的形式返回，Eloquent Collection是一个可迭代的对象，其行为类似于数组，但提供了扩展的功能，如map/reduce方法和仅在需要时才 "注入"（拉入新鲜数据）引用对象的能力，这有助于提高与数据库交互的整体性能。
更新索引路由
如果你检查主应用程序路由文件，其中定义了索引路由，你会注意到当前的应用程序代码使用Link::all() 调用查询所有链接。在你的代码编辑器中打开routes/web.php 文件。
routes/web.php
复制代码这就是目前在这个文件中定义的/ 路由的方式。
routes/web.php
…
Route::get('/', function () {
$links = Link::all()->sortDesc();
return view('index', [
'links' => $links
]);
});
…
复制代码顾名思义，sortDesc() 方法用于根据链接创建日期，从最新到最旧，以降序排列结果。你可以暂时忽略这个方法，因为我们将在本系列的下一节中讨论更多关于排序的结果。
你现在要编辑这段代码，以获得当前在数据库中注册的所有列表的集合，这样你就可以在以后的前端视图中使用它来显示所有的列表名称。
首先，在文件的开头包括一个use 的声明，引用LinkList 模型。这个声明是用来确保你在每次引用该类时不需要键入全类名称。
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Models\Link;
use App\Models\LinkList;
...
复制代码然后，改变主路由定义的return ，包括一个包含所有注册列表的lists 变量。
routes/web.php
…
return view('index', [
'links' => $links,
'lists' => LinkList::all()
]);
…
复制代码这就是完成的文件应该有的样子。注意高亮显示的变化。
routes/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
复制代码这个文件包含应用程序在其主索引页中使用的单一前端视图文件。在这个文件中，找到@foreach 刀片块，它在$links 变量上循环。它看起来像这样。
resources/views/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类，将这一信息作为一个标签的样式。
resources/views/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 变量中提供了这些文本。
用突出显示的内容替换副标题部分的文本。
resources/views/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 文件的样子。突出显示的线条表示所做的修改。
resources/views/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/[email protected]/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() 方法对数据库进行查询，以获得更细化的结果。
本教程是正在进行的关于Laravel Eloquent的每周系列的一部分。如果你想在新的教程发布时得到通知，你可以订阅Laravel标签。