使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock

使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock

在上一篇《electron快速开始》里讲述了如何快速的开始一个electron的应用程序,既然electron是可以直接使用node环境编写程序的,那么我们就可以有很多可以处理的事,比如我们可以做个可视化的前端构建工具,或者我们可以建一个后台的管理系统。基于这两天,我简单的做了一个模拟后端接口的http服务。

它可以完成如下功能:

  1. 它可以创建http本地服务
  2. 它可以模拟后端的多种请求方式,如get、post、put、delete
  3. 可以格式化json字符串
  4. 可以验证请求的参数合法性

...等等,凡是在后端接口未写好前的,前后端联调,都可以用到,它可以让你的后期前后端联调更顺畅,减少前后端不一致的情况。它的主界面是这样的:

主界面很简单,就是几个按钮,可以修改端口号,开启http服务,这里的服务是express创建的。然后可以管理你所模拟的所有接口,这些数都保存在本地文件中。添加接口的界面如下:

这里的url就是localhost:8080/a/b/c了,可以自定义任何结构 ,不再需要自己创建对应的文件夹。参数也是可以是多个,返回值,目前只做了成功的默认返回,后面版本会做出条件判断的返回等功能。

管理的界面如下:

管理界面比较简单,主要就是修改、删除和预览功能。预览就是用本地默认浏览器打开该地址。

这里新增了一个json格式验证的功能:

后期我们还可以把打包js和less的功能都集成进去,基本上来说,nodejs、electron给了web的无限可能。

mock系统的下载地址:

http://www.lovewebgames.com/app/mock/mock.exe

http://www.react-cn.com/app/mock/mock.exe

http://www.react-cn.com/app/mock/mock.rar

该项目的github地址是:https://github.com/tianxiangbing/mock

打包electron时遇到的网络下载卡住的问题,可以单独去github上下载https://github.com/electron/electron/releases压缩包后复制到用户目录的.electron文件夹中,再修改打包命令与该压缩包一致即可:

electron-packager . mock --electron-version=0.37.8 --asar.unpack=protocol-link.html --overwrite --platform=win32 --arch=x64 --icon=src/icon/favicon.ico --out=out  --version-string.FileDescription=‘mock‘ --version-string.ProductName=‘mock‘

关于跨域问题,可以使用nginx代理。

时间: 2024-12-22 03:29:20

使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock的相关文章

使用Electron开发PC客户端

最近公司要求开发一个PC客户端,要求不能使用.NET开发(为了不让用户安装.net framework),所以就选择了Electron(随口听别人说了一句,之前从来没有接触过).目前项目要完毕了,所以就想记录一下在开发过程中遇到的一些问题和开发过程中的一些思路. 1.Electron的介绍 2.如何下载安装Electron 3.PC客户端是什么样的项目,它实现了什么功能 4.整体框架的描述 5.第一次启动软件需要做的事情 6.登录的实现:登录页面的加载 7.登录的实现:点击登录按钮后的操作 8.

iOS开发实践:一个完整微博客户端的实现

本文基于数据字典和数据流图两种工具讲述一个完整微博客户端的实现.数据字典和数据流图都可以用来表达线程的执行流程,同时定义了需要的类,是进一步设计类的基础. 数据字典实际上是一张表,表的第一个字段是程序代码中的标识符,其它字段具体描述它在线程中被如何使用,以及它所依赖的其它元素,数据字典中各个标识符基本上也是按照线程的执行流程来排序. 数据流图是一个平面拓扑结构,每个节点或者是外部数据,或者是可被线程执行的代码模块.从外部数据到代码模块的边意味着线程在执行代码模块的时候需要用到外部数据,从代码模块

iOS开发实践:一个类微博客户端从启动到与用户交互的过程

本文基于数据字典和数据流图两种工具讲述一个完整微博客户端的实现.数据字典和数据流图都可以用来表达线程的执行流程,同时定义了需要的类,是进一步设计类的基础. 数据字典实际上是一张表,表的第一个字段是程序代码中的标识符,其它字段具体描述它在线程中被如何使用,以及它所依赖的其它元素,数据字典中各个标识符基本上也是按照线程的执行流程来排序. 数据流图是一个平面拓扑结构,每个节点或者是外部数据,或者是可被线程执行的代码模块.从外部数据到代码模块的边意味着线程在执行代码模块的时候需要用到外部数据,从代码模块

