微搭低代码从入门到精通03用户注册

简介: 微搭低代码从入门到精通03用户注册



小程序开发中,如果定位是面向内部人员使用的应用,那么我们就需要仔细考虑用户鉴权的问题。首先需要提供用户注册的通道,让用户可以自主完成注册。其次要提供角色分配的功能,让适当的功能提供给适当的人员,确保数据不被非授权访问。

要实现用户权限的自主控制,我们需要自己搭建用户的数据源,仔细考量字段的设计。对于鉴权的问题,我们通常需要通过定义后端逻辑来完成,以下是实现用户注册的具体流程

1 搭建数据源

先需要创建一个数据源用来存储用户的信息,字段包括姓名、账号、密码、手机号、用户状态、审核状态、角色、openid

这里注意的是用户状态、审核状态、角色设置为枚举,枚举的优点是可以限定用户选择范围,规范数据格式。

用户状态我们的枚举项为启用和禁用

审核状态的枚举项为待审核、审核通过、审核不通过

角色的枚举项为管理员、普通用户

至于openid我们是用来控制数据权限,可以限制为只能查看本人的数据

2 开发API

用户注册的时候,我们通常希望将用户的密码加密存储,因此需要开发一个密码加密的API,因为涉及到调用内置的加密算法包,我们就需要用到微搭的云函数的功能

微搭的底层是云开发,云开发提供的静态网页托管、云存储、云数据库、Http访问服务、云函数都可以被我们调用。

具体的新建方法是打开我们的数据源,找到API,点击+号创建

选择云开发云函数

输入云函数的名称

点击编辑APIs方法,修改一下方法的名称

修改方法名称,然后点击管理云函数

这个时候我们就会跳转到我们云开发的底层,然后点击新建云函数

输入云函数的名称

然后点击确定

创建成功之后点击云函数的名称,编写我们具体的后端代码

打开编辑器之后,切换到函数代码页签

首先需要创建项目的依赖文件,点击保存并安装依赖按钮

点击复制

点击新建文件

输入package.json

将刚才拷贝的内容复制到这个文件中

复制成功后点击保存并安装依赖,安装成功会对一个node_modules文件夹

至于代码我们现在可以问chatgpt,我这里问一下豆包,提示词为如何用nodejs对密码进行加密,给出代码

把给出的示例代码贴入到我们的编辑器中,要稍稍改一下,主要是设置我们的入参和返回结果

'use strict';
exports.main = async (event, context) => {
    const crypto = require('crypto');
// 要加密的密码,这里是从入参里获取密码,使用event.password
const password = event.password
// 生成加密密钥
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);
// 创建加密对象
const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
// 加密密码
const encryptedPassword = cipher.update(password, 'utf8', 'base64');
const finalEncryptedPassword = encryptedPassword + cipher.final('base64');
console.log(finalEncryptedPassword);
//这里构造了返回结果,返回一个对象,属性为加密后的密码
    return {password:finalEncryptedPassword}
};

代码贴入后先点击保存,然后点击测试,需要先构造一个入参

云函数设置好之后,就可以回到API的设置界面了,选择我们刚刚配置好的云函数

入参,添加password

之后点击方法测试,看到测试成功后点击出参映射即可

3 搭建页面

API搭建好之后就可以创建注册页面了,如果没有应用可以先新建一个空白应用

打开应用编辑器,点击创建页面的图标新建我们的注册页面

往页面拖入表单容器组件,选择我们创建的数据源

选中密码组件,设置失焦事件

选择调用数据源方法

选择密码加密数据源,设置入参点击fx

绑定为我们输入框的值

接着在调用数据源方法的成功时设置变量赋值事件

将数据源返回的值再次的赋值给组件的输入值,为此我们先需要定义一个变量,在代码区点击+号,创建一个变量,命名为password

然后在变量赋值的时候,选择我们的变量,值的话从事件的返回值里设置

我们现在这种设置就形成了一种链式调用,链式调用里下一个事件可以通过event.detail拿到上一个事件的返回值。因为我们的api方法返回一个对象,所以我们要通过点属性的形式拿到加密后的密码

这样设置好之后还要让我们的输入值绑定为变量

4 数据入库

一切设置好之后,我们就可以点击实时预览图标来测试我们的功能

点击提交,我们再回到编辑器中,切换到数据源界面,点击管理数据

可以看到密码已经被加密存储了

5 页面跳转

现在提交成功后提示了一个信息,还可以设置跳转到注册功能的页面。先新建一个页面

输入页面的名称,注册成功

默认会添加一个网格布局,我们自己搭建一下,删掉网格布局,添加一个普通容器,里边添加一个图标组件和文本组件

设置普通容器的样式,设置为纵向排列,水平垂直居中

将文本内容修改为注册成功

切换到我们的注册页面,选中表单容器,设置一下表单容器的提交事件

在显示消息成功事件下的成功时添加一个打开页面事件,设置为我们的注册成功页面即可

总结

本篇我们带着搭建实现了用户注册的功能,在开发具体功能时需要先进行数据建模,然后通过前后端逻辑的编写来实现具体的功能。当然了建模和前后端代码的编写一个是需要学习知识,再一个就是需要进行实践,这样才能做到理论联系实际,运用自如。

相关文章
|
4天前
|
智能设计 UED
Dooring低代码关于辅助设计的思考和实践
Dooring低代码关于辅助设计的思考和实践
29 0
|
10月前
|
运维 数据可视化 搜索推荐
低代码平台:10分钟从入门到原理
低代码平台:10分钟从入门到原理
397 0
|
4天前
|
小程序 前端开发
如何在企业微信中使用微搭低代码
如何在企业微信中使用微搭低代码
|
4天前
|
前端开发 数据可视化 JavaScript
探索前端可视化开发:低代码平台原理与实践
【4月更文挑战第7天】本文探讨了低代码平台在前端开发中的应用,介绍了其模型驱动、组件化和自动化部署的原理,强调了提升效率、降低技术门槛、灵活适应变更和保证一致性等优势。建议开发者明确适用场景,选择合适平台,并培养团队低代码技能,同时规划与现有技术栈的融合,实施持续优化治理。低代码平台正改变开发格局,为业务创新和数字化转型提供新途径。
63 0
|
4天前
|
移动开发 小程序 UED
微搭低代码从入门到精通01应用介绍
微搭低代码从入门到精通01应用介绍
|
4天前
|
前端开发 JavaScript 关系型数据库
微搭低代码从入门到精通02数据源的介绍
微搭低代码从入门到精通02数据源的介绍
|
前端开发 小程序 API
微搭低代码中实现二维码生成
微搭低代码中实现二维码生成
微搭低代码中实现二维码生成
|
缓存 小程序 安全
|
XML API 开发工具
【视频】低代码样板间快速集成教程与扩展开发|学习笔记
快速学习【视频】低代码样板间快速集成教程与扩展开发。
212 0
【视频】低代码样板间快速集成教程与扩展开发|学习笔记
|
存储 移动开发 小程序
微搭低代码入门教程02
微搭低代码入门教程02
微搭低代码入门教程02