webapi教程nodejs（webapi接口搭建）

本文目錄一覽：

• 1、現在webform處理ajax請求用一般處理程序ashx還是用後台去處理
• 2、如何使 WebAPI 自動生成漂亮又實用在線API文檔
• 3、零基礎如何學WEB前端
• 4、JS本身並不難，為什麼前端學起來感覺很難
• 5、js，nodejs如何判斷文件是什麼編碼格式

現在webform處理ajax請求用一般處理程序ashx還是用後台去處理

1、一般是用ashx處理，ashx就是後台處理。

2、webform要用ajax的話，主流就是ashx，另外還可以依賴第三方庫直接在aspx中處理，例如ajaxpro

3、既然你都用原生html了，那麼可以採用如下方式：①：利用asp.net mvc來作為web框架；②：利用前端框架實現前後端分離，後端可以採用webapi、nodejs等實現。

如何使 WebAPI 自動生成漂亮又實用在線API文檔

1.1 SwaggerUI

SwaggerUI 是一個簡單的Restful API 測試和文檔工具。簡單、漂亮、易用（官方demo）。通過讀取JSON 配置顯示API. 項目本身僅僅也只依賴一些 html,css.js靜態文件. 你可以幾乎放在任何Web容器上使用。

1.2 Swashbuckle

Swashbuckle 是.NET類庫,可以將WebAPI所有開放的控制器方法生成對應SwaggerUI的JSON配置。再通過SwaggerUI 顯示出來。類庫中已經包含SwaggerUI 。所以不需要額外安裝。

2.快速開始

創建項目 OnlineAPI來封裝百度音樂服務(示例下載) ，通過API可以搜索、獲取音樂的信息和播放連接。

我盡量刪除一些我們demo中不會用到的一些文件，使其看上去比較簡潔。

WebAPI 安裝 Swashbuckle

Install-Package Swashbuckle

代碼注釋生成文檔說明。

Swashbuckle 是通過生成的XML文件來讀取注釋的，生成 SwaggerUI，JSON 配置中的說明的。

安裝時會在項目目錄 App_Start 文件夾下生成一個 SwaggerConfig.cs 配置文件，用於配置 SwaggerUI 相關展示行為的。如圖：

將配置文件大概99行注釋去掉並修改為

c.IncludeXmlComments(GetXmlCommentsPath(thisAssembly.GetName().Name));

並在當前類中添加一個方法

/// summary

/// /summary

/// param name=”name”/param

/// returns/returns

protected static string GetXmlCommentsPath(string name)

{

return string.Format(@”{0}\bin\{1}.XML”, AppDomain.CurrentDomain.BaseDirectory, name);

}

緊接着你在此Web項目屬性生成選卡中勾選 “XML 文檔文件”，編譯過程中生成類庫的注釋文件

添加百度音樂 3個API

訪問 ;youhost/swagger/ui/index,最終顯示效果

我們通過API 測試API 是否成功運行

3.添加自定義HTTP Header

在開發移動端 API時常常需要驗證權限，驗證參數放在Http請求頭中是再好不過了。WebAPI配合過濾器驗證權限即可

首先我們需要創建一個 IOperationFilter 接口的類。IOperationFilter

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using System.Web.Http.Description;

using System.Web.Http.Filters;

using Swashbuckle.Swagger;

namespace OnlineAPI.Utility

{

public class HttpHeaderFilter : IOperationFilter

{

public void Apply(Operation operation, SchemaRegistry

schemaRegistry, ApiDescription apiDescription)

{

if (operation.parameters == null) operation.parameters = new

ListParameter();

var filterPipeline =

apiDescription.ActionDescriptor.GetFilterPipeline();

//判斷是否添加權限過濾器

var isAuthorized = filterPipeline.Select(filterInfo =

filterInfo.Instance).Any(filter = filter is IAuthorizationFilter);

//判斷是否允許匿名方法

var allowAnonymous =

apiDescription.ActionDescriptor.GetCustomAttributesAllowAnonymousAttribute().Any();

if (isAuthorized !allowAnonymous)

{

operation.parameters.Add(new Parameter

{

name = “access-key”,

@in = “header”,

description = “用戶訪問Key”,

required = false,

type = “string”

});

}

}

}

}

