Laravel Nova 入门创建一个简单的博客(一)

 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.json的require å¦‚下：

"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('/', '[email protected]');
Route::get('/posts/{post}', '[email protected]');

最后重命名 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 真的没得说。
好了，这次先到这，下一篇文章继续。