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

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秒});}
}