微搭低代码实现登录注册功能

目录

  • 1 创建用户数据源
  • 2 实现登录逻辑
  • 3 搭建登录页面
  • 4 设置登录框
  • 5 实现登录的逻辑
  • 6 用户注册
  • 总结

原来产品在创建应用的时候可以创建模型应用,模型应用对应我们小程序的后端。最新的更新已经将模型应用的能力下线,那我们不得不自己实现一下后端的逻辑。

后端需要要求用户进行注册,注册完了之后进行登录。本文介绍一下如何借助API的能力实现注册和登录。

1 创建用户数据源

用户在注册的时候需要录入数据,需要先创建数据源。打开控制台,找到数据源,创建我们的用户表
在这里插入图片描述
表的话分为两个字段,分别为用户名和密码。

2 实现登录逻辑

表建好之后,我们需要实现登录的逻辑。找到APIs,创建一个API
在这里插入图片描述
选择自定义代码
在这里插入图片描述
输入名称和标识,点击创建,完成API的创建
在这里插入图片描述
API创建好之后,我们要创建一个方法
在这里插入图片描述
然后输入如下代码

/**
* 根据用户名和密码来验证用户是否成功登录,返回登录的结果
*
*/
module.exports = async function (params, context) {
let result = {}
const user = await context.callModel({name: 'zcyh_hh2jizk', // 数据模型标识,可以前往「数据源 - 数据模型」列表页查看methodName: 'wedaGetItem', // 数据模型方法标识,支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法params: {where:[{"rel":"eq","key":'yhm',"val":params.username},{"rel":"eq","key":'mm',"val":params.password}]}, // 数据模型方法的入参});if(user._id){result={'msg':'登录成功','code':200,'token':user._id}}else{result = {'msg':'登录失败,密码不正确','code':-1,'token':''}}// 这里返回数据,和出参结构映射return result;
};

代码的逻辑是根据用户名和密码去查找用户,如果找到表示登录成功,如果没有找到表示用户登录失败,然后将结果返回。

代码写好之后我们要增加好入参
在这里插入图片描述
然后点击方法测试,输入我们的入参,返回结果之后点击出参自动映射
在这里插入图片描述
这样我们的后端逻辑就搭建好了,接着实现一下前端页面

3 搭建登录页面

首先我们点击创建应用,创建一个空白应用
在这里插入图片描述
然后切换一下构建模式,选中PC端
在这里插入图片描述
先添加一个普通容器用来显示登录的背景图片
在这里插入图片描述
切换到样式,设置普通容器的宽为100%,高度为100vh。
在这里插入图片描述
默认的单位没有vh选项,我们需要输入一下CSS代码,点击CSS,输入样式代码
在这里插入图片描述
在这里插入图片描述

:root {width: 100%;height: 100vh;
}

然后从网上找一张背景图片,并且上传到素材里
在这里插入图片描述
在这里插入图片描述
我现在的图片的大小是1696*1620,你可以根据自己的需要进行选择,这个看你要适配的电脑的大小,通常16寸的电脑分辨率可以最大到1960像素,打开图片会左右稍有一点间距

素材上传完毕后,设置普通容器的背景图片,选择为我们刚刚的素材
在这里插入图片描述
增加两个样式,让背景图片可以填满容器,超出部分将进行裁剪,并且在图片的中心位置显示

background-position: center;background-size: cover;

定位改为相对
在这里插入图片描述

4 设置登录框

背景设置好了之后,我们来设置一下登录框,首先在背景的普通容器下边放置一个普通容器,设置宽度和高度为550px,背景为白色
在这里插入图片描述
设置定位为绝对定位,距右边8%

:root {width: 550PX;height: 550PX;background: rgb(255, 254, 254);position: absolute;left: auto;right: 8%;
}

在这里插入图片描述
还有就是垂直居中,也是通过定位来控制,距上边50%,然后再以自己为中心向上拉回来50%

:root {transform: translate(0%,-50%);width: 550PX;height: 550PX;background: rgb(255, 254, 254);position: absolute;left: auto;right: 8%;top: 50%;
}

之后放置三个普通容器,分别用来显示系统名称,输入框和版权信息
在这里插入图片描述
在这里插入图片描述

5 实现登录的逻辑

登录逻辑我们新建一个javascript方法,在代码区新建,选择javascript方法
在这里插入图片描述
在这里插入图片描述

export default async function ({ event, data }) {const username = $w.input1.valueconst password = $w.input2.valueconsole.log('username',username,'password',password)const result = await $w.cloud.callDataSource({dataSourceName: 'userauth_spbuo7r',methodName: 'signIn',params: {username: username,password: password}, // 方法入参});console.log('result',result)if (result.code==200) {$w.utils.redirectTo({pageId: "u_zhu_ye", // 页面 IdpackageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});console.log('token',result.token)localStorage.setItem('token', result.token);} else {$w.utils.showToast({title: "登录失败,请输入正确的用户名和密码",icon: "error",duration: 2000, // 2秒});}}

代码的逻辑是先获取输入框的值,然后调用API的登录方法,根据登录的结果来做页面的跳转

然后给登录按钮设置点击事件,选择我们刚刚建立的方法
在这里插入图片描述

6 用户注册

注册比较简单,我们创建一个页面,用表单容器实现即可
在这里插入图片描述

总结

我们本篇实现了PC后台系统的登录及注册功能,主要拆解为后端的实现和前端页面的搭建。初学者可能有疑问,微搭是否只能拖拽组件,其实还是可以写各种各样的代码的,以上就是一个实际的案例,供你参考。

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

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

相关文章

Day49| Leetcode 121. 买卖股票的最佳时机 Leetcode 122. 买卖股票的最佳时机 II

Leetcode 121. 买卖股票的最佳时机 题目链接 121 买卖股票的最佳时机 本题目之前是用贪心算法做的,今天用一下dp,思路还行,但是对于dp的定义还是比较难抓取的: dp[i][0] 表示第i天持有股票所得最多现金 ,这里可能有同学疑惑&am…

计网Lesson10 - 网络层之IP协议分析

文章目录 网络层协议IPv4 数据报格式IPv4 数据报首部格式版本(Version)首部长度(Header Length)区分服务(Differentiated Services Field)可选字段填充总长度(Total Length)标识、标…

记录 | vscode无法在这个大型工作区中监视文件更改,请按照说明链接解决问题

在 VSCode 上打开一个项目时,突然弹出以下错误: 无法在这个大型工作区中监视文件更改。请按照说明链接解决问题。 原因: 由于工作区太大包含太多文件导致vs code监视文件达到上限而因此这个错误。在 Linux 上执行以下命令: cat …

spingboot项目实战之若依框架创建新模块

前言 目前的脚手架系统很多,比较早接触诺依框架,以若依框架为参考如何创建新模块 步骤 1. 下载诺依框架,依照参考说明一步步,能做到系统运行起来。 2. 准备好mysql文件,创建新数据库表 3. 数据库管理工具navicat…

操作系统原理-作业三-存储器

某页式虚拟存储管理系统中,页面大小为 2KB ,某一进程分配到的内存块数为 3 ,并按下列地址顺序引用内存单元: 2531 、 6632 、 4140 、 3584 、 2892 、 5743 、 1700 、 2148 、 6940、 4345 、 3209 、 0732 、 6202 、 4541 。…

Python高效并发请求库

Eventlet 是一个基于协程的并发网络库,用于实现Python中的并发编程。下面是一个使用 Eventlet 创建简单的 TCP 服务器和客户端通信的例子。 安装 Eventlet: pip install eventlet 简单的 Eventlet 服务器示例: import eventletfrom eventle…

[MySQL] MySQL中的索引

文章目录 一、初识索引 1、1 索引的概念 1、2 索引案例 二、认识磁盘 2、1 磁盘结构 2、2 操作系统与磁盘的数据交互 2、3 磁盘随机访问与连续访问 2、4 MySQL与磁盘的数据交互 三、索引的理解 3、1 建立测试表 3、2 为何MySQL与磁盘IO交互是 Page 3、3 理解Page 3、3、1 页目录…

Python 课堂记录

猜数字 import turtle import random import time #时间模块 #生成随机数 ranrandom.randint(1,100) # int :整数 c0 #无限重复执行 while True: c1 # 自增一 cc1 # 等一秒 time.sleep(1) turtle.clear() turtle.write(“第”str©“次:”,font(“黑体”,16) )…

add_subdirectory

Cmake命令之add_subdirectory_cmakelist add_subdirectory-CSDN博客

在线教育培训系统搭建,打造方便快捷的学习模式

教育在我国是一件重中之重的事业发展,所谓“活到老学到老”,人们都离不开教育。 而在当下互联网的发展下,教育、职业培训的方式也变得越来越多样,在线教育模式成为了不少高校的选择,也成为了不少学生的选择。 在线教…

Flutter 上了 Apple 第三方重大列表,2024 春季 iOS 的隐私清单究竟是什么?

这个话题的起因来自 2023 年 WWDC 之后苹果发布的「App Store 提交隐私更新」政策,政策主要提出了两点:第三方 SDK 隐私清单和签名和需要提供必要理由的 API 流程。 其实先简单总结,就是 Apple 想通过隐私清单来进一步提升用户数据收集和使用…

共创共赢|美创科技获江苏移动2023DICT生态合作“产品共创奖”

12月6日,以“5G江山蓝 算网融百业 数智创未来”为主题的中国移动江苏公司2023DICT合作伙伴大会在南京成功举办。来自行业领军企业、科研院所等DICT产业核心力量的百余家单位代表参加本次大会,共话数实融合新趋势,共拓合作发展新空间。 作为生…

I/O设备模型

I/O设备模型 绝大部分的嵌入式系统都包括一些I/O(Input/Outut,输入/输出)设备,例如仪器上的数据显示屏、工业设备上的串口通信、数据采集设备上用于保存数据的Flash或SD卡,以及网络设备的以太网接口等。 I/O设备模型…

掌握C++模板的艺术:类型参数、默认值和自动推导

掌握C模板的艺术:类型参数、默认值和自动推导 模板参数 类型模板参数 在 Grid 示例中&#xff0c;Grid 模板有一个模板参数&#xff1a;存储在网格中的类型。编写类模板时&#xff0c;您需要在尖括号内指定参数列表&#xff0c;例如&#xff1a; template <typename T&g…

【人工智能Ⅰ】实验8:DBSCAN聚类实验

实验8 DBSCAN聚类实验 一、实验目的 学习DBSCAN算法基本原理&#xff0c;掌握算法针对不同形式数据如何进行模型输入&#xff0c;并结合可视化工具对最终聚类结果开展分析。 二、实验内容 1&#xff1a;使用DBSCAN算法对iris数据集进行聚类算法应用。 2&#xff1a;使用DBS…

centos7安装python3.11

1 安装依赖 sudo yum -y updatesudo yum -y install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel -ysudo yum -y groupinstall "Development Tools"2 安装必需的 openssl > 1.1.1 wget https://www.ope…

macOS Sonoma 14.2RC(23C63)发布

系统介绍 黑果魏叔12 月 6 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.2 RC更新&#xff08;内部版本号&#xff1a;2323C633&#xff09;&#xff0c;本次更新距离上次发布隔了 49 天。 预计正式版会在下周到来。届时用户可以打开“设置”->“通用”->…

ATFX汇市:美联储12月利率决议来袭,或将连续第三次暂停加息

ATFX汇市&#xff1a;明日3:00&#xff0c;美联储将公布12月份利率决议结果&#xff0c;市场普遍预期联邦基金利率上限将维持在5.5%不变&#xff0c;美联储将连续第三次暂停加息。上周五公布的11月非农就业报告显示&#xff0c;新增非农就业人口19.9万人&#xff0c;远高于前值…

windows禁用系统更新

1.在winr运行框中输入services.msc&#xff0c;打开windows服务窗口。 services.msc 2.在服务窗口中&#xff0c;我们找到Windows update选项&#xff0c;如下图所示&#xff1a; 3.双击windows update服务&#xff0c;我们把启动类型改为禁用&#xff0c;如下图所示&#xff…

图片怎么去文字水印?分享三个简单无痕方法

图片怎么去文字水印&#xff1f;大家在遇到好看的图片时&#xff0c;是否曾想过将其用作自己的头像&#xff1f;然而&#xff0c;很多时候从网上保存的图片会带有平台或作者的水印&#xff0c;这会严重影响头像的整体视觉效果&#xff0c;导致我们不得不放弃使用这张图片&#…