目录
- [1 打开口令的必录项](#1 打开口令的必录项)
- [2 创建自定义方法](#2 创建自定义方法)
- [3 自定义方法语法说明](#3 自定义方法语法说明)
- [4 方法调试](#4 方法调试)
- [5 实现加入班级的逻辑](#5 实现加入班级的逻辑)
- [6 验证口令的合法性](#6 验证口令的合法性)
- [7 判断口令是否有效](#7 判断口令是否有效)
- [8 完整的代码](#8 完整的代码)
- 总结
我们目前已经搭建好了后台功能，也生成好了口令。在教师加入班级的时候就需要输入口令，口令验证通过后填写教师的基本信息加入班级。本篇我们实现一下上述的功能。
1 打开口令的必录项
在加入班级的时候，我们需要口令作为必录项，选中我们的单行输入组件，打开必填项校验
2 创建自定义方法
在点击加入班级按钮的时候需要有一个校验功能，一般响应前端界面的事件我们都是通过自定义方法来实现的。
在代码区点击点击新建，选择新建JavaScript方法
修改方法的名称为checkPassword
3 自定义方法语法说明
bash
export default function({event, data}) {
}创建好了之后，会有一个默认的模板。这个是es6里新引入的语法，export default相当于默认导出，既可以导出值也可以导出函数。
我们这里是导出一个函数，function({event,data})相当于导出了一个匿名函数，入参是一个对象，包含两个属性，event和data
event是我们的事件对象，通常如果需要得到组件的值的，可以通过event.detail里具体查看。比如我们的扫码组件，扫码成功后会从这里得到扫码的值
data相当于是在方法调用的时候传入的入参，是否传入参数是和你具体的场景结合的
在方法体里，我们可以通过console.log来打印我们的参数，修改一下代码，输入两句话
bash
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 实现加入班级的逻辑
加入班级，我们先需要得到单行输入组件的值，校验组件的值是否为空
bash
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作为开头
编制的方法是先找到对应的官方文档，比如我们这里就调用数据源的查询单条方法，地址如下：
先要查看方法的结构
入参是我们在调用的时候需要传入的查询条件。比如我们这个场景是要根据口令的内容和是否有效来进行过滤
出参是我们调用后返回的结果，这里是返回一个对象，我们可以通过点属性来得到具体的值
最终我们的形式是这样
为什么要把文档里的data改成result呢，因为data和我们的方法的入参同名了，贴入之后await为什么会标红呢？
因为js中很多方法都是异步调用的，我们有一种简写方法就是async/await，出现await的地方在他的外部的方法要声明成异步，我们现在把默认导出的方法前边加一个async关键字
记住async和await总是一对儿好朋友，彼此不分开
代码模板贴入之后，有几个地方需要修改。首先是我们的dataSourceName，这个表示我们要从哪个数据源获取数据。在左侧的导航栏点击云数据库，找到我们的口令表，复制我们的数据源的标识
替换我们代码模板的标识
然后就是修改过滤条件，微搭的查询语句区别于关系数据库的语法，都是要通过对象进行构造的。我们现在有两个查询条件，口令和是否有效。在写的时候首先要知道字段的标识，还是点击左侧的云数据库，在数据源里切换到配置模型，找到我们具体的字段标识
替换到我们对应的字段标识里，是这样
bash
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表示我们的查询条件是且的关系，且是两个条件必须同时满足。里边又是一个结构
bash
{
bjkl: {
$eq: password, // 获取单条时，推荐传入_id数据标识进行操作
},
}bjkl这个是我们从数据源的字段标识粘贴过来的，$eq表示我们按照什么形式过滤数据，eq是equal的缩写表示是等值匹配。password是我们一开始定义的变量，从单行输入组件里获取值
bash
{
klzt: {
$eq: "1", // 获取单条时，推荐传入_id数据标识进行操作
},
}第二个查询条件我们是过滤的口令状态，这里右侧为什么要传入"1"呢？因为我们数据源里的口令状态设置的是枚举字段，枚举字段在数据源里是存储的枚举值，你可以打开你的字段配置看到具体的枚举值
7 判断口令是否有效
数据源的方法调用之后，如何知道口令是否有效呢？如果有返回数据，表示我们的口令是有效的，如果没有数据返回，表示我们的口令是无效的。因为我们方法调用返回的是对象类型，我们可以通过对象的键是否存在来判断对象是否为空
bash
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 完整的代码
知道我们的逻辑之后，我们的校验方法的完整代码如下：
bash
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
})
}
}总结
我们本篇介绍了口令验证功能，讲解了具体的语法和调试的方法。初学的觉得低代码非常难，主要是没有开发的背景知识，没有系统化的学习就像直接想取得结果是不现实的，可以结合我的教程，通过自学编程来体会低代码开发的特点。