當前位置:首頁 » 網頁前端 » 前端手寫api
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端手寫api

發布時間: 2023-08-16 12:34:34

前端 API 介面數據模擬 (Mock)

在前端開發的過程中,會碰到以下一些問題:

為了解決此類問題,需要使用 mock 數據和 mock 伺服器來提供支持。

很多前端框架,如 Reactor、 Angular、Vue 等都帶有 mock 服務,以方便開發,這里介紹的是一個獨立的小工具,可以在開發者自己的機器上方便的部署和運行,模擬後端介面的返回,以方便前端模擬各種數據。特性如下:

該數據即 files 目錄下面 _api_heartbeat_get.json 的內容。

直接按快捷鍵 CTRL+C 來停止。

GET http://127.0.0.1:1492/api/heartbeat 映射到 files_api_heartbeat_get.json

POST http://127.0.0.1:1492/api/user/create 映射到 files_api_user_create_post.json

GET http://127.0.0.1:1492/api/user?pseudo=1 映射到 files_api_user_get_1.json
POST http://127.0.0.1:1492/api/course?pseudo=2 映射到 files_api_course_post_2.json

Ⅱ rails怎麼給前端寫api實現前後端分離

Rails的初始准備見:Rails 處理跨站請求
准備完這個,接下來我們就只要管Control怎麼寫就行了。
首先來嘗試一下get,最簡單。
def index json_str = {"xx" => "hello"}.to_json render :json=>json_str, status=>'200' end

在這里我們用了一個to_json方法來處理,把Hash轉換為json格式,to_json方法是Rails中特有的,並非Ruby本身的方法。
接著我們就可以滾去前端了:
在需要調用的位置使用:$http.get('http://localhost:3000');,這是最簡單的獲取方法,當然我們自然不可能獲取了就走人,這只是一個測試,接下來我們要使用then來進行get之後的操作。
提示:使用$http接收之後json都會經過fromJson等一系列方法,務必保證收到的是JSON,否則會報錯。
.then(function(res) { console.log(res); angular.forEach(res.data, function(value, key) { $scope.message.push({author: key, content: value}); });});

我們把get的分號去掉,加上這個,為了確定res收到的是什麼,我們可以在控制台輸出看一下,res.data里存儲的就似乎收到的json(Object),用angular.forEach遍歷即可。
這樣一個簡單的get就完成了。
POST相比較之下就比較折騰了,但也不是很復雜,最主要的是要確定怎麼樣才能獲取POST的值,這里並沒有像$_POST這樣簡單的變數。
在Controller 詳解中我們知道:
如果在初始化腳本中開啟了 config.wrap_parameters 選項,或者在控制器中調用了 wrap_parameters 方法,可以放心的省去 JSON 格式參數中的根鍵。Rails 會以控制器名新建一個鍵,復制參數,將其存入這個鍵名下。因此,上面的參數可以寫成:
{ "name": "acme", "address": "123 Carrot Street" }

會自動進行轉換,然後就可以用對應控制器名來訪問
這里我們檢查config>initializers的對應文件夾,發現默認開啟,,使用這個黑科技。
def create json_str = params[:article] json_str = json_str.to_json render :json=>json_str, status=>'200' end

我們的Controller是ArticlesController,所以很明顯的這樣子獲取傳進來的值,轉換為json,接著傳出(只是一個測試,理論上接下來要實驗寫入資料庫)。
接下來開始寫前端的部分:$http.post('http://localhost:3000/create', message)簡單的POST操作,嘗試是否成功獲取到值。
post的參數非常有意思:post(url, data, [config]);其中data可以傳入任意類型,他會盡可能的轉換成json傳入,之後獲取到的值也會用fromJson盡可能的轉換,供之後使用。
在post的之後是由是否成功來進行分支處理的,這里我們只寫success。
.success(function(res) { console.log(res); $scope.message.push({author: res.author, content: res.content});});

