电商小程序04实现登录逻辑

目录

  • 1 创建自定义方法
  • 2 获取用户名和密码
  • 3 验证用户是否同意协议
  • 4 验证用户名和密码
  • 总结

上一篇我们实现了登录功能的前端界面,这一篇实现一下登录的具体逻辑。

1 创建自定义方法

一般如果页面点击按钮需要有事件响应的,我们用自定义方法来实现。打开我们的应用,在代码区点击立即新建
在这里插入图片描述
选择新建javascript方法
在这里插入图片描述
修改一下方法名称,改为login
在这里插入图片描述

2 获取用户名和密码

在做登录校验的时候,我们需要先获取用户输入的信息。微搭里用$w作为命名空间,可以通过组件的id来获取到具体的组件信息,然后再获取属性。获取用户名和密码的代码如下

const username = $w.input1.value
const password = $w.input2.value

这里涉及到javascript的变量定义和赋值的概念。我们这里用const声明了一个常量,然后用等号给常量进行赋值,常量的意思是如果赋值后不允许再次改变。

这里如果想看一下常量的值,我们可以使用console.log打印一下常量的值,比如增加打印内容

console.log('username',username)
console.log('password',password)

如果想看到结果,我们需要给登录按钮设置点击事件,调用我们的自定义方法
在这里插入图片描述
选择javascript方法
在这里插入图片描述
选择我们定义的login方法
在这里插入图片描述
然后点击实时预览按钮
在这里插入图片描述
在打开的界面,点击开发调试工具
在这里插入图片描述
然后输入用户名和密码,点击登录按钮就可以看到控制台的信息
在这里插入图片描述

3 验证用户是否同意协议

在登录的时候,需要验证是否同意用户协议,如果同意我们就验证用户名和密码是否正确,如果不同意我们就提示用户信息要求点击。

先定义一个变量来获取用户的选择

const agree = $w.radio1.valueif(agree == "1"){}else{$w.utils.showToast({title:"请勾选同意用户协议",icon:'error',duration:2000})}

这里用到了一个语法是javascript的分支判断语句,分支判断语句的基本结构是if和else,表示的是如果if语句小括号里的表达式返回为true,就执行if语句的内容,如果返回false就执行else的部分。

如果我们不勾选用户协议,那么agree的值就为空,空是否等于1呢,显然不等于,就走到了else里。我们在else里调用了前端api的showToast方法,给用户一个提示信息

4 验证用户名和密码

验证用户名和密码是否有效,其实是去数据源里匹配,如果用用户名和密码匹配到数据,那表示登录正确,如果没有匹配到就表示验证未通过。我们这里调用数据源的查询单条方法

在这里插入图片描述
代码贴入之后,await有一个红色的波浪线,表示这块是有语法错误的。在javascript中如果出现了await关键字,那它外层的代码就需要声明为异步方法,用async表示

然后就是要替换我们自己的dataSourceName,在侧边栏点击数据源的图标
在这里插入图片描述
选中我们的注册用户数据源,粘贴数据源的标识
在这里插入图片描述
在这里插入图片描述
之后就是构造查询条件,需要按照用户名和密码去做等值匹配,代码如下

