nodejs 快速搭建前后端分离

前后端分离问题

思路:前端用nodejs搭建一个工程的服务,将相关的后端api请求转移到后端服务器中

方法一采用koa搭建自己的服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * Created by jance on 16/8/30.
 */

var serve = require('koa-static');
var koa = require('koa');
var app = koa();
var path=require('path');
var proxy=require('koa-proxy');
var router = require('koa-router')()
var convert= require('koa-convert');
app
  .use(router.routes())
  .use(router.allowedMethods())
 router
    .get('/(api|auth|static)/*', proxy({
      host: 'http://127.0.0.1:5555/',
      map: function (path) {
        return path
      }
    }))
    .post('/*', proxy({
      host: 'http://127.0.0.1:5555/',
      map: function (path) {
        return path
      }
    }))
app.use(serve(path.resolve(__dirname, '..')));
app.listen(3000);
console.log('listening on port 3000');

方法二 采用browser-sync 跟http-proxy 搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var gulp = require('gulp');

var browserSync = require('browser-sync');
var httpProxy = require('http-proxy');

/* This configuration allow you to configure browser sync to proxy your backend */
var proxyTarget = 'http://127.0.0.1:5555/'; // The location of your backend

var proxy = httpProxy.createProxyServer({
  target: proxyTarget
});

/* proxyMiddleware forwards static file requests to BrowserSync server
   and forwards dynamic requests to your real backend */
function proxyMiddleware(req, res, next) {
  if (/\.(html|css|js|png|jpg|jpeg|gif|ico|xml|rss|txt|eot|svg|ttf|woff)(\?((r|v|rel|rev)=[\-\.\w]*)?)?$/.test(req.url)) {
    res.setHeader('set-cookie', 'csrftoken=true');
    next();
  } else {
    res.setHeader('set-cookie', 'csrftoken=true');
    proxy.web(req, res);
  }
}

function browserSyncInit(baseDir, files, browser) {
  browser = browser === undefined ? 'default' : browser;

  browserSync.instance = browserSync.init(files, {
    startPath: '/django_templates/base.html',
    server: {
      baseDir: baseDir,
      middleware: proxyMiddleware
    },
    browser: browser
  });

}

gulp.task('serve', ['watch'], function () {
  browserSyncInit([
    'app',
    '.tmp'
  ], [
    'app/*.html',
    'app/styles/**/*.css',
    '.tmp/styles/**/*.css',
    'app/scripts/**/*.js',
    'app/partials/**/*.html',
    'app/images/**/*'
  ]);
});

走过的弯路

采用gulp-webserver 搭建服务,自己mock返回数据(相比以上nodejs搭建的的方法,你要自己mock很多后端api数据,麻烦了很多)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var gulp = require('gulp');
var webserver = require('gulp-webserver');
var fs = require('fs');
function mockBackend(res, json) {
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify(json));
}
gulp.task('wl', function() {
  var json;
  gulp.src('app/')
    .pipe(webserver({
      livereload: false,
      open: true,
      directoryListing: {
        enable: true,
        path: 'app/'
      },
      host: '0.0.0.0',
      port: 6789,
      // 这里是关键！
      middleware: function(req, res, next) {
        console.log(req.url);
        switch (req.url) {
          case '/auth/login/':
            json = JSON.parse(fs.readFileSync('./stub_server_data/auth/auth.json'));
            mockBackend(res, json.login);
            break;
        }
        next();
      }
    }));
});