在 Laravel Sail 環境下完成 L01 教程第 5 遍的感想(已部署阿里雲,歡迎來體驗)

Alcohol發表於2021-05-22

4 月初購買了《L01 Laravel 教程 - Web 開發實戰入門》(下文簡稱:L01),到今天為止,斷斷續續,做了 5 遍。
一開始練習時,搭建環境就花了 3 天,才成功讓 Laravel 在電腦上跑起來。
詳情可以參考:《歷時 3 天,成功搭建 Laravel Sail 環境》
到現在,可以說對 Laravel 開發有一個基本的瞭解,但是距離課程提到過的挑戰: 嘗試使用文字將專案的功能寫個列表,然後在不看教程的情況下實現整個專案的功能 ,還有一段比較比較遠的距離。
所以,第 5 遍並不是終點,還要繼續做,繼續往下走,直到對每個功能的實現邏輯都心中有數。
然後,再來分享一下,我對這 L01 專案的魔改部分:關於頭像。
L01 專案是用 Gravatar 頭像作為解決方案的,但是這個網站在國外,被牆擋住了,導致在練習的時候,頭像一直無法顯示,有些同學還以為自己哪裡做錯了,其實,你並沒有做錯什麼,只是 Gravatar 讀取不到而已。
不過, http://cn.gravatar.org/avatar 這個連結是可以用,也能讀取到頭像的,可惜, 我不喜歡這個頭像
所以,這都第五次練習了,我對這個專案,也算有一定了解了,不如來魔改一下吧。
一開始,我用隨機產生的數字來代表指定對應頭像,結果發現一個弊端:
每次重新整理網頁,頭像都會變化,甚至同一個使用者 id 也會產生不同的頭像。
這多不好。
那不如,把指定頭像的資料,存到資料庫裡面吧?
思路瞬間開闊起來,以下是我的實現步驟:
準備工作:

在 weibo\public 目錄下,建立 gravatar 資料夾

蒐集一些你喜歡的頭像,放到 gravatar 資料夾,頭像以數字命名,如下所示:

接下來,生成一個 遷移檔案 ,為使用者表新增 gravatar_id 欄位。

這是在 Laravel Sail 環境下的操作,Sail 命令已經經過簡單配置,關於配置部分請看文末參考資料。

sail artisan make:migration add_gravatar_id_to_users_table --table=users

最終,我編寫遷移檔案如下:
檔案位置:

database/migrations/[timestamp]_add_gravatar_id_to_users_table.php

檔案程式碼:

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddGravatarIdToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('gravatar_id')->default('1');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('gravatar_id');
        });
    }
}

編寫完成之後,進行資料庫遷移,執行遷移檔案:

sail artisan migrate

執行結果如下所示:

接著,更改使用者工廠檔案,從指定陣列裡面隨機獲取元素,作為 gravatar_id :
檔案位置:

database/factorise/UserFactory.php

檔案程式碼:

<?php
namespace Database\Factories;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
class UserFactory extends Factory
{
    protected $model = User::class;
    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'email' => $this->faker->unique()->safeEmail,
            'email_verified_at' => now(),
            'activated' => true,
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
            'gravatar_id'    => $this->faker->randomElement(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']),
        ];
    }
}

其實,我只是新增了這一行:

'gravatar_id'    => $this->faker->randomElement(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']),

這個陣列的寫法非常不優雅,我知道,請大家不要罵得太厲害

然後,對資料庫進行重置,填充:

sail artisan migrate:refresh --seed

隨後,再到使用者模型裡,修改頭像方法的邏輯:
檔案位置:

app/Models/User.php

修改 L01專案 生成頭像的方法:

<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
  .
  .
  .
class User extends Authenticatable
{
    .
    .
    .
    public function gravatar($size = 140)
    {
        $gravatar = $this->attributes['gravatar_id'];
        return "/gravatar/$gravatar.jpg";
    }
    .
    .
    .
}

至此,那我們生成的使用者就都可以隨機到頭像了。
效果如下:

那麼,新註冊的使用者怎麼辦呢 ?雖然 gravatar_id 欄位的預設值被設定為 1 ,但是新註冊的使用者,不能隨機到其他的頭像的話,上面這個半天搞出來的功能豈不是很雞肋?
在我一番百度+查詢社群內的 Laravel 中文文件之後,想到了一個辦法,利用輔助函式 Arr::random 從資料中隨即返回一個值。
以下是具體實現程式碼,我選擇在使用者啟用的同時,為他隨機一個頭像:

<?php
namespace App\Http\Controllers;
use App\Models\User;
.
.
.
use Illuminate\Support\Arr; // 注意引入 Arr
class UsersController extends Controller
{
    .
    .
    .
    public function confirmEmail($token)
    {
        $user = User::where('activation_token', $token)->firstOrFail();
        $user->activated = true;
        $user->activation_token = null;
        $array = range(1, 10);
        $user->gravatar_id = Arr::random($array);
        $user->save();
        Auth::login($user);
        session()->flash('success', '恭喜你,啟用成功 2021年5月20日 14:33:07');
        return redirect()->route('users.show', [$user]);
    }
    .
    .
    .
}

至此,我設想的功能已經完成。
以下是新註冊使用者的效果:

不行,我在最後一定要放一張隨機到結衣頭像的使用者:

以上,就是做完 5 次專案的感想,這個專案還沒摸透,還需要繼續練習。
如果社群的大家們有更好的方法,也可以提醒我,另外,很想問一下,學到什麼樣的程度能達到找工作的要求呢
這是我目前最想弄清楚的問題。
參考資料:
關於使用 Laravel Sail 命令

2021年5月23日更新

折騰了一個早上,總算是把 L01 專案部署到阿里雲上了,算是交一次作業吧,因為沒有開啟 QQ 郵箱的功能,啟用郵件傳送暫時無法實現,在這裡給大家提供一個體驗賬號(隨機到了美女頭像哦):

體驗網址:hongliblog.cn/
體驗賬號
郵箱:Blcohol@example.com
密碼:Blcohol@example.com
大家可以發條留言,證明來過,但是不要改密碼,,也不要幹壞事哦
預計 7 天后(也就是2021年5月30日)關停伺服器~

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章