您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)express+mockjs如何實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
1、js屬于一種解釋性腳本語(yǔ)言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺(tái)下運(yùn)行,擁有著跨平臺(tái)特性;3、js屬于一種弱類(lèi)型腳本語(yǔ)言,對(duì)使用的數(shù)據(jù)類(lèi)型未做出嚴(yán)格的要求,能夠進(jìn)行類(lèi)型轉(zhuǎn)換,簡(jiǎn)單又容易上手;4、js語(yǔ)言安全性高,只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對(duì)象的腳本語(yǔ)言,js不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
模擬數(shù)據(jù)方法
1.通過(guò)js變量模擬后臺(tái)數(shù)據(jù)
優(yōu)點(diǎn):不需要服務(wù)器
缺點(diǎn):需要造很多變量,同時(shí)還要將變量在我們的有效代碼中使用,最后還得刪除
2.通過(guò)ajax請(qǐng)求json文件
優(yōu)點(diǎn):只需要配置路徑,就可以訪(fǎng)問(wèn),進(jìn)入聯(lián)調(diào)階段不用修改大量的js代碼
缺點(diǎn):ajax存在跨域問(wèn)題,通常無(wú)法請(qǐng)求本地文件,即使火狐也存在不能訪(fǎng)問(wèn)不同文件目錄下的json文件,通常需要通過(guò)ide或者自己手動(dòng)啟動(dòng)服務(wù)
3.用nodejs自己寫(xiě)一個(gè)專(zhuān)門(mén)用來(lái)發(fā)送請(qǐng)求的服務(wù),不包含業(yè)務(wù)邏輯
優(yōu)點(diǎn):前端的代碼進(jìn)入聯(lián)調(diào)階段只需要修改一個(gè)basePath,所有的接口名字都可以和約定好的路徑保持一致,可以測(cè)試post請(qǐng)求,模擬網(wǎng)絡(luò)環(huán)境
缺點(diǎn):自己要寫(xiě)一個(gè)后臺(tái)
1、2兩種模擬數(shù)據(jù)的方式適合用來(lái)做demo,但是如果做得是上線(xiàn)項(xiàng)目,我們還是推薦使用自己搭建一個(gè)node后臺(tái)
1.準(zhǔn)備node環(huán)境、npm/cnpm
2.安裝express、mockjs
3.創(chuàng)建服務(wù)端文件server.js,引入相關(guān)模塊
let express = require('express'); //引入express模塊 let Mock = require('mockjs'); //引入mock模塊 let app = express(); //實(shí)例化express
4.配置接口路由,設(shè)置監(jiān)聽(tīng)端口
/** * 配置test.action路由 * @param {[type]} req [客戶(hù)端發(fā)過(guò)來(lái)的請(qǐng)求所帶數(shù)據(jù)] * @param {[type]} res [服務(wù)端的相應(yīng)對(duì)象,可使用res.send返回?cái)?shù)據(jù),res.json返回json數(shù)據(jù),res.down返回下載文件] */ app.all('/test.action', function(req, res) { res.send('hello world'); }); /** * 監(jiān)聽(tīng)8090端口 */ app.listen('8090');
此時(shí)我們直接訪(fǎng)問(wèn)http://localhost:8090/test.action,就可以直接在界面看到'hello world'文字
5.使用mockjs返回格式化json數(shù)據(jù)
app.all('/test.action', function(req, res) { /** * mockjs中屬性名‘|'符號(hào)后面的屬性為隨機(jī)屬性,數(shù)組對(duì)象后面的隨機(jī)屬性為隨機(jī)數(shù)組數(shù)量,正則表達(dá)式表示隨機(jī)規(guī)則,+1代表自增 */ res.json(Mock.mock({ "status": 200, "data|1-9": [{ "name|5-8": /[a-zA-Z]/, "id|+1": 1, "value|0-500": 20 }] })); });
此時(shí)我們?cè)僭L(fǎng)問(wèn)頁(yè)面數(shù)據(jù),我們就可以得到一份隨機(jī)的json數(shù)據(jù)
6.創(chuàng)建模擬數(shù)據(jù)文件夾testData,創(chuàng)建模擬數(shù)據(jù)json文件(注意:json文件中不能使用正則,且對(duì)象屬性必須為雙引號(hào)字符串)
7.遍歷模擬數(shù)據(jù)文件,生成對(duì)應(yīng)路由
/*readdir讀取目錄下所有文件*/ fs.readdir('./testData', function(err, files) { if(err) { console.log(err); } else { /*成功讀取文件,取得文件名,拼接生成對(duì)應(yīng)action,監(jiān)聽(tīng)對(duì)應(yīng)接口并返回對(duì)應(yīng)文件數(shù)據(jù)*/ files.forEach(function(v, i) { app.all(`/${v.replace(/json/, 'action')}`, function(req, res) { fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) { if(err) { console.log(err); } else { res.json(Mock.mock(JSON.parse(data))); } }) }) }) } })
至此,我們的node服務(wù)器已經(jīng)搭建成功,使用node server.js運(yùn)行服務(wù)器,我們就可以直接在前端訪(fǎng)問(wèn)接口,但是如果只是單純的生成后臺(tái),前端頁(yè)面不通過(guò)后臺(tái)進(jìn)行訪(fǎng)問(wèn)的話(huà),存在跨域問(wèn)題,如果需要解決,可以在后臺(tái)添加跨域請(qǐng)求
/*為app添加中間件處理跨域請(qǐng)求*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); });
感謝各位的閱讀!關(guān)于“express+mockjs如何實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。