本地服务器接口搭建

发表于 | 分类于 ，

实现功能

  1. 完整的操作页面
  2. 首页展示所有保存的接口列表
  3. 创建的接口保存到本地
  4. 支持重新编辑
  5. 编辑过程实时预览和错误提示
  6. 根据接口名称或者url进行检索
  7. 提供url跨域调用

下载完成安装依赖就可使用:选中jsonServer–右键open with vscode–npm install

模拟数据接口实现方式

  • 1.直接代码里面js本地造数据
1
2
3
4
5
6
7
8
9
...
var data = {...}
...
//这种方案适合小型结构的数据，一旦数据过于庞大，不适合放在js文件里面，不利于维护
//不能很好的模拟ajax
$.ajax({
    url:'..'//这个时候ajax接口不存在，调不通
})
//不能重复利用，上生产肯定要删掉

实现本地化接口服务

本文介绍了一个简单的平台化方案，创建一个本地化的服务系统，这样得到数据格式之后，本地生成一个可用的 url 用于ajax请求，而且还可以让数据持久化，如果放在局域网内，接口还可以共享给小伙伴。

说到持久化，那么必须涉及到数据的存储，用于存储的数据库有很多，我以前用过mongodb结合nodejs使用，也是蛮好的，但是数据库安装也蛮麻烦的，我们这里有一个更简便的，硬盘本身就是一个“数据库” ，所以我们可以使用nodejs的fs模块直接创建json文件，读取json文件。这样创建的每一个json文件都对于一个接口服务，只要不删除，就可以一直重复利用。

使用方法介绍

  1. github下载源码，并执行 npm install 安装

    https://github.com/kliuj/local-ajax-api

  2. 启动node服务，node app.js。 （建议使用 supervisor app.js 可以自行重启服务，通过npm install supervisor -g 安装模块）

  3. 打开首页 http://localhost:3000/ 建议chrome浏览器查看

    clipboard.png

  4. 点击创建接口，API名称用来描述接口左右，API url用来调用数据，都是必填。如图，我们创建一个接口 testapi 可以实时预览格式化的json数据和提示错误。（建议使用网上更完整的工具预览，可以快速定位格式错误。）

    API url这一栏填写单词就行

    图片描述

    创建完成点击最下面的保存按钮，提示保存成功就完成了接口的创建！

  5. 使用接口，根据刚刚创建的url：testapi 生成一个链接 http://localhost:3000/getjson…
    可以在控制台调用一下这个url可以看出就是我们刚刚存储的json数据。
    clipboard.png

  6. 搜索功能：在搜索框输入接口中文描述名称或者apiurl的名称即可。

  7. 二次编辑功能：创建完成接口之后，首页或者搜索结果会显示二次编辑入口，点击就会显示上次保存的数据和格式

    clipboard.png

  8. 注意：ajaxapilist.json 存着一张关系表，对应所有的接口描述名称和url，用于查询，建议不要修改。

使用说明文档：https://segmentfault.com/a/1190000007387454