云应用开发实战 单元4 我的记账本.ppt

*********************************************************************************需要注意的是，POST方法建立后，还需要再次对login及signin两个子资源启用CORS才能使用。4.3.1用户注册与登录三、任务实施2.创建APIGateway项目4.3-创建用户及账本数据表选择部署API，阶段名称为test。4.3.1用户注册与登录三、任务实施3.部署API项目4.3-创建用户及账本数据表记录两个POST方法的“调用URL”，后面编写前端代码时需要填入。4.3.1用户注册与登录三、任务实施3.部署API项目4.3-创建用户及账本数据表编写3个文件“index.html”、“login.html”、“signin.html”，“login.html”、“signin.html”中的XXXXX需要填入上一步骤记录的两个POST方法的“调用URL”。index.html：4.3.1用户注册与登录三、任务实施4.前端网页编写及上传项目4.3-创建用户及账本数据表!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleWelcome/title/headbodybuttononclick=window.location.href=/signin.html注册/buttonbuttononclick=window.location.href=/login.html登录/button/body/html4.3.1用户注册与登录三、任务实施4.前端网页编写及上传项目4.3-创建用户及账本数据表!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titlelogin/titlestyle.a{width:300px;height:30px;}#b{width:400px;text-align:right;}/style/headdivid=bformid=frm1action=/testmethod=getID：inputtype=textclass=aname=IDbr用户名：inputtype=textclass=aname=user_namebr密码：inputtype=textclass=aname=passwordbrbrinputtype=buttonvalue=提交onclick=login()/form/divpid=demo/pscriptfunctionlogin(){varxhttp=newXMLHttpRequest();varx=document.getElementById(frm1);if(x.elements[0].value==adminx.elements[1].value==admin){window.location.href=/manage.html;}xhttp.onreadystatechange=function(){if(this.readyState==4this.status==200){varobj=JSON.parse(this.responseText);if(obj.body==Loginsuccessfully!){alert(Loginsuccessfully!)window.location.href=/cashbook.html+?ID=+obj.id;}else{document.getElementById(demo).innerHTML=obj.b