如果您一直在跟踪本系列的所有部分,您应该升级应用程序的数据库和命令,以包括链接列表。
应用程序的主路线目前显示数据库中的所有链接,没有列表信息. 在本节中,您将更新主前端视图以反映新架构。
使用 ORM 系统的最大优点之一是能够将数据库表中的行操纵为您的代码库中的对象。 Eloquent 提供了几种方法,可以直接从模型中访问,以查询数据库和过滤结果,而无需写 SQL 陈述。
1$links = Link::all();
结果集作为 Eloquent Collection返回,它是一种可重复的对象,这种对象的行为类似于数组,但提供了扩展的功能,如地图 / 减少方法和只有在需要时才能水化(将新数据拉入)引用对象,这有助于与数据库互动时的整体性能。
更新指数路线
如果你检查主应用路线文件,其中指数路线是定义的,你会注意到当前的应用程序代码使用Link::all()呼叫来查询所有链接。
1routes/web.php
以下是目前在此文件中定义的 / 路径:
1[label routes/web.php]
2…
3Route::get('/', function () {
4 $links = Link::all()->sortDesc();
5 return view('index', [
6 'links' => $links
7 ]);
8});
9…
正如它的名字所暗示的那样,使用sortDesc()方法来排序结果以下行顺序,从最后一个到第一个,这并不等同于 SQL 查询中的ORDER BY条款,因为sortDesc方法在代码层面工作,重新排序 collection。
现在,您将编辑此代码以获取当前在数据库中注册的所有列表的集合,以便在前端视图中稍后使用它来显示所有列表名称。
首先,在文件开始时包含一个使用声明,引用LinkList模型,此声明用于确保每次引用该类时不需要输入完整的类名称。
1[label routes/web.php]
2<?php
3
4use Illuminate\Support\Facades\Route;
5use App\Models\Link;
6use App\Models\LinkList;
7...
然后,更改主路径定义的返回以包含包含所有注册列表的列表变量:
1[label routes/web.php]
2…
3 return view('index', [
4 'links' => $links,
5 'lists' => LinkList::all()
6 ]);
7…
这就是完成的文件应该是这样的样子. 注意突出的变化:
1[label routes/web.php]
2<?php
3
4use Illuminate\Support\Facades\Route;
5use App\Models\Link;
6use App\Models\LinkList;
7
8/*
9|--------------------------------------------------------------------------
10| Web Routes
11|--------------------------------------------------------------------------
12|
13| Here is where you can register web routes for your application. These
14| routes are loaded by the RouteServiceProvider within a group which
15| contains the "web" middleware group. Now create something great!
16|
17*/
18
19Route::get('/', function () {
20 $links = Link::all()->sortDesc();
21 return view('index', [
22 'links' => $links,
23 'lists' => LinkList::all()
24 ]);
25});
不要忘记在完成更新后保存文件。
更新指数视图
一旦您更新了主要路线,以提供列表信息,您可以编辑所引用的视图文件。
1resources/views/index.blade.php
此文件包含应用程序在其主要索引页面中使用的单一前端视图文件. 在此文件中,查找在$links变量上循环的@foreach块。
1[label resources/views/index.blade.php]
2...
3 @foreach ($links as $link)
4 <div class="box link">
5 <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
6 <p>{{$link->url}}</p>
7 </div>
8 @endforeach
9...
循环中的代码尚未包含有关列表的任何信息. 您现在将在链接 URL 后立即添加一个新行,其中包含该链接保存的列表的标题。
1[label resources/views/index.blade.php]
2…
3<p>{{$link->url}}</p>
4<p class="mt-2"><a href="#" title="{{ $list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
5…
将突出的行添加到您的文件中. 链接将在稍后调整,当您在本系列的即将到来的部分中设置单个列表页面。
接下来,找到具有类标题的段落,该段落就在<h1>标签后,以及包含您的链接的部分之前。
用突出的内容代替 ** 字幕** 部分中的文本:
1[label resources/views/index.blade.php]
2
3 <p class="subtitle">
4 @foreach ($lists as $list)<a href="#" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
5 </p>
列表标签的风格略有不同于以前,有一个 is-light额外的 CSS 类来逆转每个标签的颜色。
这是你的index.blade.php文件在你完成编辑后应该是这样的。
1[label resources/views/index.blade.php]
2<!DOCTYPE html>
3<html>
4<head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>My Awesome Links</title>
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
9
10 <style>
11 html {
12 background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
13 -webkit-background-size: cover;
14 -moz-background-size: cover;
15 -o-background-size: cover;
16 background-size: cover;
17 }
18
19 div.link h3 {
20 font-size: large;
21 }
22
23 div.link p {
24 font-size: small;
25 color: #718096;
26 }
27 </style>
28</head>
29<body>
30<section class="section">
31 <div class="container">
32 <h1 class="title">
33 Check out my awesome links
34 </h1>
35 <p class="subtitle">
36 @foreach ($lists as $list)<a href="#" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
37 </p>
38
39 <section class="links">
40 @foreach ($links as $link)
41 <div class="box link">
42 <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
43 <p>{{$link->url}}</p>
44 <p class="mt-2"><a href="#" title="{{ $list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
45 </div>
46 @endforeach
47 </section>
48 </div>
49</section>
50</body>
51</html>
完成后保存文件. 主前端视图现在已准备好显示有关链接列表的最新信息。
如果您喜欢,您可以使用link:new Artisan 命令现在添加新链接并测试您的更新应用程序:
1docker-compose exec app php artisan link:new
1[secondary_label Output
2Link URL:
3> https://laravel.com/docs/8.x/
4
5Link Description:
6> Laravel Docs
7
8Link List (leave blank to use default):
9> laravel
10
11New Link:
12https://laravel.com/docs/8.x/ - Laravel Docs
13Listed in: laravel
14
15Is this information correct? (yes/no) [no]:
16> yes
17
18Saved.
然后,在浏览器中重新加载应用程序页面. 如果您正在使用包含的 Docker Compose 设置,该应用程序应该在以下本地地址上可用:
1http://localhost:8000
你会得到一个类似于此的页面:
在本系列的下一部分中,您将为链接列表设置单个页面,并学习如何使用where()方法对数据库进行查询,以获得更精细的结果。