轻松搞定用户认证:微搭低代码平台打造完美登录体验01用户登录

news2024/12/25 9:54:37

目录

  • 1 创建数据源
  • 2 搭建后端API
  • 3 用户登录
  • 4 最终的代码
  • 总结

欢迎阅读我们的微搭低代码全栈开发课程,这是我们的第二篇。在第一篇中我们整体描述了小程序的功能结构,这一篇我们就进入实际的开发。

在开发小程序的时候,第一个需要考虑的就是用户如何注册和登录。我们在日常使用小程序的时候,在哪会遇到要求注册的呢?一般是在你准备下单的时候。

因为如果你是准备配送,那商家必须要知道你的手机号和配送地址。如果是堂食的话留了联系方式,也方便商家日后在推出优惠活动和新品时候进行推荐。

如果要留存用户这些个人信息,必须用到数据源的概念。数据源相当于微搭提供的一套在线的数据库,他可以存储基本的文本信息,也可以存储像图片、视频、音频、文件等内容。

我们首先要创建一个用户的数据源用来存储信息

1 创建数据源

想必你在我们第一篇文章里已经将账号开通了,开通之后打开你的控制台,找到数据模型
在这里插入图片描述
初始状态会有用户和部门两个表,这里存储的是微搭的内部账号,内部账号开通的时候需要消耗授权

我们在小程序里注册的用户在微搭里叫访客,访客目前是没有限制,可以自由添加的。

点击数据模型列表旁边的+号,创建数据源,我们起一个名字叫顾客表
在这里插入图片描述
在这里插入图片描述
点击创建按钮完成我们数据源的创建

数据源创建好之后就需要添加列,所谓的列指的是我们需要存储的信息。在顾客表里我们要存储用户的昵称、头像、手机号三个字段

点击表格的添加列按钮,先添加昵称字段
在这里插入图片描述
在这里插入图片描述
因为昵称通常都是文字,所以我们这里的数据类型选择文本

商家在后台里看到用户下单的时候,关联到顾客表的内容的,通常需要显示有意义的信息。因此在添加的时候我们将昵称作为主列字段,这样后续在其他业务的时候需要用到顾客信息的就展示这个字段的内容

在这里插入图片描述
第二列我们添加头像,头像通常是一个图片,数据类型我们选择图片
在这里插入图片描述
有同学可能会有疑问,选择图片之后他存到哪里了呢?这种内容通常会添加到云存储中,在你购买的套餐里,我们的套餐包分为数据库大小,存储大小,CDN流量,这里的存储就是用来存储这种图片类型的内容的

第三列我们添加手机号码,如果希望字段有先后顺序的,我们可以在刚刚添加的头像列,点击鼠标,选择向右添加一列,用来添加我们的手机字段,类型选择电话
在这里插入图片描述
在这里插入图片描述

2 搭建后端API

数据源添加好之后,就需要编写我们的后端API。所谓的API是指我们用来操作数据源的具体的方法,比如我们的用户的新增、修改、删除,以及登录验证和手机号码的唯一性校验。

具体编写什么样的API是和你的业务规划相关的。在用户管理这个模块,我们通常先创建几个方法包括用户登录、用户创建、手机号码验证。

切换到我们的API模块,点击+号新建
在这里插入图片描述
在打开的界面选择自定义代码
在这里插入图片描述
这里自定义API一共有五个选项,第一种一般是用来集成外部的请求,通常你在刚起步的时候也不需要付费使用各类互联网的服务,不用管。第二种和第三种是为了兼容传统开发,我们低代码就是和传统开发是完全不同的路子,传统开发的也不会用这个,所以这两个基本没啥用

第四种就是我们目前用到的,他的好处是可以直接使用微搭的各类后端API,最后一种就是原来的云开发的内容,叫云函数。云函数主要支持你引入第三方的包,我们在员工注册登录部分就会用到加密算法,这个就用到了第三方的加密算法包,在那一章节我们具体讲解云函数的用法。

开放服务就是腾讯全家桶的各类产品了,如果你的支付能力更强,就可以开通企业版,对应的开通全家桶的各类付费产品,这样就可以围绕鹅厂生态来构建自己的应用。

