用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数据不少,另外数据的格式须要已知。