用 Laravel、Vue 和 NPM 运行手表

在本文中，我们将介绍如何使用 Laravel、Vue 和 NPM 运行一个简单的手表应用程序。我们将使用 Laravel 提供 RESTful API，Vue 用于构建前端，NPM 用于管理我们的依赖项。

步骤 1：创建 Laravel 项目

首先，我们需要在本地计算机上安装 Laravel 开发环境。此处我们假设您已经完成了该任务。接下来，请按照以下步骤创建一个新项目：

laravel new watch
cd watch
php artisan make:model Watch -mc

这将创建一个名为“watch”的 Laravel 项目，并在项目中创建一个“Watch”模型。我们还使用该命令创建了控制器和数据迁移。

步骤 2：设置数据库

接下来我们需要在 Laravel 中设置数据库。我们将使用 MySQL 作为我们的数据库。请编辑 .env 文件，找到以下行并修改为：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

然后运行以下命令发布数据迁移：

php artisan migrate

步骤 3：创建 API

创建 API 控制器，用于向 Vue 提供数据源：

php artisan make:controller Api/WatchController

打开 WatchController.php 文件并添加以下行：

use App\Models\Watch;
use Illuminate\Http\Request;

public function index() {
    $watches = Watch::all();
    return response()->json(['watches' => $watches]);
}

这将提供一个 API 端点，在 /api/watches 上请求将返回一个包含所有手表的 JSON 对象。

然后再次运行以下命令，创建手表数据：

php artisan tinker
factory(App\Models\Watch::class, 5)->create();

这将使用 Laravel 的內置工厂模式创建 5 个假手表数据。

步骤 4：设置 Vue

接下来是我们的前端，我们将使用 Vue 构建它。首先，需要安装 Node.js，然后使用 npm 或 yarn 安装 vue-cli：

npm install -g vue-cli

使用 vue-cli 创建一个新项目

vue init webpack watch-app
cd watch-app
npm install

创建一个新的 Vue 组件 src/components/Watch.vue，添加以下内容：

<template>
<div>
    <h1>手表列表</h1>
    <table>
        <thead>
            <th>ID</th>
            <th>品牌</th>
            <th>型号</th>
            <th>价格</th>
        </thead>
        <tbody>
            <tr v-for="watch in watches" :key="watch.id">
                <td>{{watch.id}}</td>
                <td>{{watch.brand}}</td>
                <td>{{watch.model}}</td>
                <td>{{watch.price}}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
export default {
    name: 'Watch',
    data() {
        return {
            watches: []
        }
    },
    mounted() {
        axios.get('/api/watches').then(response => {
            this.watches = response.data.watches;
        });
    }
}
</script>

这将创建一个简单的表格，其中每行显示一个手表的属性。

步骤 5：运行应用程序

最后，我们需要启动 Web 服务器和 Vue 开发服务器，以便可以在浏览器中查看应用程序。打开两个控制台窗口。在一个窗口中运行 Laravel Web 服务器：

php artisan serve

在另一个窗口中运行 Vue 开发服务器：

npm run dev

现在，您可以在浏览器中导航到 “http://localhost:8080” 以查看手表列表。

结论

现在，我们已经成功地使用 Laravel、Vue 和 NPM 运行了一个手表应用程序。Laravel 提供了一个用于数据存储和 RESTful API 的强大框架，Vue 允许我们快速生成美观且功能强大的应用程序。NPM 管理所有依赖项并确保所有内容都是最新的。这是用于构建周和灵活的 Web 应用程序时，值得尝试的优秀技术组合。