前端嵌入页面模拟登陆_oup：前端组件化(一)

关于前端建设，在行业内目前处于一个稳定的阶段，个性化的UI/UE设计结合成熟的组件化框架，可帮助建设人员快速实现用户页面需求。在大信息量、定制化需求、长流程等方面，UI/UE的设计直接影响客户的操作体验，好的客户体验可增加平台识别度，增大客户留存，助力客户营销。在管理类、办公类、信息采集及汇总统计中，信息量较大，客户量一定，体验需求要求相对稳定，更注重表单的统一及信息量展示，此时大多使用UI框架。从公司组织结构来说，非运营类的建设公司，对于架构、组件、人员讲究复用，特别是UI/UE方向，通过精兵政策+人力复用的策略，追求成本最低，高复用的目标。

oup方案的单点中心、管理模块、大屏展示，结合以往前端框架，报表渲染等方面设计，形成自己的组件库，将前端框架的组件化能力，延申到后端操控，采取模板化思想构建，以模板复用为中心，分层设计，高复用的前提下，兼顾高扩展。以下分开说明下单点中心thymeleaf+AdminLTE、VUE2个前端模板的设计。

thyemleaf+AdminLTE前端组件

oup在前端设计上，依托前后端逻辑分离、前端组件化、展示逻辑分离化，后端控制前端的思想完成，当前已实现后端人员可直接生成前端、前端操作与展示分离，下一步视情况由组件化升级为表单可视化操作。类似VUE思想。在设计上，通过延伸后端人员的编程能力到前端，降低后端人员的前端能力要求，实现标准化的前端。让前端人员在应用领域侧重到组件及框架设计上，跳出重复构建的深坑。

在前端设计思想的基础上，形成目前的开发模式，具体的目录结构如下图(极其简单、高度复用)，目录结构布局兼顾逻辑增加、插件扩展、框架替换三层需求，分为cust自定义库、plugins插件库、dist框架库，日常研发上，分为二层需求，组件拓展+日常业务。组件拓展视情况扩展，日常业务主要用来在展示渲染完成的基础上，简单编写js页面操作事件即可。(一个表单页面1-2个js文件操作事件即可)

接下来看下开发步骤，扩展性也体现在开发过程中，如下：

1、所有page的页面，直接渲染页面。(一句java搞定一个布局或一个组件，代码量极度减少)

2、前端布局(升级布局时需要，日常不需要)

主要在tmp.html中，编写布局模板。该前端框架于2018年选型AdminLTE3，当时还未正式发布，显示兼容与插件兼容均已解决。目前形成以下模板，表单布局高度复用，只要保证向下兼容性原则扩展即可，不用重复编写布局代码，造成高维护风险。目前通过多次迭代，已生成2-3个框架代码即可覆盖通用布局。

3、元素组件(元素升级或添加时需要，日常不需要)

主要组件均在ele.html中，以下组件已满足日常使用，保护树结构、表结构、日常表单等(高度复用)，元素组件设计上，对接外部第三方组件类型，分离js、图片、页面三部分的设计，支持快速嵌入。(组件升级时遵循向下兼容，使用java/js的多态思想进行扩展即可，高度复用)

4、功能js(日常功能开发，以功能/模块为单位)

以模块或者功能命名，针对渲染后元素事件编码即可，直接按事件进行编码。

5、最终效果(目前已全部升级完成，完整的单点中心)

关键点拓展：

1、布局框架中，局部刷新是div/iframe，差异在哪？(div局部刷新)

2、数据局部刷新/页面效果局部刷新，如何保证页面html代码的高复用，还是js动态生成html的老思路。(load方式，规避js拼装html+数据的不稳定性，使用前后端方式统一标准渲染模板)

3、现有的响应式框架模板均为全页面刷新模式，如何调整为局部刷新，iframe带来的资源隔离，需要资源反复装载。(js一次性加载，屏蔽重复加载，兼顾重复加载带来的js绑定事件失效问题。)

4、设计思想上，菜单等事件的操作方案，类似历时访问记录留存效果，采取留存url记录直接访问+调整页面效果，还是模拟用户点击事件。(模拟用户点击事件，复用流程+支持场景自动化)

5、开发模式上，从一事一议，调整为日常组件升级，从客户体验角度，针对不同页面进行组件比对，常态化组件选型及升级，并向下兼容，不断优化组件库，提升前端的能力范围。

BSP前端组件(后续，马上到)