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

    目录

    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
  • 相关阅读:
    笔记记录--基于ccpd数据集利用Paddle OCR训练车牌检测模型
    HTML期末学生大作业-节日网页作业html+css+javascript
    搞了一个更完善的javaagent项目结构
    如何在本地上次文件到GitHub
    Vue3和Vue2的部分用法差异 (持续更新中)
    国外视频搬运素材去哪里找？可搬运下载国外的素材网站库分享
    掌握这7大技巧，让你秒变电路仿真软件达人！
    文件逻辑结构与物理结构对比（从用户，操作系统的角度）
    Python每日一练（牛客数据分析篇新题库）——第35天：分组聚合
    服务器硬件得基础知识介绍
  • 原文地址：https://blog.csdn.net/weixin_44302240/article/details/126538639