目录
- 1 打开口令的必录项
- 2 创建自定义方法
- 3 自定义方法语法说明
- 4 方法调试
- 5 实现加入班级的逻辑
- 6 验证口令的合法性
- 7 判断口令是否有效
- 8 完整的代码
- 总结
我们目前已经搭建好了后台功能,也生成好了口令。在教师加入班级的时候就需要输入口令,口令验证通过后填写教师的基本信息加入班级。本篇我们实现一下上述的功能。
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.valueif(!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.valueif(!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})}
}
总结
我们本篇介绍了口令验证功能,讲解了具体的语法和调试的方法。初学的觉得低代码非常难,主要是没有开发的背景知识,没有系统化的学习就像直接想取得结果是不现实的,可以结合我的教程,通过自学编程来体会低代码开发的特点。