2. 程式人生 > >Web API 強勢入門指南

Web API 強勢入門指南

阿新 • • 發佈：2018-12-30

Web API是一個比較寬泛的概念。這裡我們提到Web API特指ASP.NET Web API。

這篇文章中我們主要介紹Web API的主要功能以及與其他同類型框架的對比，最後通過一些相對複雜的例項展示如何通過Web API構建http服務，同時也展示了Visual Studio構建.net專案的各種強大。

目錄

什麼是 Web API

官方定義如下，強調兩個關鍵點，即可以對接各種客戶端（瀏覽器，移動裝置），構建http服務的框架。

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients

, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

Web API在ASP.NET完整框架中地位如下圖，與SignalR一起同為構建Service的框架。Web API負責構建http常規服務，而SingalR主要負責的是構建實時服務，例如股票，聊天室，線上遊戲等實時性要求比較高的服務。

Picture20

為什麼要用 Web API

Web API最重要的是可以構建面向各種客戶端的服務。另外與WCF REST Service不同在於，Web API利用Http協議的各個方面來表達服務(例如 URI/request response header/caching/versioning/content format)，因此就省掉很多配置。

Picture2

當你遇到以下這些情況的時候，就可以考慮使用Web API了。

  • 需要Web Service但是不需要SOAP
  • 需要在已有的WCF服務基礎上建立non-soap-based http服務
  • 只想釋出一些簡單的Http服務，不想使用相對複雜的WCF配置
  • 釋出的服務可能會被頻寬受限的裝置訪問
  • 希望使用開源框架，關鍵時候可以自己除錯或者自定義一下框架

功能簡介

Web API的主要功能

1. 支援基於Http verb (GET, POST, PUT, DELETE)的CRUD (create, retrieve, update, delete)操作

    通過不同的http動作表達不同的含義，這樣就不需要暴露多個API來支援這些基本操作。

2. 請求的回覆通過Http Status Code表達不同含義，並且客戶端可以通過Accept header來與伺服器協商格式，例如你希望伺服器返回JSON格式還是XML格式。

3. 請求的回覆格式支援 JSON，XML，並且可以擴充套件新增其他格式。

4. 原生支援OData。

5. 支援Self-host或者IIS host。

6. 支援大多數MVC功能，例如Routing/Controller/Action Result/Filter/Model Builder/IOC Container/Dependency Injection。

Web API vs MVC

你可能會覺得Web API 與MVC很類似，他們有哪些不同之處呢？先上圖，這就是他們最大的不同之處。

Picture1

詳細點說他們的區別，

  • MVC主要用來構建網站，既關心資料也關心頁面展示，而Web API只關注資料
  • Web API支援格式協商，客戶端可以通過Accept header通知伺服器期望的格式
  • Web API支援Self Host，MVC目前不支援
  • Web API通過不同的http verb表達不同的動作(CRUD)，MVC則通過Action名字表達動作
  • Web API內建於ASP.NET System.Web.Http名稱空間下，MVC位於System.Web.Mvc名稱空間下，因此model binding/filter/routing等功能有所不同
  • 最後，Web API非常適合構建移動客戶端服務

Web API vs WCF

釋出服務在Web API和WCF之間該如何取捨呢？這裡提供些簡單地判斷規則，

  • 如果服務需要支援One Way Messaging/Message Queue/Duplex Communication，選擇WCF
  • 如果服務需要在TCP/Named Pipes/UDP (wcf 4.5)，選擇WCF
  • 如果服務需要在http協議上，並且希望利用http協議的各種功能，選擇Web API
  • 如果服務需要被各種客戶端(特別是移動客戶端)呼叫，選擇Web API

Web API 實戰 (Web API + MongoDB + knockoutjs)

ASP.NET網站上有很多簡單的Web API例項，看看貼圖和例項程式碼你就明白怎麼用了。這裡我們通過一個稍微複雜一點的例項來展示下Web API的功能。

涉及技術

在我們的例項裡面用到了：

服務URI Pattern

