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

leienshu 的个人博客 / 5505 / 12 / 创建于 5年前 / 更新于 5年前

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('/', '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>

看下把，我们终于可以看到每篇文章的详细内容了。