PrestaShop后台Vue.js应用如何调用模块方法发起数据请求

你之前前台自定义控制器暴露API的思路在后台同样适用，只是需要适配后台的控制器规则、权限校验逻辑，以下是两种可直接落地的方案，分别对应HTTP接口调用、PHP方法直接调用的需求：

方案1：自定义后台Ajax控制器暴露HTTP API #

这是和前台开发逻辑最接近的方案，不需要调整你Vue侧的请求封装逻辑，仅需按后台规则新增控制器即可：

• 控制器存放路径：在你的模块目录下新建 controllers/admin/ 目录，后台控制器必须放在这个路径下才能被系统识别。
• 控制器命名与代码示例：假设你的模块名为 yourmodulename ，新建文件 controllers/admin/AdminYourModuleAjaxController.php ，代码结构如下：

<?php
// 模块路径：modules/yourmodulename/controllers/admin/AdminYourModuleAjaxController.php
require_once _PS_MODULE_DIR_.'yourmodulename/yourmodulename.php';
class AdminYourModuleAjaxController extends ModuleAdminController
    // 标记为Ajax请求，关闭后台模板渲染
    public $ajax = true;
    public $content_only = true;
    public function __construct()
        parent::__construct();
        // 强制校验后台登录态与访问权限，非授权用户直接拦截
        if (!$this->context->employee->id || !$this->access('view')) {
            die(json_encode([
                'code' => 403,
                'msg' => '无访问权限'
    // 接口方法，命名规则为ajaxProcess+自定义接口名
    public function ajaxProcessGetBusinessList()
        // 直接实例化模块主类，调用类内已封装的业务方法，不需要重复编码
        $module = YourModuleName::getInstance();
        $list = $module->getBusinessDataList(Tools::getValue('page', 1));
        die(json_encode([
            'code' => 200,
            'data' => $list

• Vue侧请求写法：不需要硬编码后台路径，直接用PrestaShop后台全局注入的JS变量拼接请求参数即可，自动适配域名、后台目录、安全校验规则：

// Vue内请求示例
async function loadData() {
  const resp = await fetch(window.admin_ajax_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-Requested-With': 'XMLHttpRequest'
    body: new URLSearchParams({
      ajax: 1,
      action: 'GetBusinessList', // 和控制器里ajaxProcess后面的方法名完全一致
      controller: 'AdminYourModuleAjax',
      token: window.token_admin // 必须传后台全局token，否则会被安全规则拦截
  return await resp.json()

注意：不要直接复用前台继承 ModuleFrontController 的控制器代码到后台，前后台控制器基类的上下文加载、权限校验逻辑完全不同，直接复用会出现登录态失效、后台菜单渲染异常的问题。

方案2：不发起HTTP请求，直接调用模块PHP方法注入数据 #

如果你的Vue应用是直接挂载在模块自身的后台功能页/配置页下，完全可以跳过HTTP请求环节，直接在页面渲染阶段把数据注入前端，适合首屏数据填充场景：

• 在模块主类的 getContent() 方法（也就是模块后台页面的渲染入口）里，直接把业务数据编码后输出为全局JS变量，Vue初始化时直接读取即可：

public function getContent()
    // 加载你打包好的Vue应用静态资源
    $this->context->controller->addJS($this->_path.'vue/dist/assets/index.js');
    $this->context->controller->addCSS($this->_path.'vue/dist/assets/index.css');
    // 直接调用类内业务方法获取数据，注入到全局
    $initData = json_encode($this->getBusinessDataList(1));
    $injectScript = "<script>window.__MODULE_INIT_DATA__ = {$initData}</script>";