node+express之读取md文件并在前端显示

最新推荐文章于 2025-06-18 18:51:18 发布

原创最新推荐文章于 2025-06-18 18:51:18 发布 · 7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#node #读取并显示文件 #node+express

node 同时被 3 个专栏收录

5 篇文章

订阅专栏

express

1 篇文章

订阅专栏

读取并显示文件

1 篇文章

订阅专栏

本文介绍如何在Node.js项目中利用Express框架，不使用EJS或Jade模板引擎，直接读取Markdown文件并在前端显示。首先，需要安装marked和fs模块。然后设置相关路由，将文件路径设为变量。前端部分，可以考虑使用模板引擎以简化操作。此外，还讲述了使用EJS模板引擎的方法，包括路由设置和前端请求的处理，从而实现在页面上展示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文件读取并显示在前端页面了。