一樣,可以在控制台看看輸出的值,會發現是一個json的Object,沒有其他信息,直接使用即可。

Ⅲ 前端api是什麼 AJAX請求嗎

應用程序介面(英語:,簡稱:API),又稱為應用編程介面,就是軟體系統不同組成部分銜接的約定。其主要目的是讓應用程序開發人員得以調用一組常式功能,而無須考慮其底層的源代碼為何、或理解其內部工作機制的細節。


AJAX即「Asynchronous JavaScript and XML」(非同步的JavaScript與XML技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。AJAX應用可以僅向伺服器發送並取回必須的數據,並在客戶端採用JavaScript處理來自伺服器的回應。



傳參在API設計中的一部分,API設計要注意:

  • 是否支持跨域請求

  • 是公共API還是私有API(哪些客戶端能訪問API)

  • 判斷是不是移動設備

  • 應該支持那些HTTP方法跟報頭

  • API中是否支持特定的用戶認證(Cookie)


新入手別慌,先做個同域的、沒用戶憑證的、用GET方法(都支持,不用設置)請求的API吧

Ⅳ 如何寫好API介面文檔

日常項目開發的過程中,介面文檔是必不可少的。後端工程師與前端工程師之間需要介面文檔來定義數據傳輸協議、系統對外暴露介面需要文檔來說明、系統之間相互調用需要文檔來記錄介面協議等等。對於一個完整的項目,介面文檔是至關重要的。那我們如何寫好一份介面文檔呢?今天就讓我們說一說介面文檔幾個重要的要素。

1、介面概述

介面概述主要說明本介面文檔涉及到的業務功能點,面向的閱讀對象以及介面文檔主要包括哪些業務的介面,可以讓讀者有一個直觀的認識。如:本文檔定義脊前了中台系統面向外部接入方的數據協議介面,主要包括:用戶注冊介面、同步用告野檔戶、授權認證等介面。適合閱讀的對象為接入中台開發者或者外部合作方。這樣的一段描述,對於閱讀者來說可以對整個介面文檔有一個大概的認識。

2、許可權說明

有的介面調用需要授權認證,在這部分需要進行說明。如果介面只是基於分配的token認證,那文檔需要說明token的獲取方式。如果介面需要進行簽名認證,需要在這里說明簽名的具體方法,:

sign參數的生成規則要具體說明,最好能示例說明,如:

這樣接入方可以驗證自己的簽名方式是否正確。

3、編碼方式

介面的請求過程中可能由於編碼導致亂碼,所以,介面必須約定編碼方式,參考以下寫法:

4、請求說明

介面文檔的請求說明中主要說明介面請求的域名以及請求的數據格式:襪亂如

5、介面列表

介面列表是介面文檔的主要內容,這部分內容需要列出所有的介面名稱、介面地址、介面的請求方式、介面的請求參數以及響應格式。在介面的請求參數中我們需要說明每個參數的含義、類型以及是否必須等屬性。對於介面響應結果,如果有業務欄位,也需要進行說明。下面是一個比較完整的示例:

6、狀態碼說明

介面的響應體一般都會帶有響應的狀態碼,例如成功、失敗等。狀態碼有助於接入方進行介面調用狀態的判斷。如:

介面文檔如果能體現出以上幾個要素,那可以算是一個完整的介面文檔,對於接入方來說可以很好的閱讀理解。

Ⅳ web前端怎麼調用api介面

1、首先需要確定第三方的介面的基本信息:地址、請求方式,參數、返回值,介面模式這里第三方的介面是restful風格的,採用get請求。

Ⅵ 前端怎麼調用api介面

方法/步驟

  • 先定義一個簡單的webapi,簡單到差不多直接用vs2010自動生成的webapi代碼。

    其中的TestModle是一個簡單的class,如下

    public class TestModle

    {

    public string a { get; set; }

    public string b { get; set; }

    public string c { get; set; }

    }