uniapp云函数教程① ：登陆篇

uniapp云函数教程之登陆篇

今天咱们使用uniapp提供的云函数以及云数据库来实现一个简单的登陆、注册的功能。
学习本教程以前你须要简单了解一下：

• vue的相关知识
• uniapp的相关api
• 云函数的基本操做
• 云数据库的基本操做

固然，不会也没有关系，我会慢慢阐述。

一、起步

咱们先简单介绍下实现一个登陆注册功能须要那些前置东西

• 一个前端模板
• 数据库
• 后端代码

前端模板

若是你不会前端咱们能够找一个模板。本文使用的模板为amo***@qq.com提供的插件极简登陆注册模板

数据库

常规的开发咱们会使用mysql来进行开发，今天咱们使用uniapp提供的JSON 格式的文档型数据库,顾名思义，数据库中的每条记录都是一个 JSON 格式的文档。

这里就不在一一阐述，详情可参考云数据库基本概念

后端代码

这里咱们使用uniapp提供的云函数，云函数是运行在云端的 JavaScript 代码，和普通的Node.js开发同样，熟悉Node.js的开发者能够直接上手。

二、准备

• 编辑器：hbuilderx
• dcloud帐号：注册地址。用于登陆编辑器和dcloud，注册完成后须要进行验证激活,已有帐号的同窗能够跳过
• dcloud开发者实名认证

三、前端项目

3.1 导入前端模板

打开插件库极简登陆注册模板,点击使用 HBuilderX 导入插件,以下图3.1

图3.1

以后会打开编辑器进行导入，切记勾选启用uniCloud,以下图3.2

图3.2

导入成功后你会获得以下目录

这样，前端模板就建立完成了，接下来咱们先把前端逻辑写好

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

而后咱们将刚才的登陆注册接口填入以前的空余的前端代码里

5.先后联调

5.1 注册

5.2 登陆

小结

今天的登陆篇就到这里就结束了。
demo待优化的地方是重复注册，这里没作优化，可自行进行优化。

demo源码代码下载

更多问题欢迎加入前端交流群交流749539640