檔案上傳,是Web開發很普遍的一個需求。Angular 2 的部分,要怎麼處理這一塊呢?請繼續看下去...
[筆記][Angular 2][Angular 4][Upload][上傳][WebAPI] Angular 2 (Angular 4) 搭配 WebAPI 檔案上傳 範例
- 3238
- 0
- AngularJS2
- 2017-08-23
檔案上傳,是Web開發很普遍的一個需求。Angular 2 的部分,要怎麼處理這一塊呢?請繼續看下去...
檔案上傳,是Web開發很普遍的一個需求。WebAPI的部分,要怎麼處理這一塊呢?請繼續看下去...
前端的 Angular 2/4 與後端的 WebAPI 結合起來,才是完整的系統架構,而這樣的系統架構下,如何進行登入的驗證呢?本篇就以實際的範例來說明。
Cookie 是在以往Web開發過程中,是常用的一個存資訊在Client端的方式。例如:在電商網站中,當使用者第一次進入網站時,可能就會埋一個Cookie在瀏覽器端,藉以觀察這個瀏覽器,他的一些行為模式,而著名的網站觀察GA,也是以如此的模式作為基礎。目前開發轉到WebAPI後,其實WebAPI也可以對於Request的來源進行類似的作法。這篇就來針對在Controller中,對Cookie進行存取的方式,做個整理。最後,會將相關功能抽出,寫在Models中的類別,作為公用的程式,讓之後每個Controller要對Cookie進行存取,可以簡化相關的撰寫。
[筆記][WebAPI][MessageHandler]在MessageHandler中讀取(get)寫入(set) Cookie
以往我們開發Web網頁的系統,在上正式台時,會在Web.Config中設定CustomErrors,讓錯誤發生時導向到我們指定的一個html,不把正確的錯誤訊息或狀態露出。但在WebAPI的時候,卻出現【執行第一個例外狀況的自訂錯誤頁面時發生另一個例外狀況。要求已終止。】的訊息。然後就持續的被賞500,這部分該如何處理,我們繼續看下去
WebAPI 的應用中,有一個 Message Handler ,可以讓我們在不改 Web API 的情況下,透過 Message Handler 來處理一些 WebAPI 共同要處理的項目。讓這些處理的事情,與 WebAPI 要處理的事情有很好的權責分離,彼此只需要專注處理自己要做的,又能夠好好的配合。
小喵剛好有個需求,想要記錄某個專案中,WebAPI的進出內容,一來未來當作分析依據,二來保留下來有爭議時可以當作依據。借由NLog來記錄,因NLog簡單易用,對於效能的影響很小,剛好將這兩個技術一起搭配來做個練習。怎麼做,讓我們繼續看下去~
上次小喵之前一篇【WebAPI 設定多組(Multiple) 跨 Domain】裡面,透過Global.asax,讀取設定檔方式來判斷Client端傳入的Origin,藉此回傳【Access-Control-Allow-Origin】的Header來讓Client端允許CORS。後來同事又提供另一個方式來處理,只需在Server上放一個html,不用任何設定,就可以達到CORS限定多Domain的功能,方法真的非常簡單,怎麼做,讓我們看下去~
小喵前一篇【WebAPI 設定多組(Multiple) 跨 Domain】,測試實主要是透過 jQuery 的 getJSON 來處理,實際上進一部使用 $.Ajax 的時候,又遇到了【Status Code : 405 Method Not Allowed】的狀況。那麼這個狀況到底要如何處理呢?我們看下去~
由於安全上的考量,預設透過 AJAX 跨 Domain 存取 WebAPI 是被禁止的,而要處理這部分的問題,除了 JSONP 以外,另外就是 W3C 定義的 Response Header 【Access-Control-Allow-Origin】可以解決這個問題,不過經測試結果,如果設定在Web.Config裡面,除了設定為【*】,讓所有的都可以用以外,就只能設定一個 Domain 。不過,實際上可能會需要有幾組 Domain 可以存取我們寫好的 WebAPI。那麼這樣的需求要怎麼處理呢?
一直以來在使用或測試開發的WebAPI,都是透過html Client的jQuery Ajax或者Google Chrome的工具【Dev HTTP Client】。不過最近小喵有個需求要在ASP.NET的系統中,在Server來存取Web API,於是著手來尋找相關的寫法,發現網路上這類範例還蠻分散的。小喵就整理一下,透過 HttpClient 存取 WebAPI ,並且可以傳送指定的 Head 。以下來看看相關範例~
讓 WebAPI 可以支援 OData ,能讓我們的 WebAPI 更有彈性,從小喵這篇【[Web API][OData][筆記] OData初體驗】中,最開始就是要宣告 Function 可支援
最近小喵學著 Web API ,大部分的書籍或者網站,都是教使用 ASP.NET MVC 的專案來設計,也順利的完成了一些書上的範例練習。不過 MVC 小喵還是初學,所以之前開發的系統大部分是WebForm的系統,小喵就心想,如果是要應用在之前開發的系統中,不知道是否可行呢? 於是小喵開始搜尋一下,看看是否能夠在WebForm的專案中使用Web API,找到不少的資料,不過大部分是C#。小喵用VB.NET來練習一回,順便紀錄一下~
小喵在一次去 TWMVC 的場合上課中,聽到 KKBruce 講解有關Web API的內容,這裡面提到了OData這個東西,感覺還蠻有趣的,後來 KKBruce 大大也來小喵的部落格留言,也提到了 OData 。小喵開始找一下相關的資料,發現 OData 搭配 WebAPI 有蠻多不錯的運用。於是,就來場小喵與OData的初體驗吧~
小喵最近開始學 Web API ,看到的範例多是使用北風資料庫,用的Key都是一個Id。不過在現實的系統中,小喵心想多組Key的狀況是一定會遇到的,那麼如何透過 Web API 傳遞多個參數,來應用在多個複合Key的資料表上面呢?於是小喵又開始找方法啦~
在學習 Web API 過程中,小喵心想如果有些資料可以透過自訂的 Header 來帶資料給 Web API 做判斷或處理,也許可以是一種額外帶資料的方式,於是,小喵開始找如何在 WebAPI 中取得自訂 Header 的內容,並做個小小的測試~
小喵最近開始學習Web API,這種沒有畫面的運作方式還真有點不習慣,好在有Chrome裡面的PostMan與Fiddler這兩套工具的幫忙,可以順利進行學習。不過使用Fiddler剛學習POST的時候,就遇到程式總是收不到東西,總是 Nothing (VB.NET) / null (C#)。後來找了一下,原來~