搭建easy-mock数据模拟服务器

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: 搭建easy-mock数据模拟服务器

大家都知道,我们主要提供的是前端可视化研发的,包括2d拓扑可视化,2d电力,工业组态可视化,三维可视化,大屏可视化等。大约效果是长这个样子吧:


微信图片_20220424115647.png

大屏 三维可视化


微信图片_20220424115652.png

网管拓扑


微信图片_20220424115656.png电力组态


所谓可视化,肯定需要有数据支撑,一般来说,后期都会和客户的数据服务进行对接。

然而在开始开发的时候,一般都是开发人员自己模拟。很多时候一个项目的数据模拟也会占用不少的时间。


数据模拟


相信大家都有各自的办法。比如说,

  • 将 Mock 数据写在代码里
  • 利用请求拦截
  • 利用 Charles 等代理工具,将 URL Map 到本地文件


上面这些方法虽然可以解决我们的问题,但同样伴随着一些问题。比如说,

  • 脏代码
  • 依赖特定的框架
  • 增加切换成本
  • 接口数据结构重构需要手动更新
  • 效率低下
  • 无法优雅的进行协同编辑
  • 无法持久化


模拟数据服务器


因此,我们希望能够搭建一个可以配置的模拟数据的服务器。 大家都知道mockjs是一个功能很强大的数据模拟插件,首先我们想到的是自己搭建一个服务器,通过配置调用mockjs,来生成模拟数据。但是简单思考了下,发现工作量也不小。


最终考虑到使用easy-mock,这应该是最快捷的方式。easy-mock本身有个在线的服务。

但是建议大家如果是一些较正式的项目数据,不要使用在线的服务,因为我们之前就有一个项目使用了在线的easy-mock服务,一次客户要给领导演示,前面我们各种测试,没有问题。正式演示的时候,发现效果出不了了,经过查找,发现在线的easy-mock服务挂掉了。悲催,easy-mock服务经常会挂掉,不过也能理解 ,人家免费开源,够意思了还说啥呢。


因此,建议搭建自己的easy-mock服务势在必行。


搭建easy-mock服务器


下面介绍大家如何搭建easy-mock服务器,首先easy-mock的github地址如下:

https://github.com/easy-mock/easy-mock

在此页面(后面称之为官网吧),其实有简单的介绍如何搭建,不过是英文的。


安装nodejs、mogondb、redis


由于easy-mock依赖于nodejs、mogondb、redis。所以需要安装这三项。

其中  Node.js(v8.x,不支持 v10.x)& MongoDB(>= v3.4)& Redis(>= v4.0)。

(需要严格按照规定的版本号进行安装,否则可能出现不能启动的问题)

相关的安装说明,此处就不赘述了。相信


安装easy-mock


安装easy-mock 也比较简单,首先从git地址clone easy-mock到本地:


git clone https://github.com/easy-mock/easy-mock.git


cd 到easy-mock目录,并调用npm install 安装相应的node 模块:


cd easy-mock 
npm install


实际过程发现用npm install 会出现很多错误,要不断的多修复几次才能成功;所以建议直接用cnpm install。


配置easy-mock


前面说了,easy-mock使用了mongodb和redis,所以最主要的是要配置他们的连接信息,找到config/default.json文件,修改如下图中的红框内的内容即可:


微信图片_20220424115703.png

配置


启动easy-mock


首先启动mongodb和redis服务,然后在easy-mock工程下,调用npm run dev 可以启动easy-mock服务。浏览器中输入发我地址即可访问:


微信图片_20220424115707.png页面


如果未注册,直接输入任意用户名密码即可注册并登陆; 已经注册,输入注册的用户名及其密码即可登陆。


创建项目


easy-mock中,可以创建项目,其默认有一个演示项目。项目分为个人项目和团队项目,团队项目的可以添加团队成员,个人项目只属于个人。如下图所示:

无论是团队项目还是个人项目,点击添加按钮既可以添加项目:


微信图片_20220424115711.png

添加项目按钮


点击按钮,转到添加项目的页面:



微信图片_20220424115718.png

添加项目


创建接口


点击创建的项目,可以进入到项目的页面,在该页面上面,有一个创建接口的按钮,如下图所示:


