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

文章目录

  • 1 搭建数据源
  • 2 开发API
  • 3 搭建页面
  • 4 数据入库
  • 5 页面跳转
  • 总结

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

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

1 搭建数据源

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

image-20240130165147889

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

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

image-20240130165342770

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

image-20240130165445086

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

image-20240130165532033

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

2 开发API

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

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

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

image-20240130165852127

选择云开发云函数

image-20240130165943735

输入云函数的名称

image-20240130170040603

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

image-20240130170241158

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

image-20240130170446549

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

image-20240130170558050

输入云函数的名称

image-20240130170644065

然后点击确定

image-20240130170725110

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

image-20240130170834817

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

image-20240130170928853

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

image-20240130171107285

点击复制

image-20240130171148751

点击新建文件

image-20240130171233036

输入package.json

image-20240130171310937

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

image-20240130171629492

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

image-20240130172015875

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

image-20240130172226815

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

'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}
};

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

image-20240130173001164

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

image-20240130173146872

入参,添加password

image-20240130173226343

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

image-20240130173321209

3 搭建页面

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

image-20240130173545053

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

image-20240130173648570

image-20240130173716863

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

image-20240130173840940

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

image-20240130175733455

选择调用数据源方法

image-20240130175814997

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

image-20240130175909520

绑定为我们输入框的值

image-20240130180000610

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

image-20240130180108945

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

image-20240131170559144

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

image-20240131170714325

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

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

image-20240131170905650

4 数据入库

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

image-20240131170955285

image-20240131171047209

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

image-20240131171137020

image-20240131171211996

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

5 页面跳转

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

image-20240131171321860

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

image-20240131171357988

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

image-20240131171541025

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

image-20240131171701254

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

image-20240131171745315

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

image-20240131171843941

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

image-20240131171944909

image-20240131172024008

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/658913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣349两个数的交集

