用gulp+mock實現前后端分離

dailybird 發布于2019-08-20 18:08 / 3386人閱讀

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

gulp

前端自動化構建工具

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

 npm install gulp -g

創建項目目錄、初始化npm包、gulp

npm init 

gulp init

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

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

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

編輯gulpfile.js文件用于配置gulp啟動

/*
 * @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任務開啟一個web調試服務，訪問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任務，執行合并js任務
gulp.task("allJs", function () {
    //合并數組中所有的js文件為all.js放入www文件夾中
    return gulp.src(["Content/app/*/*.js","Content/common/*.js"])
        .pipe(concat("all.js"))    //該任務調用的模塊
        .pipe(gulp.dest("dist/js"))
        .pipe(rename({suffix:".min"}))     //重命名
        .pipe(uglify())                    //壓縮
        .pipe(gulp.dest("dist/js"))            //輸出 
        .pipe(notify({message:"all task ok"}));    //提示
      
});

//reload任務，在執行reload之前先執行allJs和sass任務
gulp.task("reload", ["allJs"], function () {
    //刷新web調試服務器
    return gulp.src(["Content/app/"])
        .pipe(connect.reload());
})
//watch任務，開啟一個監控
gulp.task("watch", function () {
    //監控數組中文件的修改，如果有修改則執行reload任務
    gulp.watch(["Content/css/*.css", "Content/app/app.js", "Content/app/*/*.js", "Views/*/*.html"], ["reload"]);
});

//定義默認的gulp任務，直接執行gulp即可啟動default，啟動default前啟動connect和watch任務
gulp.task("default", ["watch","connect","allJs"]);

至此就創建出了localhost:8080的靜態服務器，剩下的就是需要處理前端的http請求。

mock

生成隨機數據，攔截 Ajax 請求

對于項目中所有的ajax請求進行攔截，返回配置的數據；這樣不用等后端接口，前端即可進行測試；
需要引用mock.js文件和配置文件json.js;如下定義即可隨即生產規定字段的數據；

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

json-server

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

注意

需要注意的是mock.js與angular之間會存在兼容問題，因為angular封裝的$http采用的是promise形式的，所以當發起$http.get請求的時候會沒有響應。mock.js需要采用angular兼容版本angular-mock.js。

nodejs

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

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

目前我自己按照第一套的流程成功在自己本地搭建了開發環境，整個流程比較麻煩的一點是,由于請求數比較多,所以需要編寫的mock數據很多,另外數據的格式需要已知。

GPU云服務器云服務器前后端分離前后端分離開發 js前后端分離框架前后端不分離 jsp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84109.html

如何根據protobuf來Mock后臺返回的數據

摘要：簡稱是公司內部的混合語言數據標準，他們用于系統和持續數據存儲系統。可用于通訊協議數據存儲等領域的語言無關平臺無關可擴展的序列化結構數據格式。我們想要的結果是最終的返回的數據。如果當前開發開啟，就回直接返回數據。數據是與同級的文件。 Protobuf Google Protocol Buffer( 簡稱 Protobuf) 是 Google 公司內部的混合語言數據標準，他們用于 RPC ...

shmily 2019-08-20 19:00 評論0 收藏0
前后分離的總結

摘要：如何去解決這些問題前后端分離大部分的互聯網公司都分成了前端團隊和后端團隊。方案一采用架構業界很多公司會采用，單頁應用的架構，這種架構是天然的前后端分離的。方案二淘寶的大前端方案中途島上圖是淘寶基于的前后端分離分層，以及的職責范圍。我們遇到了什么問題？ 1.前端無法調試后端未完成的 API：如果后端同學還沒有完成 API 開發，那么前端同學就不能對這個 API 進行開發。之前我們都是在...

enrecul101 2019-08-26 11:56 評論0 收藏0
前后端開發分離之Mock

摘要：為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手動進行一些數據模擬，即假數據。覆蓋攔截請求，目前內置支持。序有時候我們開發一般會分為前后端，前端負責數據顯示和UI交互，后端負責數據IO等等。因此造成前端對后端有嚴重依賴，使得前端的開發進度普遍滯后于后端。為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手...

phpmatt 2019-08-21 17:49 評論0 收藏0
前后端開發分離之Mock

摘要：為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手動進行一些數據模擬，即假數據。覆蓋攔截請求，目前內置支持。序有時候我們開發一般會分為前后端，前端負責數據顯示和UI交互，后端負責數據IO等等。因此造成前端對后端有嚴重依賴，使得前端的開發進度普遍滯后于后端。為了使得前端減輕對后端的依賴，在后端功能尚未實現的情況下保證前端進度的開發，我們一般會手...

tyheist 2019-05-29 17:03 評論0 收藏0
webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0