# 步骤四：开发调查问卷页面 1. 创建调查问卷页面。 1. 在应用设计器的左侧导航栏中，选择"界面"，单击页面后的"+"，进入添加标准页面。 2. 设置页面的标签和名称，单击"添加"，即可创建一个标准页面。 图1添加标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002350915298.png "点击放大") 表1新建标准页面参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。 | 调查问卷 | | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 | questionnaire | 2. 添加表单组件并进行属性设置。 1. 从"基本组件 \> 布局"中，拖拽表单组件到画布中。 图2添加表单组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384640553.png "点击放大") 2. 选中表单组件，在"属性 \> 样式 \> 布局"中，将表单设置为"居中对齐"，"宽"设置为"800px"、"高"设置为"1022px"。 图3设置表单布局 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384644561.png "点击放大") 3. 在"属性 \> 样式 \> 字体"中，设置字体大小为"16px"、上下间距为"23"。 图4设置表单字体 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351089190.png) 4. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384894113.png)，进入选择模型页面。 5. 单击"新增模型"，"模型名称"设置为"formData"，"来源"选择"对象"，单击"下一步"。 图5新建formData模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384692725.png "点击放大") 6. 选择[步骤三：添加调查表记录对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0079.html)中创建的对象，勾选**全部** 字段，单击"下一步"。 图6模型基本信息设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385015533.png "点击放大") 7. 直接单击"确定"，返回选择模型页面，选择已创建的模型，单击"确定"。 图7选择已创建的模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351296578.png "点击放大") 8. 在弹出的提示框中，单击"只绑定模型"，返回设计页面。 图8选择只绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351173720.png) 3. 添加大标题。 1. 从"基本组件 \> 基本"中，拖拽标题组件到**表单中间** 。 图9拖拽标题组件到表单中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351298518.png "点击放大") 2. 选择标题组件，设置标题内容为"调查问卷应用"，字体大小设置为"28px"、上下间距为"50"、位置为"center"、颜色为"#147AEC"。 图10设置标题组件基本属性和样式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351299610.png "点击放大") 4. 添加图片组件。 1. 从"基本组件 \> 基本"中，拖拽图片组件到标题组件下方。 图11添加图片组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385020497.png "点击放大") 2. 选中图片组件，单击"图片地址"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384862197.png)，选中一张图片，单击"确定"，图片的宽度设置为"100%"。 在选择图片页面，您也可以单击"上传图片"，从本地选择一张图片上传。上传的图片必须为JPG、JPEG、PNG和GIF格式，且图片的大小不能超过1MB。 图12选择所需的图片 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385026061.png "点击放大") 5. 添加小标题。 1. 从"基本组件 \> 基本"中，拖拽标题组件到图片组件下方。 图13添加标题组件到图片下方 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351307558.png "点击放大") 2. 设置标题内容为"为了研究大学生就业形势，探讨如何完善各项指导，特做此次调查，希望您能把真实想法告诉我们！"，标题类型设置为"Heading 2"。 图14设置标题内容 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385028377.png "点击放大") 6. 添加标签。 1. 从"基本组件 \> 表单"中，拖拽"输入框"组件至标题组件下方。 图15添加输入框组件到标题下方 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351308622.png "点击放大") 2. 选择输入框组件，设置标签为"问卷标签"。 图16设置输入框标签 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351149074.png) 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351333452.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__Label__CST"字段，单击"确定"。 图17选择*命名空间* __Label__CST字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351309238.png "点击放大") 7. 添加问题1。 1. 从"基本组件 \> 表单"中，拖拽"单选按钮"组件至输入框组件下方。 图18添加单选按钮组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384871301.png "点击放大") 2. 选中单选按钮，设置标签为"1、您的性别是？"，选项为"男"和"女"，在表单校验中打开必填开关，设置必填错误信息为"请您选择性别"。 图19设置单选按钮基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351151506.png "点击放大") 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385053793.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__questionCode1__CST"字段，单击"确定"。 图20选择"命名空间__questionCode1__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351151806.png "点击放大") 8. 添加问题2。 1. 从"基本组件 \> 表单"中，拖拽"下拉框"组件到单选按钮下方。 图21添加下拉框组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351152166.png "点击放大") 2. 选中下拉框组件，设置标签为"2、您的专业类型是？"，配置选项"机械类、电子信息类、计算机类、土木类、其他"，表单校验打开"必填"，设置必填错误信息为"请选择您的专业"。 图22设置下拉框组件的基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384873041.png "点击放大") 图23设置表单校验 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385034381.png) 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351173724.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__questionCode2__CST"字段，单击"确定"。 图24选择"命名空间__questionCode2__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351159906.png "点击放大") 9. 添加问题3。 1. 从"基本组件 \> 表单"中，拖拽"单选"组件到下拉框组件下方。 2. 选中单选组件，设置标签为"3、你进入毕业时期的去向？"，选项为"求职"、"考研"、"出国"、"创业"和"其他"，在表单校验中打开必填开关，必填错误信息设置为"请选择毕业时期的去向"。 图25设置下拉框组件的基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351161434.png "点击放大") 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384894109.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__questionCode3__CST"字段，单击"确定"。 图26选择"命名空间__questionCode3__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351321678.png "点击放大") 10. 添加问题4。 1. 从"基本组件 \> 表单"中，拖拽"复选按钮"到单选组件下方。 2. 选中复选按钮，设置标签为"4、就业时，下列哪些因素对你有影响？"，选项为"薪酬、保险福利、工作氛围环境、晋升空间、其他"，在表单校验中，打开必填开关，设置必填错误信息为"请选择就业因素影响"。 图27设置复选按钮的基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385043845.png "点击放大") 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351333448.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__questionCode4__CST"字段，单击"确定"。 图28选择"命名空间__questionCode4__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351324018.png "点击放大") 11. 添加问题5。 1. 从"基本组件 \> 表单"中，拖拽"评分"组件到复选按钮下方。 2. 选中评分组件，设置标签为"5、您的专业对您找工作的帮助评分？"，星星总数设置为"10"。 图29设置评分组件的基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384885829.png "点击放大") 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385053785.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__questionCode5__CST"字段，单击"确定"。 图30选择"命名空间__questionCode5__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351166494.png "点击放大") 12. 添加问题6。 1. 从"基本组件 \> 表单"中，拖拽"多行输入框"组件到评分组件下方。 2. 选中多行输入框组件，设置标签为"6、在日常实习，工作，生活中希望提升哪些方面的能力？"，打开"自适应高度"开关，设置最小行数为"2"、最大行数为"10"以及最大字符长度为"500"。 图31设置多行输入框的基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351327226.png "点击放大") 3. 在"属性 \> 数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384894105.png)，进入选择模型页面。 4. 在选择模型页面，选择formData模型中的"命名空间__questionCode6__CST"字段，单击"确定"。 图32选择"命名空间__questionCode6__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384888425.png "点击放大") 13. 添加容器，即从"基本组件 \> 布局"中，拖拽"容器"组件到多行输入框组件下方。 14. 添加提交按钮。 1. 从"基本组件 \> 基本"中，拖拽"按钮"组件到容器组件中。 2. 选中按钮组件，设置显示名称为"提交"，大小选择"默认"。 图33设置按钮组件基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385049273.png "点击放大") 3. 在"事件"页签，单击"点击"后的"+"，进入添加动作页面。 4. 在自定义动作中，输入如下代码，单击"创建"。 ``` var _form = context.$component.form // 校验表单，非promise，返回true/false var validFlag = _form.formValidateUnPromise(); if (!validFlag) { return false; } //序列化表单 var model = context.$model.ref("formData").getData() for (var item in model) { if (model[item] && typeof model[item] !== "string") { model[item] = JSON.stringify(model[item]); } } // 获取当前页面 var pageName = context.$page.params.pageName; // 业务逻辑 context.$model.ref("formData").setData(model); context.$model.ref("formData").save().then((data) => { if (data.resCode == 0) { var recordId = data.result[0] && data.result[0].id; // 在当前页签打开 var queryParam = "recordId=" + recordId + "&page=" + pageName; //context.$page.loadStdPage("命名空间__questionnaire_submitPage", queryParam); } }) ``` 其中，"formData"为[2.e]中创建的对象模型。 15. 添加重置按钮。 1. 从"基本组件 \> 基本"中，拖拽"按钮"组件到提交组件后方。 2. 选择按钮组件，设置显示名称为"重置"，类型选择"默认按钮"，大小选择"默认"。 图34设置按钮基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002384891545.png "点击放大") 3. 在"事件"页签，单击"点击"后的"+"，进入添加动作页面。 4. 在自定义动作中，输入如下代码，单击"创建"。 ``` // 当前组件 let _component = context.getCurrentComponent() // 当前Form let _form = _component.getForm() _form.resetFields() ``` 16. 设计完成后，单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351173728.png)，保存标准页面。 17. 保存成功后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385053797.png)，预览标准页面，进行功能调试。 1. 在预览页面提交问卷，单击"提交"。 图35提交问卷 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351332854.png "点击放大") 2. 在应用设计器的左侧导航栏中，选择"数据"。 3. 单击[步骤三：添加调查表记录对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0079.html)中创建的对象，在"数据"页签，可查看到提交的数据。 图36查看提交的数据 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385053533.png "点击放大")