• 前置条件
  • 介绍
  • 菜单配置
  • 页面编写
  • 配置路由
  • 获取后台数据
    • axios()函数

    前置条件

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

    介绍

    本章节讲述了如何使用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