Action Http verb URI
Get contact list GET /api/contacts
Get filtered contacts GET /api/contacts?$top=2
Get contact by ID GET /api/contacts/id
Create new contact POST /api/contacts
Update a contact PUT /api/contacts/id
Delete a contact DELETE /api/contacts/id

準備工作

1. 下載並安裝Mongo DB，步驟看這裡。

2. Mongo DB C# driver下載可以在nuget搜尋mongocsharpdriver。

3. 如果想本地察看資料庫中內容，下載MongoVUE。

4. Knockoutjs下載可以在nuget搜尋knockoutjs。

程式碼實現

1. 建立專案

建立MVC4 Web Application

1

在Project Template中選擇Web API

2

然後專案就建立成了，Controllers裡面有一個ValuesController，是自動生成的一個最簡單的Web API Controller。

正如我們前面所說，裡面引用的是System.Web.Http名稱空間。

3

2. 建立model

在model裡面新增Contact類

4

程式碼如下，其中BsonId需要mongocsharpdriver。

1

2

3

4

5

6

7

8

9

public class Contact

{

[BsonId]

public string Id { get; set; }

public string Name { get; set; }

public string Phone { get; set; }

public string Email { get; set; }

public DateTime LastModified { get; set; }

}

我們需要新增mongosharpdriver。

7

8

另外我們需要在Model中新增Repository，Controller通過該類來訪問Mongo DB。

1

2

3

4

5

6

7

public interface IContactRepository {

IEnumerable GetAllContacts();

Contact GetContact(string id);

Contact AddContact(Contact item);

bool RemoveContact(string id);

bool UpdateContact(string id, Contact item);  

}

ContactRepository的完整實現如下，

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

public class ContactRepository : IContactRepository

{

MongoServer _server = null;

MongoDatabase _database = null;

MongoCollection _contacts = null;

public ContactRepository(string connection)

{

if (string.IsNullOrWhiteSpace(connection))

{

}

_server = new MongoClient(connection).GetServer();

_database = _server.GetDatabase("Contacts");

_contacts = _database.GetCollection("contacts");

// Reset database and add some default entries

_contacts.RemoveAll();

for (int index = 1; index < 5; index++)

{

Contact contact1 = new Contact

{

Email = string.Format("test{0}@example.com", index),

Name = string.Format("test{0}", index),

Phone = string.Format("{0}{0}{0} {0}{0}{0} {0}{0}{0}{0}", index)

};

AddContact(contact1);

}

}

public IEnumerable GetAllContacts()

{

return _contacts.FindAll();

}

public Contact GetContact(string id)

{

IMongoQuery query = Query.EQ("_id", id);

return _contacts.Find(query).FirstOrDefault();

}

public Contact AddContact(Contact item)

{

item.Id = ObjectId.GenerateNewId().ToString();

item.LastModified = DateTime.UtcNow;

_contacts.Insert(item);

return item;

}

public bool RemoveContact(string id)

{

IMongoQuery query = Query.EQ("_id", id);

WriteConcernResult result = _contacts.Remove(query);

return result.DocumentsAffected == 1;

}

public bool UpdateContact(string id, Contact item)

{

IMongoQuery query = Query.EQ("_id", id);

item.LastModified = DateTime.UtcNow;

IMongoUpdate update = Update

.Set("Email", item.Email)

.Set("LastModified", DateTime.UtcNow)

.Set("Name", item.Name)

.Set("Phone", item.Phone);

WriteConcernResult result = _contacts.Update(query, update);

return result.UpdatedExisting;

}

}

3. 新增Controller

右鍵Controllers目錄選擇新增Controller

5

選擇Empty API controller，將Controller命名為ContactsController

6

新增如下程式碼，可以看到Controller中的API方法名就是以http verb命名的。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

public class ContactsController : ApiController

