This article is part two of the Rapid Development of tree classification pages in the uniCloud project. This section describes how to use schema to automatically generate management code. And the RBAC role authority management function provided by the system is carried out.

First, create data structure file (schema), generate management page code.

1. Sorting out business needs:

  • Only the Platform Administrator can add, delete, modify, and query the category table. All users can query the category table.
  • The classification table has three levels of classification.
  • In addition to being required for each category, you can also choose to upload a category image.
  • The classification order can be controlled. The order of subcategories is associated with the parent category.
  • The category ID and creation time are automatically generated by the system.
  • The parent and subclass are associated by the parent ID. The parent ID of the top-level classification is empty.
  • List pages are displayed in a tree structure.

2. Create a schema file based on service requirements

In the HuilderX editor, go to the uni-taxonomy project and right-click in the uniCloud->dataase directory within the project to create a schema file named taxonomy.schema.json.

3. Write schema code.

Write the following code in taxonomy.schema.json and save it.

{ "bsonType": "object", "required": ["name"], "permission": { "read": true, "create": "'padmin' in auth.permission", "update": "'padmin' in auth.permission", "delete": "'padmin' in auth.permission"}, "properties": {"_id": {"description": "ID "}, "name": {"bsonType": "String ", "description":" category name ", "label": "category name ", "trim": "both"}, "imagefile": {"bsonType": "file", "fileMediaType": "Image ", "title": "image file ", "description":" Image file information, including file name, URL, etc. (optional) "}, "level": {"bsonType": "int", "title": "BsonType ": "int", "description": "label": {"bsonType": "int", "description": "label": } "order", "parent_id" : {" bsonType ":" string ", "title" : "the parent node ID", "description" : "Parent ID (parent ID of the top-level node is empty) ", "parentKey":"parent_id"}, "create_date": {"bsonType": "timestamp", "description": "Creation time (system automatically adjusts current time) ", "forceDefaultValue": {"$env": "now"}}}}Copy the code

See the official documentation for the power and writing rules of schema.

4. Upload the schema file.

Right-click on the file name tax.schema. json to confirm that the upload is complete.

Second, generate and test the management page.

1. Automatically generate the page code of the management terminal

  • intaxonomy.schema.jsonRight-click on the file name and select Schema2Code.

  • Select the target project asuni-taxonomy-admin.

  • TAB bar in the upper left cornerUniCloud admin pageTo check theProject model, click on theconfirmButton.

  • Select the generated page location, the default is ok. Path to the automatic registration page.

  • Merge the generated page file with the project.

  • You can see the three page files you just generated in the file directory list.

2. Added the category Management link menu.

  • inHuilderXIn the openuni-taxonomy-adminThe project’s page configuration file (pages.json). In the configuration file, find the path of the page taxonomy.schema.json generated by schema2code.

  • Copy the pages/taxonomy/list page path and use it later.

  • Log in to the management terminal. Select Menu Management in system Management and click the new level menu button in the upper left corner to add a category management menu. The menu path is the path copied earlier.

  • After the configuration is saved, an extra one is displayed on the left of the management pageClassification managementMenu, click the menu link, you can see the classification list page.

The page is empty at this point because we haven’t entered any data yet.

3. Test the function of adding, deleting, changing and checking the classification management.

  • Click on the top rightnewButton to display a new category page, which is automatically generated based on the schema. The image upload component is also automatically generated according to the Schema convention.

  • When you return to the list page, you can see the newly added category data.

  • Solve the problem that the pictures in the classification list cannot be displayed.

There may be a problem with the auto-generated code, and the category list page does not display pictures properly. Right click on the unicloud directory under project UNI-taxonomy -admin to open the cloud console.

In the cloud console, open the uni-taxonomy space and find the cloud database taxonomy. Expand the field imagefile to see the image information we uploaded successfully. Note The automatically generated category add page is effective, and the image upload is perfect.

In the cloud space, open the cloud storage, you can see that the system has automatically stored the uploaded pictures here, and automatically generated picture information stored in the database.

Click Details to see only the details of the image file.

My automatically generated category list page cannot display pictures properly. /pages/taxonomy/list.vue (); /pages/taxonomy/list.vue ();

<uni-td align="center"> <! <image v-if="item.imagefile.url ": SRC ="item.imagefile.url" mode="aspectFit" style="width:30px; height:30px;" ></image> <! -- This is automatically generated code --> <! -- <uni-file-picker v-if="item.imagefile && item.imagefile.fileType == 'image'" :value="item.imagefile" :file-mediatype="item.imagefile && item.imagefile.fileType" return-type="object" :imageStyles="imageStyles" readonly></uni-file-picker> <uni-link v-else :href="item.imagefile && item.imagefile.url" :text="item.imagefile && item.imagefile.url"></uni-link> --> </uni-td>Copy the code
  • On the list page, each piece of data is automatically generatedModify theanddeleteButton, click test effective.

4. Improve permission management.

We log in to the management terminal as the super administrator, so we don’t have any permission management problems. Now let’s activate the test user and check available for login to apply uni-taxonomy-admin.

Log out of the admin account and log in to the management terminal as the test account. At this time, we do not see any dynamic management menu, indicating that test does not have enough management rights.

Log out of test and log in to the management terminal as user admin.

The first step is to create a category-managed permission named padmin according to the schema file convention.

Step 2, create a role and name it platform Administrator. Assign the classification management rights to this role.

Step 3 modify the test user information and assign the platform administrator role.

Fourth step, modify the category management menu permissions, check padmin permissions visible.

Log out of the admin account and log in to the management terminal as the test account. Now you can see the category management page.

Click the new button, the function is normal. Because we have written the permission to add, delete, modify and check according to rules in the schema in advance.

Third, there are problems.

Although we have completed the classification management of the increase, deletion, change and check function, but compared with the actual demand, there are still the following problems.

  • When adding a level 2 or level 3 category, the parent ID of the category needs to be manually entered, which is very troublesome.
  • The sorting of level 2 and level 3 also needs to be entered manually, and it is also very troublesome to ensure that the sorting is consistent with level 1.
  • The classification level is also entered manually, which is prone to error.
  • If a child category exists, you cannot refuse to delete the parent category.
  • The list shows the classification items at all levels are parallel and cannot display the tree structure, which is not intuitive.

These problems need to be solved through secondary development. In the next section, I will continue to share with you the process of secondary development. Stay tuned.