用gulp+mock實(shí)現(xiàn)前后端分離

dailybird 發(fā)布于2019-08-20 18:08 / 3425人閱讀

摘要：當(dāng)然需要的工具不只有這些，其他的一些可選工具還有文件壓縮壓縮時(shí)用到的文件重命名檢查一般編輯器自帶校驗(yàn)提示工具等等，具體根據(jù)項(xiàng)目需要安裝。

gulp

前端自動(dòng)化構(gòu)建工具

需要配置nodejs環(huán)境, 利用npm安裝全局gulp,安裝后可以輸入gulp指令。

 npm install gulp -g

創(chuàng)建項(xiàng)目目錄、初始化npm包、gulp

npm init 

gulp init

下載gulp插件gulp-connect、gulp-concat這兩個(gè)插件一個(gè)用于創(chuàng)建web靜態(tài)服務(wù)器，另一個(gè)用于文件合并。
這里的各種插件一種是用npm安裝，另一種是用前端的包管理器bower替代npm。

npm install --D gulp
npm install --D gulp-connect
npm install --D gulp-concat

當(dāng)然需要的工具不只有這些，其他的一些可選工具還有文件壓縮gulp-uglify、壓縮時(shí)用到的文件重命名gulp-rename、js檢查gulp-jshint(一般編輯器自帶js校驗(yàn))、gulp-notify提示工具等等，具體根據(jù)項(xiàng)目需要安裝。

編輯gulpfile.js文件用于配置gulp啟動(dòng)

/*
 * @Author: mikey.chishengqi 
 * @Date: 2017-03-29 09:46:33 
 * @Last Modified by: mikey.chishengqi
 * @Last Modified time: 2017-03-29 21:49:53
 */
var gulp = require("gulp"),
    connect = require("gulp-connect"),
    concat = require("gulp-concat"),
    //proxy = require("http-proxy-middleware"); //代理中間件 the middleware of proxy

//connect任務(wù)開(kāi)啟一個(gè)web調(diào)試服務(wù)，訪問(wèn)http://localhost:8080 
gulp.task("connect", function () {
    connect.server({
        port: 8080,
        livereload: true,
         middleware: function(connect, opt) {
            return [
                // https://github.com/senchalabs/connect/#use-middleware
                function cors(req, res, next) {
                    res.setHeader("Access-Control-Allow-Origin", "*")
                    res.setHeader("Access-Control-Allow-Methods", "*")
                    next()
                }
            ]
        }
    });
});
//allJs任務(wù)，執(zhí)行合并js任務(wù)
gulp.task("allJs", function () {
    //合并數(shù)組中所有的js文件為all.js放入www文件夾中
    return gulp.src(["Content/app/*/*.js","Content/common/*.js"])
        .pipe(concat("all.js"))    //該任務(wù)調(diào)用的模塊
        .pipe(gulp.dest("dist/js"))
        .pipe(rename({suffix:".min"}))     //重命名
        .pipe(uglify())                    //壓縮
        .pipe(gulp.dest("dist/js"))            //輸出 
        .pipe(notify({message:"all task ok"}));    //提示
      
});

//reload任務(wù)，在執(zhí)行reload之前先執(zhí)行allJs和sass任務(wù)
gulp.task("reload", ["allJs"], function () {
    //刷新web調(diào)試服務(wù)器
    return gulp.src(["Content/app/"])
        .pipe(connect.reload());
})
//watch任務(wù)，開(kāi)啟一個(gè)監(jiān)控
gulp.task("watch", function () {
    //監(jiān)控?cái)?shù)組中文件的修改，如果有修改則執(zhí)行reload任務(wù)
    gulp.watch(["Content/css/*.css", "Content/app/app.js", "Content/app/*/*.js", "Views/*/*.html"], ["reload"]);
});

//定義默認(rèn)的gulp任務(wù)，直接執(zhí)行g(shù)ulp即可啟動(dòng)default，啟動(dòng)default前啟動(dòng)connect和watch任務(wù)
gulp.task("default", ["watch","connect","allJs"]);

至此就創(chuàng)建出了localhost:8080的靜態(tài)服務(wù)器，剩下的就是需要處理前端的http請(qǐng)求。

mock

生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求

對(duì)于項(xiàng)目中所有的ajax請(qǐng)求進(jìn)行攔截，返回配置的數(shù)據(jù)；這樣不用等后端接口，前端即可進(jìn)行測(cè)試；
需要引用mock.js文件和配置文件json.js;如下定義即可隨即生產(chǎn)規(guī)定字段的數(shù)據(jù)；

//json.js
 Mock.mock(
     "UserMange/UserLogin", [{
        "userName": "@name",     //模擬名稱
         "age|1-100": 100,          //模擬年齡(1-100)
         "color": "@color",    //模擬色值
         "date": "@date("yyyy-MM-dd")",  //模擬時(shí)間
         "url": "@url()",     //模擬url
        "content": "@cparagraph()" //模擬文本
    }]
)
//或者直接輸出
Mock.mock(
    "PicRotation/GetMasterPagePicList",
    { "dataResult": [], "total": 0, "IsSuccess": true }
)

