node+express之讀取md檔案並在前端顯示
阿新 • • 發佈:2018-11-23
在近期用node的一個專案中,有用到讀取檔案和顯示md檔案。在此進行講解:
不用ejs和jade模板引擎
1.安裝依賴模組
我們會用到marked 和 fs 模組,所以先在專案中安裝marked、fs 模組:
npm install marked fs
2.相關路由設定
在你需要的路由內設定:
var express = require('express');
var router = express.Router();
var fs = require('fs');
var marked = require( "marked" );
router.post('/filename' , function(req, res) {
var path="./bin/1/使用express設定cookie.md";
fs.readFile(path, function(err, data){
if(err){
console.log(err);
res.send("檔案不存在!");
}else{
console.log(data);
str = marked(data.toString());
console.log(str);
res.json(str) ;
}
});
});
module .exports = router;
因為我寫的只是專案的一部分,所以我將檔案的路徑寫固定了。大家在寫的時候寫成變數字串進行查詢。
3.前端
在前端頁面內,我沒用模板引擎。大家可以用網頁模板引擎,這樣更加方便。我在下面也會說模板引擎怎麼顯示。
相關程式碼:
<input type="submit" id="sub" value="查詢" style="margin-top: 100px">
<div class="container" id="doc-page">
<div id="d"></div>
</div >
<script type="text/javascript">
$("#sub").click(function(){
$.ajax({
url: '/filename',
dataType: 'json',
type:'post',
success: function(data){
console.log(data);
$("#d").append(data);
},
error:function(){
console.log("錯誤");
}
});
});
</script>
用ejs模板引擎
依賴模組什麼的都不會變。
1.路由設定
var express = require('express');
var router = express.Router();
var fs = require('fs');
var marked = require( "marked" );
router.get('/filename.html', function(req, res) {
var path="./bin/1/使用express設定cookie.md";
fs.readFile(path, function(err, data){
if(err){
console.log(err);
res.send("檔案不存在!");
}else{
console.log(data);
str = marked(data.toString());
console.log(str);
res.render('md',{str});
}
});
});
2.前端
前端請求後臺就不用ajax了,相關程式碼:
<div class="container" id="doc-page">
<div id="d"> <%- str%> </div>
</div>
這樣就將md檔案讀取並顯示在前端頁面了。