使用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:大名鼎鼎的文档协 ...
随机推荐
- 作业类型维护流程(CO)
一.建立作业类型——kl01 目的: 藉由做作業類型執行生產報工 目錄路徑: 會計à成本控制à成本中心會計à主檔資料à作業類型à個別處理à KL01 - 建立 Transaction Code: ...
- jQuery选择：子代元素与后代元素的区别
(1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...
- 异常之【You have an error in your SQL syntax】
异常如下: ### Error updating database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException ...
- Oracle：常用操作（定时作业，逻辑导入，数据泵导入）
1.逻辑导入: /*第1步:创建临时表空间 **/ create temporary tablespace user_temp1 tempfile 'D:\app\Administrator\orad ...
- MYSQL中重命名procedure的一种方法
最近有用到对存储过程(procedure)重命名的功能,在网上找了一下资料都没有讲到在mysql中是如何实现的,当然可以删掉再重建,但是应该有别的方法,在"mysql"这个数据库( ...
- 1 初识数据库操作 2 JDBC 入门
1 JDBC:Java Database Connectivity(Java 数据库连接) 1.1 JDBC 入门程序 注册驱动:Class.forName("com.mysql.cj.jd ...
- Emgu 学习笔记(8)之膨胀腐蚀
static void Main(String[] args) { Mat img = CvInvoke.Imread(); Mat d = new Mat(); Mat e = new Mat(); ...
- sqlalchemy一对多的关系
#encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func,and_,or_,Text ...
- linux下安转nodejs
转载自:https://www.cnblogs.com/zhuawang/p/7617176.html 在Linux系统安装Nodejs 最简单步骤 1.去官网下载和自己系统匹配的文件: 英文网址:h ...
- 同sql server不同database间的数据访问
虽未经测试,但是应该是登陆名同时具有此2数据库访问权限啦. select * from [basename].dbo.[tablename] done.