游客

标题:如何构建Web前端模拟服务器(Mock Server)？ - 大前端进化论
正文:
大家肯定遇到过，当后端 API 没有编写完成时，前端无法进行调试，这就导致了前端会被后端阻塞的情况。而我所说的 Mock Server 是相当于构建假数据，然后把这些假数据存到 JSON 文件上，Mock Server 可以响应请求或者生成页面，当然也可以顺便生成 API 文档。然后，还会遇到的一个问题就是，接口的 URL 跟真正的 URL 是不同的，Mock Server 往往会使用 127.0.0.1:3000 这样的 URL，而不是 http://www.camnpr.com/bar这样的的路径，这会使得开发时与生产环境中 URL 不一样的问题。所以想看看大家是如何构建 Mock Server 的。为了更好的分工合作，让前端能在不依赖后端环境的情况下进行开发，其中一种手段就是为前端开发者提供一个web容器，这个本地环境就是 mock server。要完整运行前端代码，通常并不需要完整的后端环境，我们只要在mock server中实现以下几点就行了： 能渲染模板 实现请求路由映射 数据接口代理到生产或者测试环境能渲染模板很简单，在mock server中集成模板引擎就行了，然后提供模拟的页面数据用于完整渲染页面，不过有时候生产环境中的模板引擎可能有一些环境依赖的扩展，这个要单独实现。请求路由映射，实现原理就是要让本地的mock server有一个router，能接收所有HTTP请求，然后在router中根据线上的路由约定，实现一套一样的规则，这个也不难，不赘述了。最后数据接口代理。与前端相关的HTTP请求一共就3种响应情况： 渲染页面的请求； 静态资源的请求； 获取数据的请求。由于实现了router，我们把渲染页面的请求在mock server中处理掉，直接输出本地模板的渲染结果；静态资源的请求直接返回文件内容；而把数据请求代理到测试或者生产环境，本地就不用mock了（当然，如果出现新的接口测试环境没有的，可以追加router，在mock server想响应假数据）至于题主说的url一致性问题，其实不存在的。你的这个 http://www.camnpr.com/bar数据请求，在js中应该这样写： $.get('/bar', callback)这种写法，省略了host，在线下开发时，其最终结果是请
[<<][[1]][2][>>]

查看评论(0)
发表评论



首页