mysql的单页应用框架搭建_通过 Laravel 创建一个 Vue 单页面应用（三）

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-autoload

php a