This article is part 4 of the Rapid Development of tree classification pages in the uniCloud project. This section describes how to quickly develop a mobile page for category management. Make use of the mobile terminal template of the plug-in market, and seamlessly connect with the management terminal by rewriting several lines of code, so as to achieve the function of displaying classified pages in one cloud.

First, development ideas

UniCloud provides a data request mechanism integrated with the cloud and no longer requests data through THE API interface, which brings great convenience to the front-end development and saves a lot of work for the front-end and back-end joint adjustment.

In this case, in order to reflect the fast development, we did not write the mobile page by ourselves, but found the corresponding plug-in in uniCloud’s plug-in market, transplanted it into the project, and slightly modified it to meet the project requirements.

  • Search the uniCloud plugin marketplace for a suitable mobile template page.
  • Port template pages to mobile projectsuni-taxonomyIn the.
  • Modify the JS code of the page data request to directly request the cloud data.
  • Render the requested data to the ported page.

Second, the implementation process

1. Find it in uniCloud’s plug-in marketplaceMix-mall e-commerce project template.

2. Click on the upper right corner of the plug-in pageImport the plug-in using HbuilderXButton.

Create a new project

4. Run the newly created project and see the following page indicating that the project is running properly.

5. The template category page is used in the example.

6. Clone template projectclassificationPage code touni-taxonomyIn the.

  • In the preview window on the right, the address bar displays the page path as/pages/category/category, we are inMix-mall e-commerce project templateLocate the vUE file in the project files list and copy it.

  • inuni-taxonomyRight-click on the project name to create a new page with the page namecategory.

  • Will just inMix-mall e-commerce project templateCopy of thecategory.vueFile pasted inuni-taxonomyThe projectpages/categoryDirectory.

  • Replace the empty page, the page will display a bunch of error messages, do not worry, because the code to request data has not been modified, temporarily request data.

7. Add style sheets.

The UNI-Taxonomy project is built using the Uni-starter template. We want to keep the style sheet of the Uni-Starter template, but also use the style sheet of the mix-Mall e-commerce project template for porting. In this way, the original page and the ported page will display properly. The append merge method must be selected.

  • Will mix-mall e-commerce project template project app. vue page code in the style sheet

    is copied to the location of the uni-taxonomy project app. vue page code.

  • Mix – mall electricity project template uni – the contents of the SCSS document copy of the project, an additional paste in uni – SCSS uin – taxonomy projects of the end of the file content.

8. Modify the code to request data.

The page code of mix-Mall e-commerce project template can be used, but it also needs a little modification to be fully integrated. One is to connect the name of the display field with the field defined by the cloud database, and the other is to change the original data request code into a direct request to the cloud.

  • Ensure managementuni-taxonomy-adminThe project is running properly. In the classification management, add corresponding simulation data.

  • In the uni-taxonomy preview window on the mobile terminal, log in with account test (the user has already been created on the management side).

  • In the editor to modify uni – taxonomy project pages/category/category. The vue code, will display the name of the field and the cloud fields in the database definition.

    • Change all. Ids in the code to._id and PID to parent_id according to the schema set by the classification management field.

    • Change image link address: SRC =”titem.picture” to: SRC =”titem.imagefile.path”

  • The code block in methods was modified to change the original data request code into a direct request to the cloud.

To:

After the above simple copy-paste and code modification, the mobile page should be perfectly displayed.

Third, summary

At this point, all the content of “Rapid Development of Tree Classification pages in the uniCloud Project” has been shared. The world’s martial arts, only fast can not break. UniCloud cloud platform brings great convenience to our development work, greatly reducing the workload of development. It is possible to make the front end full stack.

Due to my lack of knowledge, mistakes in the article are unavoidable, welcome criticism and correction. The examples in this paper still have some bugs to be debugged and corrected, which can only serve as a primer. Later I will make the content of the article into a video release, expect to help beginners.