使用webpack+think PHP6+axios 实践

使用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：显示后端返回的 JSON
  • bundle.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

写入：

<?php

use 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

image-20260117150923000

posted @ 2026-01-17 15:36  Seryn  阅读(4)  评论(0)    收藏  举报