原厂开发之ucf-web使用规范

[wxgg]

原厂开发之ucf-web使用规范

前言

本文主要针对一般ucf-web框架下的开发实战做约束以及具体场景代码写法的描述。

目录描述

.
├── LICENSE                       # 开源协议
├── README.md                     # 项目脚手架说明
├── package.json                  # npm packages 依赖包
├── ucf-apps                      # 【目录名不可修改】微服务应用根目录，用于加载微服务
├── ucf-common                    # 【目录名不可修改】公共组件、样式、图片、字体等静态资源存放
│   ├── README.md                 # 描述公共组件等说明
│   └── src
│       ├── components            # 公共组件
│       ├── static                # 静态资源
│       ├── styles                # 公共样式
│       └── utils                 # 公共方法
├── ucf-publish                   # 【目录名不可修改】构建出来的静态资源
└── ucf.config.js                 # ucf 核心配置文件

场景描述

后续内容主要会描述具体场景的代码写法

新建节点（新建模块）

代码结构(强规范)

├── app                           # 节点名称         
│   ├── README.md                 # 描述文件(用于描述节点业务，以及其他记录)
│   └── src
│       ├── components            # 业务组件
│       │   └── App               # 这里是示例，组件命名需按照具体业务来定
│       │       ├── index.js      # 一级目录或默认导出组件文件命名为index.js
│       │       └── index.less    # 
│       ├── routes                # 路由
│       │   └── index.js          # 
│       ├── app.js                # 入口文件
│       ├── container.js          # 容器
│       ├── index.html            # 
│       ├── model.js              # 数据模型，数据业务层
│       └── service.js            # 接口业务

代码描述

• 新建组件

// App/index.js 文件
    // js描述
    import React, { Component } from 'react';
    import './index.less';
    //组件名称需遵守大驼峰命名法，同时需根据业务需能简单描述业务场景
    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
            };
        }
        render() {
            /**
             * 注意 const 和 let 的使用，根据具体代码逻辑修饰符。禁止
             * 全篇一个修饰符，const 一般用于描述名义上的常量，做说明性
             * 描述，
             */
            //方法体内默认缓存 this 对象，并命名为常量的 _this;
            const _this = this;
            return (
                <div className='app'>
                </div>
            )
        }
    }
    export default App;

// App/index.less 文件
//注入全局变量，该文件主要是定义了一些默认颜色的变量
@import '~styles/variables.less';
/*
	由于类似业务较多，防止被覆盖，我们通过上下文控制样式的作用域。class 名的命名规则统一采用  iuap-*-* 规范来命名，比如当前节点为 iuap-test 工程下的 App 模块，则命名为 iuap-test-app。
*/
/*
	通过上下文控制后，内部在命名为各自的组件即可，如app模块下的 App 组件
*/

.[工程名]-[节点名]{
    .[组件名]{
    }   
}

@import '~styles/variables.less';
//当存定义一个例如 OrderList 组件时，样式写法如下。
.iuap-test{
    .order-list{
    }   
}

import React from "react";
    import {Route} from "mirrorx";
    import {ConnectedOrg} from "../container";
    export default () => (
        // 定义好样式作用域后通过在总路由中增加样式名的方式做全局控制
        <div className="route-content iuap-test">
            <Route exact path='/' component={ConnectedOrg}/>
        </div>
    )

注意：上述过程描述常规业务场景，复杂业务场景可依照具体场景做适当调整。

• 路由写法

/**
    * 前端路由说明：
    * 1、基于浏览器 History 的前端 Hash 路由
    * 2、按业务模块和具体页面功能划分了一级路由和二级路由
    */
    import React from "react";
    import { Route } from "mirrorx";
    import { ConnectedApp } from "../container";
    
    export default (props) => {
        return <div className="route-content">
            <Route exact path={`${props.match.url}`} component={ConnectedApp}/>
            <Route exact path={`${props.match.url}app`} component={ConnectedApp}/>
        </div>
    }

注意：${props.match.url}app 在模板之后没有斜线

• service.js 写法
  
  在编写 service 时需先明确在 ucf.config.js 中注入了对应后台的项目名的全局变量，以及设置了相关代理。

// service.js
    import request from "utils/request";
    //注意接口名的定义规范
    const URL = {
        //严禁使用这种写法 
        "GET": `http://10.5.6.55/iuap/server`,
        //尽量避免这种写法
        "SAVE": `iuap/server`,
        //规范写法
        "SAVE_ONE": `${GLOBAL_HTTP_CTX}/server`
        
    }
    /**
    * 获取列表
    * @param {*} params
    */
    export const getItemList = (param) => {
        return request(URL.SAVE_ONE, {
            method: "post",
            data : param,
        });
    }

// ucf.config.js
    require('@babel/polyfill');
    module.exports = (env, argv) => {
        return {
            ...
            // 代理的配置
            proxy: [
                 {
                     "enable": true,
                     "headers": {
                         "Referer": "http://127.0.0.1:8180"
                     },
                     "router": ["/split"],
                     "url": "http://127.0.0.1:8180"
                 }
            ],
            // 全局环境变量
            global_env: {
                GROBAL_HTTP_CTX: JSON.stringify("/iuap"),
            }
            ...
        }
    }

公共方法和公共组件

我们的公共组件和方法在 ucf-common 中，通用组件的开发请参考项目最佳实践-构建前端工程之第三章

.
├── ucf-common                       # 【目录名不可修改】公共组件、样式、图片、字体等静态资源存放
│   ├── README.md                    # 描述公共组件等说明
│   └── src                          
│       ├── components               # 公共组件
│       │   ├── Alert                # 简单 alert 组件封装，可用于删除等提示性交互操作
│       │   ├── AsyncComponent.jsx   # 可异步加载的组件       
│       │   ├── AsyncLoad.js         # 可异步加载的组件 
│       │   ├── Button               # 带图标按钮的简单封装
│       │   ├── ButtonRoleGroup      # 按钮权限相关组件
│       │   ├── DelModal             # 用于删除提示固定场景使用的组件
│       │   ├── FormControlPhone     #   
│       │   ├── FormError            # Form 经典场景的校验错误提示
│       │   ├── Grid                 # 通用 Grid 组件封装
│       │   ├── Header               #     
│       │   ├── NoData               #
│       │   ├── PaginationTable      #   
│       │   ├── Pop                  #
│       │   ├── RefControl           #
│       │   ├── RefOption            #
│       │   ├── RefViews             #
│       │   ├── RowField             #
│       │   ├── SearchCascader       #   
│       │   ├── SearchPanel          #
│       │   ├── SelectComp           #
│       │   ├── SelectMonth          #
│       │   └── SelectViews          #
│       ├── static                   # 静态资源
│       ├── styles                   # 公共样式，复写的 tinper-bee 中组件的样式
│       │   ├── button.less          # 
│       │   ├── grid.less            #
│       │   ├── styles.less          # 通用样式
│       │   └── variables.less       # 全局样式变量
│       └── utils                    # 公共方法