`
k19421
  • 浏览: 70465 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

安卓ios app基于HTTP mock(RAP)的前后端分离开发

    博客分类:
  • java
 
阅读更多

问题:

1、 前端开发需要等待后端

2、 http mock使用起来不方便

3、 项目中已经存在很多接口了,这些接口去mock的话需要花费工作量

 

分析:

1、 前后端分离好像就mock一种方案比较方便一点

2、 如果能找到一个使用很方便的mock就好了

3、 实现了的接口走我们的代码,未实现的接口走mock,两者结合在一起能兼容

 

解决:

1&2、 经过调研,发现阿里妈妈的RAP使用起来非常的方便,文档视频示例很丰富,可以根据文档来使用

2、实现了的接口走我们的代码,未实现的接口走mock 解决的思路就是当请求未实现的接口时,肯定是报404,那么我们可以在一个统一的方法里去处理404,在这个方法里解析请求的url,然后通过url去拼接对应的RAP的接口地址。之后通过URL、HTTPClient之类的工具去请求RAP的URL,获取RAP生成的mock数据,然后把mock数据返回给前端。

 

具体过程分为两步走:

a) 统一处理未匹配的请求。大概有这么几种方法。我们使用的是SpringMVC,所以我添加了一个方法(暂且叫他mockMapping方法)用来匹配/app请求前缀/**/*的请求,这样子所有没有被精准匹配的请求都会匹配到这个方法来

b) 在mockMapping方法里面,通过apache HTTPClient去请求RAP的接口(代码看这里

 

大概的截图长这样子


 

创建的mock,RAP会给你生成一个唯一对应的url

这个url就是下图中右上角红框中那部分,加上左边请求地址这一块

需要注意的是,右上角哪里的url里面有一部分叫做mockjs,需要给他替换成mockjsdata,这样子你通过httpClient去请求的数据才是通过mockjs解析后的JSON字符串



 
 

 --------------------------------------------------------------------

花了不到半个小时(代码写的很好看)的时间看了RAP的源码,mock部分大概分为三步来实现

1、 你创建一个MOCK请求的时候他保存这个请求的MOCK定义以及对应的生成的url。

2、 当请求时,我们请求/mockjsdata这个,后面带上前一步生成的url

3,、 RAP通过URLReWrite,将mockjsdata交由/mock/createMockjsData.action处理,在这个action里面通过url找到对应的mock定义,然后解析出来返回

 

 

  • 大小: 19.2 KB
  • 大小: 22.7 KB
分享到:
评论

相关推荐

    基于koa的标准前后端分离框架koa-grace.zip

    koa-grace是基于koa的标准前后端分离框架,又可以叫Grace.js。主要特性包括:支持MVC架构,可以更便捷地生成服务端路由;标准的RESTful架构,支持后端接口异步并发,页面性能更优;一套Node环境经服务服务多个站点...

    蘑菇街前后端分离实践.pdf

    在当前的Web开发环境中,前后端分离已经成为提高开发效率、优化用户体验的重要手段。该实践由陈辉分享,他在2013年至2015年期间对此进行了深入研究和实践。 文档中提到了几个关键概念和技术,首先,WebX框架被用作...

    vue+mockjs模拟数据实现前后端分离开发的实例代码

    这篇文章主要介绍了如何使用Vue和Mock.js来模拟数据,实现前后端分离的开发。 首先,为了开始这个过程,我们需要安装Vue的全局脚手架`vue-cli`。在命令行中执行`npm install --global vue-cli`来安装。然后,利用`...

    基于Swagger的前后端分离开发实践

    总结,基于Swagger的前后端分离开发实践是通过设计清晰的API文档,使用Mock Server来模拟后端服务,从而实现前端和后端的同步开发。Swagger工具提供了从文档编写到Mock Server构建的全套解决方案,增强了团队间的...

    mock.js模拟数据实现前后端分离

    mock.js是一款为JavaScript提供模拟数据服务的前端库,它能够帮助我们在前后端分离的项目中,尤其是在后端接口尚未开发完毕的阶段,模拟前端页面所需的数据,从而使得前后端可以并行开发,提高开发效率。 在项目...

    一个taro适配Android、iOS、微信小程序、H5最佳实践项目的脚手架

    通过mock数据在本地搭建服务进行前后端分离开发、本脚手架各端适配的比较完美适合用来进行全新项目的多端开发,后续基础组件持续完善中,目标是打造一个多端共用的基础组件库. 适配进度 H5 -- 完美适配 React ...

    vue+mock.js实现前后端分离

    【Vue+Mock.js 实现前后端分离】 在现代Web开发中,前后端分离是一种...总之,Vue结合Mock.js 可以在前后端分离的开发模式下,让前端开发者专注于界面逻辑和用户体验,而无需等待后端接口的完成,从而提高开发效率。

    05-单页面( SPA )前后端分离综合项目实战v3.0[去除水印].pdf

    - 本项目是一个典型的SPA前后端分离实战案例,通过使用现代前端技术和框架(如Vue.js),结合RESTful API设计原则以及Mock.js等工具,实现了高效、灵活的开发流程。 - 通过前后端分离架构,不仅提高了开发效率,也使...

    Node.js-一个提升前后端协作开发效率的工具包括了mock和proxy

    在前后端分离的开发模式下,Node.js 成为了一个非常重要的桥梁,它能有效地解决前端与后端协同开发中的诸多问题。 在标题提到的“提升前后端协作开发效率的工具”中,Mock 和 Proxy 是两个关键概念。 1. Mock...

    基于Vue的前后端分离的大数据可视化视图源码

    在现代Web开发中,前后端分离已经成为一种标准的架构模式,尤其在大数据可视化的场景下。Vue.js,作为一款轻量级的前端JavaScript框架,因其易学易用、灵活性高和丰富的生态系统,被广泛用于构建用户界面。本项目是...

    nodemock前端数据mock方案简单易用前后端分离

    在现代Web应用开发中,前后端分离已经成为一种常见的架构模式,它使得前端和后端开发者可以独立工作,提高开发效率。`nodemock`就是这样一个工具,它专注于为前端开发者提供一个简单、易用的数据模拟解决方案,使得...

    网易NEI在面临前后端分离问题,所提供的完整解决方案.docx

    然而,在前后端分离的背景下,网易NEI提倡一种更为高效的开发模式——前后端并行开发。在这一模式下,即便是在没有完成交互稿的情况下,开发团队也能提前进行技术选型、环境搭建等工作。后端开发者还可以在此期间...

    前后端分离-整套解决方案.docx

    在当前的互联网环境中,前后端分离的开发模式已经成为主流,它极大地提高了开发效率和代码的可维护性。传统的开发模式中,前端和后端紧密耦合,前端需要依赖后端的模板引擎进行页面渲染,这导致了开发流程中的诸多...

    spingboot+vue前后端分离项目人员管理系统

    5. **Mock Server**:在前后端开发过程中,可以使用Mock Server模拟后端API,加快前端开发进度。 综上所述,"SpringBoot+Vue前后端分离项目人员管理系统"充分利用了两者的优势,实现了高效、灵活的开发流程。在实际...

    Mockcat 简单易用的前后端分离开发工具集

    Mockcat是一款前端与后台分离开发的简易接口Mock数据工具集。提供了Mock数据的模块化管理,接口的定义和测试(支持JSON5/XML文档格式、Mock.js的语法规则),Mock数据的操作日志,以及接口的Mock服务功能。另外,...

    较为完整的博客系统,分为前台和后台。前后端分离架构,前端Vue、axios、mock等开发;服务器端SpringBoot.zip

    毕业设计 基于springboot mysql Vue的系统开发,供参考,提供说明材料+源代码 毕业设计 基于springboot mysql Vue的系统开发,供参考,提供说明材料+源代码 毕业设计 基于springboot mysql Vue的系统开发,供参考,...

    基于 webamn + vue3 + element-plus 的前后端分离解决方案.zip

    在现代Web开发中,前后端分离已经成为了一种标准架构模式,它能提高开发效率,增强应用的可维护性和可扩展性。本项目“基于webman + vue3 + element-plus的前后端分离解决方案”正是以此为目标,提供了一套完整的...

    mock 介绍及原理,前后端 mock方法

    Mock 介绍及原理,前后端 Mock 方法 Mock 是一种测试技术,用于模拟某些不容易构造或者不容易获取的对象,以便测试。在实际工作中,可能会遇到依赖接口不通、异常数据难模拟、单元测试干扰等问题,引入 Mock 可以...

Global site tag (gtag.js) - Google Analytics