{

private static readonly IContactRepository _contacts = new ContactRepository(string.Empty);

public IQueryable Get()

{

return _contacts.GetAllContacts().AsQueryable();

}

public Contact Get(string id)

{

Contact contact = _contacts.GetContact(id);

if (contact == null)

{

throw new HttpResponseException(HttpStatusCode.NotFound);

}

return contact;

}

public Contact Post(Contact value)

{

Contact contact = _contacts.AddContact(value);

return contact;

}

public void Put(string id, Contact value)

{

if (!_contacts.UpdateContact(id, value))

{

throw new HttpResponseException(HttpStatusCode.NotFound);

}

}

public void Delete(string id)

{

if (!_contacts.RemoveContact(id))

{

throw new HttpResponseException(HttpStatusCode.NotFound);

}

}

}

4. 新增View

首先新增Knockoutjs庫，

9

Knockoutjs通過MVVM模式來實現動態html繫結資料，如下圖，其中View-Model是客戶端的javascript object儲存的model資料。

webapi_ef16

先開啟HomeController，裡面新增一個新的Action程式碼如下，因為我們要在MVC中對於ContactsController新增對應的View。

1

2

3

4

5

6

7

public ActionResult Admin()

{

string apiUri = Url.HttpRouteUrl("DefaultApi", new { controller = "contacts", });

ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();

return View();

}

然後右鍵Admin方法，選擇新增View

10

選擇Create strongly-typed view，在model class中選擇Contact類。

11

新增View的完整程式碼，注意view中我們通過js去訪問WebAPI，以及通過動態繫結將資料呈現在網頁上。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

@model WebAPIDemo.Models.Contact

@{

ViewBag.Title = "Admin";

}

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.3.0.js")"></script>

<script type="text/javascript">

function ProductsViewModel() {

var self = this;

self.products = ko.observableArray();

var baseUri = '@ViewBag.ApiUrl';

self.create = function (formElement) {

// If valid, post the serialized form data to the web api

$(formElement).validate();

if ($(formElement).valid()) {

$.post(baseUri, $(formElement).serialize(), null, "json")

.done(function (o) { self.products.push(o); });

}

}

self.update = function (product) {

$.ajax({ type: "PUT", url: baseUri + '/' + product.Id, data: product });

}

self.remove = function (product) {

// First remove from the server, then from the UI

$.ajax({ type: "DELETE", url: baseUri + '/' + product.Id })

.done(function () { self.products.remove(product); });

}

$.getJSON(baseUri, self.products);

}

$(document).ready(function () {

ko.applyBindings(new ProductsViewModel());

})

</script>

}

<h2>Admin</h2>

<div class="content">

<div class="float-left">

<ul id="update-products" data-bind="foreach: products">

<li>

<div>

<div class="item">ID</div> <span data-bind="text: $data.Id"></span>

</div>

<div>

<div class="item">Name</div>

<input type="text" data-bind="value: $data.Name"/>

</div>

<div>

<div class="item">Phone</div>

<input type="text" data-bind="value: $data.Phone"/>

</div>

<div>

<div class="item">Email</div>

<input type="text" data-bind="value: $data.Email"/>

</div>

<div>

<div class="item">Last Modified</div> <span data-bind="text: $data.LastModified"></span>

</div>

<div>

<input type="button" value="Update" data-bind="click: $root.update"/>

<input type="button" value="Delete Item" data-bind="click: $root.remove"/>

</div>

</li>

</ul>

</div>

<div class="float-right">

<h2>Add New Product</h2>

<form id="addProduct" data-bind="submit: create">

@Html.ValidationSummary(true)

<fieldset>

<legend>Contact</legend>

@Html.EditorForModel()

<p>

<input type="submit" value="Save" />

</p>

</fieldset>

</form>

</div>

</div>

接下來在_layout.cshtml中新增一個admin頁面的連結如下

1

2

3

4

5

6

<ul id="menu">

<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>

<li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>

<li>@Html.ActionLink("Admin", "Admin", "Home")</li>

</ul>

5. 測試與除錯

大功告成，直接執行下我們的作品，我們的admin連結也顯示在右上角，

12

