UniApp Cloud Function TutorialLogin article

Today we use the cloud function and cloud database provided by Uniapp to achieve a simple login and registration function. Before you follow this tutorial, you should know a few things:

  • Knowledge of Vue
  • Related APIs for UniApp
  • The basic operation of the cloud function
  • Basic operation of cloud database

Of course, it doesn’t and it doesn’t matter, but I’ll go through it.

1, start

Let’s start with a brief overview of the preconditions required to implement a login and registration function

  • A front-end template
  • The database
  • The back-end code

The front template

If you don’t know the front end we can find a template. The template used in this article is the plugin minimalist login registration template provided by amo***@qq.com

The database

For normal development, we will use MySQL for development. Today, we use the JSON format document database provided by Uniapp. As the name implies, every record in the database is a JSON format document.

Here is not elaborated one by one, details can refer to the basic concept of cloud database

The back-end code

Here we use the cloud functions provided by Uniapp. Cloud functions are JavaScript code that runs in the cloud. Like normal Node.js development, developers who are familiar with Node.js can start directly.

2, preparation,

  • Editor: HBuilderX
  • dcloudAccount:The registered address. Used for login editor anddcloud, which is required after the registration is completedTo activateIf you have an account, you can skip it
  • DCloud developer real-name authentication

3. Front-end projects

3.1 Import the front-end template

Open the plugin library minimalist login registration template and import the plugin using HBuilderX, as shown in Figure 3.1

Figure 3.1


The editor will then open for import, and be sure to check to enable Unicloud, as shown in Figure 3.2

Figure 3.2


After successful import you will get the following directory



Now that the front end template is created, let’s write the front end logic

3.2 Modify the front-end code

3.2.1 deleteOther loginThe code of



Methods to write the login request interface (see the demo code for the full code)

Uni. ShowLoading ({title: 'Log in'}); uni.request({ url: 'xxxxxxxxxxx', data: { phoneData: this.phoneData, passData: this.passData }, success: (res) => { console.log('res', res) // uni.showToast({ // icon: 'error', // position: 'bottom', // title: 'Wrong account or password, account admin password admin' //}); }, complete: () => { uni.hideLoading(); this.isRotate=false } })

3.2.2 Registration changed to only requiredaccountandpasswordregistered



Write the registration code (see the demo code for the complete code)

_this.isRotate = true uni. ShowLoading ({title: 'Rotate'}); uni.request({ url: 'xxxxxxxxxxx', data: { phoneData: this.phoneData, passData: this.passData }, success: (res) => { console.log('res', res) }, complete: () => { uni.hideLoading(); _this.isRotate = false } })

4. Related cloud functions

Right clickUniCloudFolder, clickAssociated cloud service Spaces or projects



Click New, (need to do ahead of timeReal-name authentication)



Next will jump to the page we chooseAli cloud



After the creation is completed, return to the editor and click Refresh. Select the newly created service space and clickassociated

4.1 Add cloud database

Adding cloud database can be done by code or by using the web page. Here we use the web page for operation

Open theUnicloud service space list, enter the newly created service space, and select New Cloud Function Library.



Create an empty table without selecting a template



Modify the table structure as follows

{ "bsonType": "object", "required": [], "permission": { "read": false, "create": false, "update": false, "delete": False}, "properties": {"_id": {"description": "ID "}, "phoneData": {"description": "user name"}, "passData": {"description": "password"}}}

At this point, the database has been created. Next we create a new cloud function for the processing interface

4.2 Create a new cloud function

4.2.1 Registration function

  • Right clickcloudfunctionsFolder, clickNew Cloud Function





Write the registration code, here we only do data insertion operation, do not consider to repeat here, you can optimize by yourself

'use strict'; Export. main = async (event, context) => {console.log('event: ', event) const db = uniCloud.database(); // CDB const collection = db.collection('userTable'); let queryStringParameters = event.queryStringParameters let res = await collection.add({ phoneData: QueryStringParameters ['phoneData'], passData: queryStringParameters['passData']}) // return data to the client {mesg: 'registered successfully ', code: 200}};
  • Right clickcloudfunctions, the choice ofUpload all cloud functions

  • Enable domain binding



Open the can

  • Select the registration function and click on details

  • Cloud function URLize, click Edit, fill in/http/register

This URL is our registration interface

4.2.1 Login function

Same thing, newloginCloud function, fill in the logic code

'use strict'; Export. main = async (event, context) => {console.log('event: ', event) const db = uniCloud.database(); // Cdb const dbCmd = db.command const $= dbCmd. Aggregate let callback = {} let queryStringParameters = event.queryStringParameters let phoneData = queryStringParameters['phoneData'] let passData = queryStringParameters['passData'] const collection = db.collection('userTable'); let res = await collection.where({ phoneData: dbCmd.eq(phoneData) }) .get() console.log('res.data[0].passData : ', res.data[0].passData) console.log('passData : ', passData) if (res.data.length == 0) { callback = { mesg: } else {if (res.data[0]. PassData == PassData) {callback = {mesg: 'Login successfully ', code: 0} else {if (res.data[0]. 200 } } if (res.data[0].passData ! == passData) {callback = {mesg: 'password error ', code: 500}}} // return callback to the client;

The service list is filled in/http/login



Then we will just login registration interface to fill in the previous spare front-end code

5. Combine front and back

5.1 registered

5.2 the login

summary

That’s the end of today’s login post. Demo to optimize the place is the repeat registration, there is no optimization, you can optimize.

DEMO source code download

Welcome to join the front-end communication group 749539640 for more questions