本章节开发一个图书管理系统

#tips :在学习本教程之前,默认您已经搭建好开发环境

演示

图书管理系统

GitHub: https://github.com/YaoApp/demo-lms

Infra 一键部署: https://letsinfra.com/openapp/demo-lms

Part I:开始项目

第一步:初始化项目 yao init此时的目录结构为:

├─apis
├─data
├─db
├─flows
├─libs
├─logs
├─models
├─scripts
├─tables
├─ui
└─yao
└─icons

第二步:配置数据库文件 .env文件:

# 数据库配置
YAO_DB_AESKEY="KBPdcRn44LzykphsVM\*y"
YAO_DB_DRIVER=mysql
YAO_DB_PRIMARY="root:123456@tcp(127.0.0.1:3306)/test?charset=utf8mb4&parseTime=True&loc=Local" # 主库连接
YAO_DB_SECONDARY="root:123456@tcp(127.0.0.1.100:3306)/test?charset=utf8mb4&parseTime=True&loc=Local" # 主库连接

数据库字段含义:YAO_DB_PRIMARY=用户名:密码@tcp(数据库ip:端口)/数据库名??charset=utf8mb4&parseTime=True&loc=Local

配置修改完成后执行 yao migrate看看是否报错,要是没有报错说明连接成功!

Part II: 新建模型

第一步:新增models/category.mod.yao文件,写入以下内容:

查看源码

第二步:新增 models/book.mod.yao模型文件,并且关联模型分类category:

查看源码

第三步:执行yao migrate命令迁移数据表,出现以下结果,并且可以在数据库中看到对应数据表:

Update schema model: category (category)
Update schema model: xiang.user (xiang_user)
Update schema model: xiang.menu (xiang_menu)
Update schema model: xiang.workflow (xiang_workflow)
Update schema model: book (book)
✨DONE✨

Part III: 菜单配置

第一步:接下来初始化一下菜单,新建/flows/menu.flow.yao:

查看源码

第二部:执行命令 yao run flows.menu出现以下结果,并且可以在数据库中看到对应数据表:

Run: flows.menu
--------------------------------------
flows.menu Response
--------------------------------------
"done"
--------------------------------------
✨DONE✨

第三步:修改/app.json文件中的内容"admin": "/table/book",把登录后第一个显示的菜单改为书籍列表:

{
"name": "Yao",
"short": "Yao",
"description": "Another yao app",
"option": {
"nav_user": "xiang.user",
"nav_menu": "xiang.menu",
"hide_user": false,
"hide_menu": false,
"login": {
"entry": {
"admin": "/table/book"
}
}
}
}

Part IV: 新建表格

第一步:新建 tables/book.tab.yao代码如下:

查看源码

第二步:执行 yao start可以看到项目已经开始运行:

WebSocket(0)
---------------------------------
Yao development
---------------------------------
Root /mnt/shared/test
Frontend http://127.0.0.1:5099/
Dashboard http://127.0.0.1:5099/xiang/login/admin
API http://127.0.0.1:5099/api
Listening 127.0.0.1:5099
Watching: /mnt/shared/test/models
Watching: /mnt/shared/test/scripts
Watching: /mnt/shared/test/apis
Watching: /mnt/shared/test/libs
✨LISTENING✨
Watching: /mnt/shared/test/flows
Watching: /mnt/shared/test/tables

打开浏览器访问:http://127.0.0.1:5099/xiang/login/admin

输入默认账号 xiang@iqka.com 和密码A123456p+登录到后台可以看到书籍列表效果图: 书籍列表

第三步:新建书籍分类表格 tables/category.tab.yao代码:

查看源码

在命令行使用 ctrl+C停止 Yao 的服务,然后执行 yao start重启服务,打开浏览器刷新一下页面,点击分类菜单: 分类

Part V: 改进问题

  • 把书籍分类改为下拉列表树形组件TreeSelect搜索。

第一步:新增一个apis/select.http.json:

{
"name": "下拉搜索",
"version": "1.0.0",
"description": "下拉搜索",
"guard": "bearer-jwt",
"group": "select",
"paths": [
{
"path": "/category",
"method": "GET",
"process": "flows.category",
"in": [],
"out": {
"status": 200,
"type": "application/json"
}
}
]
}

第二步:新建flows/category.flow.yao文件:

{
"label": "类目树",
"version": "1.0.0",
"description": "类目树",
"nodes": [
{
"name": "类目",
"engine": "xiang",
"query": {
"select": ["id", "name", "name as label", "id as value", "parent_id"],
"wheres": [{ ":deleted_at": "删除", "=": null }],
"from": "category",
"limit": 1000
}
},
{
"name": "类目树",
"process": "xiang.helper.ArrayTree",
"args": ["{{$res.类目}}", { "parent": "parent_id" }]
}
],
"output": "{{$res.类目树}}"
}

第三步:修改 tables/book.tab.yao的 columns 分类组件,并且调整一下表单和添加页面的布局:

查看源码

第四步:停止服务,然后重启服务,刷新一下页面,可以看到如下效果图:

分类

