動手寫點東西系列之利用vue寫一個api文檔工具

然後就有了寫一個api工具的想法

GitHub地址

在線Demo

整體邏輯很簡單，利用cmd模塊運行時動態載入機制

也就是require（變數+字元串拼接）（這樣寫webpack打包時會報warn）

側邊欄搜索

採取了簡單暴力的做法，通過config.api 配置每個api文檔以及其對應的相對路徑

export default {n getlist : 獲取產品列表,n getcatelist : 獲取欄目列表n}n

之後在leftView.vue組件中讀取配置並渲染

搜索功能則通過indexOf實現模糊查詢

全部都是簡單的基於vue 的雙向綁定

點擊後通過路由到apiView.vue組件對應的路由並帶上api文檔的路徑作為參數，在主視圖模塊會讀取這個參數並動態載入

api文檔文件說明

module.exports = {n title:api名字,n name:中文名字,n methods:GET or POST,n req:{n //request 參數 n //例子：n //page:頁碼,n //count:條數,n //fn:n },n res:{n //返回參數n //例子：n /*******n "status": "success",n "message": "獲取正常！",n "data": [n {n "id": "7",n "url": "/8/7.html",n "title": "愛馬仕1",n "descs": "愛馬仕",n "img": "/uploads/img/20150824/55dac3ac808f9.jpg",n }n ]n *****/n }n}n

req 和 res 按照介面定義好的參數 寫進去就行，其中req會被當成在線調試時的參數，res則純展示用

主視圖模塊（apiView.vue）

通過路由params參數取到api文檔的地址

渲染title，name，methods，res，req 參數對應的內容

req 通過pre標籤並且JSON.stringify() 方法可以設置縮進 比如4

調試參數輸入模塊

處理方式是取到req後 通過for in 遍歷req 並用新對象取得req 的 所有key 並通通設置成空的value，這樣渲染到輸入框就是空值了

this.apiData = apiModuleList;nlet list = {};nfor(let v in this.apiData.req) {n list[v] = ;n}nthis.inputData = list;n

將inputData傳遞給template

<template v-for="(index,item) in inputdata">n <h4 class="form-head">{{items.req[index]}} ({{index}})</h4>n <input type="text" class="inputtext" v-model="inputdata[index]">n <br/>n</template> n

到此req 以及括弧中的註解渲染出來了並且 input 和 inputData參數綁定

當點擊send 按鈕時，就會將 inputData 通過 當前介面文件配置的title介面名，也就是路徑發送出去（整個url 的 domain 在config 中配置，這裡只是path或者query的欄位）

等待返回 ，將結果渲染出來顯示在第三塊容器中

以上已經完成了主流程

配置文件

config.main

配置domain 以及公告path或者query以及headers

export default {n domain:http://demo.yhcms.cn,n public:/index.php/,n headers:,n}n

config.code

配置錯誤嗎列表，顯示在／errorcode 路由的模塊中

export default {n 10001:未登陸,n 10002:登陸態過期,n 10003:賬號被鎖定n}n

第一次寫文章，思維混亂，表述不清 ing。。。。。。。