This chapter develops a library management system

#tips : Before learning this tutorial, you have already set up the development environment by default

demo

Library Management System

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

Infra one-click deployment: https://letsinfra.com/openapp/demo-lms

Part I: Starting the project

Step 1: Initialize the project yao init The directory structure at this time is:

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

Step 2: Configure the database file .env file:

# database configuration
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" # Main library connection
YAO_DB_SECONDARY="root:123456@tcp(127.0.0.1.100:3306)/test?charset=utf8mb4&parseTime=True&loc=Local" # Main library connection

Database field meaning: YAO_DB_PRIMARY=username:password@tcp(database ip:port)/database name??charset=utf8mb4&parseTime=True&loc=Local

After the configuration modification is completed, execute yao migrate to see if an error is reported. If no error is reported, the connection is successful!

Part II: New Model

Step 1: Add the models/ccategory.mod.json file and write the following content:

View source code

Step 2: Add the models/book.mod.json model file and associate the model category category:

View source code

Step 3: Execute the yao migrate command to migrate the data table, the following results appear, and you can see the corresponding data table in the database:

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: Menu Configuration

Step 1: Next, initialize the menu and create a new /flows/menu.flow.json:

View source code

Part 2: Execute the command yao run flows.menu and the following results appear, and you can see the corresponding data table in the database:

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

Step 3: Modify the content in the /app.json file "admin": "/table/book", and change the first menu displayed after login to the book list:

{
"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: New Form

Step 1: Create a new tables/book.tab.json The code is as follows:

View source code

Step 2: Execute yao start to see that the project has started running:

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

Open the browser to visit: http://127.0.0.1:5099/xiang/login/admin

Enter the default account xiang@iqka.com and password A123456p+ to log in to the background to see the book list renderings: Book List

Step 3: Create a new book category table tables/category.tab.json code:

View source code

Use ctrl+C on the command line to stop the Yao service, then execute yao start to restart the service, open the browser to refresh the page, and click the category menu: category

Part V: Improvement issues

  • Change the book category to a drop-down list tree component TreeSelect search.

Step 1: Add a apis/select.http.json:

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

Step 2: Create a new flows/category.flow.json file:

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

Step 3: Modify the columns category component of tables/book.tab.json, and adjust the layout of forms and add pages:

View source code

Step 4: Stop the service, then restart the service, refresh the page, you can see the following renderings:

category

This chapter develops a library management system

#tips : Before learning this tutorial, you have already set up the development environment by default

demo

Library Management System

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

Infra one-click deployment: https://letsinfra.com/openapp/demo-lms

Part I: Starting the project

Step 1: Initialize the project yao init The directory structure at this time is:

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

Step 2: Configure the database file .env file:

# database configuration
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" # Main library connection
YAO_DB_SECONDARY="root:123456@tcp(127.0.0.1.100:3306)/test?charset=utf8mb4&parseTime=True&loc=Local" # Main library connection

Database field meaning: YAO_DB_PRIMARY=username:password@tcp(database ip:port)/database name??charset=utf8mb4&parseTime=True&loc=Local

After the configuration modification is completed, execute yao migrate to see if an error is reported. If no error is reported, the connection is successful!

Part II: New Model

Step 1: Add the models/ccategory.mod.json file and write the following content:

View source code

Step 2: Add the models/book.mod.json model file and associate the model category category:

View source code

Step 3: Execute the yao migrate command to migrate the data table, the following results appear, and you can see the corresponding data table in the database:

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: Menu Configuration

Step 1: Next, initialize the menu and create a new /flows/menu.flow.json:

View source code

Part 2: Execute the command yao run flows.menu and the following results appear, and you can see the corresponding data table in the database:

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

Step 3: Modify the content in the /app.json file "admin": "/table/book", and change the first menu displayed after login to the book list:

{
"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: New Form

Step 1: Create a new tables/book.tab.json The code is as follows:

View source code

Step 2: Execute yao start to see that the project has started running:

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

Open the browser to visit: http://127.0.0.1:5099/xiang/login/admin

Enter the default account xiang@iqka.com and password A123456p+ to log in to the background to see the book list renderings: Book List

Step 3: Create a new book category table tables/category.tab.json code:

View source code

Use ctrl+C on the command line to stop the Yao service, then execute yao start to restart the service, open the browser to refresh the page, and click the category menu: category

Part V: Improvement issues

  • Change the book category to a drop-down list tree component TreeSelect search.

Step 1: Add a apis/select.http.json:

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

Step 2: Create a new flows/category.flow.json file:

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

Step 3: Modify the columns category component of tables/book.tab.json, and adjust the layout of forms and add pages:

View source code

Step 4: Stop the service, then restart the service, refresh the page, you can see the following renderings:

category