请求基于Eclipse的SAPUI5调用OData服务零基础分步教程

Hey there! I totally get your situation—company policies can throw a wrench in the usual workflow, especially when you're used to the convenience of SAP Web IDE. Let's walk through this step-by-step, starting from scratch for Eclipse, including how to handle Northwind first and prep for your SAP system's authentication later.

1. Set Up Your Eclipse Environment (If You Haven’t Already) #

• First, make sure you have the SAPUI5 tools installed: Open Eclipse, go to Help > Eclipse Marketplace, search for "SAPUI5", install the SAPUI5 Development Tools package, then restart Eclipse.
• Create a new SAPUI5 project: Go to File > New > Other > SAPUI5 Application Development > SAPUI5 Application Project. Enter a project name (e.g., NorthwindODataDemo), click Next, enter a view name (e.g., MainView), then click Finish.

2. Connect to Northwind OData Service #

2.1 Configure the OData Model in manifest.json #

• Locate the webapp/manifest.json file in your project and open it.
• Find the sap.ui5 > models section, then add the Northwind OData service configuration:

"models": {
    "": {
        "dataSource": "mainService",
        "settings": {
            "odataVersion": "2.0"
        }
    }
},
"dataSources": {
    "mainService": {
        "uri": "https://services.odata.org/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
            "odataVersion": "2.0"
        }
    }
}

• Quick note: We’re setting Northwind as the default model here, and specifying OData v2 since that’s what Northwind uses.

2.2 Build a Test View to Display Data #

• Open webapp/view/MainView.view.xml and replace its content with this simple table to show Northwind Products:

<mvc:View controllerName="NorthwindODataDemo.controller.MainView" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <App>
        <pages>
            <Page title="Northwind Products">
                <content>
                    <Table items="{/Products}">
                        <columns>
                            <Column>
                                <Text text="Product ID"/>
                            </Column>
                            <Column>
                                <Text text="Product Name"/>
                            </Column>
                            <Column>
                                <Text text="Unit Price"/>
                            </Column>
                        </columns>
                        <items>
                            <ColumnListItem>
                                <cells>
                                    <Text text="{ProductID}"/>
                                    <Text text="{ProductName}"/>
                                    <Text text="{UnitPrice}"/>
                                </cells>
                            </ColumnListItem>
                        </items>
                    </Table>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

2.3 Run the Application #

• Right-click your project > Run As > SAPUI5 Application, select your MainView, then click OK.
• A browser window will open, and you should see the Northwind product list load—this means your OData call is working!

3. Prepare for SAP System OData Services (Including Authentication) #

When switching to your company’s internal SAP OData service, you’ll need to handle authentication and avoid cross-origin issues. Here’s how:

3.1 Set Up a Local Proxy (Fix CORS Issues) #

Directly calling your internal SAP server from local Eclipse will trigger CORS errors, so we’ll use a proxy:

• Create a new file proxy.json in your project’s webapp folder with this content:

{
    "targets": [
        {
            "name": "SAPBackend",
            "target": "http://your-sap-server:port", // Replace with your SAP server address/port
            "description": "SAP Backend OData Service",
            "auth": true,
            "strictSSL": false // Set to false if your company uses self-signed certificates
        }
    ]
}

• Update the dataSources section in manifest.json to use the proxy path instead of the direct server URL:

"dataSources": {
    "mainService": {
        "uri": "/proxy/SAPBackend/sap/opu/odata/sap/YOUR_ODATA_SERVICE/", // Replace with your OData service path
        "type": "OData",
        "settings": {
            "odataVersion": "2.0"
        }
    }
}

3.2 Configure Authentication in Eclipse #

• Right-click your project > Run As > Run Configurations...
• Find your SAPUI5 Application configuration, switch to the Parameters tab.
• In the VM arguments field, add (replace with your SAP credentials):

-Dsap.ui.proxy.auth=your-username,your-password

• For a more secure option: Switch to the SAPUI5 tab, check Use Secure Storage for Authentication, then enter your username. Your password will be stored in Eclipse’s secure storage instead of plain text.

3.3 Test the SAP OData Service #

• Update your view’s binding path to match your SAP OData entity set (e.g., change {/Products} to {/YourSAPEntitySet}).
• Run the application again—you should see data from your SAP system load, with authentication handled automatically.

4. Quick Troubleshooting Tips #

• CORS errors: Double-check your proxy.json and manifest.json paths to ensure they’re using the proxy.
• Authentication failures: Verify your credentials are correct, and that your SAP server allows your IP address to connect.
• No data loading: Use your browser’s dev tools (F12) to check the Network tab—look for 404 (wrong OData path) or 500 (server-side errors) status codes.

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