城市建设网站金,济南网络安全公司,湖北雨水最新消息,微小店网站建设哪家好目录 1 创建自定义方法2 获取用户名和密码3 验证用户是否同意协议4 验证用户名和密码总结 上一篇我们实现了登录功能的前端界面#xff0c;这一篇实现一下登录的具体逻辑。 1 创建自定义方法
一般如果页面点击按钮需要有事件响应的#xff0c;我们用自定义方法来实现。打开我… 目录 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秒});}
}增加了如果用户名和密码正确之后重定向到首页如果错误给出提示信息。
总结
本篇我们带着大家一步步的拆解了用户登录的逻辑低码开发也需要写各种前后端的代码有些初学者的预期是花个五六个小时就可以掌握工具的用法显然是不现实的。既然用低代码可以实现用代码就可以做的事他肯定是有一些扩展的比如就会支持前后端代码的编写熟练掌握开发语言是把工具发挥出应有的价值的前提。
