uniapp雲函數教程① ：登陸篇

時間 2021-04-26

標籤 html 前端 vue mysql git github sql 數據庫後端 api 欄目 HTML 简体版

原文原文鏈接

uniapp雲函數教程之`登陸篇`

今天咱們使用uniapp提供的雲函數以及雲數據庫來實現一個簡單的登陸、註冊的功能。
學習本教程以前你須要簡單瞭解一下：html

固然，不會也沒有關係，我會慢慢闡述。前端

一、起步

咱們先簡單介紹下實現一個登陸註冊功能須要那些前置東西vue

一個前端模板
數據庫
後端代碼

前端模板

若是你不會前端咱們能夠找一個模板。本文使用的模板爲amo***@qq.com提供的插件極簡登陸註冊模板mysql

數據庫

常規的開發咱們會使用mysql來進行開發，今天咱們使用uniapp提供的JSON 格式的文檔型數據庫,顧名思義，數據庫中的每條記錄都是一個 JSON 格式的文檔。git

這裏就不在一一闡述，詳情可參考雲數據庫基本概念github

後端代碼

這裏咱們使用uniapp提供的雲函數，雲函數是運行在雲端的 JavaScript 代碼，和普通的Node.js開發同樣，熟悉Node.js的開發者能夠直接上手。sql

二、準備

編輯器：hbuilderx
dcloud帳號：註冊地址。用於登陸編輯器和dcloud，註冊完成後須要進行驗證激活,已有帳號的同窗能夠跳過
dcloud開發者實名認證

三、前端項目

3.1 導入前端模板

打開插件庫極簡登陸註冊模板,點擊使用 HBuilderX 導入插件,以下圖3.1數據庫

圖3.1

以後會打開編輯器進行導入，切記勾選啓用uniCloud,以下圖3.2後端

圖3.2

導入成功後你會獲得以下目錄api

這樣，前端模板就建立完成了，接下來咱們先把前端邏輯寫好

3.2 修改前端代碼

3.2.1 刪除其餘登陸的代碼

寫入登陸的請求接口的方法(完整代碼可查看demo代碼)

uni.showLoading({
    title: '登陸中'
});
uni.request({
    url: 'xxxxxxxxxxx',
    data: {
        phoneData: this.phoneData,
        passData: this.passData
    },
    success: (res) => {
        console.log('res', res)
        // uni.showToast({
        //     icon: 'error',
        //     position: 'bottom',
        //     title: '帳號或密碼錯誤，帳號admin密碼admin'
        // });
    },
    complete: () => {
        uni.hideLoading();
        this.isRotate=false
    }
})

3.2.2 註冊改成僅須要帳號和密碼註冊

寫入註冊代碼(完整代碼可查看demo代碼)

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

四、關聯雲函數

右鍵UniCloud文件夾，點擊關聯雲服務空間或項目

點擊新建，（須要提早進行實名認證）

接下來會跳轉之網頁，咱們選擇阿里雲

新建完成後回到編輯器點擊刷新，選擇剛纔新建的服務空間便可，點擊關聯

4.1添加雲數據庫

添加雲數據庫能夠代碼添加也能夠使用網頁進行操做，這裏咱們使用網頁進行操做
打開unicloud服務空間列表,進入剛纔新建的服務空間，選擇新建雲函數庫。

建立空表便可，不須要選擇模板

修改表結構以下

{
  "bsonType": "object",
  "required": [],
  "permission": {
    "read": false,
    "create": false,
    "update": false,
    "delete": false
  },
  "properties": {
    "_id": {
      "description": "ID，系統自動生成"
    },
    "phoneData": {
      "description": "用戶名"
    },
    "passData": {
      "description": "密碼"
    }
  }
}

到這裏，數據庫已經新建完成。接下來咱們新建處理接口的雲函數

4.2新建雲函數

4.2.1 註冊函數

右鍵cloudfunctions文件夾，點擊新建雲函數

寫入註冊代碼，這裏咱們只作數據插入操做，去重這裏不作考慮，能夠自行進行優化

'use strict';
exports.main = async (event, context) => {
    //event爲客戶端上傳的參數
    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 {
        mesg: '註冊成功',
        code: 200
    }
};

右鍵cloudfunctions，選擇上傳全部雲函數··

啓用域名綁定

打開便可

選擇剛纔的註冊函數，點擊詳情

雲函數URL化，點擊編輯，填入/http/register

這個url即是咱們的註冊接口

4.2.1 登陸函數

同理，新建login雲函數，填入邏輯代碼

'use strict';
exports.main = async (event, context) => {
    //event爲客戶端上傳的參數
    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: '沒有此帳號',
            code: 500
        }
    } else {
        if (res.data[0].passData == passData) {
            callback = {
                mesg: '登陸成功',
                code: 200
            }
        }

        if (res.data[0].passData !== passData) {
            callback = {
                mesg: '密碼錯誤',
                code: 500
            }
        }
    }

    //返回數據給客戶端
    return callback
};

服務列表填入/http/login

而後咱們將剛纔的登陸註冊接口填入以前的空餘的前端代碼裏