使用Vue3 & Vite + Laravel 前后端分离基础案例-猿码集

Vue3 & Vite + Laravel 前后端分离基础案例

在当前的Web开发中，前后端分离的架构越来越受到开发者的青睐。Vue3与Vite作为前端开发的重要工具，以其高效、灵活、易用的特点，吸引了众多开发者的关注。而Laravel作为后端开发框架，以其优雅的语法、丰富的功能和强大的生态系统，成为了众多开发者的首选。本文将介绍如何使用Vue3、Vite和Laravel进行前后端分离开发。

一、搭建后端基础

首先我们需要搭建Laravel的后端环境。

1. 安装 Laravel

使用Laravel提供的命令行工具可以快速创建一个Laravel项目。

composer create-project laravel/laravel project-name

2. 创建 API 路由

在Laravel中，我们可以使用路由来定义API接口。

// routes/api.php
use App\Http\Controllers\Api\PostController;
Route::get('/posts', [PostController::class, 'index']);

3. 创建控制器

在Laravel中，控制器用于处理业务逻辑并返回相应的数据。

// app/Http/Controllers/Api/PostController.php
namespace App\Http\Controllers\Api;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::all();
        return response()->json($posts);
    }
}

二、搭建前端基础

接下来我们将使用Vue3和Vite来搭建前端开发环境。

1. 创建Vue项目

我们可以使用vue-cli来创建一个Vue项目。

npm init @vitejs/app

2. 安装依赖

npm install

3. 修改配置文件

在src目录下创建一个api.js文件，用于定义API接口。

// src/api.js
import axios from 'axios';
const api = axios.create({
    baseURL: 'http://localhost/api', // 修改为实际的后端接口地址
});
export default api;

三、前后端交互

现在我们已经搭建好了前后端的基础环境，在这一部分将介绍如何实现前后端的交互。

1. 获取数据

在Vue组件中，可以使用`created`钩子函数来获取数据。

import { reactive, onMounted } from 'vue';
import api from './api';
export default {
    setup() {
        const state = reactive({
            posts: [],
        });
        onMounted(async () => {
            const response = await api.get('/posts');
            state.posts = response.data;
        });
        return {
            ...toRefs(state),
        };
    },
};

2. 显示数据

在模板中，可以使用`v-for`指令来遍历数据并显示。

四、启动项目

在完成前面的步骤后，我们可以启动前后端项目，进行开发和调试了。

首先启动后端项目：

php artisan serve

然后启动前端项目：

npm run dev

访问`http://localhost:3000`，即可看到文章列表的数据。

五、总结

本文介绍了如何使用Vue3、Vite和Laravel进行前后端分离开发。通过搭建后端基础和前端基础，以及实现前后端交互，我们可以快速构建起一个基础的前后端分离项目。这样的架构可以使前后端开发人员更加专注于各自的领域，提高开发效率和代码质量。希望本文对你有所帮助。

使用Vue3 & Vite + Laravel 前后端分离基础案例