thinkphp vue3

### ThinkPHP与Vue3集成使用教程

#### 一、环境准备
为了实现ThinkPHP与Vue3的成功集成，需先搭建好各自的运行环境。对于前端部分，确保安装了Node.js以及npm/yarn工具来管理Vue项目的依赖项；而后端则要准备好支持ThinkPHP框架的PHP环境。

#### 二、创建Vue3应用
通过`@vue/cli`快速构建一个新的Vue3项目作为前端工程的基础结构[^1]：

vue create vue-thinkphp-app
cd vue-thinkphp-app

#### 三、配置代理解决跨域问题
编辑`vue.config.js`文件，在其中设置开发服务器代理选项以指向本地部署的ThinkPHP服务接口地址，从而避免前后端联调过程中的CORS错误:

module.exports = {
    devServer: {
        proxy: 'http://localhost:8080' // 替换成实际的API服务器URL
    }
}

#### 四、调整ThinkPHP API响应格式适配JSONP/AJAX请求
修改ThinkPHP默认返回的数据格式为json形式，并关闭视图层渲染功能，仅保留RESTful风格的服务端逻辑处理能力。这可以通过更改`application/config.php`内的参数完成:

'return_type'=>'json',
'dispatch_success_end'=>false,
'dispatch_error_end'=>false,
'template'=>['view_path'=>'']

#### 五、编写简单的CRUD操作示例
假设存在一个名为User的文章模型用于展示如何利用Axios发起HTTP GET/POST/PATCH/DELETE等类型的网络请求到对应的ThinkPHP控制器动作上执行增删改查业务流程[^2]。

前端页面组件内定义如下方法来进行数据交互：

import axios from "axios";

export default {
  methods:{
      async fetchUsers(){
          const res=await axios.get('/api/users');
          console.log(res.data);
      },
      async createUser(user){
          await axios.post('/api/user', user);
      },
      ...
  }
};

后端Controller类中相应地实现了上述四个基本的操作函数：

namespace app\controller;

use think\Request;
class UserController extends Base{
    
    public function index(Request $request){
       return json(User::all());
    }

    public function store(Request $request){
       User::create($this->validateInput($request));
       return success();
    }

    protected function validateInput($input){
       // Input validation logic here...
    }

    ...
}