使用Real @auraenabled方法调用本地LWC开发

你在学习文章相关的知识吗？本文《使用Real @auraenabled方法调用本地LWC开发》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

概述

本文介绍如何从本地开发服务器调用真实的@auraenabled Apex 方法。我们将使用 LWC Garden 作为服务器，但此方法也可用于标准 LWR 设置。

示例 Apex 类：

public with sharing class AccountController {
    @AuraEnabled(cacheable=false)
    public static List getAccountsById(Set accountIds) {
        return accountIds.isEmpty() ? new List() : [SELECT Id, Name FROM Account WHERE Id IN :accountIds];
    }

    @AuraEnabled(cacheable=false)
    public static List getAccountsByName(Set accountNames) {
        return accountNames.isEmpty() ? new List() : [SELECT Id, Name FROM Account WHERE Name IN :accountNames];
    }
}

项目结构

以下是一个简化的项目结构：

.
├── __mocks__/
│   └── @salesforce/
│       └── apex/
│           └── AccountController.js
├── force-app/
│   └── main/
│       └── default/
│           ├── apex/
│           │   └── AccountController.cls
│           └── lwc/
│               └── accountManager/
│                   ├── accountManager.css
│                   ├── accountManager.html
│                   ├── accountManager.js
│                   └── accountManager.js-meta.xml
├── package.json
├── lwr.config.json
└── sfdx-project.json

模拟方法 (可选)

在调用真实 @auraenabled 方法之前，可以先使用模拟方法进行本地测试。 这可以通过为每个 Apex 方法创建一个 JavaScript 模拟文件实现，或者使用 @lwc-garden/utils 来简化模拟管理。

LWR 配置 (使用 @lwc-garden/utils)

为了使用 @lwc-garden/utils 简化模拟，安装该包：

pnpm add @lwc-garden/utils

然后修改 lwr.config.json：

{
  "hooks": [
    [
      "@lwc-garden/utils/resolvers/apex.ts",
      {
        "paths": ["__mocks__/@salesforce/apex/"]
      }
    ]
  ]
}

在 __mocks__/@salesforce/apex/AccountController.js 中创建模拟：

import { createApexMocks } from '@lwc-garden/utils';

export default createApexMocks({
  AccountController: {
    getAccountsById: ({ accountids }) => { /* 模拟逻辑 */ },
    getAccountsByName: ({ accountnames }) => { /* 模拟逻辑 */ }
  }
});

调用真实 Apex 方法

为了绕过浏览器 CORS 限制，我们需要一个本地代理服务器。这里我们使用 Hono，但 Express, Koa, 或 Fastify 也适用。

Hono 配置

安装 Hono:

pnpm add hono @hono/node-server @types/node tsx

修改 package.json 的 scripts:

"scripts": {
  "run-server": "tsx watch server.ts"
}

创建 server.ts:

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { serve } from '@hono/node-server';

const app = new Hono();
app.use('/proxy', cors());

app.all('/proxy', async (c) => {
  const url = c.req.query('q');
  const res = await fetch(url, {
    method: c.req.method,
    headers: c.req.raw.headers,
    body: c.req.raw.body,
    duplex: 'half',
  });
  return new Response(res.body, { headers: res.headers });
});

const port = 3003;
console.log(`Server running on http://localhost:${port}`);
serve({ fetch: app.fetch, port });

运行 pnpm run-server 启动服务器。

修改 Apex 模拟 (调用真实 Apex)

替换 __mocks__/@salesforce/apex/AccountController.js 为：

const PROXY_BASE_URL = 'http://localhost:3003';
const WEBRUNTIME_URL = '/webruntime/api/apex/execute';
const SALESFORCE_URL = 'YOUR_SALESFORCE_INSTANCE_URL'; // 替换为您的 Salesforce 实例 URL
const CLASS_NAME_ID = 'YOUR_CLASS_NAME_ID'; // 替换为您的 Apex 类的 ID

const BASE_URL = `${PROXY_BASE_URL}/proxy?q=${SALESFORCE_URL}/${WEBRUNTIME_URL}`;

const fetchHelper = async (methodName, params) => {
  // ... (fetch 代码，类似于之前的例子，但使用 BASE_URL) ...
};

export const getAccountsById = async (params) => fetchHelper('getAccountsById', params);
export const getAccountsByName = async (params) => fetchHelper('getAccountsByName', params);

确保替换 YOUR_SALESFORCE_INSTANCE_URL 和 YOUR_CLASS_NAME_ID 为您的实际值。

总结

通过以上步骤，您就可以在本地开发环境中调用真实的 @auraenabled Apex 方法，方便进行 LWC 开发和测试。 记住要正确配置代理服务器和替换占位符 URL 和 ID。

终于介绍完啦！小伙伴们，这篇关于《使用Real @auraenabled方法调用本地LWC开发》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！