接口的简单介绍和fm.scuinfo.com的实现

我说的可能都是错的，希望给你带来思考。

接口是什么？

定义：应用程序接口（英语：Application Programming Interface，简称：API）

通俗的解释就是：提供转接的口子，遵循同一个规则的多个程序之间交换数据的一种方式。

网络接口。

例如以 HTTP GET 方式请求 http://fm.scuinfo.com/api/posts 并获取返回值， http://fm.scuinfo.com/api/posts 就可以视为一个接口。

程序内部接口

比如函数，也可以算是接口。

可以这样说： 返回值 方法名（参数1, 参数2 ...) 长得像这样的都是接口。

通过调用接口，可以获取，提交数据->从而去操作数据。

接口传递数据的数据格式

json

{
code:200,
message:"ok",
data:{
title:"这里是标题"
}
}

xml

<result>
<code>200</code>
<message>ok</message>
<data>
<title>这里是标题<title/>
</data>
</result>

一个活生生的例子

我们来看最近刚刚上线的神奇海螺的例子：

我们先来访问一下： http://fm.scuinfo.com

帖子列表接口定义：

{
    method:"get",
    url:"/api/posts"
    params:{
    pageSize:10 //请求的文章数
    fromId:5488  //从第5488个文章id往前的10篇文章
}
}

return:{
"code": 200,
"message": "success",
"data": [
    {
        "id": 5488,
        "title": "我要零食……",
        "gender": 1,
        "secret": 1,
        "avatar": "http://ww4.sinaimg.cn/mw690/a958717cgw1erw70ntdhuj20fs0fsdh9.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 0,
        "like": 0,
        "date": 1431747866,
        "more": 0
    },
    {
        "id": 5480,
        "title": "#海螺#缘分真是神奇的东西  拿给我吧",
        "gender": 2,
        "secret": 1,
        "avatar": "http://ww1.sinaimg.cn/mw690/a958717cgw1erw6zm4z9qj20fs0fs0tx.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 0,
        "like": 0,
        "date": 1431734448,
        "more": 0
    },
    {
        "id": 5479,
        "title": "#海螺#第一次写，我觉得男女主播应该是一对，大家觉得咋样？记得翻我牌啊，还有怎么点歌啊？",
        "gender": 1,
        "secret": 1,
        "avatar": "http://ww4.sinaimg.cn/mw690/a958717cgw1erw6ueyjnnj20fs0fst9x.jpg",
        "nickname": "某同学",
        "commentCount": 1,
        "author": 0,
        "userId": 0,
        "likeCount": 2,
        "like": 0,
        "date": 1431714369,
        "more": 0
    },
    {
        "id": 5478,
        "title": "上个月我找到了一台平板电脑，到现在为止找不到主任，那我怎么办呐？\n如果有弄丢平板电脑的人话，跟18280063697联系。\n我叫马木提江。",
        "gender": 1,
        "secret": 1,
        "avatar": "http://ww3.sinaimg.cn/mw690/a958717cgw1erw6xvhywjj20fs0fsq48.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 2,
        "like": 0,
        "date": 1431713829,
        "more": 0
    },
    {
        "id": 5477,
        "title": "#海螺#海螺海螺告诉我，如何拐到男主播？",
        "gender": 2,
        "secret": 1,
        "avatar": "http://ww2.sinaimg.cn/mw690/a958717cgw1erw710tlblj20fs0fswfp.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 1,
        "like": 0,
        "date": 1431713541,
        "more": 0
    },
    {
        "id": 5476,
        "title": "想找一个性格开朗素颜也很美的女朋友，你在哪？",
        "gender": 1,
        "secret": 1,
        "avatar": "http://ww3.sinaimg.cn/mw690/a958717cgw1erw6z87przj20fs0fs0u5.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 1,
        "like": 0,
        "date": 1431710522,
        "more": 0
    },
    {
        "id": 5475,
        "title": "超想知道在电台听到自己的名字会是什么感觉！叫谁呢……额……叫一个不熟的吧……额，会不会被打呀……这……好吧，我只是逗比来了",
        "gender": 2,
        "secret": 1,
        "avatar": "http://ww2.sinaimg.cn/mw690/a958717cgw1erw710tlblj20fs0fswfp.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 1,
        "like": 0,
        "date": 1431709419,
        "more": 0
    },
    {
        "id": 5474,
        "title": "爱上一个学渣……没关系，我也是学渣～重点是，没人爱",
        "gender": 2,
        "secret": 1,
        "avatar": "http://ww1.sinaimg.cn/mw690/a958717cgw1erw6zm4z9qj20fs0fs0tx.jpg",
        "nickname": "某同学",
        "commentCount": 0,
        "author": 0,
        "userId": 0,
        "likeCount": 0,
        "like": 0,
        "date": 1431709308,
        "more": 0
    }
]
}

前端ajax获取数据，并渲染。

$.get('http://fm.scuinfo.com/api/posts',function(data){

if(data.code==200){
//把数据组装成html，打印到 浏览器里
}else{
alert(data.message);
}

});

ok,恩，整个fm.scuinfo.com 就是这样咯。