介绍

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

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

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

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

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

  icon: IAM # 服务的图标
  sort: 1
  organization: # 组织层的菜单
    - "hello": # 菜单字段
        icon: manage_organization  # 菜单图标
        Routes: /demo/hello # 菜单对应路由
        permission: # 菜单内容具有的权限
          - 'demo-service.demo.hello'
  # site: # site层的菜单
  # project: # 项目层的菜单
  # user: # 个人中心层的菜单

en.yml文件内容:

zh.yml文件内容:

"demo": "DEMO"
# site
# organization
# project
# user

在项目根目录下，执行

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

然后再执行命令

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

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

页面编写

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

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

// DEMOIndex.js
import React from 'react';
import { inject } from 'mobx-react';
import { asyncLocaleProvider, asyncRouter, nomatch } from 'choerodon-front-boot';
// 在头部引入异步路由模块
const HelloIndex = asyncRouter(() => import('./organization/hello'));
class DEMOIndex extends React.Component {
    render() {
        const { match, AppState } = this.props;
        return (
            <Switch>
                <Route path={`${match.url}/hello`} component={HelloIndex} /> // 在下面路由中进行编写设置
                <Route path={'*'} component={nomatch} />
            </Switch>
        );
    }
}

获取后台数据

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

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