angularjs--day2之实名认证页面
来源:互联网 发布:河头店农村淘宝地址 编辑:程序博客网 时间:2024/05/29 15:59
接到霸道指派任务:做一个非实名升弱实名的公共接口
实际上是为app做一个实名认证的页面和接口。并且可以留作以后他用
页面初步如下:
在新的分支上独立开发。
在前端页面显示部分没有什么难度,主要是调用一些写好的组件,再适当调调部分样式,做出来的大概这样子。
浏览器中显示的h5页面略有偏差
具体功能代码实现方面:
本地server端模拟返回数据:
规定返回接口为/h5/op_check_if_jump.json
返回code码“000000”为成功
测试错误信息存在resultMsg中
还可能存在其他数据,本地只做测试因此未指明
router.post("/op_check_if_jump.json",function(req,res){ var reqBody = req.body; base.apiOkOutput(res, { resultCode: "000000", //成功返回码 resultMsg: "测试错误信息", //返回结果 });});
接下来servies请求调用后台接口:
getCheckJump:function(myForm){//入参 var reqData = this.getRequestData({ id:myForm.id, name:myForm.name, identity:myForm.identity });//請求的数据 return this.postRequest("/h5/op_check_if_jump.json?v=" + Math.random(), reqData, function(result){ return result; }); }//请求后台判断接口
在这里将注册id和姓名和身份证号作为入参传递给后台做统一处理,再返回成功与否的结果。getRequestData()是获取入参。并且用变量reqdata存起来。postRequest()则时向服务端发起请求。+Math。random()添加随机数,防止缓存。function(result)回调函数返回结果result。
页面点击下一步触发事件代码view层:
<div class="container tonext"> <button class="btn btn-primary" ng-click="goToStep('myForm')" ng-disabled="myForm.$invalid">下一步</button> </div>
controller层
$scope.goToStep = function(myForm) { var id = "1234"; var name = "qiyue"; var identity = "123456789098765"; RealNameService.getCheckJump(myForm).then(function(result){ if(result.code === "000000"){ //带url的页面跳转 location.href = $stateParams.successUrl; } else { helper.handleError(result.message, false, result.code); } }, function(result) { helper.handleError(result.message, false); }); };
首先要注意一点就是在controller层中用到的封装好的方法是需要注入的。例如这里的RealNameService、以及后续用到的出错处理、弹窗、路由参数helper、dialog、stateParams等。
当请求成功并且返回resultcode为六个0时会跳转至相应页面。
当进入认证页面时就会带相应的URL
即上一个页面的URL参数,因此在路由配置处添加如下代码:
.state('RealName', { url: '/RealName?backUrl&successUrl', templateUrl: __uri('../../views/RealName.html') })
配置backUrl和successUrl。当页面请求成功时利用
location.href = $stateParams.successUrl;
获取跳转地址,实现页面跳转。
backUrl为返回按钮的返回页面
当请求成功但是返回错误信息时走else分支
当请求失败,调用回调函数走function(result)分支
- angularjs--day2之实名认证页面
- 实名认证
- 身份证实名认证
- 实名认证方案
- 身份证实名认证
- 身份证实名认证
- 身份实名认证返照
- 身份证实名认证
- 身份实名认证返照
- 身份实名认证返照
- 身份实名认证返照
- 身份实名认证返照
- 身份证实名认证
- 身份证实名认证
- 身份证实名认证
- 身份实名认证返照
- 身份实名认证返照
- 手机号码实名认证
- 网络流(最大流、最小费用最大流、有上下界的网络流)
- hdu 2080 找单词
- 广播期间功耗计算
- centos安装LAMP composer laravel 2016.08.08回顾
- 用 CentOS 7 打造合适的科研环境
- angularjs--day2之实名认证页面
- [李景山php]每天laravel-20161008|Validator.php-8
- ClientDataSet简单用法小记01
- Android 中 View移动总结:ViewDragHelper学习及用法详解
- Lua string(字符串)和强大的模式匹配功能
- BlockChain技术系列(二)- fabric架构介绍
- 多项式求和
- Android studio如何使用SVN进行版本控制
- android下自动关机与重启