Laravel 5.4 入門系列 3. 任務列表顯示

心智極客發表於2019-02-16
Laravel

熟悉了路由與檢視的基本操作之後，我們來讓檢視顯示一個任務列表吧。主要知識點：

  • 資料遷移

  • 查詢構造器

資料庫

建立資料庫

首先建立一個資料庫:

$ mysql -uroot -p
mysql> create database laratasks;

資料庫配置

Laravel 的配置檔案儲存在 config 目錄下面，例如 config/database.php 儲存了資料庫的配置資訊：

`mysql` => [
    `driver`    => `mysql`,
    `host`      => env(`DB_HOST`, `localhost`),
    `database`  => env(`DB_DATABASE`, `forge`),
    `username`  => env(`DB_USERNAME`, `forge`),
    `password`  => env(`DB_PASSWORD`, ``),
    ...
],

可以看到，有幾個變數都是先通過 env 方法獲取的，取不到的時候再使用自定義的預設值。因此通常在 .env 目錄下面根據不同的開發人員的需求來進行配置：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laratasks
DB_USERNAME=root
DB_PASSWORD=

執行遷移

配置完資料庫之後，自然想到的是如何建立和操作表？Laravel 是通過遷移來實現對錶的各項操作的。而 Laravel 預設就自帶了兩個遷移。我們可以通過執行遷移來判斷資料庫是否連上：

$ php artisan migrate

如果對該命令不熟悉，可以使用如下命令檢視具體說明：

$ php artisan help migrate

如果使用的 MySQL 版本低於 5.7，可能會報錯：

Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

這是因為，Laravel 5.4 採用的資料庫編碼為 utf8mb4，該編碼可以支援 emojis 表情的儲存。要解決該問題，只需要增加下面的程式碼：

// /app/Providers/AppServiceProvider.php
use IlluminateSupportFacadesSchema;

public function boot()
{
    Schema::defaultStringLength(191);
}

解決了該問題之後，我們需要手動先刪除資料庫中的表再重新執行遷移:

$ php artisan migrate

若遷移執行成功，資料庫預設會建立三張表:

mysql> use laratasks;
Database changed
mysql> show tables;
+---------------------+
| Tables_in_laratasks |
+---------------------+
| migrations          |
| password_resets     |
| users               |
+---------------------+
3 rows in set (0.00 sec)

其中 migrations 是用來記錄遷移資訊的，其餘兩張則是自帶的兩個遷移任務生成的表。

建立遷移

現在，我們就可以建立一個用來生成任務表的遷移了。首先是建立遷移：

$ php artisan make:migration create_tasks_table --create=tasks
Created Migration: 2017_04_10_175246_create_tasks_table

--create=tasks 代表了要建立資料表 tasks，這樣遷移檔案會預先定義好一些內容。開啟遷移表，新增幾個欄位:

// /database/migrations/日期_create_tasks_table.php
 public function up()
    {
        Schema::create(`tasks`, function (Blueprint $table) {
            $table->increments(`id`);
            $table->text(`name`);
            $table->timestamps();
        });
    }

當我們執行遷移時，就會呼叫 up 方法，我們來執行下剛才建立的遷移：

$ php artisan migrate
Migrating: 2017_04_10_175246_create_tasks_table
Migrated:  2017_04_10_175246_create_tasks_table

查詢構造器（DB）

現在，資料庫就多了 tasks 表格了，我們通過 tinker 來新增資料吧:

$ php artisan tinker
Psy Shell v0.8.3 (PHP 5.6.22 — cli) by Justin Hileman

首先，使用 DB 插入幾條資料：

>>>> DB::insert(`insert into  tasks (id, name, created_at, updated_at) values (?, ?,?,?)`, [1, `作業`,CarbonCarbon::now(),CarbonCarbon::now()]);
>>> DB::insert(`insert into  tasks (id, name, created_at, updated_at) values (?, ?,?,?)`, [2, `購物`,CarbonCarbon::now(),CarbonCarbon::now()]);
>>> DB::insert(`insert into  tasks (id, name, created_at, updated_at) values (?, ?,?,?)`, [3, `運動`,CarbonCarbon::now(),CarbonCarbon::now()]);

再練習下 DB 的其他功能：

>>> DB::table(`tasks`)->get();   # 獲取所有表資料
>>> DB::table(`tasks`)->get()->toArray();  # 將獲取的資料轉化為資料
>>> DB::table(`tasks`)->first();  # 獲取第一條資料
>>> DB::table(`tasks`)->where(`name`,`購物`)->first(); # 指定條件
>>> DB::table(`tasks`)->pluck(`name`); # 獲取姓名列表

顯示任務列表

接下來，我們就可以讓網站顯示任務列表了，例如:

Route::get(`tasks`, function() {
    return $tasks = DB::table(`tasks`)->latest()->get();
});

訪問網站的 /tasks 路徑，就可以看到返回了任務列表的 json 形式。不過我們還是用檢視展現吧:

// /routes/web.php
Route::get(`tasks`, function() {
    $tasks = DB::table(`tasks`)->latest()->get();
    return view(`tasks.index`,compact(`tasks`));
});

tasks.index 其實就相當於 tasks/index，接下來建立檢視:

// /resources/views/tasks/index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    {{ $tasks }}
</body>
</html>

訪問 /tasks，直接返回了一堆任務列表，介面顯示很不友好，我們可以用 PHP 的 foreach 迴圈來友好的顯示任務列表:

// /resources/views/tasks/index.blade.php
<h1>任務列表</h1>
<ul>
    <?php foreach($tasks as $task): ?>
        <li><?php echo $task->name ?></li>
    <?php endforeach; ?>
</ul>

同樣，Laravel 的 Blade 模板提供了更為簡潔的語法：

// /resources/views/tasks/index.blade.php
<h1>任務列表</h1>
<ul>
    @foreach ($tasks as $task)
        <li>{{ $task->name }}</li>
    @endforeach
</ul>

顯示具體任務

接下來是顯示具體的某個任務。首先是路由：

// /routes/web.php
Route::get(`tasks/{task}`, function($id) {
    $task = DB::table(`tasks`)->find($id);
    return view(`tasks/show`,compact(`task`));
});

{task} 相當於佔位符，比如使用者訪問 tasks/1，函式接收的 $id 就為 1。

// /resources/views/tasks/show.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    {{ $task->name }}
</body>
</html>

最後，我們建立超連結讓任務列表可跳轉到具體任務吧：

<h1>任務列表</h1>
<ul>
    @foreach ($tasks as $task)
        <li>
            <a href="/tasks/{{ $task->id }}">{{ $task->name }}</a>          
        </li>
    @endforeach
</ul>

超連結我們也可以通過 url 函式生成：

<a href="{{ url("tasks",[$task->id]) }}">{{ $task->name }}</a>

參考資料：

相關文章