在 SwaggerConfig.cs 的 EnableSwagger 配置匿名方法類添加一行註冊代碼

c.OperationFilterHttpHeaderFilter();

添加Web權限過濾器

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Text;

using System.Web;

using System.Web.Http;

using System.Web.Http.Controllers;

using Newtonsoft.Json;

namespace OnlineAPI.Utility

{

/// summary

///

/// /summary

public class AccessKeyAttribute : AuthorizeAttribute

{

/// summary

/// 權限驗證

/// /summary

/// param name=”actionContext”/param

/// returns/returns

protected override bool IsAuthorized(HttpActionContext actionContext)

{

var request = actionContext.Request;

if (request.Headers.Contains(“access-key”))

{

var accessKey = request.Headers.GetValues(“access-key”).SingleOrDefault();

//TODO 驗證Key

return accessKey == “123456789”;

}

return false;

}

/// summary

/// 處理未授權的請求

/// /summary

/// param name=”actionContext”/param

protected override void HandleUnauthorizedRequest(HttpActionContext actionContext)

{

var content = JsonConvert.SerializeObject(new {State = HttpStatusCode.Unauthorized});

actionContext.Response = new HttpResponseMessage

{

Content = new StringContent(content, Encoding.UTF8, “application/json”),

StatusCode = HttpStatusCode.Unauthorized

};

}

}

}

在你想要的ApiController 或者是 Action 添加過濾器

[AccessKey]

最終顯示效果

4.顯示上傳文件參數

SwaggerUI 有上傳文件的功能和添加自定義HTTP Header 做法類似，只是我們通過特殊的設置來標示API具有上傳文件的功能

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http.Description;

using Swashbuckle.Swagger;

namespace OnlineAPI.Utility

{

/// summary

///

/// /summary

public class UploadFilter : IOperationFilter

{

/// summary

/// 文件上傳

/// /summary

/// param name=”operation”/param

/// param name=”schemaRegistry”/param

/// param name=”apiDescription”/param

public void Apply(Operation operation, SchemaRegistry schemaRegistry, ApiDescription apiDescription)

{

if (!string.IsNullOrWhiteSpace(operation.summary) operation.summary.Contains(“upload”))

{

operation.consumes.Add(“application/form-data”);

operation.parameters.Add(new Parameter

{

name = “file”,

@in = “formData”,

required = true,

type = “file”

});

}

}

}

}

在 SwaggerConfig.cs 的 EnableSwagger 配置匿名方法類添加一行註冊代碼

c.OperationFilterUploadFilter();

API 文檔展示效果

零基礎如何學WEB前端

1. Web前端是做什麼的？

學習之前我對網頁設計、UI、網頁制所盒Web前端的概念很混淆，上網查了才明白：網頁設計是指運用一些軟件對網站進行美化，解決“好看”的問題；UI是指人與界面互動的優化，解決“舒適”的問題；網頁製作着重PC端網頁製作；而Web前端包括PC端和移動端的前端界面製作。

2. Web前端的基礎技能及工作職責是什麼？

愛它就要更深入了解它，學習Web前端就要清楚地知道Web前端工程師需要什麼基礎技能及其工作職責。其實，這“很簡單”，只要你精通HTML+css（包括現在的HTML5+CSS3）、JavaScript、JQuery，了解界面設計，了解後端編程，服務器知識+後端語言基礎。

3. 怎麼樣才能學好拿高薪，Web前端開發職業的前途怎樣？

個人覺得三百六十行，行行都蘊藏的無限可能，干一行就愛一行，只要腳踏實地，努力學技術，技術硬了，自然會有前途和“錢”途。但是努力學習之前，必須要明確的目標，否則就是“看起來很認真”而已。

4. 如何學？

零基礎學前端的話，這些書籍資料可以參考一下：

1、《JavaScript高級程序設計(第3版) 紅皮書 》，適合有一定編程經驗的Web應用開發人員閱讀，也可作為高校及社會實用技術培訓相關專業課程的教材。

