使用 NodeJs 實(shí)現(xiàn)一個(gè)本地接口數(shù)據(jù)系統(tǒng)，無(wú)需數(shù)據(jù)庫(kù)，讓前端獨(dú)立于后臺(tái)開(kāi)發(fā)

JeOam 發(fā)布于2019-08-20 12:04 / 2626人閱讀

摘要：使用方法介紹下載源碼，并執(zhí)行安裝啟動(dòng)服務(wù)，。如圖，我們創(chuàng)建一個(gè)接口可以實(shí)時(shí)預(yù)覽格式化的數(shù)據(jù)和提示錯(cuò)誤。

使用 NodeJs 實(shí)現(xiàn)本地接口系統(tǒng)，解決前后臺(tái)開(kāi)發(fā)最后一公里

無(wú)數(shù)據(jù)庫(kù)的情況下，實(shí)現(xiàn)數(shù)據(jù)持久化，通過(guò)api url返回json 數(shù)據(jù)，提高前端開(kāi)發(fā)效率！
項(xiàng)目地址 ：local-ajax-pai

實(shí)現(xiàn)功能

完整的操作頁(yè)面

首頁(yè)展示所有保存的接口列表

創(chuàng)建的接口保存到本地

支持重新編輯

編輯過(guò)程實(shí)時(shí)預(yù)覽和錯(cuò)誤提示

根據(jù)接口名稱或者url進(jìn)行檢索

提供url跨域調(diào)用
下載完成安裝依賴就可使用

背景

前端開(kāi)發(fā)工作中一個(gè)重頭戲就是和后臺(tái)實(shí)現(xiàn)數(shù)據(jù)交互。很多前端入門(mén)不久的同學(xué)（譬如我）在涉及到和后臺(tái)交互的時(shí)候，都需要等待后端開(kāi)發(fā)做好，給了數(shù)據(jù)才可以繼續(xù)，就是所謂的串行開(kāi)發(fā)。

但是實(shí)際上我們并不需要等后臺(tái)開(kāi)發(fā)完成，只要一開(kāi)始的時(shí)候雙方約定好數(shù)據(jù)格式，前端自己模擬一些數(shù)據(jù)就可以投入工作，這樣就可以并行開(kāi)發(fā),效率可以顯著提高

方案

上面的問(wèn)題可以有多種解決方案

直接代碼里面js本地造數(shù)據(jù)

...
var data = {...}
...
//這種方案適合小型結(jié)構(gòu)的數(shù)據(jù)，一旦數(shù)據(jù)過(guò)于龐大，不適合放在js文件里面，不利于維護(hù)
//不能很好的模擬ajax
$.ajax({
    url:".."http://這個(gè)時(shí)候ajax接口不存在，調(diào)不通
})
//不能重復(fù)利用，上生產(chǎn)肯定要?jiǎng)h掉

使用mockjs，這個(gè)網(wǎng)上有豐富的介紹，這里就不說(shuō)了，可以直接百度

實(shí)現(xiàn)本地化接口服務(wù)

本文介紹了一個(gè)簡(jiǎn)單的平臺(tái)化方案，創(chuàng)建一個(gè)本地化的服務(wù)系統(tǒng)，這樣得到數(shù)據(jù)格式之后，本地生成一個(gè)可用的 url 用于ajax請(qǐng)求，而且還可以讓數(shù)據(jù)持久化，如果放在局域網(wǎng)內(nèi)，接口還可以共享給小伙伴。

說(shuō)到持久化，那么必須涉及到數(shù)據(jù)的存儲(chǔ)，用于存儲(chǔ)的數(shù)據(jù)庫(kù)有很多，我以前用過(guò)mongodb結(jié)合nodejs使用，也是蠻好的，但是數(shù)據(jù)庫(kù)安裝也蠻麻煩的，我們這里有一個(gè)更簡(jiǎn)便的，硬盤(pán)本身就是一個(gè)“數(shù)據(jù)庫(kù)” ，所以我們可以使用nodejs的fs模塊直接創(chuàng)建json文件，讀取json文件。這樣創(chuàng)建的每一個(gè)json文件都對(duì)于一個(gè)接口服務(wù)，只要不刪除，就可以一直重復(fù)利用。

使用方法介紹

github下載源碼，并執(zhí)行 npm install 安裝

啟動(dòng)node服務(wù)，node app.js。（建議使用 supervisor app.js 可以自行重啟服務(wù)，通過(guò)npm install supervisor -g 安裝模塊）

打開(kāi)首頁(yè) http://localhost:3000/ 建議chrome瀏覽器查看

點(diǎn)擊創(chuàng)建接口，API名稱用來(lái)描述接口左右，API url用來(lái)調(diào)用數(shù)據(jù)，都是必填。如圖，我們創(chuàng)建一個(gè)接口 testapi 可以實(shí)時(shí)預(yù)覽格式化的json數(shù)據(jù)和提示錯(cuò)誤。（建議使用網(wǎng)上更完整的工具預(yù)覽，可以快速定位格式錯(cuò)誤。）

創(chuàng)建完成點(diǎn)擊最下面的保存按鈕，提示保存成功就完成了接口的創(chuàng)建！

使用接口，根據(jù)剛剛創(chuàng)建的url：testapi 生成一個(gè)鏈接 http://localhost:3000/getjson...
可以在控制臺(tái)調(diào)用一下這個(gè)url可以看出就是我們剛剛存儲(chǔ)的json數(shù)據(jù)。

搜索功能：在搜索框輸入接口中文描述名稱或者apiurl的名稱即可。

二次編輯功能：創(chuàng)建完成接口之后，首頁(yè)或者搜索結(jié)果會(huì)顯示二次編輯入口，點(diǎn)擊就會(huì)顯示上次保存的數(shù)據(jù)和格式

注意：ajaxapilist.json 存著一張關(guān)系表，對(duì)應(yīng)所有的接口描述名稱和url，用于查詢，建議不要修改，

總結(jié)

本文是我對(duì)前后端合作開(kāi)發(fā)過(guò)程中的一個(gè)思考！

以上僅是個(gè)人看法，如果有誤，感謝指導(dǎo)！

項(xiàng)目地址 ：local-ajax-api

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/80787.html