# 开发调查问卷标准页面示例 本节将通过开发一个"调查问卷"应用页面用来演示标准页面的基本功能，页面完成后如[图1]所示。 图1调查问卷应用效果 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125593.png "点击放大") 1. 创建一个自定义对象"Questionnaire"。 创建"Questionnaire"对象，在对象内新建7个**文本** 类型的自定义字段"questionCode0"\~"questionCode6"，创建自定义对象及字段的相关内容请参考[3.1 了解对象模型](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0034.html)。 创建的自定义对象是用来保存"调查问卷"中用户填写的信息，并在这个对象下用不同字段来记录"调查问卷"中每一个问题用户填写的内容。 2. 创建应用页面。 单击"Page"文件夹右侧的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285297.png)，选择"标准页面"。在弹窗中输入页面的"标签"、"名称"为"Questionnaires_questionnairePage"。 图2选择标准页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285329.png "点击放大") 图3添加标准页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285429.png "点击放大") 3. 选中"页面"标签，在右侧配置面板"样式 \> 布局"下，为页面左右各设置"15%"和"18%"的内边距。 图4页面设置内边距 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046276.png "点击放大") 4. 拖拽"表单"组件到中间面板，并做如下操作。 1. 在"基本组件 \> 布局"中，拖拽"表单"组件到中间面板中。 图5添加"表单"组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886864.png "点击放大") 2. 在右侧弹出的"元数据表单配置向导"中，选中刚才创建的对象"Questionnaire__CST"，并勾选创建的自定义字段，单击"下一步"。 图6配置表单元数据 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285381.png "点击放大") 3. 选中表单按钮，单击"完成"。 图7配置表单功能 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886868.png "点击放大") 4. 设置"表单"组件样式"字体"为"16px"，下外边距为"20px"。 图8设置"表单"组件样式 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886796.png) 5. 当前页面未使用"分栏"组件，因此删除表单组件中所有的"分栏"组件，只保留包含按钮组件的"容器"组件。 图9容器组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046252.png "点击放大") 5. 在左侧面板中将"标题"组件拖至中间面板"容器"组件上方。 图10添加"标题"组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886896.png "点击放大") 1. 选中"标题"组件，在右侧边栏"基本属性""标题内容"中输入调查问卷标题"Astro轻应用开发者调查问卷"。 2. 在右侧面板"样式 \> 字体"下，配置标题的字体样式，将字体大小设置为"28px"，颜色设置为"#147AEC"，并设置居中样式。 图11设置标题样式 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125537.png) 设置后，效果如[图12]所示。 图12配置完标题组件后 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046296.png "点击放大") 6. 在左侧面板中，将"图片"组件拖至中间面板"标题"组件下方，并在右侧边栏设置图片地址（/besBaas/images/banner.png），设置图片高度为"165px"，宽度为"100%"。 图13将"图片"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886856.png "点击放大") 图14设置图片地址 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046272.png) 图15设置图片样式 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285365.png "点击放大") 7. 在左侧面板中，将"标题"组件拖至中间面板"图片"组件下方。 图16将"标题"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285373.png "点击放大") 在右侧边栏设置标题内容，如"为了持续提高您的开发体验，为您提供更好的开发平台，特邀您花几分钟反馈问卷，您的支持是我们最大的动力，衷心感谢您，祝开心每一天！"。 设置上外边距"12px"，下外边距"24px"，内边距上右下左分别设置为"10px 20px 10px 12px"，字体大小"16px"，行高"28px"，颜色"#333333"。 图17设置标题内容 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125541.png) 图18设置标题样式 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125561.png) 8. 在左侧面板中，将"下拉框"组件拖至中间面板"标题"组件下方。 图19将"下拉框"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285293.png "点击放大") 1. 在"属性 \> 数据绑定"中，单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode0__CST"。 图20数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285305.png) 2. 在"属性 \> 基本属性"中，标签设置为"1.您的工作类型？"，设置选项"设计类"、"开发类"、"产品类"、"运营类"和"其他"，并勾选"可清空""可过滤"和"必填"项。 图21配置基本属性 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046260.png) 9. 在左侧面板中，将"单选按钮"组件拖至中间面板"下拉框"组件下方。 图22将"单选按钮"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046288.png "点击放大") 1. 在右侧边栏"数据绑定"分栏单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode1__CST"。 图23数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285301.png) 2. 在"基本属性"中，设置标签为"2.您觉得平台的体验流畅吗？"，并设置选项"非常流畅""一般流畅""不太流畅"并勾选"必填"。 图24属性配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046216.png) 10. 在左侧面板中，将"单选按钮"组件拖至中间面板"单选按钮"组件下方。 图25将"单选按钮"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046140.png "点击放大") 1. 在"属性 \> 数据绑定"中，单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode2__CST"。 图26数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285309.png) 2. 在"属性 \> 基本属性"中，设置标签"3.您在开发过程中有困难，能否获取有效的文档/帮助？"，并设置选项"非常有帮助"、"一般""没有帮助"并勾选"必填"。 图27属性配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125545.png) 11. 在左侧面板中，将"复选按钮"组件拖至中间面板"单选按钮"组件下方。 图28将"复选按钮"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125445.png "点击放大") 1. 在"属性 \> 数据绑定"中，单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode3__CST"。 图29数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046264.png) 2. 在"属性 \> 基本属性"中，设置标签"4.您是从哪个途径知道数字平台的？"，并设置选项"内部搜索""别人介绍""听过培训""其他途径"并勾选"必填"。 图30属性配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125549.png) 12. 在左侧面板中，将"多行输入框"组件拖至中间面板"复选按钮"组件下方。 图31将"多行输入框"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285417.png "点击放大") 1. 在"属性 \> 数据绑定"中，单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode4__CST"。 图32数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046236.png) 2. 在"属性 \> 基本属性"中，设置标签"5.您觉得AppCube给您带来的最大价值是什么？相比其他同类产品，您为什么选择AppCube？"，并设置最大字符长度"256"。 图33属性配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285333.png) 13. 在左侧面板中，将"多行输入框"组件拖拽到中间面板"多行输入框"组件下方。 图34将"多行输入框"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046192.png "点击放大") 1. 在"属性 \> 数据绑定"中，单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode5__CST"。 图35数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125529.png) 2. 在"属性 \> 基本属性"中，设置标签"6.您想对Astro轻应用说点什么？可以是优点也可以是缺点还可以是对Astro轻应用的期许。"，并设置最大字符长度"256"。 图36属性配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886736.png) 14. 在左侧面板中，将"评分"组件拖至中间面板"多行输入框"组件下方。 图37将"评分"组件拖至中间面板 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125613.png "点击放大") 1. 在"属性 \> 数据绑定"中，单击右侧齿轮按钮，选择表单数据绑定的对象"form_0"下的自定义字段"*命名空间* __questionCode6__CST"。 图38数据绑定 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046280.png) 2. 在"属性 \> 基本属性"中，设置标签"7.您对平台的综合评分？"，并设置星星总数"5"。 图39设置属性 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285325.png) 15. 选中"容器"中的"保存"按钮，做如下设置。 1. 在"基本属性"中，设置显示名称"提交"。 图40属性配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933046300.png) 2. 在"事件"页签中，单击"点击"后的加号。 图41事件配置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285409.png) 3. 在"添加动作"页面，选择"自定义动作"，输入自定义JS代码，单击"创建"。 如下JS代码仅为示例，请根据实际情况修改示例中表单名称（form_0）和字段名称（data.name）。更多自定义JS脚本介绍，请参见[如何通过JS代码，实现页面与后台接口间的交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0146.html)。 ``` let data = $model.ref("form_0").getData(); //一些特殊字段数据处理 data.name = data.name.join(";"); // 提交表单 var _form = context.$component.form; _form.formSave(); ``` 图42配置JS代码 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285285.png "点击放大") 到此，"调查问卷"主页面已创建完成，效果如下： 图43"调查问卷"主页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886880.png "点击放大") 16. 测试"调查问卷"页面应用实例，填写"调查问卷"并单击提交。 图44模拟填写调查问卷 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285405.png "点击放大") 在经典版应用开发设计器的导航菜单上，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886892.png)，即可进入数据调试页面。您可以在数据调试页面，输入sql语句查询创建的"Questionnaire"对象，获取刚才填写的调查问卷数据。 图45控制台入口 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886804.png) 图46调查问卷数据已存入对象 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125505.png "点击放大")