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

#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 分类组件，并且调整一下表单和添加页面的布局:

查看源码

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

分类

在Github上编辑此页
本章节开发一个图书管理系统
演示
图书管理系统
Part I:开始项目
第一步：初始化项目 yao init此时的目录结构为:
第二步：配置数据库文件 .env文件:
Part II: 新建模型
第一步：新增models/category.mod.yao文件,写入以下内容:
第二步：新增 models/book.mod.yao模型文件,并且关联模型分类category:
第三步：执行yao migrate命令迁移数据表,出现以下结果,并且可以在数据库中看到对应数据表:
Part III: 菜单配置
第一步：接下来初始化一下菜单,新建/flows/menu.flow.yao:
第二部：执行命令 yao run flows.menu出现以下结果,并且可以在数据库中看到对应数据表:
第三步：修改/app.json文件中的内容"admin": "/table/book",把登录后第一个显示的菜单改为书籍列表:
Part IV: 新建表格
第一步：新建 tables/book.tab.yao代码如下:
第二步：执行 yao start可以看到项目已经开始运行:
第三步：新建书籍分类表格 tables/category.tab.yao代码:
Part V: 改进问题
第一步：新增一个apis/select.http.json:
第二步：新建flows/category.flow.yao文件:
第三步：修改 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 分类组件，并且调整一下表单和添加页面的布局:

查看源码

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

分类

在Github上编辑此页
本章节开发一个图书管理系统
演示
图书管理系统
Part I:开始项目
第一步：初始化项目 yao init此时的目录结构为:
第二步：配置数据库文件 .env文件:
Part II: 新建模型
第一步：新增models/category.mod.yao文件,写入以下内容:
第二步：新增 models/book.mod.yao模型文件,并且关联模型分类category:
第三步：执行yao migrate命令迁移数据表,出现以下结果,并且可以在数据库中看到对应数据表:
Part III: 菜单配置
第一步：接下来初始化一下菜单,新建/flows/menu.flow.yao:
第二部：执行命令 yao run flows.menu出现以下结果,并且可以在数据库中看到对应数据表:
第三步：修改/app.json文件中的内容"admin": "/table/book",把登录后第一个显示的菜单改为书籍列表:
Part IV: 新建表格
第一步：新建 tables/book.tab.yao代码如下:
第二步：执行 yao start可以看到项目已经开始运行:
第三步：新建书籍分类表格 tables/category.tab.yao代码:
Part V: 改进问题
第一步：新增一个apis/select.http.json:
第二步：新建flows/category.flow.yao文件:
第三步：修改 tables/book.tab.yao的 columns 分类组件，并且调整一下表单和添加页面的布局:
第四步：停止服务,然后重启服务,刷新一下页面,可以看到如下效果图：
Copyright © 2024 YaoApps Inc. All rights reserved.
logo_light
京ICP备14050225号-30Copyright © 2024 YaoApps.com All rights reserved.
简体中文