实习React项目相关规范

[du1wu2lzlz]

项目一些前端规范

1.所有字体，宋体第一，12px
2.Tab标签底部加线条，  2px #20a0ff
3.表格不必所有列都有可拉伸效果，按需使用, 所有表格内文字左对齐，padding-left 设为4px  表格数据默认50条/页
4.使用动态控制列的表格时，CheckBox的上下间距拉大
5.表格行，鼠标hover时的颜色改为淡蓝色#edf7ff 行高28px
6. 当有人员下拉选择的时候，应该自动出现人员选择，对接OA
7.高级搜索，左对齐，包括查询&重置按钮
8.所有模态框，提交/确定 按钮这个统一和windows系统一下，左边是“确定”，右边是“取消”。弹出窗口应该最小宽度，确定小屏也能正常显示
9.面包屑给个border-bottom
10.select下拉框无数据时，给最小高度
11.tab页内容块不要阴影
12.表格内容和底部时太紧密，下面应该留白
13. 表格顶部搜索，和内容之间，功能按钮时间应该适当的留白

---

node中间件的接入

封装后台接口

比如:

• 通用poi接口
• 图片搜索

• 查询全体人员信息

  登陆信息 请求等加密

  比如：

• 调node接口的入参，出参 用base64进行加密

• 前端接口输出数据预处理

element-react 版本源码

Table部分

1.添加props:

增加Table中props的notHover属性,true代表取消hover样式。

2. element-UI 的Table组件的扩展行 不支持自定义title

Mock 数据 格式定义

import Mock from 'mockjs';

Mock.setup({timeout: '1200-2600'});

Mock.mock('http://localhost:8080/queryResGroup',
{
    success: true,
    msg: 'success',
    errorCode: 1700000,
    extendMsg: null,
    data: {
        tabList:[
            {
                sort: 1,//排序值 页面展示排序 数字越大越靠前,值一样按id从小到大排序
                tabName: '基础信息',//tab页名称
                tabAttrList: [ //tab页属性列表
                    {
                        sort: 1, //排序值 页面展示排序 数字越大越靠前,值一样按id从小到大排序
                        attrId: 1,//属性id
                        attrName: '',//属性名称
                        attrTips: '',//属性提示语
                        attrEnum: {//属性枚举
                            enumId: 1,//属性枚举id
                            enumItem: [//属性枚举项列表
                                {
                                    enumItemId: 1,//属性枚举项id
                                    enumItemValue: ''//属性枚举项值
                                }
                            ]
                        },
                        attrHint: '',//属性暗纹
                        attrCompId: 1,//属性模板id
                        value: '',//属性值
                        childAttrList: [//子属性列表，预订信息模板中预订项属性存在属性嵌套
                            {
                                sort: 1, //排序值 页面展示排序 数字越大越靠前,值一样按id从小到大排序
                                attrId: 1,//属性id
                                attrName: '',//属性名称
                                attrTips: '',//属性提示语
                                attrEnum: {//属性枚举
                                    enumId: 1,//属性枚举id
                                    enumItem: [//属性枚举项列表
                                        {
                                            enumItemId: 1,//属性枚举项id
                                            enumItemValue: ''//属性枚举项值
                                        }
                                    ]
                                },
                                attrHint: '',//属性暗纹
                                attrCompId: 1,//属性模板id
                                value: '',//属性值
                                childAttrList: []
                            }
                        ]
                    }
                ] 
            },
            {
                sort: 2,
                tabName: '资源类别',
                tabAttrList: [

                ] 
            },
        ]
    } 
})

React组间通信

1. 兄弟组件之间通过父组件进行通信

父组件调用子组件

export default class Parent extends Component {
     render() {
         return(
             <div>
                 <Child alias={this.doSth} /><br/>
                 <button onClick={this.click} >父组件click</button>
             </div>
         )
     }

     doSth = (ref) => {    //获取子组件的作用域
         this.anything = ref
     }

     click = (e) => {
         this.anything.myName()
     }

 }

 class Child extends Component {
     componentDidMount(){
         this.props.alias(this)  //子组件中的this作为参数传入
     }

     myName = () => alert('click me ')

     render() {
         return ('我是子组件')
     }
 }