前后端分离那些事

项目使用spray作为web框架, 该框架集成了jetty web容器, 在前后台开发调试的时候, 经常要container:start, container:stop. 不仅仅是代码, 我们还要将自己大脑的思维从前台切到后台,从后台切到前台. 而我一直认为: 人无法在两种思维模式下进行高效切换.

所以, 看起来全栈是有意思的, 但开发中的痛苦旁人也是无法体会到的. 从我个人的角度, 即使在全栈的开发中, 我们也应该保证一定时间内自己的思维是要保持一致的, 也就是说某一段连续的时间内前后台开发是要完全分离的(或者由不同的人负责前后端).

但实际情况往往很复杂, 比如你前台正好需要一个数据, 你要调用ajax去后台获取, 而后台你还没写或者别人还没开发完, 怎么办? 只能自己去写,去查数据库. 强行切断自己刚热起来的前端思维…

好在, 早就有人考虑到了这个问题, 并给出了方案:

1 mock.js

引入mock.js包

<script type="text/javascript" src="mock.js"></script>

调用:

Mock.mock('/api/b?a=haha', [1,2,3]);

$.ajax({
    type: "GET",
    contentType: "application/json",
    url: "/v1/posts/1",//一定要再最前面加斜杠
    data:{a:'haha'}
    success: function (Data) {//Data是从后台传过来的数据
        console.log(Data);
    },
    error: function() {
        alert('error')
    }
})

2 puer.js (类似Browsersync)

参考
mock.js 好处显而易见, 但缺点也很明显: 如果有多个ajax请求, 后期调试完毕删除mock的时候会是一个很麻烦的事, 而且一旦忘记删除, 他就会阻断真实的ajax造成数据混乱. 而这里我们可以用一个全局管理route的工具:puer.js

1.全局安装:

npm install puer -g

1. 切换到html等文件目录, 执行puer

cd /path/to/workspace ↵
puer

puer会默认为你打开http://localhost:8000页面(端口可以 -p 8001参数进行控制)

到此,puer已经可以帮你自动刷新页面了

puer还提供了叫插件(addon)的功能，集成了express的route.js来达到最简的路由配置，可以提供基于真实http请求与相应的动态的mock数据。

puer -a route.js

route.js 这么写

// use addon to mock http request
module.exports = {
  // GET
  "GET /v1/posts": function(req, res, next){ //
    // response json format, send()内部放返回值
    res.send([{
          title: "title changed",
          content: "tow post hahahah"
        }])
  },
  // PUT POST DELETE is the same
  "PUT /v1/posts/:id": function(){
  },
  "POST /v1/posts": function(){
  },
  "DELETE /v1/posts/:id": function(){
  }
}

除此之外, puer还有 代理模式,，应用puer到已有服务器中

puer -t http://localhost:8020

需要注意的是，上述addon是可以和这个模式配合使用，这使得我们在后台服务青黄不接的时候率先开发完前端功能，深藏功与名。

puer -t http://localhost:8020 -a route.js

3 puer-mock

我还在研究 参考
https://github.com/ufologist/puer-mock

RAP 淘宝开发api接口管理工具

https://github.com/thx/RAP