使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system
好多年没碰过前端jquery了，用一两天时间重温一下，刚好写个小工具, 不递归取文件夹和文件，只写一层，保持足够简单，验证和参数判断暂不写，毕竟只写了几个小时而已，功能算完备了,添加一个简单的管理员权限管理修改的所有功能即可放出去了，看来还不错
1. 后台
var fs = require('fs')
var path = require('path')
var basePath = 'docs'
let markdown = require('markdown-it')
var md = new markdown({
html: true,
langPrefix: 'code-',
})
function mkCate(cate) {
fs.mkdir(path.join(basePath, cate), function (err) {
})
}
function getDirsInDocsFolder() {
var paths = fs.readdirSync(basePath)
return paths
}
function getMdsInFolder(folderName) {
let paths = fs.readdirSync(path.join(basePath, folderName))
return paths
}
function writeMdFile(folderPath, fileName, content) {
fs.writeFile(path.join(basePath, folderPath, fileName), content, function (err) {
console.error(err)
})
}
function readMd(fileName, folderPath) {
let content = fs.readFileSync(path.join(basePath, folderPath, fileName), 'utf-8')
return content
}
function readMdFileToHtml(fileName, folderPath) {
var content = readMd(fileName, folderPath)
var html = md.render(content)
return html
}
function main() {
console.log('Starting web server')
var express = require('express')
var app = express()
app.use(express.static('.'))
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function (req, res, next) {
})
app.get('/cates', function (req, res, next) {
var list = getDirsInDocsFolder()
res.send(list)
})
app.post('/cate', function (req, res, next) {
const { cate } = req.body
mkCate(cate)
})
app.get('/mds', function (req, res, next) {
const { cate } = req.query
if (!cate) res.send([])
var mds = getMdsInFolder(cate)
res.send(mds)
})
app.get('/mdhtml', function (req, res, next) {
const { cate, name } = req.query
var html = readMdFileToHtml(`${name}`, cate)
res.send(html)
})
app.get('/md', function (req, res, next) {
const { cate, name } = req.query
var md = readMd(`${name}`, cate)
res.send(md)
})
app.post('/md', function (req, res, next) {
const { cate, name, content } = req.body
writeMdFile(cate, name, content)
res.send(content)
})
var server = app.listen(8081, function () {
const { address, port } = server.address()
console.log('Listening on http://%s:%s', address, port)
})
}
main();
2. 前台
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head> <body>
<h1>Caloch开洛奇</h1>
<nav>
<button onclick="add('c',prompt('Category:'));">+</button>
<ul id="cates">
<li><a href="#" data-cate="cate">cate</a></li>
</ul>
</nav>
<hr>
<div class="menu">
<button onclick="add('a',prompt('Name:'));">+</button>
<ul id="mds">
<li><a href="view.html?name='a1'" target="mainframe">文章.1</a></li>
</ul>
</div>
<div id="main" class="main">
<iframe id="#mainframe" name="mainframe" src="" frameborder="0"></iframe>
</div>
<div id="main1" class="main">
<textarea id="content" cols="20" rows="10"></textarea>
<button id="save">Save</button>
</div>
<footer>
©Caloch开洛奇 2019~
<span id="today"></span>
</footer>
<script>
var current = {} function add(key, val) {
var iframe = document.getElementById('#mainframe')
switch (key) {
case 'c':
if (val) {
mkCate(val)
getCates()
}
break;
case 'a':
iframe.src = "view.html?name=" + val;
break; default:
break;
}
} function getCates() {
$.get('/cates', function (data) {
let $el = $('#cates')
$el.empty()
data.forEach(cate => {
$el.append(`<li><a href="#" data-cate="${cate}">${cate}</a></li>`);
});
current.cate = data[0]
getMds(data[0])
})
} function mkCate(cate) {
if (!cate) return
$.post('/cate', { cate }, function (data) { })
} function getMds(cate) {
$.get('/mds?cate=' + cate, function (data) {
let $el = $('#mds')
$el.empty()
data.forEach(function (md) {
$el.append(`<li><a href="javascript:void(0)" data-name=${md} >${md}</a><span data-name=${md}>Edit</span></li>`)
})
})
} function getMdHtml(cate, name) {
$.get('/mdhtml?cate=' + cate + '&name=' + name, function (data) {
let $el = $('#main')
$el.html(data)
})
} function getMd(cate, name, callback) {
$.get('/md?cate=' + cate + '&name=' + name, function (data) {
let $el = $('#content')
$el.text(data)
})
}
function save(cate, name, content) {
if (!name) return
$.post('/md', { cate, name, content }, function (data) { })
} $.fn.timelyfy = function () {
let $this = $(this)
$this.html(new Date().toLocaleDateString())
} function showContent() {
$('#main').show()
$('#main1').hide()
} function showEditor() {
$('#main1').show()
$('#main').hide()
} $(document).ready(function () {
$.ajaxSetup({
beforeSend: function (xhr, settings) {
console.log(xhr)
},
dataFilter: function (data) {
console.log(data)
return data
}
})
$('#today').timelyfy()
$('#main1').hide()
getCates()
$('#cates').on('click', 'a', function () {
let $this = $(this)
current.cate = $this.data().cate
getMds(current.cate)
})
$('#mds').on('click', 'a', function () {
let $this = $(this)
current.name = $this.data().name
console.log(current); getMdHtml(current.cate, current.name)
showContent() })
$('#mds').on('click', 'span', function () {
let $this = $(this)
getMd(current.cate, $this.data().name)
showEditor()
})
$('#save').on('click', function () {
save(current.cate, current.name, $('#content').val())
})
}) </script>
</body> </html>
3. scss样式
$common-height: 150px;
@mixin with100minus($px) {
width: calc(100% - #{$px});
}
@mixin height100($px) {
height: calc(100% - #{$px});
}
* {
box-sizing: border-box;
}
h1 {
color: red;
}
ul li {
list-style-type: none;
}
nav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
text-align: right;
a {
margin-left: 15px;
display: block;
}
a:first-child {
margin-left:;
}
}
div {
float: left;
}
.menu {
width: 200px;
height: $common-height;
}
.main {
@include with100minus(200px);
@include height100(200px);
background-color: orange;
}
iframe {
width: 100%;
min-height: 500px;
}
footer {
position: fixed;
bottom: 0px;
text-align: center;
width: 100%;
}
button {
border-radius: 5px;
}
github repository:
https://github.com/CalosChen/mementowriter
使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system的更多相关文章
- 坚果云Markdown - 文档管理编辑器
坚果云Markdown - 文档管理编辑器 Markdown是什么? Markdown是一种上手简单.应用十分广泛的轻量级标记语法.您可以使用Markdown轻松记录您的灵感.想法.创意.整个记录过程 ...
- ShowDoc 软件开发团队接口文档管理利器
ShowDoc是一个非常适合IT团队的在线API文档.技术文档工具.你可以使用Showdoc来编写在线API文档.技术文档.数据字典.在线手册. 这里介绍 Showdoc 这款开源(免费)文档管理系统 ...
- 帮哥们做的一个整理文档的小工具（C++ string的标准函数还是很给力的，代码在最下）
其实把程序用到生活中,真的能节约不少时间!程序的力量是无穷滴! 哥们的毕业设计是要做法律文书匹配之类的东东,有一步是要抽取所有的法律法规名称,而刚好我们要处理的文件中,法规的名称之前都有个‘.‘,所以 ...
- C#解析Markdown文档，实现替换图片链接操作
前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...
- 使用Python从Markdown文档中自动生成标题导航
概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...
- 基于 React 开发了一个 Markdown 文档站点生成工具
Create React Doc 是一个使用 React 的 markdown 文档站点生成工具.就像 create-react-app 一样,开发者可以使用 Create React Doc 来开发 ...
- Api接口文档管理工具，你知道哪些呢？
上周看到有人在我的Github开源项目中提了个issue,说是否考虑接入swagger.那今天我就用swagger与其他接口文档工具做对比,同时说说Api接口文档工具的那点事.如今,在前后端分离开发的 ...
- 使用gitbook 发布一个教程文档网站
gitbook是一个好用的发布电子书的项目:使用gitbook 可以在本地写好文档再远程推送到库:也可以在gitbook提供的在线平台上制作电子书:要想在自己的服务器上使用gitbook 发布一个网站 ...
- Markdown 文档生成工具
之前用了很多Markdown 文档生成工具,发现有几个挺好用的,现在整理出来,方便大家快速学习. loppo: 非常简单的静态站点生成器 idoc:简单的文档生成工具 gitbook:大名鼎鼎的文档协 ...
随机推荐
- DEDECMS 漏洞汇总
日期:2019-08-08 10:20:28 更新: 作者:Bay0net 介绍: 0x01.组合拳拿 shell 漏洞版本:v5.5 - v5.7 前台任意用户密码重置 首先注册一个账户,账户名为 ...
- httplib/urllib实现
httplib模块是一个底层基础模块,可以看到建立HTTP请求的每一步,但是实际的功能比较少.在python爬虫开发中基本用不到 下面详细介绍httplib提供的常用类型和方法: httplib.HT ...
- ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串
这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '
- HCL试验六
交换机R1: syssysname R1interface loopback 0ip add 192.168.10.1 24quinterface g0/0ip address 10.1.1.1 30 ...
- sql注入知识点整理（基础版）
sql注入知识点整理(基础版) 基本步骤 判断是否报错 判断闭合符号 判断注入类型 构建payload 手工注入或者编写脚本 基本注入类型 报错型注入 floor公式(结果多出一个1):and (se ...
- C++ 11的移动语义
目录 可拷贝和可移动的概念 移动构造函数和移动赋值函数 小结移动构造和移动赋值 std::move() 使用 std::move 实现一个高效的 swap 函数 Move and swap 技巧 参考 ...
- 时间转换：DateTimeExtensions
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- flask_alembic操作
HOSTNAME = '127.0.0.1' PORT = 3306 DATABASE = 'first_sqlalchemy_demo' USERNAME = 'root' PASSWORD = ' ...
- SpringCloud（0） 外行人都能看懂的SpringCloud，错过了血亏！
一.前言 只有光头才能变强 认识我的朋友可能都知道我这阵子去实习啦,去的公司说是用SpringCloud(但我觉得使用的力度并不大啊~~)... 所以,这篇主要来讲讲SpringCloud的一些基础的 ...
- 10分钟学会web通讯的四种方式，短轮询、长轮询(comet)、长连接(SSE)、WebSocket
一般看到标题我们一般会产生下面几个问题??? 什么是短轮询? 什么是长轮询? 长连接又是什么? wensocket怎么实现呢? 他们都能实现web通讯,区别在哪呢,哪个好用呢? 接下来我们就一个个来了 ...