介绍完了具体的内容,还是回到我们的主题上,先创建我们的用户管理的api
在这里插入图片描述
输入名称用户管理,标识userManager,点击创建。工具也会用拼音的缩写生成,但是实际体验下来还是用英文命名辨识度高后续也好维护。

3 用户登录

在小程序中,如何辨别是哪一个用户登录呢?通常会用到微信的唯一标识,我们叫做openid,每一个微信用户都有一个唯一标识。但需要注意的是,不同的产品形态这个标识是不一样的,小程序、公众号、企业微信的标识都是不同的。我们这里主要用到小程序的唯一标识。

点击编辑API方法,我们添加第一个方法,顾客登录,customerLogin
在这里插入图片描述
在这里插入图片描述
顾客登录的时候我们需要先得到顾客的openid,在API中是通过入参来获取的。在入参部分我们新加一个参数openid
在这里插入图片描述
在这里插入图片描述
点击API的详细了解超链接,打开我们的文档
在这里插入图片描述
将文档滑动到调用数据模型部分
在这里插入图片描述
粘贴这部分代码到我们的编辑器里
在这里插入图片描述
剩下就是我们如何替换对应的参数,再次回到我们的文档里,找到数据模型V2,在右侧点击查询多条
在这里插入图片描述
滑到有filter字眼的代码部分
在这里插入图片描述
从params开始一直复制到console.log上边
在这里插入图片描述
然后替换我们编辑器里的params部分
在这里插入图片描述
接着替换我们的methodName,替换为wedaGetRecordsV2在这里插入图片描述
这个时候不要关闭我们这个窗口,在浏览器里新开一个窗口,打开我们的控制台
在这里插入图片描述
找到我们刚刚创建的顾客表,切换到基本信息,复制标识,替换到我们代码里的name
在这里插入图片描述
如果把低代码开发比作西天取经,那这就是你的第一难了。初学者往往在这第一步就彻底懵了,这是干啥呢?我们上述的这一系列步骤叫构建我们的代码模板,我们写方法也不是凭空去编制的,都是调用别人写好的方法进行组合的。你有了代码模板就和你炒菜的菜谱一样,照着菜谱放入各种调料,最终就是一道不错的菜肴。

上述配置好之后,就是要配置我们的查询条件了,我们需要根据得到了openid过滤,根据哪个字段过滤呢,是根据我们数据源的openid,我们在刚刚创建的时候忘记创建了,现在在数据源继续添加一列,叫openid

在这里插入图片描述
然后就是构造查询条件,查询条件是这样的
在这里插入图片描述
这样构造好查询条件,我们的result会返回啥呢?要想看到结果,我们需要把result作为返回值返回,在return部分返回我们的result,然后点击右侧的方法测试就可以看到结果
在这里插入图片描述
这里有两个属性,total表示查询的记录的条数,为0说明当前传入的openid没有匹配到数据。records表示我们查询到的结果,类型是一个数组,现在表示空数组,没有数据的意思

接着我们就可以根据返回的结果来构造我们的登录信息了。如果找到数据说明就是注册用户,那么我们返回records的第一条记录,如果没找到我们就给一个信息未注册

if (result.records && result.records.length > 0) {
    // 用户已注册,返回用户信息
    return {
      code: 0,
      message: '登录成功',
      data: result.records[0], // 返回找到的用户记录
    };
  } else {
    // 用户未注册
    return {
      code: 1,
      message: '用户未注册',
      data: null,
    };
  }

我上边的代码就表达了这个意思,然后再执行方法测试,就可以看到我们构造好的结果
在这里插入图片描述
然后点击出参映射就完成了我们方法的编写
在这里插入图片描述
按照未匹配到数据的出参有一个问题,我们的data变成了文本类型
在这里插入图片描述
这肯定是不行的,因此我们先要添加一条测试数据,重新构造一下出参。打到我们的数据模型,添加一行
在这里插入图片描述
在这里插入图片描述
重新输入有数据的入参
在这里插入图片描述
这个时候再点击出参映射我们的返回值就构造好了,删除非必要的,只保留我们后续会用到的参数
在这里插入图片描述

4 最终的代码

