uniapp云函数教程① ：登录篇

uniapp云函数教程之登录篇

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

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

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

1、起步

我们先简单介绍下实现一个登录注册功能需要那些前置东西

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

前端模板

如果你不会前端我们可以找一个模板。本文使用的模板为amo***@qq.com提供的插件极简登录注册模板

数据库

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

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

后端代码

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

2、准备

• 编辑器：hbuilderx
• dcloud账号：注册地址。用于登录编辑器和dcloud，注册完成后需要进行验证激活,已有账号的同学可以跳过
• dcloud开发者实名认证

3、前端项目

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
    }
})

4、关联云函数

右键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

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000039896915
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！