Admin頁面的樣子，Contact list是動態載入進來的，可以通過這個頁面做新增，修改，刪除的操作。

13

通過IE network capture來檢視請求內容，

重新載入頁面，可以看到回覆的格式為JSON，

14

JSON內容就是我們mock的一些資料。

image

接下來我們修改，刪除，又添加了一條記錄，可以看到使用了不同的http method。

image

通過前面安裝的mongovue來檢視下DB種的資料，先新增的user也在其中，令我感到欣慰。。。

image

相關推薦

Web API 強勢入門指南

Web API是一個比較寬泛的概念。這裡我們提到Web API特指ASP.NET Web API。 這篇文章中我們主要介紹Web API的主要功能以及與其他同類型框架的對比，最後通過一些相對複雜的例項展示如何通過Web API構建http服務，同時也展示了Visual St

Web API 2 入門——創建ASP.NET Web API的幫助頁面（谷歌翻譯）

鏈接 所有 action 解決方案 fec amp 開發人員 sharp ima 在這篇文章中 創建API幫助頁面 將幫助頁面添加到現有項目 添加API文檔 在敞篷下 下一步 作者：Mike Wasson 創建Web API時，創建幫助

ASP.NET Web API 之一 入門篇

mda 處理 ssa 控制 講解 serve attr contex gis 一、基於RESTful標準的Web Api 　　原文講解：https://www.cnblogs.com/lori/p/3555737.html 　　微軟的web api是在vs2012上的m

Web API 開發入門--基於Visual Studio

前言ASP.NET Web API是​​一個框架，可以很容易構建達成了廣泛的HTTP服務客戶端，包括瀏覽器和移動裝置。是構建RESTful應用程式的理想平臺的.NET框架。此處使用的Visual Studio版本: 2013步驟1. File->New --> P

ASP.NET Web API 2 入門教程

原始碼下載 HTTP不僅提供web頁面服務，在構建公開服務和資料api方面,它也是一個強大的平臺。HTTP簡單、靈活、無處不在。幾乎你能想到的所有的平臺,都有一個HTTP庫,因此HTTP服務可以影響到廣泛的客戶端,包括瀏覽器、移動裝置,和傳統的桌面應用程式

ASP.NET Core Web API 最佳實踐指南

原文地址： ASP.NET-Core-Web-API-Best-Practices-Guide 介紹 當我們編寫一個專案的時候，我們的主要目標是使它能如期執行，並儘可能地滿足所有使用者需求。 但是，你難道不認為建立一個能正常工作的專案還不夠嗎？同時這個專案不應該也是可維護和可讀的嗎？ 事實證明，我們需

Web API 入門指南

Web API入門指南有些朋友回覆問了些安全方面的問題，安全方面可以寫的東西實在太多了，這裡儘量圍繞著Web API的安全性來展開，介紹一些安全的基本概念，常見安全隱患、相關的防禦技巧以及Web API提供的安全機制。 目錄 Web API 安全概覽 先引用下wikipedia資訊保安的定義：即保護

Web API 入門一

orm 記錄 XML 理解 nbsp 路由規則 api 實現 cli 　　之前我也了解過Web API 這部分，但是沒有系統學習，更沒有相關記錄，故現在，寫些博客記錄入門學習過程。首先，關於API，只要學習編程的都應該知道，也都用過，API（應用程序編程接口）是一些預先定義

Web API 入門三(參數綁定)

int src bsp 類型參數 參數類型 font 重要 class microsoft 　　學到現在，感覺到微軟的.NET各種框架和模型基礎大致都差不多，所以，這部分內容大致和MVC部分差不多。在學習參事綁定之前，我們肯定要知道Controller（即控制器）是啥幹啥的

【Web API系列教程】1.1 — ASP.NET Web API入門

表示 return param 全部 products cap asp.net control toys 前言 HTTP不僅僅服務於web頁面。同一時候也是構建暴露服務和數據的API的強大平臺。HTTP有著簡單、靈活和無處不在的特點。你能想到的差點兒全