module.exports = async function (params, context) {
  // 调用数据模型方法获取用户记录
  const result = await context.callModel({
    name: 'customer_v7mamho', // 数据模型标识
    methodName: 'wedaGetRecordsV2', // 数据模型方法标识
    params: {
      // 筛选内容,查找与当前openid匹配的用户
      filter: {
        where: {
          $and: [
            {
              openid: {
                $eq: params.openid,
              },
            },
          ],
        },
      },
      // 排序
      orderBy: [
        {
          createdAt: "asc", // 创建时间,正序
        },
        {
          updateBy: "desc", // 更新时间,倒序
        },
      ],
      // 返回字段选择
      select: {
        $master: true, // 返回主表
      },
      // 返回total字段
      getCount: true,
      // 页面大小
      pageSize: 1, // 只需要一条记录
      // 当前页面
      pageNumber: 1,
    },
  });

  // 检查查询结果
  if (result.records && result.records.length > 0) {
    // 用户已注册,返回用户信息
    return {
      code: 0,
      message: '登录成功',
      data: result.records[0], // 返回找到的用户记录
    };
  } else {
    // 用户未注册
    return {
      code: 1,
      message: '用户未注册',
      data: null,
    };
  }
};

总结

本篇是我们全栈开发教程的第二篇,重点讲解了用户登录的逻辑,涉及到数据源的创建、后端API的编写。难度对于初学者会有点大,但是低代码学习其实就是不断克服困难的过程,全部克服了也就是一名合格的低代码开发者了。下一篇我们会继续完善我们的登录功能,敬请期待。

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

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

相关文章

数据结构基础讲解(一)——线性表之顺序表专项练习

本文数据结构讲解参考书目: 通过网盘分享的文件:数据结构 C语言版.pdf 链接: https://pan.baidu.com/s/159y_QTbXqpMhNCNP_Fls9g?pwdze8e 提取码: ze8e 目录 前言 一.线性表的定义 二.线性表的基本操作 三.线性表的顺序存储和表示 四.顺序表中基本操作…

如何设置好看的电脑屏保?电脑屏保设置教程