微信图片_20220424115723.png

image.png


点击该按钮,就可以创建一个数据接口,输入接口名称(地址),在左侧输入mock语法来创建接口返回的随机数据:


微信图片_20220424115728.png

创建接口


mock 语法


再接口的地方,可以很方便的用mock语法来模拟数据。基本语法如下


基本语法


1. 属性值是字符串 String


'name|min-max': string:通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。

'name|count': string:通过重复 string 生成一个字符串,重复次数等于 count。


2. 属性值是数字 Number


'name|+1': number:属性值自动加 1,初始值为 number

'name|min-max': number:生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number:生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位。


'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}


3.属性值是布尔型 Boolean


'name|1': boolean:随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。

'name|min-max': value:随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。


4.属性值是对象 Object


'name|count': object :从属性值 object 中随机选取 count 个属性

'name|min-max': object:从属性值 object 中随机选取 min 到 max 个属性。


5. 属性值是数组 Array


'name|1': array 从属性值 array 中随机选取 1 个元素,作为最终值。

'name|+1': array从属性值 array 中顺序选取 1 个元素,作为最终值。

'name|min-max': array通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

'name|count': array:通过重复属性值 array 生成一个新数组,重复次数为 count。


6.属性值是函数 Function


'name': function:执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。


7. 属性值是正则表达式 RegExp


'name': regexp:根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。


8. 示例


比如一个示例如下:


{
  "data": {
    'value1|1-3': 0,
    'value2|1-3': 0,
    'value3|1-3': 0,
    'total': function() {
      return this.value1 + this.value2 + this.value3
    },
  }
}
// 返回列表
{
  "data|1-10": [{
    'name': '@cname', // 中文名称
    'id|+1': 88, // 属性值自动加 1,初始值为88
    'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
    'birthday': '@date("yyyy-MM-dd")', // 日期
    'city': '@city(true)', // 中国城市
    'color': '@color', // 16进制颜色
    'isMale|1': true, // 布尔值
    'isFat|1-2': true, // true的概率是1/3
    'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
    'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
    'friends|2': ['jack', 'jim'], // 重复2次属性值生成一个新数组
    'func': function() {
      return this.name;
    }
  }]
}
{
  "data": {
    "string|1-10": "★",
    "string2|3": "★★",
    "number|+1": 202,
    "number2|1-100.1-10": 1,
    "boolean|1": true,
    "regexp": /[a-z][A-Z][0-9]/,
    "absolutePath": "@/string @/user/name",
    "user": {
      "name": "demo"
    },
    "object|2": {
      "310000": "上海市",
      "320000": "江苏省"
    },
    "array|1": ["AMD"]
  }
}


响应数据


如果能根据传入的参数动态返回数据该多好?Easy Mock 支持处理 Request 对象。也就是说我们可以通过 Request 对象的某些属性进行条件判断,从而实现 响应式数据。包括如下属性:

  • header
  • method
  • url
  • querystring
  • host
  • hostname
  • query
  • cookies


比如如下代码:


{
  success: true,
  data: {
    default: "hah",
    _req: function({
      _req
    }) {
      return _req
    },
    name: function({
      _req
    }) {
      return _req.query.name || this.default
    }
  }
}


通过 _req对象返回名称。


Restful


Easy Mock 支持 /restful/:id/list 或者 /restful/{id}/list 这样的接口地址。


接口代理


Easy Mock 支持url地址代理。比如直接输入地址:


https://api.m.sohu.com/autonews/pool/?n=%E6%96%B0%E9%97%BB&s=1


easy-mock的缺点


使用easy-mock之后,感觉其还是很方便的,功能也挺强大。 但是其也有缺点:

  1. 用户管理很弱,随便谁都可以登录,没有很好的控制;如果用户权限控制需求比较严格的,就不太适合。
    2.项目编号超长,而且不能修改,模拟数据的接口,都会带上项目编号。因此你想要记住地址是不可能的,只能登录easy-mock网站,去copy地址。


如果对以上两点要求很高,可以考虑自己修改开源代码。

总体来说 使用easy-mock,能够极大的减少前端模拟数据的工作量。

