• 推荐一款专用低代码工具，一天开发一个系统不是梦

    目录

    Yao简介

    安裝

    使用

    #基本使用

    #创建数据模型

    编写接口

    编写界面

    #总结

    参考资料

     

    之前写过一篇关于阿里的低代码工具LowCodeEngine 的文章，发现大家还是挺感兴趣的。最近又发现了一款很有意思的低代码工具Yao，支持使用JSON的形式开发管理系统，不仅可以用来开发后端API，还能用来开发前端界面，简洁而且高效，推荐给大家！

    Yao简介

    Yao是一款Go语言驱动的低代码应用引擎，目前在Github上已有3.8k+Star！使用该框架，你可以通过JSON完成90%的接口和页面开发，用来开发管理系统正合适！Yao的名字源于汉字爻(yáo)，是构成八卦的基本符号，看样子作者对八卦还是挺有研究的。

    下面使用使用Yao开发的界面效果图，暗黑风格，还是挺炫酷的！

     

    安裝

    使用Docker来安装Yao是非常方便的，下面我们就采用此种方式在Linux上安装它！

    • 首先下载Yao的Docker镜像；

    docker pull yaoapp/yao:0.9.1-amd64-dev

    1

    • 然后使用如下命令运行Yao容器；

    1. docker run --name yao \
    2. -p 5099:5099 \
    3. -v /mydata/yao:/data/app \
    4. -d yaoapp/yao:0.9.1-amd64-dev

    1
    2
    3
    4

    • 由于Yao命令工具被安装在了Docker容器内部，当我们使用它时需要先进入容器：

    docker exec -it yao /bin/bash

    1

    • 比如说在容器中使用yao version命令来查看版本。

     

    使用

    接下来介绍下Yao的使用，我们将以mall项目中的品牌管理功能为例，使用Yao来开发下试试！

    #基本使用

    首先还是熟悉下Yao的基本使用吧！

    • 直接进入容器的/data/app目录下，使用如下命令初始化项目；

    1. cd /data/app  # 进入项目目录
    2. yao init # 运行初始化程序

    1
    2

    • Yao将自动生成如下目录，使用ll命令查看下项目的目录结构：

    • 接下来使用yao migrate命令创建数据库表，项目中默认有张测试用的pet表：

    • 然后使用如下命令初始化菜单；

    yao run flows.setmenu

    1

    • 接下来使用yao start命令启动服务，控制台输出内容如下；

     

    • 项目启动成功后就能进行访问了，默认账号密码如下，访问地址：http://192.168.3.105:5099/xiang/login/admin

    1. 账号：xiang@iqka.com
    2. 密码：A123456p+

    1
    2

    • 登录成功后我们可以发现默认有个测试用的宠物管理的功能；

     

    • 还有一个用户管理功能；

    • 还有一个菜单管理功能，这些都是基础功能，我们之后会用到。

    #创建数据模型

    下面我们将使用Yao创建数据模型并实现简单的CRUD操作。

    • 我们将通过实现一个简单的商品品牌管理功能，来体验下使用Yao开发应用的神奇之处；

    • 创建数据模型描述文件brand.mod.json，由于容器中的项目目录已经被挂载到了宿主机上，将该文件放到/mydata/yao/models目录下即可：

    1. {
    2. 	"name": "Brand",
    3. 	"table": { "name": "brand", "comment": "商品品牌表" },
    4. 	"columns": [
    5. 	  { "label": "ID", "name": "id", "type": "ID"},
    6. 	  { "label": "名称", "name": "name", "type": "string" },
    7. 	  { "label": "首字母", "name": "first_letter", "type": "string" },
    8. 	  { "label": "排序", "name": "sort", "type": "integer" },
    9. 	  { "label": "品牌故事", "name": "brand_story", "type": "string"},
    10. 	  { "label": "品牌logo", "name": "logo", "type": "string","length":255}
    11. 	],
    12. 	"values": [
    13. 	  { "name": "万和", "first_letter": "W", "sort": 0, "brand_story": "万和的故事","logo":"test"},
    14. 	  { "name": "三星", "first_letter": "S", "sort": 100, "brand_story": "三星的故事","logo":"test"},
    15. 	  { "name": "小米", "first_letter": "M", "sort": 200, "brand_story": "小米的故事","logo":"test"}
    16. 	],
    17. 	"option": { "timestamps": true, "soft_deletes": true }
    18. }

     

    • 使用Yao命令创建数据库表；

    1. cd /data/app
    2. yao migrate -n brand

    1
    2

    • 创建成功后，就可以使用yao命令来查询数据了，比如查询所有商品品牌；

    yao run models.brand.Get '::{}'

    1

    • 按主键查询商品品牌；

    yao run models.brand.Find 1 '::{}'

    1

    • 根据ID删除商品品牌；

    yao run models.brand.Delete 1

    1

    • 新增商品品牌；

    yao run models.brand.Create '::{ "name": "万和", "first_letter": "W", "sort": 0, "brand_story": "万和的故事","logo":"http://img.macrozheng.com/mall/images/20200607/5b07ca8aN4e127d2f.jpg"}'

    1

    • 修改商品品牌，这操作是不是有点像在命令行中使用SQL的感觉？

    yao run models.brand.Save '::{"id":2,"brand_story":"修改品牌故事"}'

    1

     

    编写接口

    下面我们将使用Yao来开发后端接口，这里将实现一个分页查询和保存接口。

    • 首先编写接口描述文件brand.http.json，放入/mydata/yao/apis文件夹下；

    1. {
    2.   "name": "Brand",
    3.   "version": "1.0.0",
    4.   "description": "商品品牌管理接口",
    5.   "guard": "bearer-jwt",
    6.   "group": "brand",
    7.   "paths": [
    8.     {
    9.       "path": "/search",
    10.       "method": "GET",
    11.       "guard": "-",
    12.       "process": "models.brand.Paginate",
    13.       "in": [":query-param", "$query.page", "$query.pagesize"],
    14.       "out": {
    15.         "status": 200,
    16.         "type": "application/json"
    17.       }
    18.     },
    19.     {
    20.       "path": "/save",
    21.       "method": "POST",
    22.       "guard": "-",
    23.       "process": "models.brand.Save",
    24.       "in": [":payload"],
    25.       "out": {
    26.         "status": 200,
    27.         "type": "application/json"
    28.       }
    29.     }
    30.   ]
    31. }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    • 测试下分页查询接口；

    curl 'http://192.168.3.105:5099/api/brand/search?page=1&pagesize=1&where.name.match=小米'

    1

     

     

    • 再测试下保存接口，接口开发确实简单了！

    1. curl -X POST http://192.168.3.105:5099/api/brand/save
    2.    -H 'Content-Type: application/json'
    3.    -d '{ "name": "新品牌", "first_letter": "X", "sort": 200, "brand_story": "新品牌的故事","logo":"test"}'

    1
    2
    3

     

    编写界面

    下面我们将使用Yao实现品牌管理的前端界面，还是非常简单的！

    • 编写数据表格描述文件brand.tab.json，放入/mydata/yao/tables文件夹下；

    1. {
    2. 	"name": "Brand",
    3. 	"version": "1.0.0",
    4. 	"decription": "Brand admin",
    5. 	"bind": {
    6. 		"model": "brand"
    7. 	},
    8. 	"apis": {},
    9. 	"columns": {
    10. 		"ID": {
    11. 			"label": "ID",
    12. 			"view": {
    13. 				"type": "label",
    14. 				"props": {
    15. 					"value": ":id"
    16. 				}
    17. 			}
    18. 		},
    19. 		"Name": {
    20. 			"label": "Name",
    21. 			"view": {
    22. 				"type": "label",
    23. 				"props": {
    24. 					"value": ":name"
    25. 				}
    26. 			},
    27. 			"edit": {
    28. 				"type": "input",
    29. 				"props": {
    30. 					"value": ":name"
    31. 				}
    32. 			}
    33. 		},
    34. 		"FirstLetter": {
    35. 			"label": "FirstLetter",
    36. 			"view": {
    37. 				"type": "label",
    38. 				"props": {
    39. 					"value": ":first_letter"
    40. 				}
    41. 			},
    42. 			"edit": {
    43. 				"type": "input",
    44. 				"props": {
    45. 					"value": ":first_letter"
    46. 				}
    47. 			}
    48. 		},
    49. 		"Sort": {
    50. 			"label": "Sort",
    51. 			"view": {
    52. 				"type": "label",
    53. 				"props": {
    54. 					"value": ":sort"
    55. 				}
    56. 			},
    57. 			"edit": {
    58. 				"type": "input",
    59. 				"props": {
    60. 					"value": ":sort"
    61. 				}
    62. 			}
    63. 		}
    64. 	},
    65. 	"filters": {
    66. 		"Keywords": {
    67. 			"label": "输入搜索",
    68. 			"bind": "where.name.match",
    69. 			"input": {
    70. 				"type": "input",
    71. 				"props": {
    72. 					"placeholder": "请输入关键词"
    73. 				}
    74. 			}
    75. 		}
    76. 	},
    77. 	"list": {
    78. 		"primary": "id",
    79. 		"layout": {
    80. 			"columns": [
    81. 				{
    82. 					"name": "ID",
    83. 					"width": 80
    84. 				},
    85. 				{
    86. 					"name": "Name",
    87. 					"width": 100
    88. 				},
    89. 				{
    90. 					"name": "FirstLetter",
    91. 					"width": 200
    92. 				},
    93. 				{
    94. 					"name": "Sort"
    95. 				}
    96. 			],
    97. 			"filters": [
    98. 				{
    99. 					"name": "Keywords"
    100. 				}
    101. 			]
    102. 		},
    103. 		"actions": {
    104. 			"pagination": {
    105. 				"props": {
    106. 					"showTotal": true
    107. 				}
    108. 			}
    109. 		},
    110. 		"option": {
    111. 			"operation": {
    112. 				"unfold": true
    113. 			}
    114. 		}
    115. 	},
    116. 	"edit": {
    117. 		"primary": "id",
    118. 		"layout": {
    119. 			"fieldset": [
    120. 				{
    121. 					"columns": [
    122. 						{
    123. 							"name": "Name",
    124. 							"width": 8
    125. 						},
    126. 						{
    127. 							"name": "FirstLetter",
    128. 							"width": 8
    129. 						},
    130. 						{
    131. 							"name": "Sort",
    132. 							"width": 8
    133. 						}
    134. 					]
    135. 				}
    136. 			]
    137. 		},
    138. 		"actions": {
    139. 			"cancel": {},
    140. 			"save": {},
    141. 			"delete": {}
    142. 		}
    143. 	}
    144. }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144

    • 接下来就可以直接访问界面了，访问地址：http://192.168.3.105:5099/xiang/table/brand

    • 如果你想这个功能在菜单中显示的话，还需要在菜单设置中添加它。

    #总结

    今天体验了一把Yao，确实是一款很有想法的低代码功工具。使用者只需要使用JSON就可以创建数据库、开发后端API和前端界面，极大地提高了开发效率。不过感觉Yao也有一些不足之处，比如说目前只支持暗色主题，还有就是JSON写错了基本没提示，也没有专门的可以提示语法的开发工具！

     

    参考资料

    • 项目地址：https://github.com/YaoApp/yao
    • 官方文档：https://yaoapps.com/doc
  • 相关阅读:
    金仓数据库 KingbaseES 客户端编程接口指南 - JDBC（11. JDBC 示例说明）
    R语言ggplot2可视化：使用ggpubr包的ggbarplot函数可视化柱状图、palette参数自定义不同水平柱状图边框以及填充的颜色
    查询效率提升10倍！3种优化方案，帮你解决MySQL深分页问题
    c++11 thread
    Leetcode1971. 寻找图中是否存在路径
    深度解读：金融企业容器云平台存储如何选型
    城管视频ai分析系统
    PVT论文Pytorch代码解读
    RocketMq源码分析（八）--消息消费流程
    Ansible 企业级自动化运维实战
  • 原文地址：https://blog.csdn.net/weixin_44302240/article/details/126538639