要在现有结构基础上封装为**
前后端分离的
写法**，我们需要从架构设计、目录结构、接口规范等方面进行优化。你可以理解为：我们正在把当前这个简单的 PHP
项目逐步演变为一个轻量级的 MVC 或 API 框架。
---
## 🧱 当前结构回顾
你目前的结构大致如下：
```
project-root/
├── autoload
.php <-- 定义了 BASE_PATH 和自动加载
├── config/
│ └── database
.php
├── src/
│ └── App/
│ ├── Database/Connection
.php
│ └── Services/UserService
.php
└── public/
└── index
.php <-- 入口文件（混合 HTML 输出）
```
---
## ✅ 目标：实现
前后端分离
我们将通过以下方式来实现
前后端分离：
-
前端：使用
前端框架（如
Vue.js / React）或静态 HTML 页面
-
后端：统一提供
JSON 格式的 API 接口
- 路由分发：支持多种请求路径（例如 `/api/users`）
---
## 📁 推荐的目录结构调整
```
project-root/
├── autoload
.php
├── config/
│ └── database
.php
├── src/
│ ├── App/
│ │ ├── Core/Router
.php
│ │ ├── Controllers/ApiController
.php
│ │ ├── Database/Connection
.php
│ │ └── Services/UserService
.php
│ └── Support/Path
.php
├── public/
│ ├── index
.php <-- 入口文件（处理所有请求）
│ └── assets/ <-- 静态资源（CSS/
JS/Images）
├── frontend/ <--
前端代码（可选，单独部署）
│ └── index
.html
└── routes/api
.php <-- API 路由定义
```
---
## ✅ 步骤一：创建 Router 类
### `src/App/Core/Router
.php`
```php
<?php
namespace App\Core;
use App\Controllers\ApiController;
class Router
{
public function dispatch()
{
$uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$method = $_SERVER['REQUEST_METHOD'];
// 简单路由匹配
if ($uri === '/api/users' && $method === 'GET') {
$controller = new ApiController();
$controller->index();
} else {
http_response_code(404);
echo
json_encode(['error' => 'Not Found']);
}
}
}
```
---
## ✅ 步骤二：创建 API 控制器
### `src/App/Controllers/ApiController
.php`
```php
<?php
namespace App\Controllers;
use App\Services\UserService;
class ApiController
{
public function index()
{
try {
$userService = new UserService();
$users = $userService->getAllUsers();
header('Content-Type: application/
json');
echo
json_encode(['data' => $users]);
} catch (\Exception $e) {
http_response_code(500);
echo
json_encode(['error' => $e->getMessage()]);
}
}
}
```
---
## ✅ 步骤三：修改入口文件 `public/index
.php`
```php
<?php
require_once '
../autoload
.php';
// 自动加载已定义 BASE_PATH
$router = new \App\Core\Router();
$router->dispatch();
```
---
## ✅ UserService 修改为无依赖调用 PDO
### `src/App/Services/UserService
.php`
```php
<?php
namespace App\Services;
use App\Database\Connection;
class UserService
{
private $pdo;
public function __construct()
{
$this->pdo = Connection::make('mysql');
}
public function getAllUsers()
{
$stmt = $this->pdo->query("SELECT * FROM users");
return $stmt->fetchAll(\PDO::FETCH_ASSOC);
}
}
```
---
## ✅ 数据库连接类保持不变
### `src/App/Database/Connection
.php`
```php
<?php
namespace App\Database;
use PDO;
class Connection
{
public static function make(string $name): PDO
{
$config = self::getConfig($name);
return new PDO(
"{$config['driver']:host={$config['host']};dbname={$config['database']}",
$config['username'],
$config['password']
);
}
private static function getConfig(string $name): array
{
$dbConfig = require BASE_PATH
. '/config/database
.php';
if (!isset($dbConfig['connections'][$name])) {
throw new \InvalidArgumentException("Connection [$name] not found
.");
}
return $dbConfig['connections'][$name];
}
}
```
---
## ✅
前端访问方式（示例）
你可以用任何
前端技术调用
后端接口，比如在 `frontend/index
.html` 中：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="userList"></ul>
<script>
fetch('/api/users')
.then(res => res
.json())
.then(data => {
const ul = document
.getElementById('userList');
data
.data
.forEach(user => {
const li = document
.createElement('li');
li
.textContent = user
.name;
ul
.appendChild(li);
});
});
</script>
</body>
</html>
```
---
## ✅ 总结：
前后端分离的关键点
| 模块 | 功能 |
|------|------|
| Router | 分发请求到对应控制器 |
| Controller | 处理业务逻辑并返回
JSON |
| Service | 封装具体数据操作 |
| Base Path | 统一路径管理 |
| API 接口 | 返回
JSON，不混 HTML |
---
##
本文详细阐述了前后端分离项目中，从用户访问URL开始，经过SpringBoot处理后端请求、创建User对象，再到Vue前端路由导航、数据交互、结果返回及处理，以及配置axios和跨域访问的全过程。
扫一扫
3014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
