This article describes how to quickly develop tree classification pages, such as product categories, in a uniCloud project. First, we use uni-Starter + uniCloud Admin to build the basic project framework of client and management side. On this basis, according to the business requirements, the design of the standard schema (database table structure). Use Schema2code to generate add, delete, change and query pages on the client and management side. Finally, the generated pages are redeveloped to meet our business requirements.

UniCloud is a cloud development platform based on Serverless mode and JS programming provided by DCloud, Alibaba Cloud and Tencent Cloud for developers.

  • Use Schema2code to generate database add, delete, change and query pages (directly generated pages, not interfaces, including front-end and management pages).
  • ifschema2codeI can’t figure it out, I need to write it by hand, so useclientDB, will save 80% of the management side development work.
  • uni-starterIs an integration of a large number of commercial projects common functions, cloud integrated application rapid development of basic project template. APP has many common functions, such as login and registration, avatar, Settings, banner,… Uni-starter integrates all of these functions. Directly in thehbuilderxNew Project selectionuni-starterOn this basis, you can quickly develop your own characteristic business. There are theuni-starter, plusschema2codeGenerate front-end pages, a simple application can be done quickly.
  • While uniCloud Admin is the basic project template for management projects, Uni-Starter is the basic project template for clients, especially mobile.
  • uni-starter + uniCloud adminApplication development has never been easier and faster by providing basic project templates on both the client and management sides!

Set up the project development framework

1. Create a clientuni-starterproject

1, inHBuilerX(preferably the latest version) in the code editoruni-starterThe project. Enable cloud development is selected by default.

2. In the projectuniCloudRight – click on the directory to associate cloud space.

Create a new cloud space.

Uni-taxonomy 4, Name the cloud space (uni-taxonomy)

5, to return toHBuilerXEditor, associating cloud space again. Select the cloud space you just created and clickassociatedButton.

6, auniCloudDirectory,cloudfunctionsRight-click in the directory to upload all cloud functions, public modules and actions.

7. Wait for the cloud function to be uploaded.

8, adatabaseDirectory,db_init.jsonRight click on the file to initialize the cloud database (including schema and validation functions).

9. Wait until the database initialization is complete.

10, test,uni-staterCheck whether the project is successfully installed.

Open the project pages/list/list.vue in the editor and click on the upper right corner to preview. The following page will appear, indicating that the project will be successfully installed.

At this point, the client’s basic framework is built successfully.

2. Create the management enduni-adminproject

1, inHBuilerX(preferably the latest version) in the code editoruni-adminThe project. Enable cloud development is selected by default.

2. In the projectuniCloudRight – click on the directory to associate cloud space.

Note: The administrator and the newly created client must be associated with the same cloud space. Select the service space to bind to other projects, check uni-taxonomy, and click the association button.

3, test,uni-adminCheck whether the project is successfully installed. Click on the Editor Run menu and select Run to a browser.

4. If the following figure is displayed, install the plug-in.

5, installation,sassThe plug-in.

6. Run the project to the browser again, and the login interface of the management side appears. If it is the first login, you need to create the super administrator account. The administrator account can be set only once.

7. After setting the administrator password, go to the management page.

At this point, the basic framework of the management terminal is set up successfully.

3. Connect the client and the management

The uni-starter and Uni-admin projects have been set up and the two projects are bound to the same cloud space, indicating that the integrated cloud development framework has been set up. Now let’s test whether the data on the client and management sides can be synchronized.

1. Create a test user on the management side and set the user name totestThe password123456, active state.

Currently, only the admin application can be logged in to. Click Manage to add a client application.

Find the configuration file for the client project in HuilderX and fill in the application id, application name, and application description into the form on the management side.

Remember to check the application name uni-taxonomy. This way, the account we created on the administrative side should be able to log in on the client side as well.

2. Log in to the client using test.

Run the client project in HuilderX and log in as test.

Login successful

Open the cloud console in HuilderX

You can see the user information we created

The database displays the ID of the test user as 61b2C95d0d111e000151d6A1. When you open the user login log, you can find that the 61B2C95D0d111e000151d6A1 ID has a login success log.

On the client side, select My, Settings, log out.

3. On the management sidetestThe user status was changed to disabled.

4, used againtestThe account is logged in to the client. The page will displayThe account is disabled..

At this point, the connection between the client and the management is successfully established. The relevantuni-starteranduni-adminPlease refer to the official documents and teaching videos for the related use of. Next, I will share with youRapid development of tree classification pages in unicloud projectStay tuned for the follow-up!