使用微搭低代码搭建简易信息查询系统

发布于 2021-04-01 00:59

1  概述

通过本教程的学习，您可以收获以下知识点：

  • 全局变量的使用

  • 低码方法中查询数据库

  • 页面之间传参

  • 表单提交


2  低码开发流程

低码开发分为几个部分，创建应用、定义数据源、创建页面、拖拽组件、定义组件样式、实现业务逻辑等。


3  预约功能实现

3.1 创建应用



3.2 创建数据源







按照上述方法依次设置以下字段：

  • 字段名称：学生年级，字段标识：grade，数据类型：字符串

  • 字段名称：联系人姓名，字段标识：name，数据类型：字符串

  • 字段名称：手机号，字段标识：phone，数据类型：字符串

  • 字段名称：地址，字段标识：address，数据类型：字符串

  • 字段名称：要求，字段标识：require，数据类型：字符串





3.3 创建页面


系统会默认创建一个页面，我们使用这个默认页面即可。


在左侧切换到组件页签，我们开始设计页面：

打开表单组件列表，选择【表单容器】组件：

选中【表单容器】下边的插槽，我们在插槽里增加一个【表单输入】组件：

将表单字段标题修改为辅导科目，表单字段名称修改为course，打开是否必填的选项（注意：表单字段名称需要和数据源设计的字段保持一致）。
            


输入信息设置好后，需要再增加一个【按钮】组件：

修改按钮标题为提交，用于form组件为提交：

选中【表单容器】组件，切换到事件页签：


数据源名称选择预约登记，方法名为创建单条记录：

提交事件设置好后我们再增加一个提交成功的事件，选择dataSource成功，动作类型选择平台方法，执行动作选择showToast显示消息提示：

修改标题为提交成功：


 



3.4 发布


我们选择本地预览：

4  查询功能实现

4.1 创建应用


4.2 创建页面



修改表单字段名称为course，表单字段标题设置为辅导科目，布局方式选择为水平：
然后增加一个【按钮】组件，按钮标题设置为查询：
[  {    "_id": "28ee4e3e60483ef409d5d9845b6555f9",    "grade": "可可",    "_openid": "7cd9812204a74a5baf8866621e14fe11",    "address": "",    "course": "可可",    "createdAt": 1615347444375,    "updatedAt": 1615347444375,    "microno": "",    "name": "可可",    "phone": "可可",    "require": ""  }]


输入如下代码
export default async function({event, data}) {    let course = $page.widgets.id1.value        if(course!=null && course!=''){        let result = await app.dataSources.appointment.getList({            course:course        })        app.dataset.state. queryparms = result.data        app.navigateTo({            pageId:'detail'        })    }else{               app.showToast({            title:'请填写内容',            icon:'none'        })    }}
代码解析：
代码的逻辑是先获取文本框的值，然后判断是否取到了，如果取到了就执行数据库的查询，然后把查询结果赋值给全局变量，并进行页面跳转。如果没取到值就弹出一个提示框要求填写内容。



在新创建的页面中增加一个列表元素组件：




在弹出的窗口选择for循环，选择course：

按照同样的方法设置一下标题下描述

右侧内容我们需要将数据库的日期类型转换一下显示，设置成表达式：
`${new Date(forItems.id8.createdAt).getFullYear()}-
${new Date(forItems.id8.createdAt).getMonth()+1}-

${new Date(forItems.id8.createdAt).getDate()}`


这样详情页就设置好了。


4.3 发布



作者：韩锴，微搭WeDa低代码布道师。

- End -

本文来自网络或网友投稿，如有侵犯您的权益，请发邮件至：aisoutu@outlook.com 我们将第一时间删除。

相关素材

省时省心的微信点餐系统宣传分享图
省时省心的微信点餐系统宣传分享图
微信微商广告图片素材
微信微商广告图片素材
清新混搭风微信头像
清新混搭风微信头像