图7-12 登录窗口

4.前端开发规范

开发前，我们需熟悉前端开发规范中的相关内容。

前端开发规范讲述了HZERO平台建议的开发规范和开发约定，我们需要提前了解，相关规范可以在汉得公司开放平台上搜索到（见图7-13）。图7-12 登录窗口

4.前端开发规范

开发前，我们需熟悉前端开发规范中的相关内容。

前端开发规范讲述了HZERO平台建议的开发规范和开发约定，我们需要提前了解，相关规范可以在汉得公司开放平台上搜索到（见图7-13）。图7-13 查询前端开发规范页面截图

5.配置路由routes

（1）新建页面

routes-存放所有界面组件。

①目录结构采用src/routes/［功能模块］/［具体组件］。

②在未配置菜单时，配置权限可以通过访问路由地址直接访问页面，在路由中配置 authorized：true。

（2）添加路由

在开发的模块，如 packages/hzero-frot-demo 的 src/cofig/routers.ts 文件中配置新建功能页面的访问路径，具体如下。图7-13 查询前端开发规范页面截图

5.配置路由routes

（1）新建页面

routes-存放所有界面组件。

①目录结构采用src/routes/［功能模块］/［具体组件］。

②在未配置菜单时，配置权限可以通过访问路由地址直接访问页面，在路由中配置 authorized：true。

（2）添加路由

在开发的模块，如 packages/hzero-frot-demo 的 src/cofig/routers.ts 文件中配置新建功能页面的访问路径，具体如下。配置好路由之后，访问http://localhost:8000/demo/order/list，如果页面显示404，则说明authorized 或compoet 属性可能设置不正确，需调整文件实际路径后重试。

（3）数据处理的两种模式

模式一：dataset模式，ds+axios直接使用（推荐，本例采用这种方式）。

模式二：dva模式，service+models模式。

（4）涉及目录结构

①通用

-src/pages 页面组件。

-src/cofig/routes 路由配置。

②DataSet模式

src/stores 存放ds文件。

③Dva模式（不推荐）

- src/service 存放所有service文件。

- src/models 存放所有models文件。

6.编写页面pages

目录结构采用 src/pages/功能模块/具体组件。配置好路由之后，访问http://localhost:8000/demo/order/list，如果页面显示404，则说明authorized 或compoet 属性可能设置不正确，需调整文件实际路径后重试。

（3）数据处理的两种模式

模式一：dataset模式，ds+axios直接使用（推荐，本例采用这种方式）。

模式二：dva模式，service+models模式。

（4）涉及目录结构

①通用

-src/pages 页面组件。

-src/cofig/routes 路由配置。

②DataSet模式

src/stores 存放ds文件。

③Dva模式（不推荐）

- src/service 存放所有service文件。

- src/models 存放所有models文件。

6.编写页面pages

目录结构采用 src/pages/功能模块/具体组件。功能模块采用帕斯卡命名法。

组件采用帕斯卡命名法 （如复选框组件 CheckBox）。

（1）新增功能模块文件

①在 src/pages 目录下新建一个新的功能文件夹 Order，用于存放订单管理功能模块的所有页面组件文件及其样式文件。

②在Order文件夹下新增页面入口文件 idex.tsx，新增/编辑抽屉组件Drawer.tsx。

（2）入口页面idex.tsx

为减少代码占用篇幅，以展示订单头列表数据为一个流程代表进行描述，其他功能实现流程类似。

入口tsx文件引入依赖的顺序建议，分块集中放置，即第三方的放在最前面，本地绝对路径引入放在其后，本地相对路径引入放在最后，具体如下。功能模块采用帕斯卡命名法。

组件采用帕斯卡命名法 （如复选框组件 CheckBox）。

（1）新增功能模块文件

①在 src/pages 目录下新建一个新的功能文件夹 Order，用于存放订单管理功能模块的所有页面组件文件及其样式文件。

②在Order文件夹下新增页面入口文件 idex.tsx，新增/编辑抽屉组件Drawer.tsx。

（2）入口页面idex.tsx

为减少代码占用篇幅，以展示订单头列表数据为一个流程代表进行描述，其他功能实现流程类似。

入口tsx文件引入依赖的顺序建议，分块集中放置，即第三方的放在最前面，本地绝对路径引入放在其后，本地相对路径引入放在最后，具体如下。