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

Edit this page on Github
This chapter develops a library management system
demo
Library Management System
Part I: Starting the project
Step 1: Initialize the project yao init The directory structure at this time is:
Step 2: Configure the database file .env file:
Part II: New Model
Step 1: Add the models/ccategory.mod.json file and write the following content:
Step 2: Add the models/book.mod.json model file and associate the model category category:
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:
Part III: Menu Configuration
Step 1: Next, initialize the menu and create a new /flows/menu.flow.json:
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:
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:
Part IV: New Form
Step 1: Create a new tables/book.tab.json The code is as follows:
Step 2: Execute yao start to see that the project has started running:
Step 3: Create a new book category table tables/category.tab.json code:
Part V: Improvement issues
Step 1: Add a apis/select.http.json:
Step 2: Create a new flows/category.flow.json file:
Step 3: Modify the columns category component of tables/book.tab.json, and adjust the layout of forms and add pages:
Step 4: Stop the service, then restart the service, refresh the page, you can see the following renderings:
DocComponentsBlogExamplesReleaseContact

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

Edit this page on Github
This chapter develops a library management system
demo
Library Management System
Part I: Starting the project
Step 1: Initialize the project yao init The directory structure at this time is:
Step 2: Configure the database file .env file:
Part II: New Model
Step 1: Add the models/ccategory.mod.json file and write the following content:
Step 2: Add the models/book.mod.json model file and associate the model category category:
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:
Part III: Menu Configuration
Step 1: Next, initialize the menu and create a new /flows/menu.flow.json:
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:
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:
Part IV: New Form
Step 1: Create a new tables/book.tab.json The code is as follows:
Step 2: Execute yao start to see that the project has started running:
Step 3: Create a new book category table tables/category.tab.json code:
Part V: Improvement issues
Step 1: Add a apis/select.http.json:
Step 2: Create a new flows/category.flow.json file:
Step 3: Modify the columns category component of tables/book.tab.json, and adjust the layout of forms and add pages:
Step 4: Stop the service, then restart the service, refresh the page, you can see the following renderings:
Copyright © 2024 YaoApps Inc. All rights reserved.
logo_light
Copyright © 2024 YaoApps.com All rights reserved.
English