核心问题在于前后端约定不一致：前端发json而thinkphp用param()解析失败，应改用json()或前端改发表单；后端返回json时需避免bom、模板渲染和额外输出；中文和斜杠转义需用json_unescaped_unicode；接口响应结构须统一包装并规范状态码。
核心问题不在“数据格式本身”，而在于前后端对请求类型、解析方式和响应结构的约定不一致。ThinkPHP 默认按表单逻辑处理请求，Vue 默认发 JSON，两边没对齐就必然出错。
前端发的是 JSON，后端却用 param() 解析
Vue 用 axios.post('/api/login', { user: 'a' }) 发请求时，Content-Type 是 application/json；但 ThinkPHP 的 $this->request->param() 只识别 application/x-www-form-urlencoded 和 multipart/form-data，所以永远拿不到值。
- ✅ 正确做法：后端改用
$this->request->json()获取原始 JSON 对象 - ✅ 或前端改发表单格式：用
qs.stringify({ user: 'a' })并显式设Content-Type: application/x-www-form-urlencoded - ⚠️ 别混用：不能一边发 JSON，一边还写
input('user')或param('user')
后端返回 JSON，前端却当字符串处理
ThinkPHP 用 return json($data) 是对的，但若文件开头有 BOM、中间有 echo、或框架自动渲染了模板，响应体就会夹带 HTML 或乱码，导致 Vue 解析失败（常见报错：Unexpected token ）。
- ✅ 确保所有 PHP 文件保存为 UTF-8 无 BOM 格式
- ✅ 路由必须禁用模板渲染，比如 TP6 中避免兜底路由
Route::rule('/*', 'index/index') - ✅ 响应前不要有任何输出（包括 warning），可用
error_reporting(0)临时屏蔽非致命错误
中文变 \u4f60\u597d 或斜杠被转义
直接 json_encode($data) 会把中文转 Unicode，URL 中的 / 变成 \/，虽然合法但可读性差，也容易让前端误判字段内容。
- ✅ ThinkPHP 6+ 的
json()方法默认已加JSON_UNESCAPED_UNICODE，无需额外操作 - ✅ 若手动 echo，务必用：
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); - ✅ 数据库连接也要设 utf8mb4，否则查出来的中文可能本身就是乱码
状态码和响应结构没统一，前端取值总 undefined
Vue 里写 res.data.user 报错，往往不是后端没传 user，而是整个响应结构没约定好——比如后端直接返回数组或裸对象，前端却默认 expect { code: 0, data: {}, msg: '' }。
- ✅ 所有接口统一包装：用中间件或基类封装
success(['user' => $u])和fail('参数错误', 400) - ✅ Axios 默认解构
response.data，fetch 必须手动await res.json()，别漏 await - ✅ 检查 Network 面板里的 Response 内容，确认看到的是纯 JSON，不是 HTML 或空页
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
