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文件读取并显示在前端页面了。

猜你喜欢

转载自blog.csdn.net/ma_shen/article/details/81274597