前端数据模拟痛点

AJAX 接口

大家肯定遇到过,当后端 API 没有编写完成时,前端无法进行调试,这就导致了前端会被后端阻塞的情况。而我所说的 Mock Server 是相当于构建假数据,然后把这些假数据存到 JSON 文件上,Mock Server 可以响应请求或者生成页面,当然也可以顺便生成 API 文档。

引用自:你是如何构建 Web 前端 Mock Server 的?

例如前端需要开发一个AJAX 登录页面:

AJAX登录

如上图所示,前端需要向 /login/ 发送 POST 方式的AJAX请求,并提交 usernamepassword,需要后端返回JSON,前端再根据JSON进行后续操作。


AJAX需要在服务器环境才能运行,所以一些前端会使用 WampServer 在本地启动一个 PHP 服务器,然后创建一些 PHP文件返回数据。

wampfile


或者使用代理软件将在线url转发到本地文件

代理软件

login.json

{
    "status": "success"
}

Wamp 和代理软件的缺点

  1. Wamp启动的PHP Server 只能使用 .php .txt .html 这样的后缀不可以使用 /ajax/login/ 这样的 url,如果要实现 /ajax/login/ 需要实现 PHP 路由。

  2. 代理软件每次访问的都是固定的数据,我们要模拟登录成功和失败时返回的JSON

    {
    "status":"success"
    }
    {
    "status":"error",
    "msg": "密码错误"
    }
    
  3. 以上两种方式模拟数据都需要创建文件


HTML转换为后端模板

淘宝的Web基本上都是基于MVC框架webx,架构决定了前端只能依赖后端。 所以我们的开发模式依然是,前端写好静态demo,后端翻译成VM模版,这种模式的问题就不说了,被吐槽了很久。

引用自:前后端分离的思考与实践(一)

后端模板有很多种 PHP Smarty 、PHP 直接解析 、JAVA Velocity 等。

不理解翻译请 点击此处

前端书写 HTML 让后端“翻译”成后端模板存在如下问题:

  1. 后端翻译模板工作影响后端开发效率
  2. 有些HTML输出逻辑复杂,需要前端在HTML中准备大量说明注释
  3. 当前端没有将复杂的输出需求表达清楚时,翻译完成的模板并不是预期需要的代码。会增加前后端联调和测试成本。

基于 Node中间层的前后端分离

可以看看 Taobao UED 的相关文章 前后端分离的思考与实践

业内很多团队都在实践基于 Node中间件的前后端分离,但对于小型团队存在两个致命的问题:

  1. Node 中间件的方式对前后端架构的改动成本太大
  2. 团队中需要有熟练掌握 Node 的开发同事。绝对不能只有一个人懂 Node 然后推行和实施 Node 中间层。

小型团队基于 Node 中间层完成前后端分离太困难。

为什么要用 FMS ?

FMS 让前端能在本地独立完成Web数据模拟。(AJAX、后端模板引擎渲染页面)


上一篇:介绍

下一篇:安装与启动

评论
想在此留下评论,请访问 {{issues_link}} 提交评论
Top