PHP 与 Vue.js 结合的前后端分离架构

PHP 与 Vue.js 结合是构建现代 Web 应用的流行技术栈,通常采用 前后端分离架构。以下是关键要点和推荐实现方案:


一、技术栈组合

角色 技术选项
后端 (PHP) Laravel (推荐)、Symfony、CodeIgniter
前端 (Vue) Vue 2/3、Vue Router、Pinia/Vuex、Vite
通信协议 RESTful API 或 GraphQL
构建工具 Vite (推荐) 或 Webpack

二、两种整合方式

1. 完全分离(主流推荐)
  • 后端 PHP :仅提供 API 接口(如 Laravel 的 api.php 路由)。

  • 前端 Vue:独立 SPA 应用,通过 AJAX 调用 API。

  • 优势:前后端独立开发部署,易扩展(如移动端复用 API)。

  • 部署

    • PHP 部署在 api.domain.com

    • Vue 部署在静态服务器(如 Nginx / CDN)

2. 混合渲染(渐进式整合)
  • 场景:旧 PHP 项目逐步引入 Vue。

  • 方式

    • PHP 输出基础 HTML 模板(如 Laravel Blade)。

    • 在指定 DOM 节点挂载 Vue 组件:

      php

      复制代码
      <!-- Blade 模板 -->
      <div id="app"><!-- Vue 将接管这里 --></div>
      <script src="{{ asset('js/vue-app.js') }}"></script>

三、工作流程示例(Laravel + Vue 3)

后端准备(Laravel API)
  1. 创建 API 路由

    php

    复制代码
    // routes/api.php
    use App\Http\Controllers\UserController;
    Route::get('/users', [UserController::class, 'index']);
  2. 控制器返回 JSON

    php

    复制代码
    // app/Http/Controllers/UserController.php
    public function index() {
        return response()->json(['users' => User::all()]);
    }
前端开发(Vue 3)
  1. 创建 Vue 项目(独立目录):

    bash

    复制代码
    npm create vue@latest
  2. 调用 API(使用 Axios):

    vue

    复制代码
    <!-- src/views/UserList.vue -->
    <script setup>
    import { ref } from 'vue';
    import axios from 'axios';
    
    const users = ref([]);
    axios.get('https://api.yoursite.com/users')
      .then(response => users.value = response.data.users);
    </script>
    
    <template>
      <ul>
        <li v-for="user in users" :key="user.id">{{ user.name }}</li>
      </ul>
    </template>

四、关键配置项

跨域问题(CORS)
  • Laravel 解决方案 :安装 fruitcake/laravel-cors 包并配置:

    php

    复制代码
    // config/cors.php
    'paths' => ['api/*'],
    'allowed_origins' => ['https://your-vue-domain.com'],
认证机制
  • 推荐:JWT(JSON Web Tokens)

    • PHP 库:php-open-source-saver/jwt-auth

    • Vue 端:Axios 拦截器添加 Authorization


五、优化建议

  1. API 文档 :使用 Swagger(Laravel 包:darkaonline/l5-swagger)。

  2. 状态管理:复杂应用用 Pinia 替代 Vuex。

  3. SSR 需求:用 Nuxt.js 替代 Vue(PHP 仍提供 API)。

  4. 部署加速

    • Vue:npm run build 生成静态文件托管至 CDN。

    • PHP:启用 OpCache,使用队列异步处理任务。


六、模板项目推荐

  1. Laravel Vue SPA(一体化配置)

  2. Vite + Vue + PHP Starter


七、常见问题

  • SEO 问题:Vue SPA 需配合 Prerender 或迁移至 Nuxt.js。

  • CSRF 保护:混合渲染时在 Blade 模板中添加:

    html

    复制代码
    <meta name="csrf-token" content="{{ csrf_token() }}">

    Vue 中通过 Axios 读取:

    javascript

    复制代码
    axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

通过这种架构,PHP 专注于业务逻辑与数据安全,Vue 负责交互体验,两者通过清晰 API 边界协作,兼顾开发效率与应用性能。

相关推荐
小小小糖果人4 小时前
Linux云计算基础篇(24)-PXE批量安装和Kickstart工具
linux·运维·php
非凡的世界5 小时前
PHP 异步IO扩展包 AsyncIO v2.0.0 发布
php·异步·1024程序员节
7ayl6 小时前
Vue3 - Reactivity的核心流程
前端·vue.js
Z_B_L6 小时前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
十一吖i12 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
菜鸟una17 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
桃子不吃李子17 小时前
nextTick的使用
前端·javascript·vue.js
小二·19 小时前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts
前端 贾公子19 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js