DTCLOUD+AMIS 快速实现图表应用

最新推荐文章于 2024-05-31 19:31:11 发布
最新推荐文章于 2024-05-31 19:31:11 发布
阅读量354 收藏 1
点赞数
分类专栏： DTCloud 文章标签： 开发语言 DTCLOUD
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ekcchina/article/details/130038149
版权

前言

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>

作者：扶云星程

中亿丰数字科技集团有限公司
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
全网详细介绍百度低代码框架amis及实例讲解
念兮为美
04-23 6227
百度公司的低代码平台产品叫爱速搭，amis是爱速搭团队开源的前端低代码框架，爱速搭应用中的页面都是基于amis渲染的，同时爱速搭平台自身的绝大部分页面也是基于amis开发。注意是大部分不是全部哦，也就是项目还是离不开专业开发的。amis的定位是前端UI框架，通过JSON配置生成各种后台页面，甚至可以不需要了解前端，类似于ElementAnt Design，可以基于它快速开发前端页面，但需要自己整合到自己内部系统中，并且实现路由功能。
Sanic+Amis快速搭建web服务 presentation
06-16
html格式的Sanic介绍，可用作技术分享
Sanic + Amis + Tortoise 的高速高效后台管理SA-Admin
ViniJack的博客
09-26 756
依赖 Sanic 为基础，利用了低代码框架 AMIS 来实现前端，便捷的解决了后端人员配置前端的麻烦，也通过 Sanic 的强大和轻便使得后端管理器可以覆盖更大的范围实现更强的功能
amis-summary：Amis几种使用总结
03-04
amis--使用总结 总结了Amis一些使用技巧，帮助初学者入门 当前版本Amis 1.1.0 演示预览： 支持了snowpack，可10秒内启动 SnowPack启动： yarn && yarn snowpack WebPack启动，请耐心等待... react-app-rewired更改为webpack-dev-server，方便扩展 yarn && yarn server 整理的内容包括： 1. HelloWorld（基于Create React App） 文件路径： 2. Amis基本使用 提供AmisRender用来所有页面进行注册使用。 3. Amis组件通信 3.1 target-Name方式 3.2开拓方式（非官方方式） JSSDK使用方式会返回scope，并且可以scope.getComponentByName（“ form1”）方式获取组件实例， l
amis源码 数据域 数据链解析
最新发布
qq_42152032的博客
05-31 752
进行预处理向下传递了rest.store(即this.props.store父组件store) 和 subProps.data||rest.data, 最终调用了父组件render(即Root.tsx中renderChild方法，最终走渲染)Object.keys只能取到props的key(不检测原型链)。同时会props传递 data={this.store.data},store={this.store}, scope={this.store.data}下去。
amis的安装使用
H_hl2021的博客
04-14 5206
amis地址：amis - 低代码前端框架 使用vscode运行amis代码 1.下载安装node 下载 | Node.js (nodejs.org) 2.2.安装完成以后，打开命令行，输入node -v来判断是否安装成功 3.在安装node的时候，npm包管理器会自动安装，我们在命令输出 npm -v 看看是否安装成功 4.打开VSCode,打开一个文件夹,这里我们在D盘新建了一个名为"hhlamis"的文件夹 5.在命令行npm install amis...
amis:amis编辑器生成JSON使用方法。
Alan0728的博客
07-29 7906
上一篇文章我们讲到 amis如何让用户自由更改的方法，不通过起前端同学重新更改代码打包部署的操作。https://blog.csdn.net/Alan0728/article/details/119213559?spm=1001.2014.3001.5502 这篇文章我们看一下amis如何生成JSON 首先打开amis 可视化编辑器, 在线体验：http://aisuda.github.io/amis-editor-demo 点击进去后 左侧是组件 通过托拉拽到中间内容部分，完成一个布...
【技术分享】Sanic+Amis：3天快速搭建一个web服务
热门推荐
be5yond的博客
06-16 1万+
前言 测试工作中，需要搭建一些生产力小工具来提高工作效率。 基于web的服务，无需终端可多人协作，易部署，成为第一选择。 但是
基于 SpringBoot2 magic-api Vue3 Element Plus amis3.0 快速开发
04-09
开发者可以利用SpringBoot2处理后端逻辑，通过magic-api进行API管理和交互，前端则依赖Vue3和Element Plus创建用户界面，再结合Amis3.0实现快速的页面构建。文件结构清晰，资源配置合理，确保了项目的稳定运行和开发...
amis-admin-demo-vue:amis官方demo的vue实现版本
03-10
amis-admin-demo-vue ...这是基于官方应用模板的VUE实现版本。 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
基于Mybatis Plus、 Spring Boot 和 Amis 的图书管理系统源码.zip
05-23
Spring Boot的核心特性包括自动配置、内嵌Web服务器（如Tomcat）、健康检查以及starter依赖等，使得开发者可以快速构建独立运行的应用。 其次，Mybatis Plus是一个对Mybatis的轻量级扩展，它在Mybatis的基础上提供...
amis-editor-demo:amis 可视化编辑器示例 http
04-28
amis-editor-demo amis 可视化编辑器, 在线体验： 要使用编辑器必须熟悉 React，如果不了解建议使用。 本地运行这个项目 npm i 安装依赖 npm start 开服务 npm run dev 开始编译，等编译出现时间信息后就可以刷新页面看效果了。 在其他项目中使用 amis-editor npm i amis-editor 使用 方法 import {Editor} from 'amis-editor'; render() { return ( <Editor> ) } 属性说明： value: any 值，amis 的json 配置。 onChange: (value: any) => void。 当编辑器修改的时候会触发。 preview?: boolean 是否为预览状态。 autoFocus?
AMis一种基于特定JSON格式生成MIS页面的工具
08-09
AMis 一种基于特定 JSON 格式生成 MIS 页面的工具
AMIS为消费和汽车应用推出新颖环境光线传感器
01-19
AMIS为电子显示器和汽车应用推出了其环境光线传感器——AMIS 74980x。传感器模拟人眼，提供均衡于环境光线的输出，可使显示控制器调节亮度和对比度。这不仅能帮助减缓高亮度和反光带来的眼睛疲劳，还能控制能量消耗...
amis的实战
慢行的蜗牛
09-04 2941
amis、低代码、js
AMIS + httplib 快速搭建前后端
harry49的博客
06-16 2992
本人毫无前端编程经验，只会用C++写一些简单代码，因此想要从头开发一个简单的前端web，从头学html、css、vue……算了，直接放弃。那有没有其他办法呢？ 答案是有，因此才有了本文。 本文适用人群：无前端开发经验、会C++进行，需求简单...............
工作中用到的amis组件以及使用方法
蒙奇不想敲代码的博客
12-05 3508
入职新公司一个多月了，把自己学到的知识总结了一下，希望能对有些正在学amis的同学有帮助，哪怕只有一个人也行哈哈，加油加油！
amis开发文档-快速熟悉文档
努力学习前端的阿猪
12-25 2074
文章目录前言一、amis开发文档二、使用步骤 前言 amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。 一、amis开发文档 amis开发文档 amis中提供的组件 在amis中自定义样式 通过示例更好的了解amis 二、使用步骤 更新ing… ...
amis+django+token实现用户认证
05-13
要使用AMis和Django结合Token实现用户认证，您可以按照以下步骤进行操作： 1. 安装Django框架和django-rest-framework库。 2. 创建一个Django应用程序并配置好数据库。您可以使用以下命令创建一个名为'myapp'的Django应用程序。 ``` django-admin startapp myapp ``` 3. 在Django项目的settings.py文件中配置应用程序和REST框架。 ```python INSTALLED_APPS = [ ... 'rest_framework', 'myapp', ] REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': [ 'rest_framework.authentication.TokenAuthentication', ], 'DEFAULT_PERMISSION_CLASSES': [ 'rest_framework.permissions.IsAuthenticated', ], } ``` 4. 创建一个用户模型并迁移数据库。 ```python from django.db import models from django.contrib.auth.models import AbstractBaseUser, BaseUserManager class UserManager(BaseUserManager): def create_user(self, email, password=None): if not email: raise ValueError('Users must have an email address') user = self.model( email=self.normalize_email(email), ) user.set_password(password) user.save(using=self._db) return user def create_superuser(self, email, password): user = self.create_user( email, password=password, ) user.is_admin = True user.save(using=self._db) return user class User(AbstractBaseUser): email = models.EmailField(verbose_name='email address', max_length=255, unique=True) is_active = models.BooleanField(default=True) is_admin = models.BooleanField(default=False) objects = UserManager() USERNAME_FIELD = 'email' REQUIRED_FIELDS = [] def __str__(self): return self.email def has_perm(self, perm, obj=None): return True def has_module_perms(self, app_label): return True @property def is_staff(self): return self.is_admin ``` 5. 创建一个视图函数来处理用户登录和创建新用户。 ```python from django.contrib.auth import authenticate, login from rest_framework.authtoken.models import Token from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['POST']) def login_view(request): email = request.data.get('email') password = request.data.get('password') user = authenticate(request, email=email, password=password) if user is not None: login(request, user) token, created = Token.objects.get_or_create(user=user) return Response({'token': token.key}) else: return Response({'error': 'Invalid credentials'}) @api_view(['POST']) def register_view(request): email = request.data.get('email') password = request.data.get('password') user = User.objects.create_user(email=email, password=password) token, created = Token.objects.get_or_create(user=user) return Response({'token': token.key}) ``` 6. 创建AMis页面，使用axios库发送POST请求到这些视图函数以进行用户登录和注册。 ```javascript import React, { useState } from 'react'; import axios from 'axios'; import { amis } from '@amis/core'; function LoginForm(props) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await axios.post('/api/login/', { email, password }); localStorage.setItem('token', response.data.token); props.onSuccess(); } catch (error) { console.error(error); } }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <button type="submit">Login</button> </form> ); } function RegisterForm(props) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await axios.post('/api/register/', { email, password }); localStorage.setItem('token', response.data.token); props.onSuccess(); } catch (error) { console.error(error); } }; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="email">Email</label> <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div> <label htmlFor="password">Password</label> <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <button type="submit">Register</button> </form> ); } const schema = { type: 'page', body: [ { type: 'form', title: 'Login', mode: 'horizontal', api: { method: 'post', url: '/api/login/', data: { email: '${email}', password: '${password}', }, adaptor: (payload) => ({ ...payload.data, success: true }), }, controls: [ { type: 'email', name: 'email', label: 'Email', required: true, }, { type: 'password', name: 'password', label: 'Password', required: true, }, { type: 'submit', label: 'Login', primary: true, }, ], }, { type: 'form', title: 'Register', mode: 'horizontal', api: { method: 'post', url: '/api/register/', data: { email: '${email}', password: '${password}', }, adaptor: (payload) => ({ ...payload.data, success: true }), }, controls: [ { type: 'email', name: 'email', label: 'Email', required: true, }, { type: 'password', name: 'password', label: 'Password', required: true, }, { type: 'submit', label: 'Register', primary: true, }, ], }, ], }; function App() { const [token, setToken] = useState(localStorage.getItem('token')); const handleSuccess = () => { setToken(localStorage.getItem('token')); }; const handleLogout = () => { localStorage.removeItem('token'); setToken(null); }; return ( <div> {token ? ( <div> <p>You are logged in.</p> <button onClick={handleLogout}>Logout</button> </div> ) : ( <div> <LoginForm onSuccess={handleSuccess} /> <RegisterForm onSuccess={handleSuccess} /> </div> )} <amis schema={schema} /> </div> ); } export default App; ``` 以上就是使用AMis和Django结合Token实现用户认证的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

中亿丰数字科技集团有限公司

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值