【WebUI】最适合web开发者的易语言自绘方案

大兔崽子

老规矩 先贴来源，感谢大佬的源码奉献  

未闻花名webUI 验证页面 miniblink
https://bbs.125.la/forum.php?mod=viewthread&tid=14768919
(出处: 精易论坛)


书接上回，未闻花名 的这个WebUI 的交互写法很不方便。易语言 这边要想控制界面的变化。 会需要写非常多的  原生JS ，
众所周知，原生JS 又臭又长。所以 开发起来效率非常的不友好

于是乎，我在这个版本的基础上，进行了些许改进，  将易语言这边 作为程序的后端，只用来做 逻辑的处理
vue 这边 则专注于 前端的界面的开发，  这样 就实现了 前后的分离的开发模式

整个程序操作起来 也是异常的流畅，而且 界面开发 可以使用 css 效果也是出类拔萃， 下面请看VCR



代码方面，我将 webUI视图的载入  和  HP 服务器的功能  均分包塞进了  一个程序集里面去，  大多数的情况下
这俩个程序集 我们都不需要 有太多的修改了
业务部分的功能    只需要单独去操作  接口业务程序集即可




这儿程序集里面的 每个方法 就相当于是  提供给前端调用的 接口了，
接口方法  需要接收一个文本型参数，  以及 返回 json 格式的 文本型数据
接收的文本型参数  则是接口传递过来的参数  参数例如：  name=123&pwd=123   或者  {"name":"123","pwd":"123"}

接口方法 书写完毕后，  还需要在  业务路由绑定  方法中  ，将接口方法 给添加进路由中，暴露给服务器访问。
路由中可以设置 请求类型，以及 接口是否需要鉴权   如果是需要鉴权的情况下，  
在调用接口方法之前，  程序会先调用一下  登录权限认证   认证会比对登录时候的生成的token  如果不相等 则返回 401  
通知前端去前往登录页面




大体上介绍就是这样啦。   易语言这边  就只需要 专心关注  业务逻辑  而不需要 关心  界面的呈现
vue 这边 也可以做到跟类似其它语言做配合一样的交互开发


========================以上是优点=====================================
========================以下是缺点=====================================

似乎是  miniblink  模块的兼容性问题。   在vue 的实际开发途中，  我就发现  无法使用 axios 包 ，以及  element-plus  无法全量导入，
（在浏览器上访问 是正常的，用易语言启动的时候  就显示不正常，窗口无法显示出来，似乎有报错，但是 我没有找到这个模块的 输出报错的功能，这对开发相当的不友好）

不过  无法使用axios  也不是什么大问题。   已经使用 fetch  进行替代了，但是 不能使用 element-ui  等 这些 常见的 ui 框架的话，  就意味着页面都要手搓样式了。
这还是有点小小的遗憾  （现在用的UI框架是 vant  常用于移动端的开发）



  呐！废话一大堆，  最后来看成果吧

游客，如果您要查看本帖隐藏内容请回复

现阶段， vue 与易语言的 直接交互  就只有 窗口 顶部的那几个  控制按钮了， （最大，最小化，关闭）  所以 如果  miniblink 的兼容性如果是真的不行的话，
那只需要替换  这部分的 web浏览器载体即可，这个就有待有缘人来尝试了。

xmcx888

感谢分享，很给力！~

xmcx888

感谢分享，很给力！~

偶尔有点帅

开发起来效率非常

mmssel

感谢分享 赞一个 ！

mmssel

感谢分享，很给力！~

mmssel

感谢分享，学习了

我的yyy123

学习学习

shaoxing0117

        感谢分享，很给力！~

a277244390

好评 +6好评 +6