您的位置：首页 > Web前端

前端数据模拟服务器 gulp-connect 和 JSON Server

2016-03-10 11:48 621 查看

最近闲着没事，就上github溜达，看到了JSON Server 这个项目。项目主要是给前端人员做个JSON的数据模拟服务器，也就是说你可以用最简单的方式搭建一个基于REST API的JSON服务器，一条命令搞定。这个项目很棒，前面的项目确实也没有用到数据模拟这个东西，都是上传到服务器，然后ajax请求。这个过程很痛苦的，有修改然后上传。

遇到什么问题呢？

1、后台重启，页面全部要上传，这个过程看网络情况，如果项目很大，资源多，这个过程就漫长。

2、后台没有开启跨域服务，所以不能使用JSONP格式的数据交互。这就限制了前端的开发进度，必须等到后台接口对好了之后才能对接，项目进度满了一大截。

3、后台修改接口，必须等待，不能访问。这个问题无法控制。

解决方案：

1、百度的fis项目很好，解决了前端的很多麻烦，还有很多的后台服务和数据模拟，资源替换、优化等。但是确实太大了，原来我们自己的很多项目都是基于gulp的，没有用到的那么多，并且配置没有这么复杂。所以不采用。

2、用后台node自己写接口服务。这是可以的，但是相当于做了两份工作，你这是抢后台的工作啊，只是没有真实和后台交互而已，并且不能及时和后台接口同步，改一个就写一个。非常不好

解决方法：

现在前端开发都是，修改即刷新，每次改代码都能立即呈现，告别了F5的时代。这是依赖于livereload这个强大的插件。为我们提供了服务的同时，也遇到问题，就是占用了一个端口，那么其他端口就不能使用了。那么自然的想到代理请求了。过程是这样的，只要是api/xx/xx之类的访问，全部代理到JSON Server接口服务器，那么就不会报错了。型号 gulp-connect 这个插件提供了中间件middleware这个高级玩意，以前一直没有用到。

下面是demo

项目结构：

db.json

{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}

gulpfile.js

'use strict';
var gulp = require('gulp'),
less = require('gulp-less'),
connect = require('gulp-connect'),
port = 5000;
var rename = require('gulp-rename');
var plumber = require('gulp-plumber'); // 错误处理插件
var notify = require('gulp-notify'); // 消息插件
var autoprefixer = require('gulp-autoprefixer'); // 自动添加前缀
var minifycss = require('gulp-minify-css');
var proxy = require('http-proxy-middleware');
gulp.task('server',function(){
connect.server({
root:[__dirname],
port:port,
livereload:true,
middleware:function(connect, opt){
return [
proxy('/api', {// configure proxy middleware
// context: '/' will proxy all requests
// use: '/api' to proxy request when path starts with '/api'
target: 'http://localhost:3000',
changeOrigin:true    // for vhosted sites, changes host header to match to target's host
})
];
}
});
});
gulp.task('reload',function(){
gulp.src(['./index.html', './less/style.less'])
.pipe(connect.reload());
});

gulp.task('default',['server'],function(){
gulp.watch(['./index.html'],['reload']);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<h1>asdsada</h1>
<script>
// $.get('api/profile',function(re){
//     console.log(re);
// })
$.post("api/posts",{suggest:'xx'},function(re){
console.log(re);
});
</script>
</body>
</html>

package.json

{
"name": "asd",
"version": "0.0.1",
"description": "asd",
"main": "sad",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "a"
},
"keywords": [
"ds"
],
"author": "asd",
"license": "ISC",
"devDependencies": {
"angular-resource": "^1.5.0",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-connect": "^2.3.1",
"gulp-less": "^3.0.5",
"gulp-minify-css": "^1.2.3",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"http-proxy-middleware": "^0.11.0"
}
}

routes.json

{
"/api/": "/",
"/blog/:resource/:id/show": "/:resource/:id"
}

最后：

安装包：npm install

启动接口服务 : json-server db.json –routes routes.json

启动gulp : gulp

访问页面： localhost:5000

参考：

Use proxy middleware with gulp connect

json-server

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航