用gulp+mock实现前后端分离

2019年9月15日 136次阅读 来源: icodeing

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数据很多,另外数据的格式需要已知。

    原文作者：icodeing
    原文地址: https://segmentfault.com/a/1190000010239333
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