自学内容网 自学内容网
自学内容网 > 正文

家校通小程序实战教程06口令验证

🕗 发布于 2024-12-11 01:03 小程序  低代码  

目录


我们目前已经搭建好了后台功能，也生成好了口令。在教师加入班级的时候就需要输入口令，口令验证通过后填写教师的基本信息加入班级。本篇我们实现一下上述的功能。

1 打开口令的必录项

在加入班级的时候，我们需要口令作为必录项，选中我们的单行输入组件，打开必填项校验

在这里插入图片描述

2 创建自定义方法

在点击加入班级按钮的时候需要有一个校验功能，一般响应前端界面的事件我们都是通过自定义方法来实现的。

在代码区点击点击新建，选择新建JavaScript方法
在这里插入图片描述
在这里插入图片描述
修改方法的名称为checkPassword
在这里插入图片描述

3 自定义方法语法说明

export default function({event, data}) {

}

创建好了之后，会有一个默认的模板。这个是es6里新引入的语法，export default相当于默认导出，既可以导出值也可以导出函数。

我们这里是导出一个函数，function({event,data})相当于导出了一个匿名函数，入参是一个对象，包含两个属性，event和data

event是我们的事件对象，通常如果需要得到组件的值的，可以通过event.detail里具体查看。比如我们的扫码组件，扫码成功后会从这里得到扫码的值

data相当于是在方法调用的时候传入的入参，是否传入参数是和你具体的场景结合的

在方法体里，我们可以通过console.log来打印我们的参数，修改一下代码，输入两句话

export default function({event, data}) {
  console.log(event)
  console.log(data)
}

方法如何调用呢？一般是需要配置组件的事件才可以，选中我们的按钮，设置点击事件，选择我们刚刚定义的方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4 方法调试

将自定义方法和组件配置好之后，在哪里可以看到打印的信息呢？一般是需要点击实时预览，这个相当于我们的程序编译后，然后点击底部的开发者工具来查看
在这里插入图片描述
在这里插入图片描述
开发者工具，一共有三种视图，第一个是我们的elements
在这里插入图片描述
低代码的图形化界面只是提高了开发速度，本质只是对现有技术的一个封装，并不是独创了一个技术。最终图形化的内容是要翻译成代码的。在elements我们就可以看到具体的代码

点击左上角的箭头图标，我们就可以选取页面中的组件，可以看到生成的代码的形式
在这里插入图片描述
什么时候会用到这个功能呢？一般UI做好图之后，好些并不是组件自带的效果，为了覆盖组件的默认效果，我们一般要查看组件的class属性，通过覆盖样式来实现组件的个性化皮肤定制

console菜单就可以看到我们在自定义方法中的打印信息，如果有报错的内容也可以看到具体的错误日志，方便我们排查问题

我们现在点击一下按钮，就可以看到event和data对象的具体信息
在这里插入图片描述
Network是我们的网络请求，一般如果觉得数据异常，可以在请求里排查
在这里插入图片描述
Header是请求头，可以看到请求的地址，是post请求和是get请求，状态码

Payload是请求发送的数据

Preview是以一种可读的方式显示返回的数据

Response是响应数据，一般是JSON格式的数据

5 实现加入班级的逻辑

加入班级，我们先需要得到单行输入组件的值，校验组件的值是否为空

const password = $w.input1.value
  if(!password){
    $w.utils.showToast({
      title:"请输入口令",
      icon:"error",
      duration:1000
    })
  }

$w是微搭封装的一个命名空间标识符，通过标识符就可以得到封装的API和组件。input1是我们组件的id，选中单行输入组件，可以在属性面板里看到我们组件的id
在这里插入图片描述
组件的值，我们可以通过查看组件的说明文档来找到
在这里插入图片描述
在这里插入图片描述
如果想给组件设置值的一般是需要调用组件的方法API，而不是直接使用赋值语句
在这里插入图片描述
初学微搭的觉得这些太复杂了，感觉产品做的不好。低码工具本身就需要你具备开发能力，是开发者。没接触过这个行业，凭着一腔热情是很难开发出产品来的

6 验证口令的合法性

得到口令之后就需要知道这个口令是否有效，一般我们是需要通过前端的API来进行查询。在微搭中有前端API和后端API。前端API都是以$w开头的，而后端API我们通常都是使用contex作为开头

编制的方法是先找到对应的官方文档，比如我们这里就调用数据源的查询单条方法，地址如下：

https://cloud.tencent.com/document/product/1301/96166#.E6.9F.A5.E8.AF.A2.EF.BC.88wedagetitemv2.EF.BC.89

先要查看方法的结构
在这里插入图片描述
入参是我们在调用的时候需要传入的查询条件。比如我们这个场景是要根据口令的内容和是否有效来进行过滤

出参是我们调用后返回的结果，这里是返回一个对象，我们可以通过点属性来得到具体的值

最终我们的形式是这样

