使用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:大名鼎鼎的文档协 ...
随机推荐
- .NET 实现复制粘贴功能
老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...
- ServletContainerInitializer
在web容器启动时为提供给第三方组件机会做一些初始化的工作,例如注册servlet或者filtes等,servlet规范中通过ServletContainerInitializer实现此功能. 每个框 ...
- 扩展Caylay定理
参考资料: https://hyscere.github.io/2019/09/05/%E6%89%A9%E5%B1%95Caylay%E5%AE%9A%E7%90%86/ https://www.c ...
- 【Python开发】使用python中的matplotlib进行绘图分析数据
matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 它的文档相当完备, ...
- 网站性能优化（website performance optimization）2
我们先研究下构建渲染树前的几个步骤:也就是DOM和CSSOM,通常这些步骤的效果最差使你的网页呈现速度非常慢,我们是讨论尽可能快的将HTML流式传输给客户端,使浏览器能够开始构建DOM,还有其他注意事 ...
- 脚本自动创建ldap账号
背景:客服那边人员流动性大,经常需要配置账号,每次创建账号配置权限比较繁琐. 配置脚本: ldapadduser.sh #!/bin/bash # add ldap user ] || [[ $ -n ...
- 内存溢出之PermGen space异常解决
1.出现的异常: java.lang.OutOfMemoryError: PermGen space at sun.misc.Launcher$ExtClassLoader.getExtClassLo ...
- Spring实现构造注入
Spring通过setter访问器实现对属性的赋值,这种做法称为设值注入:Spring还提供了通过构造方法赋值的能力,称为构造注入.使用设值注入时,Spring通过JavaBean的无参构造方法实例化 ...
- 对C++类的继承和派生的理解
C++中的继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承类似,例如儿子继承父亲的财产. 1.继承(Inheritance)可以理解为一个类从另一个类获取成员变量和成员函数的过程. ...
- NOIP 2017 逛公园 题解
题面 这道题是一道不错的计数类DP: 首先我们一定要跑一遍dijkstra来求得每个点到1号点的最短路: 注意题干,题中并没有说所有点都可以到达n好点,只说了存在一条1号点到n号点的路径:所以我们在反 ...