1. 程式人生 > >node+express之讀取md檔案並在前端顯示

node+express之讀取md檔案並在前端顯示

在近期用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檔案讀取並顯示在前端頁面了。