低码实战 | 使用CMS内容管理导入数据，实现根据条件查询
概述
平常咱们做为我的帐户开通腾讯云微搭低码功能后，能够有两个应用的建立权限，那咱们今天就充分利用这两个资源，打造一款属于本身的在线预定小程序。前端
小程序的功能分为两部分，第一部分是预定功能，打开小程序能够登记预定的信息，登记完成以后能够进行提交。第二部分是查询功能，能够经过按条件查询到最新的预定信息。数据库
经过本教程的学习，您能够收获如下知识点：json
- 全局变量的使用
- 低码方法中查询数据库
- 页面之间传参
- 表单提交
低码开发流程
微搭低码开发分为几个部分，建立应用、定义数据源、建立页面、拖拽组件、定义组件样式、实现业务逻辑等。小程序
预定功能实现
建立应用
登陆腾讯云微搭低码平台，在应用管理菜单点击【建立空白应用】按钮，输入应用标识：appointment，应用名称：预定登记，点击【肯定】按钮微信
建立数据源
点击腾讯云微搭低码控制台左侧导航栏的数据源管理栏目，点击【新建数据源】按钮，在下拉菜单中咱们选择自建数据源。架构
在弹出的页面中输入数据源名称：预定登记，数据源标识：appointment，点击【肯定】按钮app
在打开的页面点击【编辑】按钮，咱们须要建立咱们本身须要的字段async
在打开的编辑页面中，点击【添加字段】按钮编辑器
录入字段名称：辅导科目，字段标识：course，数据类型选择为字符串，点击【肯定按钮】布局
按照上述方法依次设置如下字段
- 字段名称：学生年级，字段标识：grade，数据类型：字符串
- 字段名称：联系人姓名，字段标识：name，数据类型：字符串
- 字段名称：手机号，字段标识：phone，数据类型：字符串
- 字段名称：微信号，字段标识：microno，数据类型：字符串
- 字段名称：地址，字段标识：address，数据类型：字符串
- 字段名称：要求，字段标识：require，数据类型：字符串
设置好后以下图，点击【肯定】按钮完成数据源的建立
导入数据
腾讯云微搭低码平台给你们提供了一个很是方便的内容管理平台，咱们可使用后台直接导入数据，点击数据源旁边的【数据管理后台】，找到咱们的建立的应用
点击图标进入到数据库的后台
咱们能够选择按照json格式的数据进行导入，导入的json格式为
[
{
"_id": "28ee4e3e60483ef409d5d9845b6555f9",
"grade": "可可",
"_openid": "7cd9812204a74a5baf8866621e14fe11",
"address": "",
"course": "可可",
"createdAt": 1615347444375,
"updatedAt": 1615347444375,
"microno": "",
"name": "可可",
"phone": "可可",
"require": ""
}
]
而后保存的文件名为import.json导入就能够
查询功能实现
预定功能实现以后，咱们就须要实现一下查询的功能，整体的流程是能够输入预定科目，点击查询按钮查询符合条件的记录，咱们用低代码实现第二个需求。
建立应用
打开低码控制台，点击导航栏的应用管理，点击【建立空白应用】按钮，输入应用标识：query，应用名称：查询信息，点击【肯定】按钮
建立页面
点击应用的编辑按钮，进入到低代码的编辑器，咱们使用默认建立的首页便可
咱们的页面总共有两个功能，有一个课程类别的文本输入框，而后输入信息后能够点击查询按钮，切换到【组件】页签，展开表单选项，点击【表单输入】组件
修改表单字段名称为course，表单字段标题设置为辅导科目，布局方式选择为水平
而后增长一个【按钮】组件，按钮标题设置为查询
点击查询的话须要获取文本输入组件的值，而后传递到列表页面作结果展现，因此咱们须要先定义个全局变量，点击导航栏的【变量管理】，在弹出的页面点击全局（global）下边状态变量旁边的+号，变量标识和变量名都设置为queryparms，变量类别选择无模型数据类型选择array，初始值设置为
[
{
"_id": "28ee4e3e60483ef409d5d9845b6555f9",
"grade": "可可",
"_openid": "7cd9812204a74a5baf8866621e14fe11",
"address": "",
"course": "可可",
"createdAt": 1615347444375,
"updatedAt": 1615347444375,
"microno": "",
"name": "可可",
"phone": "可可",
"require": ""
}
]
设置好后点击【提交】按钮
接着咱们须要定义查询按钮的低代码方法getList，点击导航栏的【低代码编辑】，在打开的编辑器中找到index下边的handle旁边的+号，在弹出的窗口中输入方法的名称getList，点击【保存】按钮
输入以下代码
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'
})
}
}
代码解析：
代码的逻辑是先获取文本框的值，而后判断是否取到了，若是取到了就执行数据库的查询，而后把查询结果赋值给全局变量，并进行页面跳转。若是没取到值就弹出一个提示框要求填写内容。
低代码设置好后，咱们须要在按钮上增长点击事件，选中【按钮】组件，切换到事件页签，咱们选择tap点击，而后选择低代码方法
事件定义好后咱们增长详情页的页面，点击【建立新页面】按钮，输入标题为详情页，页面ID为detail，点击【肯定】按钮
在新建立的页面中增长一个列表元素组件
设置列表元素组件的循环展现for，点击旁边的超连接
在弹出的窗口选择全局变量querparms，点击【肯定】按钮
点击标题旁边的超连接
在弹出的窗口选择for循环，选择course
按照一样的方法设置一下标题下描述
右侧内容咱们须要将数据库的日期类型转换一下显示，设置成表达式
${new Date(forItems.id8.createdAt).getFullYear()}-${new
Date(forItems.id8.createdAt).getMonth()+1}-${new
Date(forItems.id8.createdAt).getDate()}
这样详情页就设置好了
发布
点击导航栏的预览发布按钮，咱们选择本地预览
构建成功后用手机扫描体验
产品介绍
腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台，向上链接前端的行业业务，向下链接云计算的海量能力，助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面，经过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5应用、Web 应用等），免去了代码编写工做，让您可以彻底专一于业务场景。腾讯云微搭低代码以云开发做为底层支撑，云原生能力将应用搭建的全链路打通，提供高度开放的开发环境，且时刻为您的应用保驾护航。
开通低代码：https://cloud.tencent.com/product/lowcode
产品文档：https://cloud.tencent.com/document/product/1301/48874 技术交流加Q群：1003059706 最新资讯关注微信公众号【腾讯云云开发】