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>";
    
    // 返回页面内容
    return $injectScript . $this->display(__FILE__, 'views/templates/admin/vue_container.tpl');
}

Vue侧直接读取window.__MODULE_INIT_DATA__就能拿到首屏需要的所有数据，不需要额外发初始化请求。如果后续需要动态交互，还是走方案1的Ajax控制器即可。

通用注意事项 #

• 所有后台接口必须保留员工权限校验逻辑，不要为了调试方便关闭token校验、登录态校验，避免出现越权风险。
• 1.7及以上版本的PrestaShop后台强制要求CSRF token校验，直接读取全局token_admin变量传参即可，不需要手动计算token值。
• 因为Vue应用和后台是同域名部署，不存在跨域问题，不需要额外配置CORS规则。

内容的提问来源于stack exchange，提问作者NietypowyInformatyk