在这里插入图片描述
为什么要把文档里的data改成result呢，因为data和我们的方法的入参同名了，贴入之后await为什么会标红呢？

因为js中很多方法都是异步调用的，我们有一种简写方法就是async/await，出现await的地方在他的外部的方法要声明成异步，我们现在把默认导出的方法前边加一个async关键字

在这里插入图片描述
记住async和await总是一对儿好朋友，彼此不分开

代码模板贴入之后，有几个地方需要修改。首先是我们的dataSourceName，这个表示我们要从哪个数据源获取数据。在左侧的导航栏点击云数据库，找到我们的口令表，复制我们的数据源的标识
在这里插入图片描述
替换我们代码模板的标识
在这里插入图片描述
然后就是修改过滤条件，微搭的查询语句区别于关系数据库的语法，都是要通过对象进行构造的。我们现在有两个查询条件，口令和是否有效。在写的时候首先要知道字段的标识，还是点击左侧的云数据库，在数据源里切换到配置模型，找到我们具体的字段标识
在这里插入图片描述
替换到我们对应的字段标识里，是这样

const result = await $w.cloud.callDataSource({
      dataSourceName: "bjklb",
      methodName: "wedaGetItemV2",
      params: {
        // 筛选内容，筛选内容推荐使用编辑器数据筛选器生成
        filter: {
          where: {
            $and: [
              {
                bjkl: {
                  $eq: password, // 获取单条时，推荐传入_id数据标识进行操作
                },
              },
              {
                klzt: {
                  $eq: "1", // 获取单条时，推荐传入_id数据标识进行操作
                },
              },
            ],
          },
        },
        select: {
          $master: true, // 常见的配置，返回主表
        },
      },
    });

这里$and表示我们的查询条件是且的关系，且是两个条件必须同时满足。里边又是一个结构

{
    bjkl: {
       $eq: password, // 获取单条时，推荐传入_id数据标识进行操作
    },
}

bjkl这个是我们从数据源的字段标识粘贴过来的，$eq表示我们按照什么形式过滤数据，eq是equal的缩写表示是等值匹配。password是我们一开始定义的变量，从单行输入组件里获取值

{
   klzt: {
     $eq: "1", // 获取单条时，推荐传入_id数据标识进行操作
   },
}

第二个查询条件我们是过滤的口令状态，这里右侧为什么要传入"1"呢？因为我们数据源里的口令状态设置的是枚举字段，枚举字段在数据源里是存储的枚举值，你可以打开你的字段配置看到具体的枚举值
在这里插入图片描述

7 判断口令是否有效

数据源的方法调用之后，如何知道口令是否有效呢？如果有返回数据，表示我们的口令是有效的，如果没有数据返回，表示我们的口令是无效的。因为我们方法调用返回的是对象类型，我们可以通过对象的键是否存在来判断对象是否为空

if(Object.keys(result).length>0){
      $w.utils.showToast({
        title:"口令验证通过",
        icon:"success",
        duration:1000
      })
    }else{
      $w.utils.showToast({
        title:"无效的口令",
        icon:"error",
        duration:1000
      })
    }

这里我们用到了javascript的条件判断语句，if关键词旁边的小括号里是我们的表达式，如果表达式计算返回true就表示需要进入到if语句的大括号里执行，否则我们就进入到else里

我们这里是通过提示一个信息来提醒用户口令是否有效的

8 完整的代码

知道我们的逻辑之后，我们的校验方法的完整代码如下：

export default async function({event, data}) {
  console.log(event)
  console.log(data)
  const password = $w.input1.value
  if(!password){
    $w.utils.showToast({
      title:"请输入口令",
      icon:"error",
      duration:1000
    })
  }

  const result = await $w.cloud.callDataSource({
      dataSourceName: "bjklb",
      methodName: "wedaGetItemV2",
      params: {
        // 筛选内容，筛选内容推荐使用编辑器数据筛选器生成
        filter: {
          where: {
            $and: [
              {
                bjkl: {
                  $eq: password, // 获取单条时，推荐传入_id数据标识进行操作
                },
              },
              {
                klzt: {
                  $eq: "1", // 获取单条时，推荐传入_id数据标识进行操作
                },
              },
            ],
          },
        },
        select: {
          $master: true, // 常见的配置，返回主表
        },
      },
    });

    if(Object.keys(result).length>0){
      $w.utils.showToast({
        title:"口令验证通过",
        icon:"success",
        duration:1000
      })
    }else{
      $w.utils.showToast({
        title:"无效的口令",
        icon:"error",
        duration:1000
      })
    }
}

总结

我们本篇介绍了口令验证功能，讲解了具体的语法和调试的方法。初学的觉得低代码非常难，主要是没有开发的背景知识，没有系统化的学习就像直接想取得结果是不现实的，可以结合我的教程，通过自学编程来体会低代码开发的特点。


原文地址：https://blog.csdn.net/u012877217/article/details/144339343

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024