Implementing Frontend‑Backend Separation with PHP (ThinkPHP6) and Vue.js

In modern web development, separating the frontend and backend has become a common practice, allowing independent development, deployment, and maintenance. This guide shows how to achieve this separation using PHP (ThinkPHP6) for the backend API and Vue.js for the frontend UI.

1. PHP Backend API with ThinkPHP6

ThinkPHP6 provides rapid API development. An example controller

<?php
namespace app\api\controller;
use think\facade\Db;
use think\facade\Request;
class UserController {
    // Get user information
    public function getUserInfo($id) {
        $user = Db::name('user')->find($id);
        return json($user);
    }
    // Create a new user
    public function createUser() {
        $data = Request::param();
        Db::name('user')->insert($data);
        return json(['message' => 'User created successfully']);
    }
}

implements two endpoints: one to retrieve a user by ID and another to create a user from POST data.

2. Vue.js Frontend Component

A Vue component can request the API and display the data. Example code:

<template>
  <div>
    <h1>User Info</h1>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <div>Name: {{ user.name }}</div>
      <div>Email: {{ user.email }}</div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return { user: {}, loading: true };
  },
  mounted() {
    axios.get('/api/userInfo/' + this.$route.params.id)
      .then(response => {
        this.user = response.data;
        this.loading = false;
      })
      .catch(error => console.log(error));
  }
};
</script>

This component fetches user information from the backend when mounted and displays it, showing a loading state until the data arrives.

3. Frontend‑Backend Integration

The Vue app uses axios to call the API endpoints. Routing is handled with vue-router:

import { createRouter, createWebHistory } from 'vue-router';
import UserInfo from './components/UserInfo.vue';
import CreateUser from './components/CreateUser.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', name: 'UserInfo', component: UserInfo },
    { path: '/user/create', name: 'CreateUser', component: CreateUser }
  ]
});

Corresponding backend routes are defined in ThinkPHP6:

use think\facade\Route;
Route::get('/userInfo/:id', 'api/UserController/getUserInfo');
Route::post('/user', 'api/UserController/createUser');

These routes map HTTP requests to the controller methods shown earlier, enabling the Vue frontend to retrieve and create user data via axios.get and axios.post.

4. Complete Example

The article concludes with a full example that combines the ThinkPHP6 controller, Vue component, router configuration, and API route definitions, illustrating a functional front‑end/back‑end separated application that is flexible, efficient, and maintainable.