推荐一款管理系统专用 低 代码工具,一天开发一个系统不是梦
Yao简介
Yao是一款Go语言驱动的低代码应用引擎,目前在Github上已有3.8k+Star!使用该框架,你可以通过JSON完成90%的接口和页面开发,用来开发管理系统正合适!Yao的名字源于汉字爻(yáo),是构成八卦的基本符号,看样子作者对八卦还是挺有研究的。
编辑切换为居中
添加图片注释,不超过 140 字(可选)
下面使用使用Yao开发的界面效果图,暗黑风格,还是挺炫酷的!
编辑切换为居中
添加图片注释,不超过 140 字(可选)
安裝
使用Docker来安装Yao是非常方便的,下面我们就采用此种方式在Linux上安装它!
首先下载Yao的Docker镜像;
docker pull yaoapp/yao:0.9.1-amd64-dev
然后使用如下命令运行Yao容器;
docker run --name yao \ -p 5099:5099 \ -v /mydata/yao:/data/app \ -d yaoapp/yao:0.9.1-amd64-dev
由于Yao命令工具被安装在了Docker容器内部,当我们使用它时需要先进入容器:
docker exec -it yao /bin/bash
比如说在容器中使用yao version命令来查看版本。
编辑切换为居中
添加图片注释,不超过 140 字(可选)
使用
接下来介绍下Yao的使用,我们将以mall项目中的品牌管理功能为例,使用Yao来开发下试试!
基本使用
首先还是熟悉下Yao的基本使用吧!
直接进入容器的/data/app目录下,使用如下命令初始化项目;
cd /data/app # 进入项目目录 yao init # 运行初始化程序
Yao将自动生成如下目录,使用ll命令查看下项目的目录结构:
编辑切换为居中
添加图片注释,不超过 140 字(可选)
接下来使用yao migrate命令创建数据库表,项目中默认有张测试用的pet表:
编辑切换为居中
添加图片注释,不超过 140 字(可选)
然后使用如下命令初始化菜单;
yao run flows.setmenu
接下来使用yao start命令启动服务,控制台输出内容如下;
编辑切换为居中
添加图片注释,不超过 140 字(可选)
项目启动成功后就能进行访问了,默认账号密码如下,访问地址:http://192.168.3.105:5099/xiang/login/admin
账号:xiang@iqka.com 密码:A123456p+
登录成功后我们可以发现默认有个测试用的宠物管理的功能;
编辑切换为居中
添加图片注释,不超过 140 字(可选)
还有一个用户管理功能;
编辑切换为居中
添加图片注释,不超过 140 字(可选)
还有一个菜单管理功能,这些都是基础功能,我们之后会用到。
编辑切换为居中
添加图片注释,不超过 140 字(可选)
创建数据模型
下面我们将使用Yao创建数据模型并实现简单的CRUD操作。
我们将通过实现一个简单的商品品牌管理功能,来体验下使用Yao开发应用的神奇之处;
编辑切换为居中
添加图片注释,不超过 140 字(可选)
创建数据模型描述文件brand.mod.json,由于容器中的项目目录已经被挂载到了宿主机上,将该文件放到/mydata/yao/models目录下即可:
{ "name": "Brand", "table": { "name": "brand", "comment": "商品品牌表" }, "columns": [ { "label": "ID", "name": "id", "type": "ID"}, { "label": "名称", "name": "name", "type": "string" }, { "label": "首字母", "name": "first_letter", "type": "string" }, { "label": "排序", "name": "sort", "type": "integer" }, { "label": "品牌故事", "name": "brand_story", "type": "string"}, { "label": "品牌logo", "name": "logo", "type": "string","length":255} ], "values": [ { "name": "万和", "first_letter": "W", "sort": 0, "brand_story": "万和的故事","logo":"test"}, { "name": "三星", "first_letter": "S", "sort": 100, "brand_story": "三星的故事","logo":"test"}, { "name": "小米", "first_letter": "M", "sort": 200, "brand_story": "小米的故事","logo":"test"} ], "option": { "timestamps": true, "soft_deletes": true } }
使用Yao命令创建数据库表;
cd /data/app yao migrate -n brand
创建成功后,就可以使用yao命令来查询数据了,比如查询所有商品品牌;
yao run models.brand.Get '::{}'
编辑切换为居中
添加图片注释,不超过 140 字(可选)
按主键查询商品品牌;
yao run models.brand.Find 1 '::{}'
编辑切换为居中
添加图片注释,不超过 140 字(可选)
根据ID删除商品品牌;
yao run models.brand.Delete 1
编辑切换为居中
添加图片注释,不超过 140 字(可选)
新增商品品牌;
yao run models.brand.Create '::{ "name": "万和", "first_letter": "W", "sort": 0, "brand_story": "万和的故事","logo":"http://img.macrozheng.com/mall/images/20200607/5b07ca8aN4e127d2f.jpg"}'
编辑切换为居中
添加图片注释,不超过 140 字(可选)
修改商品品牌,这操作是不是有点像在命令行中使用SQL的感觉?
yao run models.brand.Save '::{"id":2,"brand_story":"修改品牌故事"}'
编辑切换为居中
添加图片注释,不超过 140 字(可选)
编写接口
下面我们将使用Yao来开发后端接口,这里将实现一个分页查询和保存接口。
首先编写接口描述文件brand.http.json,放入/mydata/yao/apis文件夹下;
{ "name": "Brand", "version": "1.0.0", "description": "商品品牌管理接口", "guard": "bearer-jwt", "group": "brand", "paths": [ { "path": "/search", "method": "GET", "guard": "-", "process": "models.brand.Paginate", "in": [":query-param", "$query.page", "$query.pagesize"], "out": { "status": 200, "type": "application/json" } }, { "path": "/save", "method": "POST", "guard": "-", "process": "models.brand.Save", "in": [":payload"], "out": { "status": 200, "type": "application/json" } } ] }
测试下分页查询接口;
curl 'http://192.168.3.105:5099/api/brand/search?page=1&pagesize=1&where.name.match=小米'
编辑切换为居中
添加图片注释,不超过 140 字(可选)
再测试下保存接口,接口开发确实简单了!
curl -X POST http://192.168.3.105:5099/api/brand/save -H 'Content-Type: application/json' -d '{ "name": "新品牌", "first_letter": "X", "sort": 200, "brand_story": "新品牌的故事","logo":"test"}'
编辑切换为居中
添加图片注释,不超过 140 字(可选)
编写界面
下面我们将使用Yao实现品牌管理的前端界面,还是非常简单的!
编写数据表格描述文件brand.tab.json,放入/mydata/yao/tables文件夹下;
{ "name": "Brand", "version": "1.0.0", "decription": "Brand admin", "bind": { "model": "brand" }, "apis": {}, "columns": { "ID": { "label": "ID", "view": { "type": "label", "props": { "value": ":id" } } }, "Name": { "label": "Name", "view": { "type": "label", "props": { "value": ":name" } }, "edit": { "type": "input", "props": { "value": ":name" } } }, "FirstLetter": { "label": "FirstLetter", "view": { "type": "label", "props": { "value": ":first_letter" } }, "edit": { "type": "input", "props": { "value": ":first_letter" } } }, "Sort": { "label": "Sort", "view": { "type": "label", "props": { "value": ":sort" } }, "edit": { "type": "input", "props": { "value": ":sort" } } } }, "filters": { "Keywords": { "label": "输入搜索", "bind": "where.name.match", "input": { "type": "input", "props": { "placeholder": "请输入关键词" } } } }, "list": { "primary": "id", "layout": { "columns": [ { "name": "ID", "width": 80 }, { "name": "Name", "width": 100 }, { "name": "FirstLetter", "width": 200 }, { "name": "Sort" } ], "filters": [ { "name": "Keywords" } ] }, "actions": { "pagination": { "props": { "showTotal": true } } }, "option": { "operation": { "unfold": true } } }, "edit": { "primary": "id", "layout": { "fieldset": [ { "columns": [ { "name": "Name", "width": 8 }, { "name": "FirstLetter", "width": 8 }, { "name": "Sort", "width": 8 } ] } ] }, "actions": { "cancel": {}, "save": {}, "delete": {} } } }
接下来就可以直接访问界面了,访问地址:http://192.168.3.105:5099/xiang/table/brand
编辑切换为居中
添加图片注释,不超过 140 字(可选)
如果你想这个功能在菜单中显示的话,还需要在菜单设置中添加它。
编辑切换为居中
添加图片注释,不超过 140 字(可选)
总结
今天体验了一把Yao,确实是一款很有想法的低代码功工具。使用者只需要使用JSON就可以创建数据库、开发后端API和前端界面,极大地提高了开发效率。不过感觉Yao也有一些不足之处,比如说目前只支持暗色主题,还有就是JSON写错了基本没提示,也没有专门的可以提示语法的开发工具!
参考资料
项目地址:https://github.com/YaoApp/yao
官方文档:https://yaoapps.com/doc
资源获取:
大家点赞、收藏、关注、评论啦 、查看
推荐一款管理系统专用 低 代码工具,一天开发一个系统不是梦相关推荐
- mac txt 换行符_推荐两款免费的网页代码编辑器(Win和Mac系统)
大家好,我们在修改PHP代码的时候,尽量不要使用系统自带的文本编辑器,更不能使用Word之类的字处理软件,应该是用"代码编辑器" .下面这个视频教程是我之前做的,没在WordPre ...
- 前端工程化精讲第七课 低代码工具:如何用更少的代码实现更灵活的需求?
在进入到这一课的内容之前先让我们来回顾下,通过脚手架工具生成初始化代码,以及通过 Snippet 工具生成代码片段的方式.两种方案的相同在于,通过简单的输入和选择就能获得预设后的项目代码.这种转化方式 ...
- 解放双手!推荐一款阿里开源的低代码工具,YYDS!
之前分享过一些低代码相关的文章,发现大家还是比较感兴趣的.之前在我印象中低代码就是通过图形化界面来生成代码而已,其实真正的低代码不仅要负责生成代码,还要负责代码的维护,把它当做一站式开发平台也不为过! ...
- 【推荐一款阿里开源的低代码工具,实用性极高!】
之前在我印象中低代码就是通过图形化界面来生成代码而已,其实真正的低代码不仅要负责生成代码,还要负责代码的维护,把它当做一站式开发平台也不为过!最近体验了一把阿里开源的低代码工具LowCodeEngin ...
- 有了这款低代码工具,开发可以告别996啦
最近低代码.零代码很火,网络一搜,各家都鼓吹自己零代码开发的平台.确实,近十年IT的发展以及互联网产品的推动,使得很多细分领域的工具都呈现出一种简单易用少开发轻量化的趋势. 笔者自己也在IT行业做了1 ...
- 微软低代码工具 Power Apps 配置不当,暴露3800万条数据记录
聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士 Upguard 研究院称,由于微软 Power Apps 默认配置安全性薄弱,敏感数据如 COVID-19 打疫苗情况.社保号码和邮件地址遭泄露 ...
- 顶级的 18 款开源的低代码开发平台,经典收藏
点击上方"Github中文社区",关注触达Github项目 文 | 白开水 出品 | OSC开源社区 低代码成了企追求的主流目标,与使用计算机编程语言构建应用程序的传统方法不同,低 ...
- 人人都是程序员?一边吐槽,一边却偷偷用,低代码工具真香
人人都是产品经理,这句话从15年就开始说了,意思是每个人都可以对产品(比如你使用的app,网页)进行设计,只需要对整个产品了解就可以. 那人人都是程序员呢? 很多人都知道,程序员加班是日常,久坐.掉发 ...
- 低代码工具是软件维护的噩梦?
作者 | Ben Hosking 译者 | 弯月 责编 | 欧阳姝黎 出品 | CSDN(ID:CSDNnews) 以下为译文: 截止到 2024 年 80% 的软件开发均由非专业人员完成 ...
最新文章
- java gmail smtp_通过JAVA中的Gmail SMTP服务器发送电子邮件
- c# 如何将字符串中用,分开的数字分别存入数组中
- 使用vue-cli快速构建项目--vue.js学习笔记1
- 全球及中国抓紧器行业十四五发展态势及前景规划建议报告2021-2027年版
- 如何绘制漂亮的多序列比对图片
- 拆解Mate 30 Pro,内部双重散热、铜管一体紫色防滚架,太酷了!
- [MyBatisPlus]MyBatisX插件
- Python《突破JS动态加载,成功爬取漫画》
- Java集合框架之四大接口、常用实现类,java基础面试笔试题
- C++_sizeof关键字_实型(也叫浮点型)---C++语言工作笔记011
- BZOJ 2456: mode
- JSONKit去警告
- $.getjson异常信息提示_【Java视频教程】day24-异常??????
- 英文XP系统安装中文包
- 图片识别不了小程序怎么办_【信息素养】教你怎么用微信小程序进行文字识别...
- 论文阅读《LSD-SLAM: Large-Scale Direct Monocular SLAM》
- 51单片机洞洞板用的visio图_怎样用洞洞板焊接一个向STC80c51或者AT89C51单片机里面烧录程序的电路板?...
- 第13期-在线的文章摘要生成器, 自己写了一个支持中文的
- 使用THREE.js制作一款3D游戏
- 不知如何选股?不知哪种指标策略可靠?量化分析比较DMA、DMI、MACD、KDJ、BOLL指标策略收益情况
热门文章
- mac txt 换行符_推荐两款免费的网页代码编辑器(Win和Mac系统)