const username = $w.input1.valueconst password = $w.input2.valueconsole.log('username', username)console.log('password', password)const agree = $w.radio1.valueif (agree == "1") {const user = await $w.cloud.callDataSource({dataSourceName: "zcyhxx_7diyeuv",methodName: "wedaGetItemV2",params: {// 筛选内容,筛选内容推荐使用编辑器数据筛选器生成filter: {where: {$and: [{zh: {$eq: username, // 获取单条时,推荐传入_id数据标识进行操作},},{mm: {$eq: password, // 获取单条时,推荐传入_id数据标识进行操作},},],},},select: {$master: true, // 常见的配置,返回主表},},});console.log('user',user)} else {$w.utils.showToast({title: "请勾选同意用户协议",icon: 'error',duration: 2000})}

初学者可能对数据源的参数比较困惑,微搭是使用mongodb作为数据库,写法肯定和你熟悉的关系型数据库是完全不一样的。mongodb的特点是一切都需要用对象和数组去构造

比如我们这里的查询条件,where后边就是一个数组,而里边的元素是我们具体的查询条件,我们这里用了且的关系,每一个对象都构造了一个查询条件,这里是让账号=用户输入的账号,密码=用户输入的密码

一定要注意,左边是数据源的字段标识,右边要传入我们定义的常量

查询的结果呢也是一个对象,通过_id是否有值来判断用户名和密码是否正确,完整的代码

export default async function ({ event, data }) {const username = $w.input1.valueconst password = $w.input2.valueconst agree = $w.radio1.valueconsole.log('agree', agree, typeof (agree))if (agree == '1') {const user = await $w.cloud.callDataSource({dataSourceName: "zcyhxx_7diyeuv",methodName: "wedaGetItemV2",params: {// 筛选内容,筛选内容推荐使用编辑器数据筛选器生成filter: {where: {$and: [{zh: {$eq: username, // 获取单条时,推荐传入_id数据标识进行操作},},{mm: {$eq: password, // 获取单条时,推荐传入_id数据标识进行操作},},],},},select: {$master: true, // 常见的配置,返回主表},},});console.log('user', user)if (user._id) {$w.utils.redirectTo({pageId: "index", // 页面 IdpackageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});} else {$w.utils.showToast({title: "用户名或者密码错误",icon: "error",duration: 2000, // 2秒});}} else {$w.utils.showToast({title: "请勾选用户协议",icon: "error",duration: 2000, // 2秒});}
}

增加了如果用户名和密码正确之后重定向到首页,如果错误给出提示信息。

总结

本篇我们带着大家一步步的拆解了用户登录的逻辑,低码开发也需要写各种前后端的代码,有些初学者的预期是花个五六个小时就可以掌握工具的用法,显然是不现实的。既然用低代码可以实现用代码就可以做的事,他肯定是有一些扩展的,比如就会支持前后端代码的编写,熟练掌握开发语言是把工具发挥出应有的价值的前提。

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

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

相关文章

第四篇:数据库安装(命令行)

数据库命令行界面安装 mysql官网,下载解压 https://dev.mysql.com/downloads/mysql/ 在安装之前先去检查一下,本地计算机的用户合组 winr(输入lusrmgr.msc) -点击组-双击administrator 如果只有这两个,那么就添加一下,提高网络服务的权限(避免出现mysql启动失败) …

MySQL之体系结构

华子目录 MySQL简介MySQL的特性MySQL版本MySQL常见版本 数据库排名网站MySQL结构体系查看最大连接数查询缓存配置情况 一条SQL语句执行流程 MySQL简介 MySQL是一个小型关系数据库管理系统,开发者为瑞典MySQL AB公司。在2008年1月16号被sun公司10亿美金收购。2009年…

springboot项目启动报错:dynamic-datasource can not find primary datasource

项目启动报错信息 Caused by: com.baomidou.dynamic.datasource.exception.CannotFindDataSourceException: dynamic-datasource can not find primary datasourceat com.baomidou.dynamic.datasource.DynamicRoutingDataSource.determinePrimaryDataSource(DynamicRoutingDat…

编程实例分享,手表养护维修软件钟表维修开单管理系统教程

编程实例分享,手表养护维修软件钟表维修开单管理系统教程 一、前言 以下教程以 佳易王钟表维护维修管理系统软件V16.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 左侧为导航栏, 1、系统设置:可以设置打…

【深度学习】pytorch 与 PyG 安装(pip安装)

【深度学习】pytorch 与 PyG 安装(pip安装) 一、PyTorch安装和配置(一)、安装 CUDA(二)、安装torch、torchvision、torchaudio三个组件(1)下载镜像文件(2)创建…

【网络技术】【Kali Linux】Nmap嗅探(二)多设备扫描

上期实验博文:(一)简单扫描 一、实验环境 本次实验进行Nmap多设备扫描,实验使用 Kali Linux 虚拟机(扫描端)、Ubuntu 22.04虚拟机(被扫描端1)、Ubuntu 18.04虚拟机(被扫…

【力扣】快乐数,哈希集合 + 快慢指针 + 数学

快乐数原题地址 方法一:哈希集合 定义函数 getNext(n) ,返回 n 的所有位的平方和。一直执行 ngetNext(n) ,最终只有 2 种可能: n 停留在 1 。无限循环且不为 1 。 证明:情况 1 是存在的,如力扣的示例一…

嵌入式学习之Linux入门篇笔记——15,Linux编写第一个自己的命令

配套视频学习链接:http://【【北京迅为】嵌入式学习之Linux入门篇】 https://www.bilibili.com/video/BV1M7411m7wT/?p4&share_sourcecopy_web&vd_sourcea0ef2c4953d33a9260910aaea45eaec8 1.什么是命令? 命令就是可执行程序。 比如 ls -a…

C#静态数组删除数组元素不改变数组长度 vs 动态数组删除数组元素改变数组长度

目录 一、使用的方法 1.对静态数组删除指定长度并不改变数长度的方法 (1)静态数组 (2)对静态数组删除元素不得改变其长度 2.对动态数组删除指定长度并改变数长度的方法 (1)动态数组 (2&a…

【大模型上下文长度扩展】MedGPT:解决遗忘 + 永久记忆 + 无限上下文

MedGPT:解决遗忘 永久记忆 无限上下文 问题:如何提升语言模型在长对话中的记忆和处理能力?子问题1:有限上下文窗口的限制子问题2:复杂文档处理的挑战子问题3:长期记忆的维护子问题4:即时信息检…

javaEE - 20( 18000字 Tomcat 和 HTTP 协议入门 -1)

一: HTTP 协议 1.1. HTTP 是什么 HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议. HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议. 最新的 HTTP 3 版本也正在完善中, 目前 Google / Facebook 等公司的产品已经支持了. HTT…

美赛结束后,还可以转学术论文发表!

美赛论文转学术论文 写在前面学术论文发表的意义论文发表指导 写在前面 2024年美赛已经顺利结束了,美赛虽然画上了句号,但大家的科研竞赛之路才刚刚开始。 大家都在赛事中完成了一份具有发表基础的文章,想要这篇文章价值最大化,…

2.8作业

程序代码&#xff1a; CCgcc EXEhello OBJS$(patsubst %.c,%.o,$(wildcard *.c)) CFLAGS-c -oall:$(EXE)$(EXE):$(OBJS)$(CC) $^ -o $%.o:%.c$(CC) $(CFLAGS) $ $^.PHONY:cleanclean:rm $(OBJS) $(EXE) 程序代码&#xff1a; #include<stdio.h> #include<string.h&…

机器学习--K-近邻算法常见的几种距离算法详解

文章目录 距离度量1 欧式距离(Euclidean Distance)2 曼哈顿距离(Manhattan Distance)3 切比雪夫距离 (Chebyshev Distance)4 闵可夫斯基距离(Minkowski Distance)5 标准化欧氏距离 (Standardized EuclideanDistance)6 余弦距离(Cosine Distance)7 汉明距离(Hamming Distance)【…

MySQL篇----第七篇

系列文章目录 文章目录 系列文章目录前言一、水平分区二、分库分表之后,id 主键如何处理三、存储过程(特定功能的 SQL 语句集)前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你…

从零开始手写mmo游戏从框架到爆炸(七)— 消息封装

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 上一篇&#xff0c;我们初步把消息handler 注册到了服务中&#xff0c;在进行后续工作之前我们需要再做一些准备工作。 第一&#xff1a;把之前自己管理的bean放到spring中…

c++设计模式之装饰器模式

作用 为现有类增加功能 案例说明 class Car { public:virtual void show()0; };class Bmw:public Car { public:void show(){cout<<"宝马汽车>>"<<endl;} };class Audi:public Car { public:void show(){cout<<"奥迪汽车>>&q…

三、设计模式相关理论总结

一、面向对象编程 1.1 概述 简称Object Oriented Program(OOP)&#xff0c;指以类或对象作为基础组织单元&#xff0c;遵循封装、继承、多态以及抽象等特性&#xff0c;进行编程。其中面向对象不一定遵循封装、继承、封装和多态等特性&#xff0c;只是前人总结的套路规范&…

嵌入式学习之Linux入门篇笔记——10,Linux连接档概念

配套视频学习链接&#xff1a;http://【【北京迅为】嵌入式学习之Linux入门篇】 https://www.bilibili.com/video/BV1M7411m7wT/?p4&share_sourcecopy_web&vd_sourcea0ef2c4953d33a9260910aaea45eaec8 目录 1.Linux 下的连接档种类 2.什么是 inode&#xff1f; 3.什…

7、7 个适合初学者的项目,让您开始使用 ChatGPT

7 个适合初学者的项目,让您开始使用 ChatGPT 在当今世界释放人工智能的力量。 在技术以前所未有的速度发展的时代,人工智能?—?或朋友🤓的人工智能脱颖而出,成为最具变革性的力量之一。 从自动化日常任务到预测复杂模式,人工智能正在重塑行业并重新定义可能性。 当我…