Memeries for sale

Crazier-qi

H5实名认证

• 分类: project • 标签: 实名认证，server访问

H5实名认证

接到霸道指派任务：做一个非实名升弱实名的公共接口

这里写图片描述

实际上是为app做一个实名认证的页面和接口。并且可以留作以后他用

页面初步如下：

这里写图片描述

在新的分支上独立开发。
在前端页面显示部分没有什么难度，主要是调用一些写好的组件，再适当调调部分样式，做出来的大概这样子。
浏览器中显示的h5页面略有偏差

这里写图片描述

代码实现

具体功能代码实现方面：

mock数据

本地server端模拟返回数据：
规定返回接口为/h5/op_check_if_jump.json
返回code码“000000”为成功
测试错误信息存在resultMsg中
还可能存在其他数据，本地只做测试因此未指明

1
2
3
4
5
6
7
router.post("/op_check_if_jump.json",function(req,res){
   var reqBody = req.body;
    base.apiOkOutput(res, {
        resultCode: "000000", //成功返回码
        resultMsg: "测试错误信息", //返回结果
    });
});

调用接口

接下来servies请求调用后台接口：

1
2
3
4
5
6
7
8
9
10
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层

页面点击下一步触发事件代码view层：

1
2
3
<div class="container tonext">
            <button class="btn btn-primary" ng-click="goToStep('myForm')" ng-disabled="myForm.$invalid">下一步</button>
        </div>

controller层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$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参数，因此在路由配置处添加如下代码：

1
2
3
4
.state('RealName', {
                url: '/RealName?backUrl&successUrl',
                templateUrl: __uri('../../views/RealName.html')
            })

配置backUrl和successUrl。当页面请求成功时利用

1
location.href = $stateParams.successUrl;

获取跳转地址，实现页面跳转。
backUrl为返回按钮的返回页面

这里写图片描述

当请求成功但是返回错误信息时走else分支
当请求失败，调用回调函数走function（result）分支