如何搭建一个功能复杂的前端配置化框架(一)

13651657101 发布于2019-08-02 10:51 / 3140人阅读

摘要：我们只需要配置一下就能生成一个页面，这个如何实现呢我们慢慢道来技术选型框架搭建分析页面只需一个容器，可以理解为一个，在加载页面的时候，异步去分布式配置中心或其他获取页面配置，页面配置单纯的就是个字符串。

背景
现在很多公司主要业务是c端，拥有巨大用户和流量的同时，b端业务不可或缺，CRM，CMS，运营配置化管理平台，数据可视化平台，各种审批平台。这些系统都有几个共同的特点：需求多，变化快，查询页，列表页，提交页面。而这些页面都是相似的，UI要求低，功能简单。所以我们能不能开发一套配置化平台解放生产力呢？答案是肯定的。我们只需要配置一下Json就能生成一个页面，这个如何实现呢？我们慢慢道来......

技术选型
Nodejs + Vue／React + Json schema

框架搭建

分析：页面只需一个容器，可以理解为一个Div，在加载页面的时候，异步去分布式配置中心（Redis或其他）获取页面配置，页面配置单纯的就是个Json字符串。配置数据取出来之后，我们开始解析Json，包括Json的正确性，合法性等。最后再通过Vue组件的Render方法渲染页面，看到这里，很多人会有如下的疑惑：

Json格式如何定义？

Json如何和组件对应起来？

组件是怎么渲染出来的？

组件间如何通信？

支持复杂的逻辑交互吗？

框架创新及优化

1.支持无限级组件嵌套渲染

2.简化组件间通信

3.页面配置实时预览

疑问解答

1.Json格式如何定义？

这个没有统一的标准，完全按照个人喜好，给大家展示一下我的定义：

{
 "uniqueId": "mt-form",
 "attrs": {
 "style": {
 "paddingBottom": "15px",
 "paddingLeft": "5px"
    }
  }
}

2.Json如何和组件对应起来？我们先看一个自定义组件Form.vue的代码：

新建组件库模块ComponentsLib.js，我们把自定义组件通过这个模块暴露出去：

/**
 * 引入所有公共组件库
 */
import Form from "./Form.vue"

module.exports = {
 /**
   * 对外暴露组件，名称id必须唯一
   */
 "mt-form": Form`请输入代码`
}

3.组件是怎么渲染出来的

写了组件和暴露出组件之后，我们怎么渲染出来呢？通过Vue.component定义一个全局组件：

import Vue from "vue"
import ComponentsLib from "./ComponentsLib" // 暴露出来的组件库

/**
 * 注入全局的页面容器组件
 * 所有组件必须包裹在一个容器组件中
 */
Vue.component("page-container", {
 render: function (createElement) {
 return this.deepComponents(this.pageConfig, createElement)
  },
 methods: {
 deepComponents (pageConfig, createElement) {
 if (pageConfig) {
 return createElement(ComponentsLib[pageConfig.uniqueId], {
 ...pageConfig.attrs
        }, this.deepChildren(pageConfig.children, createElement))
      }
    },
 /**
     * 递归遍历所有子组件
     * @param {} pageConfig
     * @param {*} createElement
     */
 deepChildren (pageConfig, createElement) {
 if (!pageConfig) {
 return createElement("span")
      }
 if (pageConfig) {
 let children = []
 for (let i = 0; i < pageConfig.length; i++) {
 let item = pageConfig[i]
 if (item) {
  children.push(createElement(ComponentsLib[item.uniqueId], {
  ...item.attrs }, this.deepChildren(item.children, createElement)))
          }
        }
 return children
      }
    }
  },
 props: {
 pageConfig: {
 type: Object,
 required: true
    }
  }
})

可以看出主要的一点，我的组件通过组件库暴露出来，并且每个组件都有一个唯一的ID，而我在Json中配置的时候uniqueId就是对应我组件的唯一ID，这样通过Vue.component的Render方法，可以递归遍历渲染出我的组件，这样就能实现组件的无限级嵌套。

效果预览

服务器托管云服务器如何搭建一个自己的服务器搭建一个java框架一步步搭建框架 html如何搭建框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52604.html

如何构建大型的前端项目

摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。如何构建大型的前端项目 1. 搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：自动化构建代码，比如打包、压缩、上传等功能本地开发与调试，并有热替换与...

lykops 2019-08-29 16:56 评论0 收藏0
如何构建大型的前端项目

摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。如何构建大型的前端项目 1. 搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：自动化构建代码，比如打包、压缩、上传等功能本地开发与调试，并有热替换与...

plokmju88 2019-08-23 12:18 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0