继续后续 Vue 教程之前,我们先将 Laravel 后端文章数据表创建出来,并填充测试数据,以方便后续教程更快捷地提供后端测试接口。
创建模型类和数据表
在 Laravel 项目中,创建基于 MySQL 数据库的 MVC 模板代码非常简单,前面视图文件我们已经提供了,这里只需要创建模型类、控制器和对应数据表迁移文件即可,我们可以通过下面这条 Artisan 命令一次性创建:
php artisan make:model -mc Post --resource
该命令会在 app/Models 目录下生成 Post 模型类,在 database/migrations 目录下生成 posts 表对应的数据库迁移文件,以及在 app/Http/Controllers 目录下生成一个资源控制器 PostController。
我们先来编辑数据表迁移文件,打开 component-practice/database/migrations/2020_10_24_140856_create_posts_table.php,在 up 方法中编写数据表字段如下:
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration{
/**
* Run the migrations.
*
* @return void
*/
public function up(){
Schema::create('posts', function (Blueprint $table){
$table->id();
$table->string('title');
$table->text('content');
$table->bigInteger('user_id')->unsigned()->index();
$table->tinyInteger('status')->unsigned()->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down(){
Schema::dropIfExists('posts');
}
}
然后运行 php artisan migrate 在数据库创建这张 posts 数据表。
编写模型工厂
创建完数据表后,就可以往里面填充测试数据了,在 Laravel 项目中,可以基于模型工厂快速填充测试数据,Laravel 8 完全重构了之前的模型工厂实现,下面学院君来简单演示下新版基于类的模型工厂的使用。
首先通过如下 Artisan 命令创建模型工厂类:
php artisan make:factory PostFactory
然后在打开新建的 database/factories/PostFactory.php 文件,在 definition 方法中定义针对 Post 模型工厂的测试数据生成策略(基于 Faker 对象伪造):
namespace Database\Factories;
use App\Models\Post;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
class PostFactory extends Factory{
/**
* The name of the factory's corresponding model.
*
* @var string
*/
protected $model = Post::class;
/**
* Define the model's default state.
*
* @return array
*/
public function definition(){
return [
'title' => $this->faker->sentence,
'content' => $this->faker->text,
'user_id' => User::factory(),
'status' => rand(0, 1)
];
}
}
这里由于 user_id 字段是与 User 模型类关联的外键,所以通过 User::factory() 映射到 User 模型工厂。当我们通过 Post 模型工厂创建文章实例的时候,也会顺便新建一个 User 对象实例并与这个 Post 对象实例关联。
定义 Post 与 User 的关联关系
接下来,打开 app/Models/Post.php,定义 Post 模型类如下:
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model{
use HasFactory;
protected $fillable = ['title', 'content'];
public function author(){
return $this->belongsTo(User::class, 'user_id');
}
}
我们通过 author 关联方法定义了 User 与 Post 的一对多关联,相应的,在 User 模型类中,也定义了一个与之相对的 post 关联方法:
public function posts(){
return $this->hasMany(Post::class, 'user_id');
}
运行模型工厂
我们可以在填充器、测试类中运行模型工厂生成测试数据,也可以通过 Tinker 运行,下面我们在 Tinker 中通过 Post 模型工厂生成 30 条文章记录:
执行上述命令成功后,可以在数据库看到对应的文章记录:
同时也会创建 30 条用户记录。至此,我们的文章测试数据就准备好了。
编写资源控制器和路由
完成测试数据的准备工作后,我们打开 app/Http/Controllers/PostController.php,编写资源控制器方法作为路由处理器,这里我们仅实现 index、all、create、store 方法,:
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class PostController extends Controller{
public function __construct(){
// 文章浏览无需认证
$this->middleware('auth')->except('index', 'all', 'show');
}
/**
* 文章列表视图
*
* @return \Illuminate\Http\Response
*/
public function index(){
return view('posts');
}
/**
* 客户端通过 Axios 异步获取所有文章数据
*
* @return \Illuminate\Http\Response
*/
public function all(){
return Post::all();
}
/**
* 渲染文章发布表单视图
*
* @return \Illuminate\Http\Response
*/
public function create(){
return view('form');
}
/**
* 新发布文章保存操作
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request){
$data = $request->validate([
'title' => 'required',
'author' => 'required',
'content' => 'required'
]);
$post = new Post();
$post->fill($data);
$post->status = 1;
$post->user_id = Auth::user()->id;
return $post->save();
}
...
最后,我们打开路由文件 routes/web.php,将之前的文章路由处理改为通过 PostController 这个资源控制器提供的方法来处理:
use App\Http\Controllers\PostController;
Route::get('posts/all', [PostController::class, 'all']);
Route::resource('posts', PostController::class);
非常简单,不多做介绍了。至此,我们就完成了所有后端接口路由、测试数据的准备工作。
在前端验证返回测试数据的接口
由于获取所有文章的接口路由改了,所以我们需要修改 resources/js/components/PostList.vue 中的接口路径为 /posts/all:
mounted() {
axios.get('/posts/all').then(resp => {
this.posts = resp.data;
}).catch(error => {
console.log('从服务端加载文章数据失败');
});
},
访问 posts 页面,对应的文章列表卡片视图渲染效果如下:
说明后端接口返回测试数据成功。
下篇教程,我们将调整发布文章表单组件,完成文章详情浏览和编辑功能,并借着这些功能穿插 Vue 组件动画和过渡效果实现的演示。