摘要:平時(shí)開發(fā)前端應(yīng)用,如果沒有現(xiàn)成的后端接口調(diào)試,又要保證前端進(jìn)度,該怎么辦呢,當(dāng)然辦法還是很多的,很多大牛都分享過很多經(jīng)驗(yàn),我也來說說我常用的方法。
平時(shí)開發(fā)前端應(yīng)用,如果沒有現(xiàn)成的后端接口調(diào)試,又要保證前端進(jìn)度,該怎么辦呢,當(dāng)然辦法還是很多的,很多大牛都分享過很多經(jīng)驗(yàn),我也來說說我常用的方法。
把本地?cái)?shù)據(jù)放到程序指定目錄,發(fā)起http請(qǐng)求時(shí)候,用get請(qǐng)求到這個(gè)目錄中指定文件
以jquery的ajax為例:
postRequest: function(model, async) { if(!model) { return null; } if(Common.urlParams.d) { url = "../data/" + model.method + ".json"; model.type = "GET"; } else { url = service-api-path + model.method; //service-api-path是后端接口公共地址 } return $.ajax({ async: (async == undefined || async) ? true : false, url: url, type: model.type, dataType: "json", timeout: 30000, data: model.params, beforeSend: function(x, settings) { //todo.. }, complete: function(x, status) { //todo.. }, error: function(x, h, r) { //todo } }); }
這個(gè)例子是在訪問頁面的時(shí)候在鏈接中添加一個(gè)d參數(shù),參數(shù)值任意,就可以調(diào)用本地?cái)?shù)據(jù),這個(gè)方法只能讀取文件,內(nèi)容是比較死板的,下面就說說另外一種方法
用nodejs弄個(gè)web服務(wù)器是灰常簡單的,這也是很多開發(fā)者都會(huì)用nodejs做個(gè)中轉(zhuǎn)服務(wù),下面介紹下怎么搭建測(cè)試服務(wù)
app.js
var path = require("path"), express = require("express"), bodyParser = require("body-parser"), cookieParser = require("cookie-parser"), autoRoutes = require("express-auto-routes"), server = require("./server"); var app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); var routes = autoRoutes(app); app.use(server); app.use(function(req, res, next) { res.status(404); next({ _code: 404, _msg: "Page not found" }); }); app.use(function(err, req, res, next) { console.error(err); if (err._status) res.status(err._status); res.json({ _code: err._code || 1, _msg: err._msg || err }); }); var server; if (!module.parent) { var PORT = 8989; console.log("[INFO] Msg board RESTful API listening at localhost:%s", PORT); server = app.listen(PORT); } else { module.exports = app; }
server.js
var dbm = require("./dbm"), _ = require("lodash"); module.exports = function(req, res, next) { let data = [], params = {}, url = req.originalUrl, db = new dbm(`./db/${url.slice(url.lastIndexOf("/") + 1, url.length)}.json`).read() data = _filter(db, req.body) res.json({ timestamp: new Date().getTime(), msg: "查詢成功", isSuccess: 0, data: data }) } const _filter = (db, obj) => { if (!obj) return return _.filter(db, o => { return obj.dateTime == o.dateTime }) }
dbm.js
var fs = require("fs"), path = require("path"); function dbm(relativePath) { this.db = path.resolve(__dirname, relativePath); } dbm.prototype._isAvailable = function() { return fs.existsSync(this.db); }; dbm.prototype.read = function() { if (!this._isAvailable()) return null; var contentInStr = fs.readFileSync(this.db, "utf-8"), content; try { content = JSON.parse(contentInStr); } catch (e) { //this.delDb(); console.error("[ERR] JSON.parse failed, deleted " + this.db); } return content || null; }; dbm.prototype.save = function(data) { var stringToSave = JSON.stringify(data); if (!stringToSave) return; fs.writeFileSync(this.db, stringToSave, "utf-8"); }; dbm.prototype.delDb = function() { try { fs.unlinkSync(this.db); } catch (e) { console.error("DB file does not exist"); } }; module.exports = dbm;
demo.json
[{ "name": "jack", "age": 18, "id": "124443", "dateTime": "20170101" }, { "name": "tom", "age": 21, "id": "1232323", "dateTime": "20170103" }, { "name": "alix", "age": 22, "id": "123232323", "dateTime": "20170102" } ]
致此,服務(wù)器基本完事了,json文件存放內(nèi)容依照mongodb或者按照mysql數(shù)據(jù)記錄來就行了,引入lodash庫操縱數(shù)組完成增刪改查完全不在話下,當(dāng)然也可以拓展成為真正的服務(wù)器嘛,畢竟很多項(xiàng)目直接就是nodejs開發(fā)的服務(wù)端
完整示例:https://github.com/dawnyu/node-simple-server.git
原發(fā):http://dawns.me/2017/05/05/%E7%94%A8nodejs+express%E6%90%AD%E5%BB%BA%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95%E6%9C%8D%E5%8A%A1%E7%AB%AF/
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/87133.html
摘要:平時(shí)開發(fā)前端應(yīng)用,如果沒有現(xiàn)成的后端接口調(diào)試,又要保證前端進(jìn)度,該怎么辦呢,當(dāng)然辦法還是很多的,很多大牛都分享過很多經(jīng)驗(yàn),我也來說說我常用的方法。 平時(shí)開發(fā)前端應(yīng)用,如果沒有現(xiàn)成的后端接口調(diào)試,又要保證前端進(jìn)度,該怎么辦呢,當(dāng)然辦法還是很多的,很多大牛都分享過很多經(jīng)驗(yàn),我也來說說我常用的方法。 請(qǐng)求本地?cái)?shù)據(jù)文件 把本地?cái)?shù)據(jù)放到程序指定目錄,發(fā)起http請(qǐng)求時(shí)候,用get請(qǐng)求到這個(gè)目錄中...
摘要:把文件上傳路徑指定到然后用當(dāng)前日期和文件名命名上傳過來的文件。后端利用建立服務(wù)器,利用中間件指定文件路徑。利用這個(gè)前端和后端技術(shù),我們基本上就可以做出一個(gè)圖片上傳存儲(chǔ)的基本網(wǎng)站核心。 前幾天看了騰訊云社區(qū)的一個(gè)文件上傳的文章文件上傳那些事兒,大體上講了以下h5中圖片上傳的幾個(gè)核心原理,但是沒有后端接受的服務(wù)器代碼,沒法做測(cè)試。也沒有具體的一個(gè)實(shí)例都是一些基本的原理片段,并且ui界面也不...
摘要:沒有耐心閱讀的同學(xué),可以直接前往學(xué)習(xí)全棧最后一公里。我下面會(huì)羅列一些,我自己錄制過的一些項(xiàng)目,或者其他的我覺得可以按照這個(gè)路線繼續(xù)深入學(xué)習(xí)的項(xiàng)目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術(shù)軟文,閱讀需謹(jǐn)慎,長約 7000 字,通讀需 5 分鐘 大家好,我是 Scott,本文通過提供給大家學(xué)習(xí)的方法,...
閱讀 1265·2021-09-27 13:35
閱讀 2563·2021-09-06 15:12
閱讀 3380·2019-08-30 15:55
閱讀 2829·2019-08-30 15:43
閱讀 432·2019-08-29 16:42
閱讀 3446·2019-08-29 15:39
閱讀 3062·2019-08-29 12:28
閱讀 1239·2019-08-29 11:11