image
我们将通过演示在 vue-router 进入一个路由之前,如何异步加载数据来继续使用 Laravel 构建我们的 Vue SPA。
之前在 通过 Laravel 创建一个 Vue 单页应用(二) 中完成了 UsersIndex 组件异步地从 API 中加载用户。 简化了从数据库构建一个真实的后端 API,选择通过 Laravel 的 factory() 方法在 API 返回中模拟假数据。
如果你还没有读过通过 Laravel 构建 Vue 单页应用的 第一部分 和 第二部分,我建议你先去看看,再回到这里。我会在这里等你。
这篇教程,我们将把模拟的 /users 返回替换为真正的由数据库支撑的。我习惯使用 MySQL,但是你可以使用任何你想用的数据库驱动!
UsersIndex.vue 路由组件在生命周期 created() 中通过 API 加载数据。下面是第二部分结尾的 fetchData() 方法示例:
created() {
this.fetchData();
},
methods: {
fetchData() {
this.error = this.users = null;
this.loading = true;
axios
.get('/api/users')
.then(response => {
this.loading = false;
this.users = response.data;
}).catch(error => {
this.loading = false;
this.error = error.response.data.message || error.message;
});
}
}
我将演示如果通过组件的前置导航从 API 中提取数据,但是这之前我们需要让 API 输出一些真实数据。
创建一个真正的用户端点
我们将创建一个 UsersController 使用 Laravel 5.5 新的 API 资源 来返回 JSON 数据。
在创建控制器和 API 资源之前, 让我们首先设置一个数据库并且进行数据填充,以便为我们的 SPA 提供一些测试数据。
用户数据填充
我们使用 make:seeder 命令来创建一个用户填充:
php artisan make:seeder UsersTableSeeder
UsersTableSeeder 非常简单。我们使用模型工厂创建 50 个用户:
use Illuminate\Database\Seeder;
class UsersTableSeeder extends Seeder
{
public function run()
{
factory(App\User::class, 50)->create();
}
}
接下来,我们将 UsersTableSeeder 添加到 database/seeds/DatabaseSeeder.php 文件中:
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$this->call([
UsersTableSeeder::class,
]);
}
}
如果不先创建和配置数据库,我们将不能使用数据填充。
配置数据库
是时候给我们的Vue SPA Laravel应用连接一个真实的数据库了。你可以通过使用类似TablePlus 的GUI工具来使用SQLite或者MySQL。如果你是Laravel的新手,你可以查阅在数据库入门上的大量文档。
如果你有一个运行在你设备上的MySQL实例,你可以使用以下命令行相当快速创建一个新数据库(假设你本地环境没有设置密码):
mysql -u root -e"create database vue_spa;"
# 或者通过-p参数来输入密码
mysql -u root -e"create database vue_spa;" -p
当你有了数据库,在 .env文件添加配置DB_DATABASE=vue_spa。如果你遇到了问题,请遵循文档,这样可以使您的数据库更容易地工作。
一旦你配置好了数据库连接,你可以迁移你的数据表和添加填充数据。Laravel附带了一个Users表的迁移,我们使用它来填充数据:
# 确保数据库seeders自动加载
composer dump-a