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)分支

1 0
原创粉丝点击