用gulp+mock完成前后端星散

2024年3月27日 132次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