­

在線API文檔管理工具Simple doc

  • 2019 年 11 月 7 日
  • 筆記

Simple doc是一個簡易的文檔發布管理工具，為什麼要寫Simple doc呢？主要原因還是github的wiki並不好用；沒有目錄結構，文章沒有Hx標籤索引，最悲劇的是文章編輯的時候不能直接圖片粘貼和文件上傳;為了滿足自己的需求也順帶幫Beetlex寫個完整的web示例所以花了些時間寫了Simple doc.雖然Simple doc功能簡單但在文檔展現上還是要比github的wiki好上不少，所以在完成後也把github的wiki遷到這上面來了（畢竟都是基於markdown所以遷過來也簡單）。

功能

  • 基於markdown

    (如果不會markdown那這個工具就沒法用了)

  • 支援圖片和附件上傳

    默認實現只支援jpa,png,zip和rar文件上傳（最大2MB，這個限制可以自行修改），上傳方式支援：拖放，粘貼等.

  • 支援各種程式碼主題

    支援數十種程式碼主題，由瀏覽者選擇自己喜歡的主題

  • 支援兩層目錄列表

    大部分情況下兩層目錄能夠滿足大部分需求，所以在實現上沒有支援更多層次的目錄結構

  • 支援文章結構標籤

    只要文章超過3個h2,h3,h4的標籤則會對應生成文件的目錄列表，方便文章內容定位

運行環境

支援linux,windows等裝有.net core 2.2或更高版的服務環境。

編譯項目

從https://github.com/IKende/SimpleDoc下載最新的源碼，用vs2017或更高版本打開然後發布即可；發布完成後目錄下有run.bat和run.sh兩運行文件運行即可。如果想運行windows service需要自行封裝，想在linux下後台運行可以在用nohup &指令來運行。

HTTP配置

項中的HttpConfig.json是配置相關服務，主要用於配置服務埠，地址和HTTPs等。詳細可以查看http://doc.ikende.com/#c6d82c8e677f43cfa1127f32c308caa1

運行效果

可以通過查看http://doc.ikende.com實際部署效果，這是beetlex的官方文檔地址。

選擇程式碼主題

Simple doc的程式碼主題是瀏覽者自己來選擇，選擇後查看其他文章里的程式碼都是這一主題來展現。

管理

既然是簡易版，那在功能管理當然也是直接粗暴,功能和介面都相當簡陋!功能主要有三個:分類管理，文章管理和配置(注意：登陸的用戶名是 admin，密碼是123456).

不過分類還是文章都有內容，如果分類有內容的情況在瀏覽時會把內容展現出來，如果沒有則會拿分類下的第一篇文章來展現。除了基礎資訊外還提供是否發布和排序的順序設置，如果沒有發布的分類或文章是不會被展現出來。

文章編輯

接下來讓你看一下什麼是最簡陋的文檔編輯頁面了……

可以根據需要切換編輯預覽模式

不要驚訝你看到http://doc.ikende.com上的所有文檔就是這樣編輯出來的;其實markdown還真不需要什麼多功能的文本編輯器, 有一個文檔輸入框就足夠了。但上面的輸入框還有一個很重要的功能，就是支援圖片粘貼和拖放，再結合下面的上傳按鈕就足可以完成附件添加功能.編輯旁邊有一個預覽按鈕，可以切換過去看當前編輯內容的完整展現。

管理配置

主要用於修改網站標題，管理密碼和JWT對應的Key

實現技術

Simple doc是基於BeetleX.FastHttpApi和vuejs來實現，對於我這樣一個後端人員來vuejs的切入還是比較容易的，說實話用起還真是爽！在這個項目除了了解到BeetleX.FastHttpApi和vuejs的結合外還能了解到一些js處理粘貼文件上傳和圖片大小切割的一些實現功能。其實為了更好地和vuejs還封裝了一個對應的client類，以下簡單地展現一下Simple doc的登陸程式碼:

  • html
<form>      <div class="form-group">          <label>用戶名</label>          <input type="text" v-model="login.data.name" class="form-control input-sm">      </div>      <div class="form-group">          <label>密碼</label>          <input type="password" v-model="login.data.pwd" class="form-control input-sm">      </div>      <button type="button" @click="login.post()" class="btn btn-default btn-sm">登陸</button>  </form>
  • javascript
var login = new beetlexAction("/admin/Login", { name: '', pwd: '' });  login.requesting = function (d) {      if (!d.name || !d.pwd) {          alert('輸入登陸用戶名和密碼！');          return false;      }      return true;  };  login.requested = function (r) {      if (r) {          window.location.href = "/admin/";      }      else {          alert('用戶名或密碼不正確！');      }  };  var page = new Vue({      el: '#page',      data: {          info: webSiteInfo,          login: login,      }  });
  • server api
        [SkipFilter(typeof(AdminFilter))]          public object Login(string name, string pwd, IHttpContext context)          {              if (name == Webconfig.Default.Data.Usename && pwd == Webconfig.Default.Data.Password)              {                  JWTHelper.Default.CreateToken(context.Response, name, "admin");                  return true;              }              return false;          }

如果你對這種應用技術感興趣可以關注Simple doc的源碼和BeetleX

VirMach 便宜 VPS

QNews

QNews