相关文章
|
6月前
|
缓存 人工智能 架构师
释放数据潜力:利用 MCP 资源让大模型读懂你的服务器
MCP(Model Control Protocol)资源系统是将服务器数据暴露给客户端的核心机制,支持文本和二进制两种类型资源。资源通过唯一URI标识,客户端可通过资源列表或模板发现资源,并使用`resources/read`接口读取内容。MCP还支持资源实时更新通知及订阅机制,确保动态数据的及时性。实现时需遵循最佳实践,如清晰命名、设置MIME类型和缓存策略,同时注重安全性,包括访问控制、路径清理和速率限制等。提供的示例代码展示了如何用JavaScript和Python实现资源支持。
710 80
|
5月前
|
弹性计算 NoSQL 数据库
阿里云服务器如何备份数据?
阿里云服务器数据备份有多种方法,用户可按需选择。主要方式包括:1)快照备份,创建云盘的时间点拷贝,支持定期备份与数据恢复;2)数据库备份DBS,适用于多种环境的数据库备份,涵盖本地及多云场景;3)云备份Cloud Backup,提供统一灾备平台,支持ECS整机、数据库、文件系统等全方位备份,保障数据安全。
|
5月前
|
存储 数据库 Python
使用HTTP POST协议将本地压缩数据发送到服务器
总的来说,使用HTTP POST协议将本地压缩数据发送到服务器是一个涉及多个步骤的过程,包括创建压缩文件,设置HTTP客户端,发送POST请求,以及服务器端的处理。虽然这个过程可能看起来复杂,但一旦你理解了每个步骤,就会变得相对简单。
170 19
|
6月前
|
关系型数据库 MySQL Linux
在Linux环境下备份Docker中的MySQL数据并传输到其他服务器以实现数据级别的容灾
以上就是在Linux环境下备份Docker中的MySQL数据并传输到其他服务器以实现数据级别的容灾的步骤。这个过程就像是一场接力赛,数据从MySQL数据库中接力棒一样传递到备份文件,再从备份文件传递到其他服务器,最后再传递回MySQL数据库。这样,即使在灾难发生时,我们也可以快速恢复数据,保证业务的正常运行。
283 28
|
6月前
|
安全 网络安全 定位技术
网络通讯技术:HTTP POST协议用于发送本地压缩数据到服务器的方案。
总的来说,无论你是一名网络开发者,还是普通的IT工作人员,理解并掌握POST方法的运用是非常有价值的。它就像一艘快速,稳定,安全的大船,始终为我们在网络海洋中的冒险提供了可靠的支持。
189 22
|
7月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
6月前
服务器数据恢复—NTFS分区误格式化数据怎样挽回?
NTFS文件系统下格式化在理论上不会对数据造成太大影响,但有可能造成部分文件目录结构丢失的情况。下面介绍一个人为误操作导致服务器磁盘阵列中的NTFS文件系统分区被格式化后的服务器数据恢复案例。
|
9月前
|
存储 安全 网络安全
服务器感染了.baxia勒索病毒,如何确保数据文件完整恢复?
近年来,勒索病毒如.baxia不断演变,利用漏洞、社交工程等手段加密文件,威胁范围扩大。加密货币的兴起使其支付方式更匿名,追踪困难。技术支持尤为重要,添加技术服务号(shuju315),专业团队提供数据恢复方案。面对复杂解密要求,包括赎金支付、个人信息提供和执行特定操作,需保持冷静并寻求帮助。防御措施包括加强安全意识、定期备份数据、安装杀毒软件、避免未知文件、更新系统及制定应急响应计划。
354 11
|
11月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
227 3
|
11月前
|
存储 运维 算法
服务器数据恢复—raid6阵列硬盘重组raid5阵列如何恢复raid6阵列数据?
服务器存储数据恢复环境: 存储中有一组由12块硬盘组建的RAID6阵列,上层linux操作系统+EXT3文件系统,该存储划分3个LUN。 服务器存储故障&分析: 存储中RAID6阵列不可用。为了抢救数据,运维人员使用原始RAID中的部分硬盘重新组建RAID并进行了初始化。 初始化开始一段时间后,运维人员察觉到情况有异后强制终止初始化,这个时候初始化已经完成一半以上。数据部分已被不可逆的破坏。

热门文章

最新文章