json-server

這款工具可以搭建出RestAPI服務(wù)器；需要在gulp搭建的服務(wù)器中做跨域代理的處理；將gulp搭建的web服務(wù)器中所有ajax請(qǐng)求跳轉(zhuǎn)到j(luò)son-server搭建的RestAPI服務(wù)器;但有個(gè)坑，無(wú)法針對(duì)post請(qǐng)求做回傳處理，所有post請(qǐng)求只會(huì)在json-server定義的json文件里做添加處理(所以建議用mock)，另外此插件需要安裝 http-proxy-middleware 代理插件；并且修改gulp中的middleware屬性的配置。

注意

需要注意的是mock.js與angular之間會(huì)存在兼容問(wèn)題，因?yàn)閍ngular封裝的$http采用的是promise形式的，所以當(dāng)發(fā)起$http.get請(qǐng)求的時(shí)候會(huì)沒(méi)有響應(yīng)。mock.js需要采用angular兼容版本angular-mock.js。

nodejs

nodejs作為服務(wù)端語(yǔ)言它與傳統(tǒng)c和java搭建服務(wù)器方式的不同，它不需要依賴iis或者tomcat，它通過(guò)自身封裝的httpserver模塊不到10行代碼即可搭建出需要的靜態(tài)服務(wù)器。

其實(shí)gulp中的插件gulp-connect的原理就是利用nodejs的httpserver模塊實(shí)現(xiàn)的。所以另外一種實(shí)現(xiàn)前端自動(dòng)化的方式就是直接寫(xiě)nodejs代碼；利用express框架和各種中間件可以快速構(gòu)建出一個(gè)涵蓋服務(wù)端基本所需的服務(wù)器；并且可以利用里面的路由方便創(chuàng)建出一個(gè)restapi服務(wù)；但是這帶來(lái)的麻煩就是作為一個(gè)前端工程師在寫(xiě)前端的同時(shí)還要寫(xiě)服務(wù)端的代碼，相當(dāng)于做了兩份工作，增加了前端開(kāi)發(fā)的負(fù)擔(dān)。

目前我自己按照第一套的流程成功在自己本地搭建了開(kāi)發(fā)環(huán)境，整個(gè)流程比較麻煩的一點(diǎn)是,由于請(qǐng)求數(shù)比較多,所以需要編寫(xiě)的mock數(shù)據(jù)很多,另外數(shù)據(jù)的格式需要已知。

云服務(wù)器 GPU云服務(wù)器前后端分離前后端分離開(kāi)發(fā) js前后端分離框架前后端不分離 jsp

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84109.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

dailybird

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

入手萬(wàn)彩錄屏大師體驗(yàn)高清錄屏視頻輸出且自帶視頻編輯特效素材

閱讀 1751·2021-10-18 13:34
ION Cloud：$120/年/2核/2GB內(nèi)存/60GB SSD空間/3TB流量/1Gbps端口

閱讀 3946·2021-09-08 10:42
搬瓦工VPS：高端線路，助力企業(yè)運(yùn)營(yíng)，10Gbps美國(guó) cn2 gia，1Gbps香港cn2 gia

閱讀 1584·2021-09-02 09:56
sublime text3 - 打造成小程序開(kāi)發(fā)神器

閱讀 1632·2019-08-30 15:54
校招筆試 | C語(yǔ)言筆試必考系列！??！

閱讀 3158·2019-08-29 18:44
又是一波前端知識(shí)點(diǎn)總結(jié)

閱讀 3327·2019-08-26 18:37
react-lazy-load粗讀

閱讀 2245·2019-08-26 12:13
axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝(更新)

閱讀 488·2019-08-26 10:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用gulp+mock實(shí)現(xiàn)前后端分離

注意

相關(guān)文章

**如何根據(jù)protobuf來(lái)Mock后臺(tái)返回的數(shù)據(jù)**

前后分離的總結(jié)

前后端開(kāi)發(fā)分離之Mock

前后端開(kāi)發(fā)分離之Mock

webpack工程化集成React技術(shù)棧（一）

發(fā)表評(píng)論

0條評(píng)論

dailybird

男|高級(jí)講師

TA的文章

入手萬(wàn)彩錄屏大師體驗(yàn)高清錄屏視頻輸出且自帶視頻編輯特效素材

ION Cloud：$120/年/2核/2GB內(nèi)存/60GB SSD空間/3TB流量/1Gbps端口

搬瓦工VPS：高端線路，助力企業(yè)運(yùn)營(yíng)，10Gbps美國(guó) cn2 gia，1Gbps香港cn2 gia

sublime text3 - 打造成小程序開(kāi)發(fā)神器

校招筆試 | C語(yǔ)言筆試必考系列！??！

又是一波前端知識(shí)點(diǎn)總結(jié)

react-lazy-load粗讀

axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝(更新)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用gulp+mock實(shí)現(xiàn)前后端分離

注意

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！