通过json生成前端页面

前端采用的技术是，vue + element

所以后端只需要根据这个json。然后生成element组件的的文件就可以了

先看一下我的项目目录结构

项目目录结构

UML 依赖关系

最后生成的页面代码

首先这只是一个简单的demo。需要源码在GitHub上

https://github.com/youaodu/shark-api

首先说明这只是后端代码。前端现在并不是很完善。有兴趣的前端大牛可以一起搞一下

后面简单讲一下代码

生成页面的json

首先可以看到。这个里面有个labels。数组然后我们看代码

ComponentDispatch 的代码

获取了labels的一个数组。然后遍历。根据各个组件的类型获取到各个组件的解析器

然后进入组件解析看一下

Input组件的解析代码

其中判断了。简单的是否是双向绑定

这一步生成一个一个的VueLabel对象

生成了一个一个的VueLabel之后。传到之前的分发

dispatch处理页面方式

之前的json中规定了。页面的方式

所以。这里取到的是vue。通过vue去工厂中取到了。vue的。加载器。然后。转换页面

vue 加载器中，生成标签的过程

生成以后会根据freeMark的模板生成一个.vue 文件 然后。通过流读入。可以获取其中的字符

然后进行返回。前端通过http-vue-loader 进行动态渲染。显示即可

当前项目即是一个思想。且是一个demo。并不能投入使用。随着后期开发。会不断扩展对element的组件的解析器。

因为本人是后端。对前端的东西并不是很精通。希望。如果前端的大佬们发现。json定义的扩展性。或者什么问题。欢迎讨论一下。让我增长自身姿势

当做个人的一个记录