2、《JavaScript權威指南(第6版)》 犀牛書，本書不僅適合初學者系統學習，也適合有經驗的 JavaScript 開發者隨手翻閱。

3、《JavaScript DOM編程藝術 (第2版)》，本書在簡潔明快地講述JavaScript和DOM的基本知識之後，通過幾個實例演示了專業水準的網頁開發技術，透徹闡述了平穩退化等一批至關重要的 JavaScript編程原則和最佳實踐，並全面探討了HTML5以及jQuery等JavaScript庫。

4、《CSS權威指南(第三版)》，不管你是一個有經驗的Web開發人員還是一個徹底的初學者，《CSS權威指南(第3版)》都是你的CSS學習源泉。

5、《JavaScript設計模式》，適合JavaScript初學者、前端設計者、JavaScript程序員學習，也可以作為大專院校相關專業師生的學習用書，以及培訓學校的教材。

6、《你不知道的JavaScript(上中下卷) 》，本書既適合JavaScript語言初學者了解其精髓，又適合經驗豐富的JavaScript開發人員深入學習。

7、《Vue.js權威指南》，該書內容全面，講解細緻，實例豐富，適用於各層次的開發者。

學習路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(微信小程序開發、ReactNative、各類混合應用開發)

第6階段：NodeJS全棧開發(1周)

內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL數據庫)

視頻教程：

網頁鏈接

希望對你有幫助，望採納~

JS本身並不難，為什麼前端學起來感覺很難

what? excuse me

javaScript不難？

javaScript只是入門不難，想精通是非常難的。 就像小學數學一樣，隨便一個正常人都能考試98分以上，但到了初中以上，數學的難度就呈幾何倍數的增加。

而且由於javaScript這麼語言最近幾年非常活躍，而且前端發展太快，各種標準推出速度也在加快，主流框架一年換幾個， 要掌握的知識面非常廣。

而且由於NODEJS的出現，javascript已經具備後端語言的能力，還得掌握另一套不同的開發設計模式。

並且canvas的出現，讓js語言具備了圖形化能力，做遊戲以及圖形設計就需要掌握這個。

現在還敢說javascript簡單？

js，nodejs如何判斷文件是什麼編碼格式

nodejs編碼只支持utf8的編碼方式，無論是打開某個文件或者寫.js腳本都得以utf8的編碼方式保存，不然程序無法運行，讀出來的文件是亂碼。

如果是在前台，讀取文件是通過FileReader或者FileReaderSync這兩個webAPI和input[type=’file’]標籤來配合來完成，但是這個兩個API已經包涵了判斷文件的編碼方式的功能，無論是GBK還是utf8編碼的文件都能正確打開不出現亂碼，但是nodejs就會出現這樣的問題，讀取gbk和unicode編碼的文件出現奇怪的亂碼，有一個模塊iconv-lite可以解決編碼問題，但是前提是你得知道這個文件的編碼方式，舉個例子：

有一個gkb的文件叫gbk.txt正確查看它的方式如下：

var icon=require(‘iconv-lite’);

var fs=require(‘fs’)

fs.readFile(‘gbk.txt’,function(err,buffer){

var str=iconv.decode(buffer,’gbk’)

console.log(str)//得到無亂碼的內容

})

但是如果不知道文件的編碼方式，那有該怎麼辦呢？

那就來聊一聊編碼方式，首先UNICODE編碼，UNICODE編碼的文件無論內容是什麼，前兩個字節要不是FF FE 或者 FE FF，

utf-8頭兩個字節是EF BB,至於gbk吧，目前我沒找到判斷方法，只能粗略的判斷如果不是unicode和utf8就認為是GBK，

代碼如下：

var fs=require(‘fs’)

fs.readFile(‘code.txt’,function(err,buffer){

if(buffer[0]==0xffbuffer[1]==0xfe){

console.log(‘unicode’)

}else if(buffer[0]==0xfebuffer[1]==0xff){

console.log(‘unicode’)

}else if(buffer[0]==0xefbuffer[1]==0xbb){

console.log(‘utf8’)

}else{

console.log(‘else’)

}

})