在线API文档管理工具Simple doc

Simple doc 是一个简易的文档发布管理工具,为什么要写 Simple doc 呢?主要原因还是 githubwiki 并不好用;没有目录结构,文章没有 Hx 标签索引,最悲剧的是文章编辑的时候不能直接图片粘贴和文件上传;为了满足自己的需求也顺带帮 Beetlex 写个完整的 web 示例所以花了些时间写了 Simple doc .虽然 Simple doc 功能简单但在文档展现上还是要比 githubwiki 好上不少,所以在完成后也把 githubwiki 迁到这上面来了(毕竟都是基于markdown所以迁过来也简单)。

功能

  • 基于markdown

    (如果不会 markdown 那这个工具就没法用了)

  • 支持图片和附件上传

    默认实现只支持 jpa , png , ziprar 文件上传(最大2MB,这个限制可以自行修改),上传方式支持:拖放,粘贴等.

  • 支持各种代码主题

    支持数十种代码主题,由浏览者选择自己喜欢的主题

  • 支持两层目录列表

    大部分情况下两层目录能够满足大部分需求,所以在实现上没有支持更多层次的目录结构

  • 支持文章结构标签

    只要文章超过3个h2,h3,h4的标签则会对应生成文件的目录列表,方便文章内容定位

运行环境

支持 linux , windows 等装有 .net core 2.2 或更高版的服务环境。

编译项目

从https://github.com/IKende/SimpleDoc下载最新的源码,用vs2017或更高版本打开然后发布即可;发布完成后目录下有 run.batrun.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.FastHttpApivuejs 来实现,对于我这样一个后端人员来 vuejs 的切入还是比较容易的,说实话用起还真是爽!在这个项目除了了解到 BeetleX.FastHttpApivuejs合外还能了解到一些js处理粘贴文件上传和图片大小切割的一些实现功能。 其实为了更好地和 vuejs 还封装了一个对应的client类,以下简单地展现一下 Simple doc 的登陆代码:

  • html

  • 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