在本系列的上一部分中,您更新了演示应用程序,以便将链接组织成数据库中的列表. 主应用程序视图现在显示了当前在数据库中注册的所有列表的菜单,但菜单还没有活跃的链接。
在本节中,您将在应用程序中创建一个新的路线,以显示链接 按列表. 您还将学习如何使用 Eloquent 中的 where()
方法,以便在数据库查询中更好地过滤结果。
要开始,请在代码编辑器中打开routes/web.php
文件:
1routes/web.php
文件目前包含以下内容:
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});
Route::get
呼叫定义了应用程序输入页面的 HTTP GET 路线,当对应用程序提出/
请求时,将触发此回调函数以返回索引视图。
您现在将创建第二条路线以显示基于列表 slug的链接列表。 slug 是一个通常用于构建用户友好的 URL 的短字符串。新路线必须查询数据库的link_lists
表,该列表具有所提供的 URL 参数作为其slug
字段。
下面的代码将使用一个动态参数(由{slug}定义)创建一个GET路线,名为「链接列表」。
- 使用‘LinkList’ Eloquent 模型以‘where()’ 方法查询数据库,使用 slug 作为搜索标准。‘first()’ 方法将确保只返回一个对象。
- 如果无法找到指定 slug 的列表,则使用‘abort’ 方法投出一个 404 错误。
提供$lists
参数来构建列表菜单,并提供$links
参数来与当前版本的索引视图兼容,因为它通过具有该名称的变量循环。
包括下面的代码在你的 routes/web.php
文件的底部:
1[label routes/web.php]
2Route::get('/{slug}', function ($slug) {
3 $list = LinkList::where('slug', $slug)->first();
4 if (!$list) {
5 abort(404);
6 }
7
8 return view('index', [
9 'list' => $list,
10 'links' => $list->links,
11 'lists' => LinkList::all()
12 ]);
13})->name('link-list');
完成后保存文件。
<$>[注]
虽然有 缩略来实现引用Eloquent模型的路径,但在本教程中,我们专注于使用where()
方法来学习。
要测试您的新路线是否按预期运行,您可以进入浏览器并访问默认列表页面的链接. 如果您已遵循本系列的所有步骤,并且您的数据库没有空,默认列表页面应该在以下本地地址上可用:
1http://localhost:8000/default
您将看到与之前相同的页面,但链接现在仅限于 默认列表中的链接. 如果您有额外的列表,您可以访问他们的页面,将 URL 中的突出默认
线索替换为您的列表线索。
随着新路线的配置,您现在可以使用路线
Blade 方法从您的模板视图动态地生成链接列表的 URL。
在您的代码编辑器中打开resources/views/index.blade.php
文件:
1resources/views/index.blade.php
此文件有 2 行需要更新. 首先,找到包含您在本系列的其他部分中创建的菜单的 subtitle 段落。
1[label resources/views/index.blade.php]
2 <p class="subtitle">
3 @foreach ($lists as $list)<a href="#" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
4 </p>
您将更新href
超链接以包含列表页的当前 URL,使用路线
面板方法. 此方法将路线名称作为第一个参数,并将 URL 参数提供为方法调用的额外参数。
1[label resources/views/index.blade.php]
2 <p class="subtitle">
3 @foreach ($lists as $list)<a href="{{ route('link-list', $list->slug) }}" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
4 </p>
接下来,在内部找到 links 部分和forach
循环。您需要包括另一个呼叫到route()
方法,在那里每个链接的列表名称被打印。
1[label resources/views/index.blade.php]
2 <p>{{$link->url}}</p>
3 <p class="mt-2"><a href="{{ route('link-list', $link->link_list->slug) }}" title="{{ $link->link_list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
接下来,当提供额外信息时,您可能需要包含有关列表的信息,您可以检查是否存在$list
变量,并在可用时仅打印列表标题。
用以下突出代码取代您的标题
部分:
1<h1 class="title">
2 @if (isset($list))
3 {{ $list->title }}
4 @else
5 Check out my awesome links
6 @endif
7 </h1>
这就是‘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 @if (isset($list))
34 {{ $list->title }}
35 @else
36 Check out my awesome links
37 @endif
38 </h1>
39 <p class="subtitle">
40 @foreach ($lists as $list)<a href="{{ route('link-list', $list->slug) }}" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
41 </p>
42
43 <section class="links">
44 @foreach ($links as $link)
45 <div class="box link">
46 <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
47 <p>{{$link->url}}</p>
48 <p class="mt-2"><a href="{{ route('link-list', $link->link_list->slug) }}" title="{{ $link->link_list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
49 </div>
50 @endforeach
51 </section>
52 </div>
53</section>
54</body>
55</html>
保存文件,当你完成更新其内容。
您现在可以通过浏览器访问应用程序的主页. 如果您正在使用包含的 Docker Compose 设置,该应用程序应该通过以下本地地址可用:
1http://localhost:8000
你会得到一个类似于下面的屏幕截图的页面:
在本系列的下一部分中,您将学习如何在Laravel Eloquent中排序查询结果。