乐趣区

关于后端:DTCLOUDAMIS-快速实现图表应用

jiezi

前言

DTCLOUD 在低代码开发中，有着很多劣势，这里不做过多的论述，然而在图表方面还是有绝对有余，尽管自带了一些图表，也能够通过嵌入 VUE 或 H5 等形式嵌入图表，也有一些其余解决办法，总归有一些不足之处，作为一个对前端不感冒的人，总心愿可能找到一个 方便快捷的形式来解决国内罕用的图表展现，通过自己各种比照和测试，终于发现一种纯后 端方便使用的技术，就是百度开源的 amis 低代码前端框架。
以下内容来源于 amis 网站。
amis 是一个低代码前端框架，它应用 JSON 配置来生成页面，能够缩小页面开发工作量，极大晋升效率。

建设 amis 的初衷：对于大部分罕用页面，应该应用最简略的办法来实现，甚至不须要学习前端框架和工具。

为了实现用最简略形式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特益处是：

不须要懂前端：在百度外部，大部分 amis 用户之前素来没写过前端页面，也不会 JavaScript，却能做出业余且简单的后盾界面，这是所有其余前端 UI 库都无奈做到的；

不受前端技术更新的影响：百度外部最老的 amis 页面是 6 年多前创立的，至今还在应用，而当年的 Angular/Vue/React 版本当初都废除了，当年风行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，当初的保护老本会很高；

享受 amis 的一直降级：amis 始终在晋升细节交互体验，比方表格首行解冻、下拉框大数据下不卡顿等，之前的 JSON 配置齐全不须要批改；

能够齐全应用可视化页面编辑器来制作页面：个别前端可视化编辑器只能用来做动态原型，而 amis 可视化编辑器做出的页面是能够间接上线的。

amis 的其它亮点
提供残缺的界面解决方案：其它 UI 框架必须应用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能实现残缺性能开发，包含数据获取、表单提交及验证等性能，做进去的页面不须要通过二次开发就能间接上线；

大量内置组件（120+），一站式解决：其它 UI 框架大部分都只有最通用的组件，如果遇到一些略微不罕用的组件就得本人找第三方，而这些第三方组件往往在展示和交互上不统一，整合起来成果不好，而 amis 则内置大量组件，包含了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后盾页面开发只须要理解 amis 就足够了；

反对扩大：除了低代码模式，还能够通过自定义组件来裁减组件，实际上 amis 能够当成一般 UI 库来应用，实现 90% 低代码，10% 代码开发的混合模式，既晋升了效率，又不失灵活性；

容器反对有限级嵌套：能够通过嵌套来满足各种布局及展示需要；

经验了长时间的实战考验：amis 在百度外部失去了宽泛应用，在 6 年多的工夫里创立了 5 万页面，从内容审核到机器治理，从数据分析到模型训练，amis 满足了各种各样的页面需要，最简单的页面有超过 1 万行 JSON 配置。

amis 不适宜做什么？
应用 JSON 有长处但也有显著毛病，在以下场合并不适宜 amis：

大量定制 UI：JSON 配置使得 amis 更适宜做有大量常见 UI 组件的页面，但对于面向一般客户（toC）的页面，往往谋求个性化的视觉效果，这种状况下用 amis 就不适合，实际上绝大部分前端 UI 组件库也都不适宜，只能定制开发。

极为简单或非凡的交互：

有些简单的前端性能，比方 可视化编辑器，其中有大量定制的拖拽操作，这种须要依赖原生 DOM 实现的性能无奈应用 amis。

一个简略示例

以公司的一个热力求利用来说，我能够通过简略的低代码实现两个数据的柱状图显示，一个是设施以后人数，一个是设施历史人数。
图例见下：

相干前端代码不过 28 行，见上面截图。

后端只有申明路由就可应用。这里不做展现。接口数据做好后，也能够同时给其余前端 调用，实现一次开发，多端应用的性能。

如何从零开始在 DTCLOUD 外面实现 amis 性能

一、装置 python 下 amis 反对包

pip install amis

二、依照新建利用的办法，新建一个 DTCLOUD 利用，本文以 dtb_amis_demo 为例子，逐渐解说。

  1. 整体目录见下图，其中 versions 目录和内容请疏忽。
  2. amis_json 目录，该目录寄存 amis 申明文件，本 demo 寄存了一个 amis_json.py 文件，内容如下：

这里稍做解释，具体的解释请见 amis 官网。
第一个 type:page，这个是顶层容器。body 示意该容器外面的内容。
第二个 type:chart，示意是 page 外面有一个 chart 要显示。
api 是接口地址。
Interval 是这个 chart 刷新工夫(毫秒)。专一后端的同学是否感觉非常简单？

  1. controllers 目录，为了不便大家看起来容易学习，就只放了一个 controllers.py 文件，理论在我的项目工程中，须要适当优化。

代码一：导入包和申明 amis 相干文件门路

代码二：申明入口路由、载入 amis 文件并赋值、返回 html

代码三：申明数据入口，和返回 json 数据

  1. manifest .py 文 件
    这个外面没有什么特别之处，惯例内容就好。
  2. 申明文件，要害是 dtb_amis_demo 目录下的 init .py 文件，须要导入 controllers
    目录，而 controllers 外面的 init .py 文件，须要导入之前写好的 controllers.py 文件。

三、所有相干文件写完后，重启 DTCLOUD，装置 dtb_amis_demo 模块，而后在浏览器上输出 127.0.0.1:9099/dtb/amis_demo 就能够看到成果了。

四、集成到某个利用中。网上有相干的办法，这里不做过多解释，集成后成果见下图。

后言

DTCLOUD 前端如何简单化，始终是我想解决的一个问题，寻寻觅觅中，终于找到一个绝对比拟好的解决方案，这里感激百度公司能开源这么好的低代码前端框架，也同时感激公 司同仁吴超和姜振建在百忙中抽空帮我解决了几个拦路虎，amis 性能十分弱小，也心愿 DTCLOUD 后端开发人员能通过 amis 把本人的成绩展现进去，而后和产品确认是否满足产品须要的性能，自我实现利用闭环，这样的接口能力满足其余前端利用调用的需要。

注：python 的 amis 包有个 bug 会导致图表有问题，我特意把解决办法放在最初，是心愿大家能残缺看残缺个文档，而不是就只看看结尾就入手去做，也是心愿咱们在做任何事件之前 能仔细起来。
该办法是吴超找到的长期解决办法，暂未提交给作者。

venv->include->lib->site->packages->amis->templates->page.html
<script type="text/javascript">
    let amis_embed = amisRequire('amis/embed')
    let amisData = amis_embed.embed('#amisId', ${AmisSchemaJson}, {locale: "${locale}"});
</script>

作者：扶云星程

退出移动版