前后端分离--构建前端Mock Server

mock:模拟的,虚假的

mock server:模拟服务,模拟请求,模拟虚假数据

为了前后端更好的分工,接口文档是必须的,前后端都根据接口文档写代码,然后对接接口就行了。

但是,后端跟不上前端节奏,接口跟不上来怎么办?即便接口跟上来了,大后端数据跟不上又怎么办?

第一种想到的方法就是模拟返回数据,根据接口文档定义好的返回数据格式,新建一个json文件夹,里面放一堆*.json文件,像这样:

然后请求json数据,像这样:

所以为了前端有数据,就会有很多很多的请求json文件。当后端接口上来后,又要一个一个挨着去把json请求改为真实接口名,这就要求代码需要写的比较规范,不然接口的对接真的很难受,而且在修改某些复杂逻辑的地方的时候还必须的小心翼翼,不然就只有等测试发来bug单了。

造json文件模拟请求对于小的项目确实还是挺方便的,但是项目大了呢,上百个接口甚至更多呢?

一堆一堆的json看着都烦,还不说前后端对接了。

那么要怎么才能解决前后分离,节约时间,提高开发效率,减少前端对后端的依赖呢?

那就是为前端提供一个可以在本地用的web容器,这个就是 mock server。

mock server 能解决哪些问题呢?

1、接口文档的编写

2、根据接口拦截请求,返回接口需要返回的结果数据

3、方便线上线下的切换

我这里要用做mockserver的就是rap了,rap结合了团队管理,项目管理,文档编写、Mock.js、可视化、接口过渡、文档历史版本(赞)、mock插件(线上线下切换就只需要注释一句代码就OK),支持本地部署。

那么怎么将rap部署到本地呢?官网有部署手册。

我这里是部署到windows环境下的。

部署方式有两种:

1、使用编译好的war包部署(适合仅想部署RAP服务,不需开发定制功能的同学)

2、使用源码自行编译、开发后部署(需配置J2EE开发环境, 适合想要研究RAP源代码,开发定制功能的同学)

我不需要自行开发就采用war包部署。

需要环境:jdk,tomcat,MySQL,Redis

第一步:在官网https://github.com/thx/RAP/releases将最新的war包下下来,然后改名为ROOT.war,放到tomcat下面的webapps里面

第二步:启动tomcat,该war包自动部署到文件夹ROOT

第三步:修改数据库配置文件,打开ROOT中得WEB-INF/classes/config.properties

修改jdbc.username=您的数据库用户名

修改jdbc.password=您的数据库密码

redis的端口号默认

第四步:安装redis

http://www.redis.net.cn/tutorial/3503.html下载redis-2.45

根据自己实际情况选择,将64bit的内容cp到自定义盘符安装目录取名redis。 如 G:\dev

打开一个cmd窗口 使用cd命令切换目录到 C:\redis 运行 redis-server.exe redis.conf 。

如果想方便的话,可以把redis的路径加到系统的环境变量里,这样就省得再输路径了,后面的那个redis.conf可以省略,如果省略,会启用默认的。输入之后,会显示如下界面:

这时候另启一个cmd窗口,原来的不要关闭,不然就无法访问服务端了。

切换到redis目录下运行 redis-cli.exe -h 127.0.0.1 -p 6379 。

设置键值对 set myKey abc

取出键值对 get myKey

这就说明redis安装成功了。

第五步:开启tomcat和redis,浏览器输入:localhost:8080

说明部署成功了。rap的默认用户是admin,密码通过双重md5加密了的,但是不是正常的加密 ……

所以要想登录admin,还得先注册一个用户,比如密码设置为123456,打开MySQL

将新注册的dothin的密码复制到admin里面去,然后admin就能登录了

具体怎么使用rap,自行看rap教程

时间: 2024-11-05 12:17:04

前后端分离--构建前端Mock Server的相关文章

localStorage + 配置url 前后端分离之前端先行

关于localStorage和sessionStorage的基础说明说明网上一大堆,这里说下自己的一个亲身应用. 使用localStorage配置url,使前端代码更方便适配测试和真实环境: 大家都知道如果前后端分离的话,往往很多时候可以前端先行,不依赖于后台(接口得提前定义好). 但是存在两个问题: 1.前后端分离后前端虽然不依赖于后台,但是依赖ajax返回的结果 2.往往自己造的mock地址跟真是环境的url地址不一致,如果写死了,则需要改动很大一片 先说第二个问题,之前在一个项目上看到的时

前后端分离, 前端如何防止直接输入URL进入页面?

转自:https://blog.csdn.net/weixin_41829196/article/details/80444870 前后端分离,如何防止用户直接在地址栏输入url进入页面,也就是判断用户是否登录,没有,则直接跳转到登录页,后台可以用session记录用户登陆的状态,疑问的是前端每次ajax请求,都要做状态判断么,没登录就location.href="login.html",还是有什么别的写法?请教大神,重点想知道前端是如何写的,求demo, 另外就是单页面应用上,前端又

前后端分离之前端vue

npm install --global vue-clivue init webpack my-project cd my-project npm install npm run dev 这样就构建了一个本地vue项目 结下来,如何调用后端接口呢? 安装 vue-resource npm i vue-resource --save 在main.js里面加入以下代码 import VueResource from 'vue-resource' Vue.use(VueResource) Vue.ht

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了. 解决办法如下: 环境: vue 2.0 springboot 2.1.6 一.前端部分 1.  在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defau

前后端分离后的前端时代

本文从前端开发的视角,聊一聊前后端分离之后的前端开发的那些事儿.阅读全文,大约需要8分钟. 什么是前后端分离 除了前端之外都属于后端了. 你负责貌美如花,我负责赚钱养家 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的状态中,可以说是没有独立的"人格"可言. 前端负责切图和编写静态页面模板,后端将数据渲染到前端提供的页面模板中,最后将页面渲染到浏览器展示. 这个过程中,前端只提供页面模板或者写一些JavaScript脚本,有的甚至JS脚本都是后端来写,前端的作用只局限

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 移动端与前端的区别 前端开发的混沌时代 后端 MVC MVC 方案实现 MVC 的缺点与改进 前端只写 Demo HTML 模板 后端 MVC 架构总结 AJAX 与前端 MVC 前后端分离的缺点 双端 MVC 不统一 SEO 性能不够 集中 Or 分离 Nodejs 前后端分离的哲学 Nodejs 分层 实战应用 风险控制 总结 参考资料 写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈

前后端分离实践(一)

前言 最近这一段时间由于Nodejs的逐渐成熟和日趋稳定,越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手,尝一尝鲜. 一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行.而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验. 同样,我们的大网盘团队也早在去年早早就开始了紧锣密布的准备工作,这目前工作也做的差不多了,现在我就来总结一下在过程中遇到的坑点以

报文、前后端分离、express中间件、TCP协议

1.报文 报文,是网络中交换和传输的数据单元,即站点一次性要发送的数据块.报文包含了将要发送的完整的数据信息,其长短很不一致,长度不限且可变.报文也是网络传输的单位,传输过程中会不断的封装成分组.包.帧来传输,封装的方式就是添加一些信息段,那些就是报文头以一定格式组织起来的数据. HTTP报文是由一行一行简单的字符串组成的.HTTP报文都是纯文本,不是二进制代码,所以人们可以很方便地对其进行读写.如果说HTTP是因特网的信使,那么HTTP报文就是它用来搬东西的包裹了. 报文由三部分组成:对报文进

Spring Boot + Shiro 实现前后端分离、权限控制

本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A