使用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 = newmarkdown({html:true,langPrefix:'code-',
})functionmkCate(cate) {fs.mkdir(path.join(basePath, cate),function(err) {})
}functiongetDirsInDocsFolder() {var paths =fs.readdirSync(basePath)returnpaths
}functiongetMdsInFolder(folderName) {let paths=fs.readdirSync(path.join(basePath, folderName))returnpaths
}functionwriteMdFile(folderPath, fileName, content) {fs.writeFile(path.join(basePath, folderPath, fileName), content,function(err) {console.error(err)})
}functionreadMd(fileName, folderPath) {let content= fs.readFileSync(path.join(basePath, folderPath, fileName), 'utf-8')returncontent
}functionreadMdFileToHtml(fileName, folderPath) {var content =readMd(fileName, folderPath)var html =md.render(content)returnhtml
}functionmain() {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.bodymkCate(cate)})app.get('/mds', function(req, res, next) {const { cate }=req.queryif (!cate) res.send([])var mds =getMdsInFolder(cate)res.send(mds)})app.get('/mdhtml', function(req, res, next) {const { cate, name }=req.queryvar html =readMdFileToHtml(`${name}`, cate)res.send(html)})app.get('/md', function(req, res, next) {const { cate, name }=req.queryvar md =readMd(`${name}`, cate)res.send(md)})app.post('/md', function(req, res, next) {const { cate, name, content }=req.bodywriteMdFile(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();

View Code

2. 前台

<!DOCTYPE html>
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="index.css"><scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head><body><h1>Caloch开洛奇</h1><nav><buttononclick="add('c',prompt('Category:'));">+</button><ulid="cates"><li><ahref="#"data-cate="cate">cate</a></li></ul></nav><hr><divclass="menu"><buttononclick="add('a',prompt('Name:'));">+</button><ulid="mds"><li><ahref="view.html?name='a1'"target="mainframe">文章.1</a></li></ul></div><divid="main"class="main"><iframeid="#mainframe"name="mainframe"src=""frameborder="0"></iframe></div><divid="main1"class="main"><textareaid="content"cols="20"rows="10"></textarea><buttonid="save">Save</button></div><footer>©Caloch开洛奇 2019~<spanid="today"></span></footer><script>varcurrent={}functionadd(key, val) {variframe=document.getElementById('#mainframe')switch(key) {case 'c':if(val) {mkCate(val)getCates()}break;case 'a':iframe.src= "view.html?name=" +val;break;default:break;}}functiongetCates() {$.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])})}functionmkCate(cate) {if(!cate)return$.post('/cate', { cate },function(data) {})}functiongetMds(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>`)
})})}functiongetMdHtml(cate, name) {$.get('/mdhtml?cate=' +cate+ '&name=' +name,function(data) {let $el=$('#main')$el.html(data)})}functiongetMd(cate, name, callback) {$.get('/md?cate=' +cate+ '&name=' +name,function(data) {let $el=$('#content')$el.text(data)})}functionsave(cate, name, content) {if(!name)return$.post('/md', { cate, name, content },function(data) {})}$.fn.timelyfy= function() {let $this =$(this)$this.html(newDate().toLocaleDateString())}functionshowContent() {$('#main').show()$('#main1').hide()}functionshowEditor() {$('#main1').show()$('#main').hide()}$(document).ready(function() {$.ajaxSetup({beforeSend:function(xhr, settings) {console.log(xhr)},dataFilter:function(data) {console.log(data)returndata}})$('#today').timelyfy()$('#main1').hide()getCates()$('#cates').on('click','a',function() {let $this =$(this)current.cate=$this.data().categetMds(current.cate)})$('#mds').on('click','a',function() {let $this =$(this)current.name=$this.data().nameconsole.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>

View Code

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:0;}}
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;
}

View Code

github repository:

https://github.com/CalosChen/mementowriter

转载于:https://www.cnblogs.com/hualiu0/p/11595530.html

使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system...相关推荐

php编写文件管理工具,php之markdown文档管理工具的实现代码
本文主要和大家分享php之markdown文档管理工具的实现代码,希望能帮助到大家. 主要目标: 1.可以多人编辑 2.可以在浏览器中查看 3.有一个可以折叠的目录 4.支持多级目录 5.支持mark ...
敏捷开发的技术文档管理
许多团队或个人都有一个观念是敏捷开发应该弱化技术文档管理,以达到敏捷的目的.其实不然,敏捷开发只是把开发的生命周期变成不断迭代的软件开发过程,在迭代的过程中应该包含了技术文档的整理完善,使其可以为下一 ...
云脉文档管理小程序轻松解决文档管理难题
手机h5访问地址:http://www.aipim.cn/docs 电脑端访问地址:http://www.yunmaiocr.com/goDoc 在日常处理办公文档过程中常常需要对纸质文档的文字内容进 ...
云脉文档管理小程序使办公更协同
在日常的工作当中,我们往往不是独自办公,而是团队合作居多.现因疫情如遇在家办公,需进行频繁文件处理,降低工作效率,团队工作中,文件的传输发送.修改审核,不仅浪费时间,还会增加沟通成本.那么如何让团队成 ...
方便实用的文档管理小程序
有时候出门了很多人办公忘了带电脑,然后用手机查找文件也找不到,只能干瞪眼着急,其实通过云脉文档管理小程序就可以轻松解决.依托自主研发的OCR识别技术的厦门云脉,推出了"云脉文档管理" ...
markdown文档管理工具
介绍电脑中存了很多markdown文档,为了管理这些文档,特写了这个md管理工具. 我的想法是,把现有的markdown文件复制到指定文件夹中,自动生成markdown的网页,不仅可以在自己电脑上运 ...
ShowDoc 软件开发团队接口文档管理利器
ShowDoc是一个非常适合IT团队的在线API文档.技术文档工具.你可以使用Showdoc来编写在线API文档.技术文档.数据字典.在线手册. 这里介绍 Showdoc 这款开源(免费)文档管理系统 ...
linux 帮助文档管理,Linux系统帮助文件使用——man命令
如何获取命令帮助: (1)如果是内键命令:help COMMAND 例如:help history 外部命令: COMMAND –help 例如:ifconfig –help (2 ...
写一个excel文档资源小程序（更新中）
大家好,我叫陈叫兽那么我想到了,我何不做一个excel资源小程序.只要我需要的时候就打开小程序输入关键词就能查找相应的文件,岂不是美滋滋? 说干就干那么我们先来确认一下,要怎么做.从一般程序员角度 ...

使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system...

使用nodejs开发一个markdown文档管理小系统(一)Using Nodejs to quickly develop a markdown management system...相关推荐

最新文章

热门文章