1 思考事件
用户修改密码,用户向服务器发送密码修改的请求,而请求的同时将旧密码和新密码传递给服务器端,然后在获取服务器返回修改成功的消息
如图所示的页面:
事件的触发对象就是"提交"按钮,需要传递的参数就是页面所示的三个密码输入框中用户输入的内容。然后与产品沟通确定该三个信息点与信息结构图之间的映射关系,查看数据来源是否有"module"(相关链接待添加)
2 事件逻辑操作设置
通过整个事件过程的思考我们可以得知,该事件的过程中我们需要传递参数给服务器,然后获取反馈或者说响应数据,要在页面的三个密码输入框设置id和name(后续会说明设置原因)。
2_1 设置输入框的id和name
右键点击输入框,然后点击右键菜单中的"单行文本属性"
在名称中输入旧密码输入框的name属性值"oldpassword"
然后点击"高级",如果在该ID项中已经存在有值那么不再设置,如果没有也在ID下方输入"oldpassword"
按照以上的步骤再设置剩下的两个输入框,需要特别注意的是,如果有module库支持,那么在设置name时需要与module中要求的参数KEY一致;此处设置的id是为了后续逻辑操作额外参数的指定,而name或者data-name属性的值是为了后续服务器端输入参数设置时的名称和获取该参数值时的KEY,三者必须保持一致;。
2_2 提交按钮逻辑设置
右键点击"提交"按钮,在弹出菜单中选择特效,打开元素特效编辑对话框,点击逻辑打开逻辑设置对话框,根据情况逐一设置该对话框中的,触发事件、事件来源、效果对象等等。没有module库支持“提交”按钮逻辑设置如下:
逻辑 | 事件来源对象 | 逻辑操作 | 刷新方式 | ct属性 | 请求类型 | 获取数据的url | 逻辑操作额外参数 |
单击 | 当前对象 | 刷新数据 | 整页刷新 | public_json | post | 不做修改(有module库支持时相关链接待添加) | css选择器语法,#oldpassword,#newpassword,#checknewpassword |
而对于效果对象,效果都不用理会 ,其他在表格中没有加入的全为默认,不用做修改
3 服务器端修改
3_1 创建输入参数
首先切到wide服务器端编辑界面,点击上方的“代码”,点击下拉菜单的“输入参数”打开输入参数设置界面,输入名称"password"(一般为元素(输入框)的name或者data-name属性的值),输入方式为"POST",数据类型为“字符串”
3_2 格式验证
根据需要设置格式验证的对应项,当前password设置,格式验证必须项为“是”,长度暂时不管,错误信息输入“密码不能为空”
3_3 保存设置
点击界面右上角的"保存"按钮,左侧就会有一个名为password的下拉选项,而且灰色输入框内会出现"password"即之前输入的名称,说明该输入参数已经保存成功,
然后按照password的设置步骤设置email等其他参数,在其他所有的输入参数确定全部保存成功时,再点击界面右下角的保存或者关闭按钮。
然后可以通过 inputs.KEY来获取参数.如下:
finish_data.password = inputs.password;
finish_data.email = inputs.email;
......
其中对应的关系是,password和email对应的是input标签属性中的name,然后通过inputs.KEY 来获取 input框内的值。