用gulp+mock实现前后端分离

dailybird 发布于2019-08-20 18:08 / 3384人阅读

摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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