新手用thinkphp做前后端分离应先理清边界:后端只管api,前端独立运行html/js/css;核心三步是环境搭稳、路由分清、通信通顺,按此顺序操作即可正确起步。

新手用 ThinkPHP 做前后端分离,别一上来就改配置或写接口,先理清边界:后端只管 API,前端自己跑 HTML/JS/CSS。核心动作就三步——环境搭稳、路由分清、通信通顺。下面按实际开发顺序说清楚。
装好基础环境,确认 PHP 和 Composer 可用
ThinkPHP 6/8 要求 PHP ≥ 8.0(TP8 强制),先在命令行运行 php -v 和 composer -V 确认版本。没问题再创建项目:
-
composer create-project topthink/think myapi(推荐 TP8) - 进项目目录,运行
php think run,访问http://127.0.0.1:8000看是否显示 ThinkPHP 欢迎页 - 前端另起一个目录,用 Vue CLI 或 Vite 创建项目(比如
npm create vue@latest),不放 PHP 项目里
配好路由,让前端页面和 API 各走各的路
关键不是“怎么写 API”,而是“怎么不让前端请求误进后端控制器”。打开 config/route.php,做三件事:
- 关掉强制路由:
'url_route_must' => false(否则非定义路径直接 404) - 把所有非 API 请求兜底到前端入口:
Route::rule('[:path]', 'index/index')->ext('html');(加->ext('html')防止匹配到.json接口) - 显式声明 API 域名或前缀,比如用子域名:
Route::domain('api', function () { Route::group('v1', [...]); });,这样https://api.your.com/v1/user就不会被前端路由吞掉
处理跨域,别手动 header,用 think-cors 扩展
浏览器发请求前会先发 OPTIONS 预检,手动写 header() 很容易漏掉它或 credentials 兼容问题。正确做法:
- 执行
composer require topthink/think-cors - 在
app/middleware.php中注册:[\think\middleware\Cors::class] - 新建
config/cors.php,填具体前端地址(开发可写['http://localhost:5173'],生产必须写死域名):'allow_credentials' => true(如果前端 Axios 开了withCredentials: true)'allow_origin' => ['http://localhost:5173'](不能和allow_credentials同时为*)
写第一个接口,返回干净 JSON,不带 HTML 干扰
别用 return $this->fetch(),也别依赖 Session 渲染模板。控制器里统一用 return json([...]):
- 新建
app/controller/api/v1/User.php,方法里直接return json(['code' => 0, 'data' => ['id' => 1, 'name' => '张三']]); - 确保没其他输出:检查有没有
echo、var_dump、多余空格或 BOM 字符 - 前端用浏览器直接访问
http://api.your.com/v1/user(或代理后地址),看响应头是Content-Type: application/json,内容是纯 JSON 就对了
不复杂但容易忽略:前后端分离不是换套写法,而是换一套协作逻辑。前端静态资源交给 Nginx/Apache 直接托管,后端只暴露 /api/ 开头的 JSON 接口,两者域名或端口可以完全独立。稳住这个前提,后面加 JWT、Redis 验证码、统一响应格式都顺了。
php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!











