时间戳

首页 > 解决方案 > UI5 路由实现：Express.js 与 UI5 路由功能

express - UI5 路由实现：Express.js 与 UI5 路由功能

问题描述

在通用单页应用程序 (SPA) 中，我将使用Express.js实现路由逻辑。但是我应该在SAPUI5环境中使用什么方法？我应该依赖SAPUI5sap.ui.core.routing.Router的sap.m.routing.Router路由模块还是使用Express.js实现此类功能？

标签： expressroutessapui5url-routingsingle-page-application

解决方案

我认为您稍微混淆了路由概念。让我们试着澄清一下。

Express 是一个用于构建 HTTP 接口的服务器端 Node.js 库。在这种情况下，路由是指将传入请求与处理函数匹配（例如，基于 URL 模式）。然后，处理函数必须根据传入的请求（状态、标头、正文等）生成 HTTP 响应。这类似于 Spring @RequestMapping、 JAX-RS @Path、 Rails 路由等。

// Express route
// all GET requests on the / URL will be handled by this function
// which in turn sends back a plain text "Hello world!" response
app.get('/', (req, res) => res.send('Hello World!'))

上述代码的示例匹配请求：GET http://localhost:3000/.

UI5 是一个用于构建客户端、单页应用程序的框架。正如你所提到的，它有一个内置的基于哈希的路由器。在这种情况下，路由意味着将浏览器的当前位置与 SPA 中的视图相匹配。通常（但不总是），这是通过像 UI5 那样通过哈希来完成的，即通过#符号后面的 URL 部分。使用它是因为仅影响哈希的 URL 更改不会导致浏览器加载新页面。这反过来又确保了 JavaScript 上下文不会被破坏 + 重新创建，并且之前加载的资源仍然可以访问。这类似于 React Router、 Angular Router、 mithril 路由等。

  // UI5 router config
  // it first defines where are your views (in the sap.ui.demo.nav.view "package")
  // and where the views should be rendered (inside the pages of the app control)
  // lastly, it defines one route, which matches the /home URL inside the app to
  // the Home view.
  "routing": {
     "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "sap.ui.demo.nav.view",
        "controlId": "app",
        "controlAggregation": "pages"
     },
     "routes": [{
        "pattern": "/home",
        "name": "appHome",
        "target": "home"
     }],
     "targets": {
        "home": {
           "viewId": "home",
           "viewName": "Home"
        }
     }
  }

上述配置的示例匹配位置：http://localhost:3000/index.html#/home.

本质上，如果你想构建一个带有 Node.js 后端的 UI5 应用程序，你很可能会同时使用这两者：

  • 用于构建服务器端 REST API 的快速路由。
  • UI5 路由，用于处理用户界面内的导航。

希望这提供了一些清晰度。

后来编辑：我省略的一件事是服务器端渲染。这可能会使水域更加混乱，但在 UI5 的背景下，无论如何（还）不能轻易完成。

推荐阅读