Web APi入門之Self-Host寄宿及路由原理 【轉載】

正則表達式 查找 class ram info 服務器和客戶端 selfhost 交互 說了 前言 剛開始表面上感覺Web API內容似乎沒什麽，也就是返回JSON數據，事實上遠非我所想，不去研究不知道，其中的水還是比較深，那又如何，一步一個腳印來學習都將迎刃而解。 S

web程序員開發以太坊入門指南

字符 函數調用 每次 asus 員工 建議 自定義 var data Web工程師以太坊入門 我經常構建使用以太坊的Web應用程序，我理所當然地認為每天都使用的是神奇的工具集。我們的生態系統正在迅速發展，我認為很多新人都感到不知所措。以太坊是一項了不起的技術，但它也是新生的

挖坑指南：百度鷹眼web api的使用與問題總結

前言 公司想做外勤管理的工具，要記錄員工的出行軌跡，研究了一下，發現高德、騰訊都沒有相關的API，只有百度地圖有一個鷹眼的服務。那就試試唄~ 開始 貨比三家，先來看看其他兩家的解決方案。 高德地圖：https://lbs.amap.com/dev/demo/path-recor

Web API入門 簡單例項

地址：https://blog.csdn.net/zhoukun1008/article/details/52702007。 WebApi怎麼用？ 1、 開啟VS2012，新建------>專案     選擇Visual C#   Web 下面的 Visua

Google advertiser api開發概述——入門指南

使用入門 AdWords API 可讓應用直接與 AdWords 平臺互動，大幅提高管理大型或複雜 AdWords 帳號和廣告系列的效率。一些典型的用例包括： 自動帳號管理 自定義報告 基於產品目錄的廣告管理 基於業務資料的出價管理 您可以使用 AdWords

Web Api 入門實戰 （快速入門+工具使用+不依賴IIS）

屁話我也就不多說了，什麼簡介的也省了，直接簡單概括+demo演示 你可以把webapi理解為面向資源程式設計（就是通過http請求來直接操作，比如get post put delete等等）  工具：PostMan 先不講技術，先引入，讓大家看看這個是什麼？ 這個是webapi裡面的某個控制器

ASP.NET Core 中文文件 第二章 指南（2）用 Visual Studio 和 ASP.NET Core MVC 建立首個 Web API

HTTP 協議不僅僅提供網頁服務。它也是一個構建公開服務和資料 API 的強大平臺。HTTP 協議是簡單、靈活、無處不在的。幾乎你能想到的任何平臺上都有 HTTP 支援，所以 HTTP 服務能夠傳送到多種客戶端, 包括瀏覽器，移動裝置和傳統的桌面應用程式。 在本教程中，你將建立一個簡單的 Web API 來

ASP.NET Core 中文文件 第二章 指南 （09） 使用 Swagger 生成 ASP.NET Web API 線上幫助測試文件

對於開發人員來說，構建一個消費應用程式時去了解各種各樣的 API 是一個巨大的挑戰。 在你的 Web API 專案中使用 Swagger 的 .NET Core 封裝 Swashbuckle 可以幫助你建立良好的文件和幫助頁面。 Swashbuckle 可以通過修改 Startup.cs 作為一組 NuGe

ASP.NET WEB API入門例項

1.WebApi是什麼     ASP.NET Web API 是一種框架，用於輕鬆構建可以由多種客戶端（包括瀏覽器和移動裝置）訪問的 HTTP 服務。ASP.NET Web API 是一種用於在 .NET Framework 上構建 RESTful 應用程式的理想平臺

使用ASP.NET Web Api構建基於REST風格的服務實戰系列教程【三】——Web Api入門

前言 經過前2節的介紹，我們已經把資料訪問層搭建好了，從本章開始就是Web Api部分了。在正式開始之前，再一次回顧一下Web Api的應用場景：Web Api可以與 MVC,WebForm結合使用，也可以作為一個單獨的Web服務。在正式討論Web Api的配置以及如何構造我們的URI來消費資源之前，我