有很多同学学习到第四章第一单元，感觉页面间的导航学习起来很困难，或者很难懂，特别是没有 js 基础的同学。同时关于搭建 mock server 也不是很懂，需要我说明一下。
课程链接：《SAP FIORI 开发入门》
接下来我来详细的解释一下这两个知识点：
Mock server
了解 resourceroots
在代码中，我们的所有资源指向的命名空间是sap.ui.demo.nav，所以在程序中，如果需要加载 mockserver.js，需要的路径就是：sap/ui/demo/nav/localService/mockserver,这就是在 index文件中 mockserver代码的加载。接下来，我们在index 中调用 mocksever.init方法，用来初始化。
Mock server 的相关 SAP UI5类库是 sap.ui.core.util.MockServer ,大家可以参考这个 API来了解 mock server 的使用方式。
在课程中，因为是入门基础课，我们很难深入介绍 mock server 的所有方方面面，大家只要能够使用就可以了，如果需要了解更深入的知识，我建议多看看 API 文档。
个人建议不要在这里花费大量的时间。
Routing
关于页面间的导航，我们只介绍两种，一种是固定格式的导航，一种是强制参数的导航，使用{objectID}进行参数的传递。页面间的导航主要包含四个步骤：配置，初始化，模式匹配，固定调用。
配置
在 Manifest.json 中，我们配置每个页面的标识，以及导航的标识字符串。如果我们的程序发布到launchpad，就比较清晰的看到地址栏中导航字符串的含义。
刚进入程序：地址栏只有 semetic 导航字符串，比如：
https://flpportal-p2000410352trial.dispatcher.hanatrial.ondemand.com/sites/flp#chapter4unit1-Display
如果选择了 employeeList，如下：
https://flpportal-p2000410352trial.dispatcher.hanatrial.ondemand.com/sites/flp#chapter4unit1-Display&/employees
这个 employees 就是我们在 manifest.json 中定义的名字：
同理，如果我们选择了某一个具体的 employee 进行导航，地址就会变成：
https://flpportal-p2000410352trial.dispatcher.hanatrial.ondemand.com/sites/flp#chapter4unit1-Display&/employees/1
其中1就是我们传递的 employeeId，也就是 manifest.json 中定义的：
初始化
初始化是指我们在 component.js 文件中，需要对 router 进行初始化：
this.getRouter().initialize();
初始化之后，我们就可以在我们的整个应用中使用 getRouter 来取得我们的屏幕间的导航关系。
模式匹配
模式匹配发生在我们的 url 地址变化的时候，当我们触发了 navto 方法，或者页面重新加载的时候，根据 url 的变化来决定我们需要加载哪个页面。
在我们的例子中，employee.controller 中，有一个事件，attachMatched，就是用来监听我们的 url，如果模式匹配，就会执行具体的方法，在这里我们定义的是：_onRouteMatched。当这个视图需要加载的时候，我们判断这个页面从哪里导航过来，也就是需要得到我们的导航模式，根据 id 取得，这个 id 就是 manifest.json 中定义的 id：oRouter.getRoute("employee"),然后我们知道这个导航从 employeeList 页面来，同时会带着一个参数{employeeId}，这个参数可以从导航事件的参数中获得：oEvent.getParameter("arguments").employeeId;
调用
根据按钮或者一些屏幕上的事件，决定我们页面如何导航。按照我们课程中的例子，在 home 视图中，如果点击了导航到 employees 这个按钮，就会触发导航时间，于是程序中会调用 navto 方法，这个方法需要提供的 id 就是我们需要导航到的视图的名字：
this.getRouter().navTo("employeeList");
如果从 employeeList 导航到 employee，那么我们需要提供一个参数，于是在调用 navto 方法的时候，就需要加上这个参数：
this.getRouter().navTo("employee",{
employeeId : oCtx.getProperty("EmployeeID")
});
这里需要传递的参数名字必须和 manifestjson 中定义的参数名字一致：
总结
页面间的导航是 web 开发中比较核心和复杂的部分，这个不仅仅是在 Fiori 的开发中是一个难点，在其他的框架中也是复杂的，所以，刚开始的时候我们可以努力去理解，如果实在理解不了，那么就学会如何使用吧。
网友评论