gulp插件之gulp-mock-server

  本文讲gulp-mock-server的应用,用于虚拟一个服务器,模拟后台返回json数据给前端,这样能够必定程度上实现先后端分离,约定好接口以后,先后端便可同时开发,从而提升效率。前端

  在gulpfile里新建任务:git

//mock server
gulp.task('mock', function() {
  gulp.src('.')
    .pipe(g.mockServer({
      port: 8090
    }));
});

  在项目根目录下新建data文件夹,里面放json文件。举个栗子,咱们在data里放了test.json文件。那么在浏览器里访问http://localhost:8090/test便可看到test.json的数据,如此咱们ajax请求该连接,一样能够获得数据。github

  项目目录以下:ajax

  访问mock-server效果以下:npm

  下面示例如何经过ajax请求数据。json

$(function () {
    $.get('http://localhost:8090/test', function (data) {
        console.log(data);
    });
});

  因而咱们在浏览器的console里面看到:gulp

  说明咱们请求到数据了。后端

  可是如今发现一个问题,mock地址是localhost,那其余设备怎么访问呢?因此咱们要配置mosk的host,修改mock任务以下:浏览器

//mock server
gulp.task('mock',['browser'], function() {
  gulp.src('.')
    .pipe(g.mockServer({
      port: 8090,
      host: '192.168.2.109'
    }));
});

  因而咱们看到:服务器

附录:

一:参考资料

  一、gulp-mock-server github连接 https://github.com/sanyueyu/gulp-mock-server

  二、npm 插件之gulp-mock-server  https://www.npmjs.com/package/gulp-mock-server

二:感谢老大cyn的指导。

相关文章
相关标签/搜索