中台前端交接思维导图

U722887772

2023-01-04

浏览量: 5

前端开发以及基本规范介绍

树图思维导图提供《中台前端交接》在线思维导图免费制作，点击“编辑”按钮，可对《中台前端交接》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：03322adcce072c002c79b657c8ffcc90

思维导图大纲

前端开发以及基本规范介绍

项目启动以及发布

https://www.yuque.com/zhuangxp/glz/hlnk7q

切勿在根目录src下进行开发，需要在packages下面开发新服务（模块）

子模块命名规范： o2-(bbc/oms)-XXX

权限编码维护规范

https://www.yuque.com/zhuangxp/glz/pz5nh2

o2-front子模块

存放客制化的通用组件以及通用配置

model层中model文件命名需要使用小驼峰

stores目录下的ds文件需要使用驼峰并以DS结尾

services目录下的文件需要使用驼峰命名

commit规范

https://www.yuque.com/zhuangxp/glz/id95lg

可后续二次自定义，配置文件位置：根目录/scripts/verify-commit.js

前端工程主要目录结构介绍

根目录/.hzerorc

子模块配置, webpack配置扩展

根目录/app.ts

全局配置入口

根目录/global.module.less

全局样式覆盖文件

根目录/src/config/xxxx.yml

关联packge.json中命令语句的NODE_PROFILE配置

根目录/docker/enterpoint.sh

脚本文件，主要用来替换环境变量

根目录/packages/XXXX

子模块

dataSet基本使用

基础列表开发

ds文件定义配置对象

queryFields

查询字段配置

fields

列表字段配置

transports

前后端交互配置，包括增删改查

events

事件监听配置

对应c7n-pro组件通过dataSet属性关联ds配置对象的实例，并通过columns属性配置关联展示列字段

更多属性配置参考

https://open.hand-china.com/choerodon-ui/zh

装修页面新增组件开发示例

参考优惠券组件

后端配置对应新增组件

在model层级的fetchComponentList effect中配置ICON

页面展示部分

packages\o2-bbc-business\src\routes\o2cms\SiteH5PageDecoration\H5Preview\LayoutPreview\PreviewComponents\Coupon.js

modal抽屉部分

packages\o2-bbc-business\src\routes\o2cms\SiteH5PageDecoration\H5Preview\LayoutPreview\ComponentOptionsModal\CouponModal

其他定制化注意事项

二开基本流程

通过package.json查看对应需要覆盖部分的子模块版本

在对应版本中找到对应功能模块的代码并将其本地化至当前工程的对应子模块下

在当前工程的子模块内进行路由覆盖

script脚本如何添加

由于hzero架构并没有暴露index.html模板文件，所以需要在app.ts的dvaAppInit方法中通过创建节点并插入的形式进行装载

自定义lov的相关配置

同上也是在app.ts中进行覆盖=》initC7nUiConfig

如何覆盖UI的样式

需要在global.module.less或者自定义的样式文件中进行操作，需要注意的是外层需要包裹:global

如果只是操作当前页面的央视覆盖，建议覆盖时定义一个父类类名，并在父类名限制下进行操作

如何新增环境变量

一般在环境配置文件内进行操作，并且需要在docke脚本中同步新增变量替换执行语句。当然服务器上也得同步新增对应环境变量配置

商家入驻部分

使用public路由，该路由类似审批表单的内嵌页面，会自动隐藏菜单部分以及导航栏部分

卡片开发

平台配置对应卡片，code关联本地code编码

参考packages\o2-bbc-business\src\customize\customizeCards.js

本地通过setCard方法设置卡片对应组件

其余部分跟常规react开发一致

某些组件使用注意事项

https://www.yuque.com/zhuangxp/glz/xcsg78

思维导图模板大纲

系统详细架构图：前端思维导图

U865987710

4.06

树图思维导图提供《系统详细架构图：前端》在线思维导图免费制作，点击“编辑”按钮，可对《系统详细架构图：前端》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：cbb32981ec83c2b97a3bac2c86f8715c

流程迁移项目交接思维导图

Sophleap

2.13

树图思维导图提供《流程迁移项目交接》在线思维导图免费制作，点击“编辑”按钮，可对《流程迁移项目交接》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：d8a3ac87ce9234047184d41522a4f91d

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

思维导图模版推荐

首页

我的文件

我的团队

个人中心

中台前端交接思维导图

思维导图大纲

相关思维导图模版

前端开发以及基本规范介绍

前端工程主要目录结构介绍

dataSet基本使用

装修页面新增组件开发示例

其他定制化注意事项

相似思维导图模版

思维导图模版推荐