如何设置好看的电脑屏保?电脑屏保设置教程。大家好,今天小编给大家带来了好看的电脑屏保,教大家如何设置一个好看的电脑屏保。屏保软件很多,今天我们介绍一款比较有特殊的屁屏保软件:芝麻时钟(芝麻时钟 桌面…

【C++二分查找】1760. 袋子里最少数目的球

本文涉及的基础知识点 C二分查找 LeetCode1760. 袋子里最少数目的球 给你一个整数数组 nums ,其中 nums[i] 表示第 i 个袋子里球的数目。同时给你一个整数 maxOperations 。 你可以进行如下操作至多 maxOperations 次: 选择任意一个袋子,并…

AMEsim和Simulink联合仿真生成新的.mexw64液压模型文件

AMEsim和Simulink进行联合仿真非常重要的就是AMEsim经过第四阶段Simulation会在相同文件下面生成一个与AMEsim液压模型相同名字的.mexw64文件,在Simulink进行联合仿真的S-Function需要找的也就是这个文件,只不过输入的时候除了液压模型名字之外&#xff…

形态学运算合集

圆形结构元素 禹晶、肖创柏、廖庆敏《数字图像处理(面向新工科的电工电子信息基础课程系列教材)》 禹晶、肖创柏、廖庆敏《数字图像处理》资源二维码

Post-Training有多重要?一文带你了解全部细节

1. 简介 随着LLM学界和工业界日新月异的发展,不仅预训练所用的算力和数据正在疯狂内卷,后训练(post-training)的对齐和微调方法也在不断更新。InstructGPT、WebGPT等较早发布的模型使用标准RLHF方法,其中的数据管理风…

Git撤销add

git要提交版本第一步是add,就算是文件本身已经存在只是修改,也需要添加,即添加到暂存区。其中最偷懒和也保险的命令是: git add . 即添加了本地(多称工作目录)所有文件。 撤销add有以下文章: …

解决SRS流媒体服务服务器无法接收客户端ipv6 RTMP推流的思路

这篇短文我不介绍SRS是什么,主要介绍一个场景问题,场景是你使用服务器并且部署了SRS服务配置成一个媒体流转发服务,也就是客户端往SRS流媒体服务器推流,然后SRS把流转推出去,但是会涉及到一个问题是:用户客…

人工智能时代开启ai代写模式,让创作变得更加简单!

随着人工智能技术的飞速发展,我们的生活和工作方式正在发生翻天覆地的变化。在这个信息爆炸的时代,内容创作领域也迎来了新的变革——ai代写。这一模式的出现,让文章写作变得更加简单高效,为创作者们打开了新的可能。 一、ai代写的…

短剧影视小程序任意文件读取

1 漏洞描述: 任意文件读取: 在/Ems.php 控制器中的 juhecurl 方法存在curl_exec函数,且参数url为用户可控,导致漏洞产生 2 搜索语句: Fofa: "/VwmRIfEYDH.php" 3 漏洞复现: poc …

JVM - 字节码文件详解

文章目录 目录 文章目录 1. 无关性基石 2. Class类文件结构 magic- 魔数 主副版本号 常量池 访问标志 类索引,父类索引与接口索引集合 字段 方法 属性 3. 类加载机制 类的生命周期 类加载过程 加载 连接 验证 准备 解析 初始化 4. 类加载器 类与类加载器…

RT-Thread Nano版本在STM32G474上的快速移植

目录 概述 1 RT-Thread Nano 1.1 Nano版本介绍 1.2 RT-Thread Nano的特点 2 STM32Cube创建项目 2.1 配置参数 2.2 RT-Thread配置 3 RT-Thread适配MCU 3.1 预编译代码 3.2 解决编译错误 3.2.1 配置OS_TICK 3.2.2 使能finsh_config.h 3.3.3 移植FINSH 3.3 配置TICK …

《黑神话:悟空》专题合集MOD/修改器/壁纸/音乐/CG剧情

《黑神话:悟空》专题合集」 链接:https://pan.quark.cn/s/d67857f4e308 包含内容: 《黑神话:悟空》MOD合集 《黑神话:悟空》修改器(风灵月影) 《黑神话:悟空》壁纸合集 《黑神话&#xff1…

gpedit.msc本地组策略编辑器,结果发现竟然打不开了

本地组策略编辑器,结果发现竟然打不开了。 1建一个txt文件 List.txt ,粘贴如下内容(全部复制新粘贴哈): echo offpushd "%~dp0"dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-Clie…

<Rust>egui学习之部件(十一):如何在窗口中添加单选框radiobutton部件?

前言 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析,主要讲解egui的源代码、部件属性、如何应用。 环境配置 系统:windows 平台:visual studio code 语言:rust 库:egui、eframe 概述 本文是本专栏的第十一篇…

SpringBoot3+Vue3开发商店上货管理系统

系统介绍 上货管理系统是专门为各种类型商店打造的一款进货管理系统。针对整个商店进货流程,提供很多方便功能,帮助店家完成上货流程。比如上货清单管理功能、上货清单确认功能、供货商管理功能、商品管理功能等。 技术栈 后端:SpringBoot…

C++从入门到起飞之——priority_queue(优先级队列) 全方位剖析!

🌈个人主页:秋风起,再归来~🔥系列专栏:C从入门到起飞 🔖克心守己,律己则安 目录 1、priority_queue的介绍 2、priority_queue的使用 3、priority_queue的模拟实现 3.1、仿函数的介…

Redis-主从集群

主从架构 单节点Redis的并发能力是有上限的,要进一步提高Redis的并发能力,就需要搭建主从集群,实现读写分离。 主从数据同步原理 全量同步 主从第一次建立连接时,会执行全量同步,将master节点的所有数据都拷贝给sla…

Microsoft SC-100: Microsoft 网络安全架构师

SC-100认证介绍 Microsoft SC-100: Microsoft 网络安全架构师是微软网络安全方向的相关证书, 作为 Microsoft 网络安全架构师,你要将网络安全策略转化为保护组织的资产、业务和运营的功能。 你要设计、指导实现和维护遵循零信任原则和最佳做法的安全性解…

最新HTML5中的文件详解

第5章 HTML5中的文件 5.1选择文件 可以创建一个file类型的input,添加multiple属性为true,可以实现多个文件上传。 5.1.1 选择单个文件 1.功能描述 创建file类型input元素,页面中不再有文本框,而是 选择文件 按钮,右侧是上次文件的名称&a…