前置条件

在开发新页面之前,要确保已经在本地创建了新的模块。详见 开发新模块

介绍

本章节讲述了如何使用Choerodon 和React 开发一个全新的页面。包含如下内容:

  • 菜单配置
  • 页面编写
  • 配置路由
  • 获取后台数据
  • 前台数据渲染

菜单配置

前端新加模块和页面,想在菜单中显示需要跟后端沟通各种事宜与配置,大大增加了开发效率与成本。在此版本中,只需要简单配置,菜单数据完全由前端控制。

在模块内部创建config文件夹,目录结构为:

  1. ├── language
  2. | ├── en.yml
  3. | └── zh.yml
  4. |
  5. └── Menu.yml
language菜单中英文配置文件夹
en.yml英文菜单
zh.yml中文菜单
Menu.yml菜单配置项

Menu.yml文件内容看起来是这样的:

  1. "demo": # 此处为最外层的模块服务字段
  2. icon: IAM # 服务的图标
  3. sort: 1
  4. organization: # 组织层的菜单
  5. - "hello": # 菜单字段
  6. icon: manage_organization # 菜单图标
  7. Routes: /demo/hello # 菜单对应路由
  8. sort: 1 # 菜单的次序
  9. permission: # 菜单内容具有的权限
  10. - 'demo-service.demo.hello'
  11. # site: # site层的菜单
  12. # project: # 项目层的菜单
  13. # user: # 个人中心层的菜单

en.yml文件内容:

  1. "demo": "DEMO"
  2. # site
  3. # organization
  4. "demo.hello": "hello"
  5. # project
  6. # user

模板为[服务字段].[菜单字段]: [菜单英文名]

zh.yml文件内容:

  1. "demo": "DEMO"
  2. # site
  3. # organization
  4. "demo.hello": "你好"
  5. # project
  6. # user

在项目根目录下,执行

  1. $ python ./demo/node_modules/choerodon-front-boot/structure/menu/__init__.py -o yml -m demo
(确保python版本为2.7.x,以及本地安装pyyaml包)脚本。

成功之后在项目根目录会生成config.yml文件。

然后再执行命令

  1. $ python ./demo/node_modules/choerodon-front-boot/structure/menu/__init__.py -o sql -m demo -i ip地址 -p 端口号 -u 用户名 -s 密码

在部署时候也可通过环境变量进行传递参数

变量名说明
DB_HOST用户名
DB_PORT端口
DB_USER用户名
DB_PASS密码
DB_NAME数据库(默认为iam_service)

成功后,会将前端配置的菜单信息插入后端数据库中。

页面编写

- 此例子在组织层创建新页面,如果需要在其他层级创建页面,同理自行创建

/demo/src/app/demo/containers/organization(project, user, global)目录下新建一个新的功能文件夹hello及其相关的JS文件:

  1. // Demo.js文件
  2. import React, { Component } from 'react';
  3. import { withRouter } from 'react-router-dom';
  4. class Demo extends Component {
  5. render() {
  6. return (
  7. <div>{'Hello, it is a demo!'}</div>
  8. );
  9. }
  10. }
  11. export default withRouter(Demo);

配置路由

/demo/src/app/demo/containers/DEMOIndex.js文件中配置新建文件的访问路径:

  1. // DEMOIndex.js
  2. import React from 'react';
  3. import { Route, Switch } from 'react-router-dom';
  4. import { inject } from 'mobx-react';
  5. import { asyncLocaleProvider, asyncRouter, nomatch } from 'choerodon-front-boot';
  6. // 在头部引入异步路由模块
  7. const HelloIndex = asyncRouter(() => import('./organization/hello'));
  8. @inject('AppState')
  9. class DEMOIndex extends React.Component {
  10. render() {
  11. const { match, AppState } = this.props;
  12. return (
  13. <Switch>
  14. <Route path={`${match.url}/hello`} component={HelloIndex} /> // 在下面路由中进行编写设置
  15. <Route path={'*'} component={nomatch} />
  16. </Switch>
  17. );
  18. }
  19. }
  20. export default DEMOIndex;
注意: 本次demo的访问路径应该为: http://localhost:9090/#/demo/hello ,因为在gulp自动生成路由配置时,DEMOIndex的路由被映射为/demo,配置完路由信息后就可以使用url访问刚刚新建的文件了。

获取后台数据

文件可以被访问后,接下来就是完善界面信息,从后台获取数据。获取数据的方法都写在和文件对应的store文件中。

axios()函数

axios()可以设置全局的配置,例如请求头信息,拦截器等,这样的好处是可以避免重复配置。

关于axios()的相关信息可以参考:https://www.npmjs.com/package/axios