WebAPI學(xué)習(xí)（一）——?jiǎng)?chuàng)建Web API程序

發(fā)表時(shí)間：2016-3-13

發(fā)布人：葵宇科技

瀏覽次數(shù)：39

引言

在公司中用到的都是webAPI的應(yīng)用程序，這個(gè)東西之前沒(méi)有接觸過(guò)。但是這個(gè)并不是什么新鮮的東西，因我們

之前有mvc的基礎(chǔ)，所以說(shuō)學(xué)習(xí)這個(gè)東西還是比較容易的，在開(kāi)始的時(shí)候自己可能突然蒙圈了。因?yàn)樵谌思翼?xiàng)目中用

到的東西自己之前都沒(méi)有接觸過(guò)，感覺(jué)非常的陌生甚至整個(gè)混亂了。但是當(dāng)我們靜下心來(lái)好好想想的話是非常容易

的，就是在某些寫(xiě)法上不太一樣，其余的都差不多，下面就給大家創(chuàng)建第一個(gè)程序。

創(chuàng)建一個(gè)Web API程序

啟動(dòng)VS2012創(chuàng)建一個(gè)新項(xiàng)目，在已經(jīng)安裝的模板中選擇 ASP.NET MVC4 Web API程序

在ASP.NET MVC項(xiàng)目對(duì)話框中選擇Web API項(xiàng)，點(diǎn)擊確定

創(chuàng)建成功之后工程中會(huì)自動(dòng)添加一個(gè)Web API服務(wù)控制器，上面并附帶訪問(wèn)地址

項(xiàng)目解決方案，選擇Models文件夾右鍵添加一個(gè)Model類

代碼如下：

namespace Git.Framework.WebAPI.Models
{
public class Contact
{
public int ID { get; set; }

public string Name { get; set; }

public string Sex { get; set; }

public DateTime Birthday { get; set; }

public int Age { get; set; }
} }

工程解決方案選擇Controllers文件夾右鍵添加一個(gè)新的Web API controller

在添加控制器彈出對(duì)話框中選擇模板：空API控制器

控制器中添加如下代碼：

namespace Git.Framework.WebAPI.Controllers
{
public class ContactController : ApiController
{
Contact[] contacts = new Contact[]
{
new Contact(){ ID=1, Age=23, Birthday=Convert.ToDateTime("1977-05-30"), Name="情緣", Sex="男"},
new Contact(){ ID=2, Age=55, Birthday=Convert.ToDateTime("1937-05-30"), Name="令狐沖", Sex="男"},
new Contact(){ ID=3, Age=12, Birthday=Convert.ToDateTime("1987-05-30"), Name="郭靖", Sex="男"},
new Contact(){ ID=4, Age=18, Birthday=Convert.ToDateTime("1997-05-30"), Name="黃蓉", Sex="女"},
};

/// <summary>
/// /api/Contact
/// </summary>
/// <returns></returns>
public IEnumerable<Contact> GetListAll()
{
return contacts;
}

/// <summary>
/// /api/Contact/id
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public Contact GetContactByID(int id)
{
Contact contact = contacts.FirstOrDefault<Contact>(item=>item.ID==id);
if (contact == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
return contact;
}

/// <summary>
/// 根據(jù)性別查詢
/// /api/Contact?sex=女
/// </summary>
/// <param name="sex"></param>
/// <returns></returns>
public IEnumerable<Contact> GetListBySex(string sex)
{
return contacts.Where(item => item.Sex == sex);
}
}}

瀏覽器訪問(wèn)API路徑

Controller Methed

URI

GetListAll

/api/Contact

GetListBySex

"/api/Contact?sex=" + sex

GetContactByID

/api/Contact/"+id

在IE瀏覽器中瀏覽出現(xiàn)如下效果

如果在Chrome 或者 FireFox 中瀏覽會(huì)先下如下效果

Javascript訪問(wèn)Web API

在項(xiàng)目中添加一個(gè)About View視圖

代碼如下：

<span style="font-family:SimSun;font-size:18px;">@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>About</title>
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/ecmascript">
        $(document).ready(function () {
            $("#btnAll").click(function () {
                $.getJSON("/api/Contact", function (data) {
                    var html = "<ul>";
                    $(data).each(function (i, item) {
                        html += "<li>"+item.ID+":"+item.Name+":"+item.Sex+"</li>";
                    });
                    html += "</ul>";
                    $("#contactAll").html(html);
                });
            });


            $("#btnID").click(function () {
                var id = $("#txtID").val();
                $.getJSON("/api/Contact/"+id, function (data) {
                    var html = "<ul>";
                    $(data).each(function (i, item) {
                        html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
                    });
                    html += "</ul>";
                    $("#contactID").html(html);
                });
            });

            $("#btnSex").click(function () {
                var sex = $("#ddlSex").val();
                $.getJSON("/api/Contact?sex=" + sex, function (data) {
                    var html = "<ul>";
                    $(data).each(function (i, item) {
                        html += "<li>" + item.ID + ":" + item.Name + ":" + item.Sex + "</li>";
                    });
                    html += "</ul>";
                    $("#contactSex").html(html);
                });
            });
        });
    </script>
</head>
<body>
    <p>
        <input type="button" id="btnAll" value="查詢所有" /> 
    </p>
    <p>
        <input type="text"  id="txtID" name="txtID"/>
        <input type="button" id="btnID" value="根據(jù)ID查詢" /> 
    </p>
    <p>
        <select id="ddlSex" name="ddlSex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="button" id="btnSex" value="根據(jù)性別查詢" /> 
    </p>
    <div id="contactAll">
    </div>
    <div id="contactID">
    </div>
    <div id="contactSex">
    </div>
</body>

</html></span>

運(yùn)行結(jié)果效果圖

Web API總結(jié)

1.Web API 控制器(Controller) 繼承ApiController

2. Api 的 Url Map： api/{controller}/{id} 每個(gè)"Action"是通過(guò) Http謂詞(GET/POST/PUT/DELETE)映射的

3.客戶端可以通過(guò) Http Header 的 Accept 指定返回?cái)?shù)據(jù)的格式。默認(rèn)是支持：appliction/xml 和

application/json，當(dāng)想返回比如 image/jpeg 這樣的圖片格式時(shí)，需要添加 MediaTypeFormatter 。比如：當(dāng)

指定某個(gè) Task 時(shí)，通過(guò)指定 Accept : image/jpeg 獲取該 Task 的圖片信息。

g-Jack

CSDN認(rèn)證博客專家 Spring Java Linux 碩士畢業(yè)于北京交通大學(xué)軟件工程專業(yè)，擁有5年java工作經(jīng)驗(yàn)，熱愛(ài)編程，樂(lè)于分享，喜歡研究架構(gòu)方向的優(yōu)化，和大數(shù)據(jù)高并發(fā)架構(gòu)的設(shè)計(jì)。