「Flask入门」在index.html中显示md

士全

已于 2023-05-15 11:52:05 修改

阅读量398

点赞数

分类专栏： Flask入门文章标签： flask html ajax

于 2023-05-05 12:45:28 首次发布

本文链接：https://blog.csdn.net/qq_34872231/article/details/130504468

版权

Flask入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先要在云服务器上下载 marked 插件，命令如下，

npm install marked
npm install @types/marked # For TypeScript projects

也可以访问它的 github官网一探究竟。之后，就可以在 index.html 中添加 .ajax 功能代码了，

<body>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $(function(){
      $.ajax({
        type:"get",
        url:"/testmd",
        dataType:"html",
        success:function(res){
          parsemd(res)
        }
      })

      function parsemd(data) {
        document.getElementById('content').innerHTML = marked.parse(data);
      }
    })
  </script>
</body>

其中的第 4、5 两行是引入必要的 CDN，紧随其后的第 6～21 行是异步获取 .md 的功能函数。其中的 url 属性最为重要，它即是后端的路由。在 hello.py 中注册路由，

@app.route('/testmd', methods=['GET'])
def test_md():
  try:
    return send_from_directory(directory='static/md/', path='test.md')
  except Exception as e:
    return str(e)

流程是这样的，index.html 的 .ajax 根据 url 去 .py 中寻找对应路径的注册函数，并进行调用。找到 test_md() 后，其调用 send_from_directory() 将 test.md 内容返回给 .ajax。其中，test.md 在自建的 static/md/ 目录下

.ajax 收到后通过 parsemd() 函数解析传来的文本内容，并将其渲染在 content 上