开发一个App要100万?用互联网思维只要1万

近期经常看到一些关于开发一个App要多少钱的文章出来,有的说App开发要100万,有的说要60万,其实这个不叫开发App,那叫做项目或者创业开公司要多少钱才对,而这种情况下之所以要这么多钱,也是基于一个对行业啥都不懂的情况下来计算的,所有的东西都需要你花钱来完成的. 我们可以想象一下,你对移动互联网一窍不通,但是你想开个公司,创业做个App,那么还真是啥都要重新招,你需要招聘四个客户端(两个负责ios.两个负责android),两个服务端,一个设计师,一个产品经理,一个人事,一个行政,甚至还需要

用python+django+twistd 开发一个属于自己的运维系统

开源的运维系统不少,比如nagios.zabbix.cati等等,但是遇到自己个性化的运维需求的时候,总是显的力不从心!最近在学习python,所以就考虑用python+django+twisted来定做一个完全个性化的运维系统. 运维系统有几个主要的功能:监控.分析.报警.更甚者直接根据分析的结果进行反应操作.而以上几点通过上述的框架可以比较容易的实现. 下面上图说明: 使用freemind整理了下思路: 下面是一些代码段,完整的代码下载见文档底部: Server: #!/usr/bin/en

【如何快速的开发一个完整的iOS直播app】(原理篇)

一.个人见解(直播难与易) 直播难:个人认为要想把直播从零开始做出来,绝对是牛逼中的牛逼,大牛中的大牛,因为直播中运用到的技术难点非常之多,视频/音频处理,图形处理,视频/音频压缩,CDN分发,即时通讯等技术,每一个技术都够你学几年的. 直播易:已经有各个领域的大牛,封装好了许多牛逼的框架,我们只需要用别人写好的框架,就能快速的搭建一个直播app,也就是传说中的站在大牛肩膀上编程. 二.了解直播 热门直播产品 映客,斗鱼,熊猫,虎牙,花椒等等 直播效果图 直播效果.jpeg 1.一个完整直播ap

【如何快速的开发一个完整的iOS直播app】(播放篇)

前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkplayer成功后,就算完成直播功能一半的工程了,只要有拉流url,就能播放直播啦 本篇主要讲解的是直播app中,需要用到的一个很重要的开源框架ijkplayer,然后集成这个框架可能对大多数初学者还是比较有难度的,所以本篇主要教你解决集成[ijkplayer]遇见的各种坑. 很多文章,可能讲解的是如何做,我比较注重讲解为什么这样做,大家有什么不明白,还可以

自己动手模拟开发一个简单的Web服务器

开篇:每当我们将开发好的ASP.NET网站部署到IIS服务器中,在浏览器正常浏览页面时,可曾想过Web服务器是怎么工作的,其原理是什么?“纸上得来终觉浅,绝知此事要躬行”,于是我们自己模拟一个简单的Web服务器来体会一下. 一.请求-处理-响应模型 1.1 基本过程介绍 每一个HTTP请求都会经历三个步凑:请求-处理-响应:每当我们在浏览器中输入一个URL时都会被封装为一个HTTP请求报文发送到Web服务器,而Web服务器则接收并解析HTTP请求报文,然后针对请求进行处理(返回指定的HTML页面

HBase概念学习(八)开发一个类twitter系统之表设计

这边文章先将可能的需求分析一下,设计出HBase表,下一步再开始编写客户端代码. TwiBase系统 1.背景 为了加深HBase基本概念的学习,参考HBase实战这本书实际动手做了这个例子. 2.需求 这是一个用户推特系统,用户登陆到系统,需要维护用户的基本信息,然后用户可以发帖和其他用户进行互动.用户之间可以相互关注,用户可以浏览关注用户的推文等等. 这是一个比较简单的推特系统,不考虑用户之间的私信,用户评论推特等功能. 3.概要设计 3.1表设计 首先需要设计三个表:用户表,推特表以及用户