前面几篇都是在介绍结构化与非结构化的数据存储, 本篇换换口味介绍一下框架是如何实现前端组件化开发的. 首先得感谢 vue,ElementUI 等优秀的前端开源项目, 这些项目帮助作者快速实现了框架的两个前端工程 (IDE 及 web 应用) 的开发.
当初框架的设计目标是: 前端, 后端, 存储端统统一锅端, 为什么这么设计, 一方面是想减少开发人员对于开发环境及各类工具的安装配置时间, 另一方面是想消除各端之间的集成调试问题, 使开发人员更多的关注数据结构, 业务逻辑, 用户界面的设计与开发. 为了达成这一目标, 作者在框架的前端开发尝试过类似于 Winform 拖拉方式的界面生成, 但发现灵活性受到了极大的限制. 后来学习了 Vue 等项目, 确认了框架集成 Vue 及 ElementUI 来用于前端用户界面开发的方案.
一. 实现思路
由于框架的 IDE 是基于 Web 的, 如何实现带智能提示的代码编辑及如何实现界面的即时预览成为一个小小的挑战(作者熟悉 skia,gdi + 等方式画用户界面, 但不熟悉 Web 前端).
1. 实现代码编辑器
作者一开始想到 VS Code 是基于 Electron 的就看了一下源码, 结果发现微软从 VS Code 剥离了代码编辑器 https://microsoft.github.io/monaco-editor/ 项目, 具备了实现一个在线代码编辑器所需要的所有功能, 而且惊喜的是 monaco editor 自带了 html\JS\CSS 着色与智能提示.
2. 实现即时预览
在大体了解了 Vue 的原理后, 作者在 IDE 的视图设计器内实现了在线将 Vue 组件的代码编译转换为运行时代码, 类似于 Webpack 分别将模版, 脚本, 样式编译然后组合在一起形成一个 JS 包, 设计时发给预览窗口动态加载, 运行时则通过 Vue 的异步组件功能按需加载.
二. 实现效果
1. 组件开发
每个组件通过 ViewModel 关联, 开发完全等同于在线 Vue 组件开发, 这里不再过多描述. 需要注意的是样式统一为 Vue 的局部样式(scoped).
Tip1: 在代码编辑内 CMD+S 保存, CMD+1,CMD+2,CMD+3 分别切换模版, 脚本, 样式编辑;
Tip2: 点击顶部 "Preview" 在右侧显示预览窗口;
Tip3: 框架集成的 ElementUI 组件均注册为全局组件, 且前缀为 e-xxxx, 非默认的 el-xxxx.
2. 组件组合
组合其他子组件时, 需要先在脚本内注册局部组件, 如下图所示:
然后在模版内放置注册的子组件, 如下图所示:
3. 组件路由
每个视图模型默认是不加入路由表的(sys.Home 例外是默认的主页), 如果在运行时需要通过浏览器地址栏直接访问视图模型, 必须将视图模型加入路由表, 如下图所示:
Tip1: 自定义路径如果为空, 则使用默认路径, 如 http:// 地址 / App/index.HTML#/sys/EmploeeList; 不为空则为 http:// 地址 / App/index.HTML#/{自定义路径};
Tip2: 自定义名称支持多级, 如: PersonInfo/Address.
4. 服务集成
框架支持两种方式调用服务模型进行业务逻辑处理:
4.1 异步 await 方式:
4.2 异步 Promise 方式:
- export default class Home extends Vue {
- onclick() {
- sys.Services.HelloService.SayHello().then(res => {
- this.$message.info(res);
- }).catch(err => {
- this.$message.error(err);
- });
- }
- }
5. 组件调试
本想跟服务模型一样在服务端跑一个调试进程, 但考虑实现复杂暂直接利用浏览器的调试功能. 另由于作者的半吊子 Web 前端水平, 暂没有搞定 sourcemap, 所以浏览器调试器内显示的源码是视图设计器编译转换过后的, 比较丑陋, 具体参考下图所示:
Tip: 在调试器 Sources 面板快捷键 CMD+p 然后输入 {应用名}.{视图名} 如 sys.Home.JS 可以快速定位编译转换后的源码.
三. 本篇小结
目前实现的部分用来开发网站, 中后台系统, 微信公众号之类的应用是没有问题的, 待将来 Google 开源了 Hummingbird 后作者还想在 IDE 内实现移动 App 的用户界面开发. 目标很远大, 道路还很漫长, 待作者整理好前端工程的代码后将率先开源, 希望感兴趣的同志共同参与. 如果您有问题或 Bug 报告, 请留言或在 GitHub https://github.com/enjoycode/appbox.deploy 提交 Issue.
来源: https://www.cnblogs.com/BaiCai/p/10477794.html