前端采用的技术是，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定义的扩展性。或者什么问题。欢迎讨论一下。让我增长自身姿势
当做个人的一个记录
