|
阅读：4084回复：0
网页平台底层设计（一）网页平台介绍一、 什么是核格网页平台？ 核格网页平台是由成都淞幸科技开发的可视化前端开发平台，其通过丰富齐全的前端构件，以灵活的方式提供全面而强大的前端开发功能，为开发人员提供友好便利强大的开发体验。 二、 为什么使用核格网页平台？ 1. 现代前端开发的问题 l 规范不统一：没有良好的规范，导致网页代码难以维护和扩展； l 代码冗余：代码冗余，没有良好的封装与提取功能库，导致代码重复率高； l 难以复用：没有提取代码的功能块，难以在其他地方重用，只有复制代码修改； l 扩展性差：需求的更改，可能导致部分界面重做，代码重写； 2. 核格网页开发平台的主要目的 l 统一开发规范：网页开发以构件拖拽配置方式进行开发，构件代码有统一的规范； l 提取构件资源：在各个项目中积累网页构件与完善已有构件，方便资源提取与重用； l 提高开发效率：在已有网页构件的情况下，开发网页提高了效率与构件本身稳定性，扩展性也得以提高； l 扩展性：采用构件形势开发网页，能够方便替换不同构件，也支持下载构件源代码修改或者自定义代码； 三、 开始入门 1.总体设计 下面图示向我们展示了网页平台的层次结构： 图片：1.png  （1） 基础构件库： 平台底层利用React框架实现的纯JS构件库，可在纯代码编码中的直接复用，也为可是构件库提供底层资源。 （2） 可视化构件库：利用可视化构件开发规范，将JS构件封装为可视化构件库，在可视化编辑器中直接使用。 （3） 构件资源层：对可视化构件资源进行分类，基础构件：重用性高，使用更灵活； 组合构件：功能更丰富，使用更简单；业务构件：与业务绑定，进行相关业务网页开发效率高。 （4） 网页可视化编辑器：进行页面布局，并在对应位置放置可视化构件，进行基础属性配置、数据源配置、事件配置、页面逻辑配置等，可形成最终网页 （5） 用户层：开发人员层次，主要操作网页可视化编辑器来可视化开发网页 PS: 1.基础构件库是利用Antd UI库和平时项目积累编写的纯代码构件，可在核格网页代码开发规范体系中直接使用，提高遵从核格网页代码规范的开发效率。 2.可视化构件库是根据核格可视化构件规范对基础构件库进一步封装，目的是为了让不会前端的人或者前端能力较弱的人也能通过可视化方式写前端代码 3.网页可视化编辑器直白的说就是一个代码生成器，会前端的人员完全可是以写代码的方式编写遵从核格网页代码规范的代码，可视化的操作主要是为了生成代码，并且方便后期扩展性和维护性。 2.开发流程 以下这张图向我们展示了网页开发平台的开发流程： 图片：2.png  1. 在网页平台中，建立新的网页； 2. 根据页面设计稿分析，提取网页中需要使用到的构件，并在网页构件库中进行查找； 3. 查看本地网页构件库构件功能是否满足实际要求： 1) 如果本地网页构件构件不满足，则从构件中心中下载需要的网页构件，并导入到网页构件库中； 2) 如果本地网页构件构件满足，直接拖拽构件到可视化编辑器中； 4. 在编辑器中对构件进行基础属性配置（如文本构件的文字内容，颜色，字体等）； 5. 进行数据源配置（如表格构件绑定后台sqlMap查询）； 6. 进行事件处理（如表格构件绑定单击事件、双击事件等）； 7. 绑定页面逻辑（对应页面加载操作，可绑定页面逻辑，进行页面初始化逻辑操作）； 8. 编译、部署 （点击保存操作，平台自动编译可视化网页形成的网页文件，并部署到服务器中）； 9. 生成网页 （最终可在服务中，生成网页文件，浏览器可访问查看）； PS: 1.很多人使用平台，主要难点在构件没有的情况下，构件封装对应他来说很麻烦。再次说明，平台提供自己在页面下写代码的功能。如果你不考虑构件重用性，扩展性，和维护性的情况下，只考虑开发速度的情况下，可以直接写代码。 2.进行可视化构件封装不一定有扩展性和可维护性（需要根据开发人员的能力和实际业务需求）。 3.平台支持直接编码方式写以前多页面模式的代码，开发时间短且构件严重不足，以完成开发任务为目的等的情景下的项目可以使用。 |
|
