整个可视化搭建系统分为三部分，分别是配置页(setting),视图页(view) 和 json schema。配置页生成 json schema，视图页消费 json schema

基本原理

通过json schema保存用户所编辑的内容并保存到数据库，渲染页面时再从数据库读取所需要的页面数据

如何使用

在开发环境 json schema 保存在数据库，要在测试环境和生产环境使用 json schema 生成页面，需要将 json schema 下载到项目中的一个特定文件夹中，当在浏览器中访问这个视图页时，会根据页面 ID 到下载好的静态文件中读取页面的 json schema，然后视图页将页面渲染出来

从静态文件中读取配置代码如下：

import("@static/jsons/tables/table_string_"+id+".json").then(fileContent=>{

console.log('配置数据：',fileContent)

})

json 文件中保存的 json schema 是一个字符串，但是在视图页渲染界面的时候需要的是一个对象，并且对象的某些字段必须是函数。为了将字符串转成需要的格式，我使用 new Function('return ’ + strConfig)() 来完成这一需求,简化代码如下：

functionparseStrConfig(jsonSchema){

returnnewFunction('return '+ jsonSchema)();

}

存在的不足

1.生产出的页面不能独立于页面搭建系统运行。要想在其他系统中使用生成的页面，必须在对应系统中使用 iframe 或者 single-spa 微前端技术引入页面搭建系统

2.页面的 json schema 没有与页面搭建系统独立。由于每创建一个页面就要该页面的 json schema 下载到页面可视化搭建系统中，这导致页面可视化搭建系统需要被频繁的发布，但是页面可视化搭建系统的业务功能相对稳定