题目连接:349. 两个数组的交集 - 力扣(LeetCode) 给定两个数组 nums1 和 nums2 ,返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1: 输入: nums1 [1,2,2…

Android组件化中的Arouter学习

假设现在有两个业务组件登录和问答模块之间需要进行通信,可能会想到用反射的方式,是可以但是会影响性能,而写的代码比较多类名这些要记清楚。 路由可以看做表,每个map对应一张表 我们可以试着这么写,完成MainActivity跳…

Kerberos 安全认证

什么是Kerberos Kerberos是一种计算机网络授权协议,用来在非安全网络中,对个人通信以安全的手段进行身份认证。密码不在网络上传输,提高安全性。 简写名词 AS(Authentication Server) 认证服务器KDC(Key…

线程的状态和生命周期

前言 在多线程编程中,线程的状态和生命周期是两个非常重要的概念。了解线程的状态和生命周期可以帮助我们更好地理解和编写多线程程序。在本篇博客中,我们将详细介绍线程的状态和生命周期,以及如何在不同的状态之间进行转换。 一、线程的状态…

汉化GAL笔记

Idol Magical Girl Chiru Chiru Michiru 1 2 发布地址:https://tieba.baidu.com/p/8881200756 .hg3文件格式搜索 .int封包 cs2conf.dll文件 确认catsystem2引擎 使用GARbro解包 lneditor解析cst文件失败 使用cstTextProc:初窥Galgame汉化——以Ca…

【原创】VMware创建子网,并使用软路由获得访问互联网的能力,并通过静态路由让上层网络访问位于虚拟机的子网

前言 一看标题就很离谱,确实内容也有点复杂,我的初衷是为后面搞软路由做准备,先通过VMware进行可行性验证,确定方案是否可行,再做下一步的计划。结论当然可以的,能通能访问,强的不行。 网络拓…

SV-7041T 多媒体教学广播IP网络有源音箱

SV-7041T是深圳锐科达电子有限公司的一款2.0声道壁挂式网络有源音箱,具有10/100M以太网接口,可将网络音源通过自带的功放和喇叭输出播放,可达到功率30W。同时它可以外接一个30W的无源副音箱,用在面积较大的场所。5寸进口全频低音喇…

蓝桥杯嵌入式第七届真题(完成) STM32G431

蓝桥杯嵌入式第七届真题(完成) STM32G431 题目 相关文件 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**********************…

Leetcode 3022. Minimize OR of Remaining Elements Using Operations

Leetcode 3022. Minimize OR of Remaining Elements Using Operations 1. 解题思路2. 代码实现 题目链接:3022. Minimize OR of Remaining Elements Using Operations 1. 解题思路 这道题坦率地说其实不太想写这篇题解,因为其实自己根本没有搞定&…

React详解

介绍: React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,在13年f进行开源 17版本官网:React – A JavaScript library for building user interfaces 18版本官网:React 官方中文文档 特点&…

Origin 2022下载安装教程,操作简单,小白也能轻松搞定,附安装包,带软件使用教程

前言 Origin是一个科学绘图、数据分析软件,支持各种各样的2D/3D图形,包括统计,信号处理,曲线拟合以及峰值分析,Origin具有强大的数据导入功能和多样的图形输出格式。 准备工作 1、Win7及以上系统 2、提前准备好 Or…

2024西湖论剑misc方向wp

每年的misc都是最无聊坐牢的 数据安全-easy_tables import pandas as pd import hashlib from datetime import datetimeusers_df pd.read_csv(users.csv) permissions_df pd.read_csv(permissions.csv) tables_df pd.read_csv(tables.csv) actionlog_df pd.read_csv(acti…

vue使用json格式化

安装 npm i bin-code-editor -S // Vue2 npm install vue-json-viewer --save 在main.js引用 //引入bin-code-editor相关插件和样式 import CodeEditor from bin-code-editor; import bin-code-editor/lib/styles/index.css; import JsonViewer from vue-json-viewer //vue使用…

面试经典 150 题 -- 双指针 (总结)

125 . 验证回文串 先对字符串进行预处理把大写字符转小写&#xff0c;然后将字母和数字全存入一个vector<char>中 ; 然后运用双指针来进行判断 ; class Solution { public:bool isPalindrome(string s) {int n s.size();vector<char> ans;for(char c : s){if(c…

单片机驱动多个ds18b20

目录 1设计内容 2ds18b20介绍 2.1传感器引脚及原理图 2.2寄存器配置 3程序实现 3.1配置初始化 3.2配置寄存器 3.3ROM读取 3.4温度读取 1设计内容 通过51单片机&#xff0c;读取总线上挂载的多个ds18b20的温度信息。 如下图&#xff0c;成功读取到3路温度数据。 2ds18…

[docker] Docker容器服务更新与发现之consul

一、consul的相关知识 1.1 什么是注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可用性&#xff0c;也不考虑服务的压力承载&#xff0c;服务之间调用单纯的通过接口访问。直到后来出现了多个节点的分布式架构&#…

百度百舸平台的大模型训练最佳实践

今天的分享是百度智能云在 23 年夏季推出的「云智公开课 — AI 大底座系列」第 8 期&#xff0c;也是本次活动的最后一期。前面 7 期的内容&#xff0c;我的同事对大模型场景涉及到的各个模块&#xff0c;从网络、计算、存储、向量数据库、AI 框架、LMOps 等维度&#xff0c;为…

【网络奇遇记】探索网络世界的奥秘:计算机网络导论|章末总结

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️信息时代的计算机网络1.1 本文目录 二. ⛳️因特网的概述2.1 本文目录2.2…

Redis学习——高级篇⑥

Redis学习——高级篇⑥ Redis7高级之简单实现布隆过滤器BloomFilter &#xff08;七&#xff09; 7 布隆过滤器1. 是什么2.能干嘛3.实现原理和数据结构4.使用三步骤5.尝试手写简单的布隆过滤器&#xff0c;结合bitmap1.整体架构2.步骤设计3 springboot redis mybatis布…

springBoot - mybatis 多数据源实现方案

应用场景: 多数据源 小型项目 或者 大项目的临时方案中比较常用.在日常开发中,可能我们需要查询多个数据库,但是数据库实例不同,导致不能通过 指定schema的方式 区分不同的库, 这种情况下就需要我们应用程序配置多数据源 实现方式: 首先自定义实现 datasource数据源 为当前…