http://www.50css.com/50_api_doc/src/index.html#index/login 接口测试功能因暂未部署接口的服务器端,暂时无法演示
-
服务器端 可以是任意http服务器,包括但不限于:nginx、apache、iis。
-
客户端 任意能支持vue的浏览器就行,如:chrome、360安全浏览吕在、IE11。
-
把json格式的数据生成在线接口文档 可用自己熟悉的编辑器编辑json文件以生成接口接口文档(稍后会推出生成word文档和pdf文档的功能) 没有使用word、wps等软件编辑文件时的卡顿、格式不统一等问题 没有使用在线用浏览器编辑文档的没有语法变色、屏幕界面小、没有强大的快捷键、保存速度慢……等编辑器该有的功能 程序小巧打开(纯html+js+css运行)本地在线文档或打开远程在线文档的速度都远比打开wrod文档或其它在线API文档速度快
-
生成的在线文档同时具有调试接口的功能
-
因为项目文档数据都是json格式方便二次开发其它各种功能
-
可根据接口文档的json数据生成部分ThinkPHP代码
-
可根据接口文档的json数据生成建表的MySql代码
把src目录设为网站目录,然后用 http 方式浏览 src 目录下的 index.html 文件,即可浏览接口文档
-
/src/css 此目录下的文件为本项目所用的css文件
-
/src/data 此目录下的文件为本项目所用的接口数据json示例文件
/src/data/subject.js 此为项目数据配置文件(json格式),此文件内可配置:项目名称、接口URL前缀、文档根目录路径、默认的请求方式、默认的返回数据格式、公共的请求参数、公共的返回参数…… 等数据,详情可打开此文件查看
/src/data/admin/index/login.js 此为登录接口文档示例数据配置(json格式),此文件内可配置:接口中文名称、请求参数、排除的请求参数、返回参数…… 详情详情可打开此文件查看 其中“排除的请求参数”是指在项目数据配置文件里配置的公共的请求参数当中在本接口里需要排除的参数
-
/src/images 此目录下的文件为本项目所用的图片文件
-
/src/js 此目录下的文件为本项目所用的js文件
/src/js/pub.js 此目文件为公共函数文件,此文件里的公共函数都是通用都可以复制到别的项目使用
/src/js/api_doc.js.js 此文件为本项目的主程序文件,目前此文件只有16k,所以本项目程序非常小巧。 此文件主要运行流程:
-
创建一个vue 实例;
-
当本vue实例创建时 vue钩子 created 被执行 2.1 created执行时加载项目数据(示例里的是加载“/src/data/subject.js”) 2.2 设置监听窗口的滚屏事件,当窗口滚屏时记忆滚屏值,以便下次打开页面时恢复到上次滚屏到的位置 2.3 加载项目数据完成后 先设置 项目数据到vue的相应data里,再调用this.setTheApiData 初始化接口参数
-
this.setTheApiData 初始化接口参数 执行过程 3.1 获取当前接口定义数据的文件路径(可由项目数据指定或由锚点链接获取) 3.2 给“编辑”按钮加上当前接口定义数据的文件路径的编辑链接,以实现可调用编辑器编辑当前接口文档的定义数据 3.3 加载当前接口定义数据
-
加载当前接口定义数据完成后的处理过程 4.1 调用 this.initApiParameter 初始化接口参数 4.1.1 隐藏接口调试结果div 4.1.2 拼接当前接口的请求URL(主要是显示接口URL和接口调试功能用) 4.1.3 公共的请求参数和业务请求参数合并得到最终请求参数,以及处理初始化默认值 4.1.4 生成TP验证规则代码 此功能以后考虑做成插件形式 4.1.5 公共的返回参数和业务返回参数合并 4.1.6 成mysql建表代码 此功能以后考虑做成插件形式
4.2 更改页面标题为当前项目名称加上当前接口名称等 4.3 给左侧菜单里当前接口加上on样式 4.4 恢复上次记忆的状态:滚屏到上次滚屏的位置和切换到上次的选项卡
-
切换接口文档方法 switchDoc 在左侧菜单里点击了其它接口文档的锚点链接时触发
-
切换选项卡方法 switchTab 在页面主选项卡里“接口定义、接口测试、PHP代码生成、MySql代码生成”四个选项卡被点击切换时触发
-
记住token的方法 saveToKen 在页面左侧菜单点击记住token时触发
-
接口测试表单被提交方法apiTestSubmit 在接口测试表单被提交时触发
-