使用webpack+think PHP6+axios 实践
Demo 功能（非常简单）
- 浏览器打开一个页面
- 页面上有一个按钮
- 点击按钮
- 用 axios 向 ThinkPHP6 后端接口 发请求
- 后端返回一段 JSON
- 前端把 JSON 显示在页面上
必须安装的 4 个东西
| 工具 | 作用 | 可以理解为 |
|---|---|---|
| Node.js | 运行前端工具 | 前端的“发动机” |
| npm | 安装前端包 | 应用商店 |
| PHP 5.x | 运行后端 | 后端语言 |
| Composer | PHP 的包管理器 | PHP 的 npm |
三、第一步：安装 Node.js（前端环境）
1️⃣ 下载 Node.js
👉 打开浏览器
👉 搜索：Node.js 官网
下载：
- LTS（长期支持版）
- 一路点 Next / 下一步
安装完成后，验证 👇
打开命令行（非常重要）
Windows：
Win + R- 输入
cmd - 回车
macOS：
- 打开「终端」
输入：
node -v
npm -v
如果能看到版本号，说明成功了 ✅
四、第二步：创建前端项目（webpack）
1️⃣ 新建一个文件夹（你的项目目录）
比如：
demo-project
进入这个目录：
cd demo-project
2️⃣ 初始化前端项目（npm）
npm init -y
这一步的作用是：
告诉 npm：这是一个前端项目
你会看到多出一个文件：
package.json
不用怕，这是前端项目的“说明书”
3️⃣ 安装 webpack（前端打包工具）
npm install webpack webpack-cli --save-dev
你需要理解一句话就够了：
webpack = 把很多前端文件，打包成浏览器能用的文件
4️⃣ 安装 axios（前端请求库）
npm install axios
axios 是干嘛的？
👉 用来向后端发 HTTP 请求（GET / POST）
五、前端项目结构（你照着建）
在 demo-project 里新建：
demo-project
├── src
│ ├── index.js
│ └── index.html
├── webpack.config.js
├── package.json
六、写第一个前端页面（index.html）
📄 src/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Webpack + Axios Demo</title>
</head>
<body><h1>前后端 Demo</h1><button id="btn">请求后端接口</button><pre id="result"></pre><script src="./bundle.js"></script>
</body>
</html>
解释一下你刚看到的东西：
button：按钮pre：显示后端返回的 JSONbundle.js：webpack 打包出来的 JS
七、写前端 JS（axios 请求后端）
📄 src/index.js
import axios from 'axios';document.getElementById('btn').onclick = function () {axios.get('http://127.0.0.1:8000/hello').then(res => {document.getElementById('result').innerText =JSON.stringify(res.data, null, 2);}).catch(err => {console.error(err);});
};
你只要记住一件事：
axios.get(URL) = 去后端拿数据
八、配置 webpack（让浏览器认识 JS）
📄 webpack.config.js
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'src')},mode: 'development'
};
意思翻译成人话：
- 从
index.js开始 - 打包成
bundle.js - 放在
src目录下
打包前端代码
打包前端代码的命令一定要在项目的根目录进行打包：
npx webpack
成功后，你会看到：
src/bundle.js
🎉 前端打包完成！
九、用 ThinkPHP6 重新创建后端项目（一步一步）
1️⃣ 确认 PHP 版本（非常重要）
在命令行输入：
php -v
你应该看到类似：
PHP 8.1.x
✅ OK，环境正确
2️⃣ 使用 Composer 创建 ThinkPHP6
进入你的项目根目录：
cd demo-project
执行 👇
composer create-project topthink/think backend
📌 注意：
- ThinkPHP6 默认就是最新稳定版
- 不需要写版本号
3️⃣ 创建完成后的目录结构
backend
├── app
│ ├── controller
│ ├── model
│ └── ...
├── public
│ └── index.php ← 入口文件
├── config
├── vendor
└── think
你现在只需要记住一句话：
所有浏览器访问，都是从
public/index.php进来的
十、写一个最简单的 ThinkPHP6 接口
1️⃣ 创建控制器
📄 文件路径：
backend/app/controller/Index.php
📄 内容（直接复制）：
<?php
namespace app\controller;class Index
{public function hello(){return json(['msg' => 'Hello, World!','php_version' => PHP_VERSION,'time' => date('Y-m-d H:i:s')]);}
}
2️⃣ 配置路由（非常关键）
ThinkPHP6 必须配置路由（和 TP5 不一样）
📄 编辑文件：
backend/route/app.php
写入：
<?phpuse think\facade\Route;Route::get('hello', 'Index/hello');
这句话翻译成人话就是：
当访问
/hello，就执行Index::hello()
十一、启动 ThinkPHP6 后端服务
进入 backend 目录：
cd backend
php think run
你会看到：
Starting development server: http://127.0.0.1:8000
测试后端是否成功
浏览器打开：
http://127.0.0.1:8000/hello
如果你看到：
{"msg": "Hello from ThinkPHP 6","php_version": "8.1.x","time": "2026-01-16 ..."
}
🎉 后端完全 OK