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或更高版的服務環境。
編譯項目
從//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
轉載自://www.cnblogs.com/smark/p/11811965.html