Before we use cloud development, want to do a data management background, can only use small program development tools with the operation background, and then directly in the database operation data. This is nothing for programmers, but our programs are developed to be used by people who do not understand the program. How to let these people can also be very good management of our cloud development database. At this time we will use VUE or traditional Web development to achieve a web page management background, through the direct management of cloud development. But the development of such a webpage background, will undoubtedly increase our workload. So we today with the help of cloud development officially launched CMS function, to quickly build a cloud development of web page management background.

The benefits of CMS are as follows:Official documents:Developers.weixin.qq.com/miniprogram…

The opening path is shown belowHere to teach you how to quickly open this visual content management platform.

First, directly open the content management system (CMS)

Click Open content Management and a pop-up window will appear as shown below. Just check the protocol and click OKThere is no need to worry about pay-as-you go, the official will give us a part of the free amount every month, we study, this free amount is basically enough. After clicking OK here, we also need to click the Open button on content Management again, and then the popover below will appear. Just click Next.Then you need to initialize an administrator account, you can define yourself here, after setting up, it is best to remember to the small book, will often be used in the back.Once the account is set up, it will prompt you that the account has been successfully opened.After successful opening, we need to wait patiently for the system to initialize the environment for us.After successful opening, the logout button will be displayed.

Enter the CMS management background

After we have opened the above, the next step is to get the link into the management background. If you don’t have the following, make sure you update your developer tools to the latest version.

2-1, click more at the top of the toolbar,

2-2, then select Content Management.

2-3, get the back address

Once you get the background address, open it directly in your browser.Enter the user name and password you set earlier. The following page is displayed after login

Third, create a project

We entered the CMS background for the first time and needed to create a new project by ourselves.Once created, you can see our project.Enter our programAt this point our CMS management background has been created successfully, and next we need to manage our data.

Create a content model (data table)

Once we have successfully initialized our project above, we will create our content model, which corresponds to the collection (database) in our cloud development. For example, we have created the product model here.

4-1, click Create model

4-2, enter the display name and database name

After clicking Create, you can see that we have added a goods collection to our cloud development database.Now that the data table has been created, we are ready to add the item data to it.

Fifth, add commodity data

We go to the content collection to find the data table we created above, and we can add data to it.

5-1, new data

At this point we create it directly and you can see that there are only two fieldsThe same is true for the database, although it successfully adds a piece of data, but this data is too simple. Only creation time and modification time are availableThis is definitely not what we wanted, so we must have missed something when we created the content model in step 4 above.

5-2, add fields to the table

Think about what fields we need for our product.

• Trade name
• Commodity prices
• Commodity images
• Goods details

So that’s it for now, and now we’re going to add fields to the table one by one.

5-3, add the product name

Our commodity name, as a one-line string, is a required field.Then click Add, you can see that we successfully added a field of the name of the product in the list of goods.

5-4, add the price of goods

Commodity prices we use numeric types, required fieldsAdd a success

5-5, add commodity picture

Our product image should be a group of images, so we select the image type when we add the product image field, and then allow multiple content, mandatory.Add a success

5-6, add product details page

Product details page, we can be pure text, also can be a combination of text and text. To make the detail page more beautiful, we use rich text here.Add a successAfter the complete product list is created successfully, we can go to view the specific data in the product list.You can see that we have no values except for create time and modify time.

5-7, modify table data

So we can click the Edit button to add the value to the empty field.Then add the concrete data

5-8, edit product details

We use rich text for product details, so we’d better have a simple text mix.After you edit it, remember to click on updateSo we’ve created a complete piece of dataAs you can see, our change times have changed as well

5-9, add a new piece of data

Our above data was modified, so let’s demonstrate a new data.In fact, the new data is very simple, and we modify the data above. No more than modification is to have data first, and then to modify. Add is directly add. Fill in the data to remember to createSo we have two pieces of dataAnd then we go to our database and we see that we have two pieces of data.So what we’re going to do is we’re going to request the data in the applet, and then we’re going to display the data.

Six, get the list of goods

First we need to get the item list, create a new item list page, and then request the data in the ONLoad method of JS.

6-1, get the data

The result is an error because we did not initialize the cloud development environment. I’ve made this point a million times.For those of you who don’t know, check out my introduction to cloud development articles and videos.Then you can see that our request was successful, but there is no data, why?We need to modify the permissions on the Goods table to make it accessible to all.As you can see, we successfully requested two pieces of data.

6-2, populate the page with data

The above data has been obtained, we are going to fill the data into the page, in fact, before the cloud development has said, I here no longer verbose, directly on the code.

• The WXML and WXSS pages are relatively simple

• The JS page is not that complicated

6-3, click to jump to product details

Our goDetail method here basically jumps to the item details page when you click on the item in the list.It can be seen that we successfully carried the commodity ID when entering the details page. We request the data of the details page mainly by this ID.

Request and load the product details page

7-1, request details page data

7-2, writing WXML and JS

7-3, effect drawing

Better see what it looks likeOf course, the style is ugly, and then have the opportunity to optimize it.

Here our CMS visual management background on the complete set up, also give you a simple demonstration of the CMS to add and modify the data, and in the small program to show the data.