手机端app前端开发api的创建及运用

Api的创建及运用

情况一：从服务器或者本地拉取数据

1、Config文件下的debugNetConfig.js配置数据

CASE("/api/getUserImfor", TURN_ON,{

"data":[

{

"name": "张三",

"age":"25"

}]

});

2、配置Api(user-client.js)

define(['butterfly'], function(Butterfly) 

{

var cls = {};

cls.getUserImfor= function(params)

{

params.api = "/api/getUserImfor";

bfNet.doAPI(params);

}

cls.userRegiste= function(params)

{

params.api = "/api/userRegiste";

bfNet.doAPI(params);

}

return cls;

});

3、Html文件(userImfor.html)及template 模板

<script id="userImfor" type="text/x-underscore-template">

<div><%=name%></div>

<div><%=age%></div>

</script>

<div id=”user”>  </div>

 

4、api运用

define([

        "text!myinfo/userImfor.html", 

        "common/navView",

‘myinfo/user-client’   

],

function(template,View, userClient)

{

var Base = View;

return Base.extend({

.......     //此处省略

showUserImfor:function(){

var me = this；

userClient.getUserImfor({

data:{

........  //此处传参数

},

    type: "get",

    dataType: "json",

            success: function (data) {

        if (data) {

           me._showDisList = data.data;  //取出对象

              me.showUserList();  //把数据添加到模板中和把模板添加到指定的节点中 

        } else {

              console.log('获取数据失败');

        }

     }});

},

showUserList: function(){

var me = this;

var userTemplate = this.elementHTML('#userImfor');//得到模板

_.each(me._showDisList,  function(userItem) {//循环取出对象给相应的属性赋值

var tem = _.template(userTemplate, userItem);//把值添加到模板中

me.getElement('#user').append(tem);//把模板添加到指定的节点中

});

}

});

});

 

 

情况二：提交数据到服务器

1、配置Api(user-client.js) ：如情况一的第二点

2、html文件(userRegist.html)

<div>

<span>姓名</span><input type=”text” id=”name” />

<span>年龄</span><input type=”text” id=”age” />

<div id="regist-submit">提交</div>

</div>

3、api的运用

define([

        "text!myinfo/userRegist.html", 

        "common/navView",

‘myinfo/user-client’   

],

function(template,View, userClient)

{

var Base = View;

return Base.extend({

.......     //此处省略

showUserImfor:function(){

var me = this；

var name = this.getElement(“#name”).val();

var age = this.getRlment(“#age”).val();

userClient.userRegiste({

data:{ //提交数据

name:name,

age: age

},

    type: "post",

            success: function (data) {

        if (data.OK) {

butterfly.navigate("/myinfo/success.html");                          } else {

Notification.show({

type: "error",

message: "提交失败"

});

}

     }});

},

 

});

});