Laravel Nova 入門建立一個簡單的部落格

leienshu發表於2019-01-09

 Nova 是什麼我就不多說了,反正用過以後就不會再去用別的後臺框架了。
下面我將用一系列文章來實踐實踐nova,有什麼問題歡迎大家指點交流。

入門

首先你必須到nova的官網 註冊 一個賬號。
一旦註冊好了,你必須買一個 license 來用nova的程式碼,這個我就不演示了。
開發者是 99美金,團隊是 199美金。願意支援作者的,喜歡nova的我覺得都要去買一下,最好不要從別人手裡買,因為程式要是留點後門什麼的那就得不償失了。

買好 license 後,就把nova下載到你自己的電腦上。

下一步,建立一個專案:下面兩個命令隨便用哪個
 laravel new <your-project-name> 
composer create-project laravel/laravel <your-project-name>
我習慣用第二個,還可以指定laravel的版本,更重要的是速度換成國內源超快。
建立好了專案後把nova目錄直接移動到你專案的根目錄(其他目錄也行)

專案安裝

配置你的 composer.json 來識別 Nova:

"repositories": [
    {
        "type": "path",
        "url": "./nova"
    }
],

然後把 Nova 新增到  composer.jsonrequire 如下:

"require": {
    "php": "^7.1.3",
    "fideloper/proxy": "^4.0",
    "laravel/framework": "5.6.*",
    "laravel/nova": "*"
},

執行安裝命令前先在 .env檔案裡面配置下資料庫資訊。千萬先配置好,要不然出錯了就難受了。

使用下面的命令在 terminal 裡安裝 Nova:
(用windows的朋友我就不知道怎麼弄了,自己研究)

composer update

php artisan nova:install

php artisan migrate

好了,現在我們開始訪問 /nova 路由看看它的登陸介面把。

新增第一個使用者

為了登入我也是拼了,在終端用這個命令 php artisan nova:user 建立我們的系統。

我們來建個部落格玩玩

讓我們像建其他laravel專案一樣建立這個部落格把。 用 php artisan make:model Post -a 給我們的部落格建立 Post 模型。現在讓我們來建立遷移檔案,加些欄位。

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('user_id');
        $table->text('title');
        $table->text('subtitle');
        $table->text('body');
        $table->dateTime('published_on');
        $table->timestamps();
    });
}

執行 php artisan migrate 把表加到資料庫裡面。做完後進入  Post.php 檔案配置模型關係。
注意下我們正確設定一個datetime 列。

看下 Post.php 檔案如下:

class Post extends Model
{
    protected $dates = [
      'published_on',
    ];

    public function user()
    {
        return $this->belongsTo('App\User');
    }
}

現在我們在 User 模型裡面定義反轉關係。

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    public function posts()
    {
        return $this->hasMany('App\Post');
    }
}

好了,做完這些,剩下的就是該做Nova方面的事了。

使用 Nova

使用nova的時候先看下它的 resources的資料把。你想用nova管理的每個模型在nova裡面都有一個相應的 resource
為了生成 Post 的 resource 我們執行nova:resource Post命令。現在看下你的app\Nova 目錄,是不是多了些什麼?
是吧,預設 User resource 已經在裡面了,現在多出來的是你剛才建立的 Post Resource ,你要配置的大部分和nova相關的東西都會在這裡進行管理。
好了,現在我們準備開始做一些 CRUD 的操作,做之前我們需要在我們的 Post Resource 裡面新增一些field()。這就是告訴我們的nova我們的模型是如何定義我們表的欄位的。

Nova 有 許多不同的 欄位給我們用,沒事多看看文件把。我這裡就用些簡單的吧:

public function fields(Request $request)
{
    return [
        ID::make()->sortable(),
        BelongsTo::make('User')->rules('required'),
        Text::make('Title')->rules('required')->sortable(),
        Text::make('Subtitle')->rules('required')->hideFromIndex(),
        Markdown::make('Body')->rules('required'),
        DateTime::make('Published On')->rules('required'),
    ];
}

我們通過 subtitle 這個欄位來解釋下 field 到底是幹什麼的。

Text::make('Subtitle')->rules('required')->hideFromIndex(),

Text 告訴我們要生成什麼型別的欄位。然後這個標籤就是我們傳遞給 make() 靜態方法的。標籤需要按蛇形寫法去匹配資料表裡的列。

我們也可以使用 rules()方法加一些驗證。 本例中,我們驗證 Subtitle 是一個必填欄位。

最後, 我們要調整下欄位 顯示 的區域,用hideFromIndex() 方法就行。這會阻止欄位在列表頁顯示。 當然有些欄位處理起來有點不一樣,(i.e. Markdown)。當然,大多數時候,如果你不用隱藏方法,哪裡都會顯示該欄位。

就這麼簡單,我們構建了我們部落格的整個CMS。 如果我們回到控制檯,我們就可以看到一個新的Posts 選單了(位於Resources下面)。

點選一下 Posts看看首頁都顯示個啥?

我們開始建立一篇文章。點選Create Post建立。

如果我們直接點提交,什麼都不輸入的話,你就會看到很多驗證的錯誤提示。

一旦我們正常提交,你就可以切換到文章的詳情頁看看了。

最後回到文章的首頁,再瞧瞧什麼樣,剛才建立的文章是不是在列表中了,哈哈。

就這樣,我們為部落格構建了一個CMS。

現在,雖然這樣可以解決管理方面的問題,但我們仍然需要讓我們的使用者可以檢視我們的帖子。
該怎麼辦呢?

回到 Laravel

為了完成這個部落格系統,我們進入 PostController 控制器並且設定一些檢視。本例中我只關index() 和show(),所以先把其他的方法刪掉吧,我是天蠍座,貌似也有點強迫症。

現在,我們將快速獲取正確的資料並將使用者傳送到一些新檢視。

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::orderByDesc('published_on')->get();

        return view('posts', compact('posts'));
    }

    public function show(Post $post)
    {
        return view('post', compact('post'));
    }
}

下面我們進入 web.php 檔案來定義我們的路由,如下(記得把以前的程式碼刪掉):

Route::get('/', 'PostController@index');
Route::get('/posts/{post}', 'PostController@show');

最後重新命名 welcome.blade.php 為 posts.blade.php. 把程式碼改成下面這樣的:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .m-b-md {
                display: block;
                margin-bottom: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            @foreach($posts as $post)
                <a href="/posts/{{$post->id}}" class="m-b-md">
                    <h1>{{$post->title}}</h1>
                    <h3>{{$post->subtitle}}</h3>
                    <h4>{{$post->published_on}}</h4>
                </a>
            @endforeach
        </div>
    </body>
</html>

現在讓我們釋出一些博文把,隨便輸入。

最後,複製posts.blade.php檔案並且重新命名為 post.blade.php。把裡面的程式碼改成下面的:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>{{$post->title}}</h1>
            <h3>{{$post->subtitle}}</h3>
            <h4>Written by {{$post->user->name}} on {{$post->published_on}}</h4>
        </div>
        <article>{{$post->body}}</article>
    </body>
</html>

看下把,我們終於可以看到每篇文章的詳細內容了。

總結

我不知道你是咋辦的,但是這是我用過的最快的建立一個部落格的辦法。(老外就喜歡瞎說,我都是直接用開源部落格程式)。不過,nova 真的沒得說。
好了,這次先到這,下一篇文章繼續。

求知若飢,虛心若愚!

相關文章