本章节开发一个图书管理系统

#tips :在学习本教程之前,默认您已经搭建好开发环境

演示

图书管理系统

GitHub: https://github.com/YaoApp/demo-lms

Infra 一键部署: https://letsinfra.com/openapp/demo-lms

Part I:开始项目

第一步:初始化项目 yao init此时的目录结构为:

├─apis
├─data
├─db
├─flows
├─libs
├─logs
├─models
├─scripts
├─tables
├─ui
└─yao
└─icons

第二步:配置数据库文件 .env文件:

# 数据库配置
YAO_DB_AESKEY="KBPdcRn44LzykphsVM\*y"
YAO_DB_DRIVER=mysql
YAO_DB_PRIMARY="root:123456@tcp(127.0.0.1:3306)/test?charset=utf8mb4&parseTime=True&loc=Local" # 主库连接
YAO_DB_SECONDARY="root:123456@tcp(127.0.0.1.100:3306)/test?charset=utf8mb4&parseTime=True&loc=Local" # 主库连接

数据库字段含义:YAO_DB_PRIMARY=用户名:密码@tcp(数据库ip:端口)/数据库名??charset=utf8mb4&parseTime=True&loc=Local

配置修改完成后执行 yao migrate看看是否报错,要是没有报错说明连接成功!

Part II: 新建模型

第一步:新增models/category.mod.yao文件,写入以下内容:

查看源码

第二步:新增 models/book.mod.yao模型文件,并且关联模型分类category:

查看源码

第三步:执行yao migrate命令迁移数据表,出现以下结果,并且可以在数据库中看到对应数据表:

Update schema model: category (category)
Update schema model: xiang.user (xiang_user)
Update schema model: xiang.menu (xiang_menu)
Update schema model: xiang.workflow (xiang_workflow)
Update schema model: book (book)
✨DONE✨

Part III: 菜单配置

第一步:接下来初始化一下菜单,新建/flows/menu.flow.yao:

查看源码

第二部:执行命令 yao run flows.menu出现以下结果,并且可以在数据库中看到对应数据表:

Run: flows.menu
--------------------------------------
flows.menu Response
--------------------------------------
"done"
--------------------------------------
✨DONE✨

第三步:修改/app.json文件中的内容"admin": "/table/book",把登录后第一个显示的菜单改为书籍列表:

{
"name": "Yao",
"short": "Yao",
"description": "Another yao app",
"option": {
"nav_user": "xiang.user",
"nav_menu": "xiang.menu",
"hide_user": false,
"hide_menu": false,
"login": {
"entry": {
"admin": "/table/book"
}
}
}
}

Part IV: 新建表格

第一步:新建 tables/book.tab.yao代码如下:

查看源码

第二步:执行 yao start可以看到项目已经开始运行:

WebSocket(0)
---------------------------------
Yao development
---------------------------------
Root /mnt/shared/test
Frontend http://127.0.0.1:5099/
Dashboard http://127.0.0.1:5099/xiang/login/admin
API http://127.0.0.1:5099/api
Listening 127.0.0.1:5099
Watching: /mnt/shared/test/models
Watching: /mnt/shared/test/scripts
Watching: /mnt/shared/test/apis
Watching: /mnt/shared/test/libs
✨LISTENING✨
Watching: /mnt/shared/test/flows
Watching: /mnt/shared/test/tables

打开浏览器访问:http://127.0.0.1:5099/xiang/login/admin

输入默认账号 xiang@iqka.com 和密码A123456p+登录到后台可以看到书籍列表效果图: 书籍列表

第三步:新建书籍分类表格 tables/category.tab.yao代码:

查看源码

在命令行使用 ctrl+C停止 Yao 的服务,然后执行 yao start重启服务,打开浏览器刷新一下页面,点击分类菜单: 分类

Part V: 改进问题

  • 把书籍分类改为下拉列表树形组件TreeSelect搜索。

第一步:新增一个apis/select.http.json:

{
"name": "下拉搜索",
"version": "1.0.0",
"description": "下拉搜索",
"guard": "bearer-jwt",
"group": "select",
"paths": [
{
"path": "/category",
"method": "GET",
"process": "flows.category",
"in": [],
"out": {
"status": 200,
"type": "application/json"
}
}
]
}

第二步:新建flows/category.flow.yao文件:

{
"label": "类目树",
"version": "1.0.0",
"description": "类目树",
"nodes": [
{
"name": "类目",
"engine": "xiang",
"query": {
"select": ["id", "name", "name as label", "id as value", "parent_id"],
"wheres": [{ ":deleted_at": "删除", "=": null }],
"from": "category",
"limit": 1000
}
},
{
"name": "类目树",
"process": "xiang.helper.ArrayTree",
"args": ["{{$res.类目}}", { "parent": "parent_id" }]
}
],
"output": "{{$res.类目树}}"
}

第三步:修改 tables/book.tab.yao的 columns 分类组件,并且调整一下表单和添加页面的布局:

查看源码

第四步:停止服务,然后重启服务,刷新一下页面,可以看到如下效果图:

分类