用gulp+mock實現先後端分離

gulp

前端自動化構建工具

1. 須要配置nodejs環境, 利用npm安裝全局gulp,安裝後能夠輸入gulp指令。

npm install gulp -g

1. 建立項目目錄、初始化npm包、gulp

npm init 

gulp init

1. 下載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提示工具等等，具體根據項目須要安裝。

1. 編輯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數據不少,另外數據的格式須要已知。