vue + mavon-editor 后端将markdown内容写成接口展示

<template>
<div>
 <el-main class="content-content">
     <!-- <mavon-editor
     :ishljs="true"
     :toolbars="toolbars"
     ref=md
      /> -->
      <mavon-editor
            :value="itemDes"
            defaultOpen="preview"
            :boxShadow="false"
             style="z-index:1;height:80%"
            :editable="false"
            :subfield="false"
            :toolbarsFlag="false"
            :ishljs="true"
          >
          </mavon-editor>
 </el-main>
 <!-- <img :src="studentImg"  style="width:100px; height:130px"> -->
</div>

<!-- <mavon-editor v-model="value"/> -->
</template>
<script>
export default {
    data() {
        return {
            itemDes:'',
            imgUrl:'',
            // studentImg:''
        };
    },
    computed: {
        prop() {
            let data = {
                subfield: false,// 单双栏模式
                defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
                editable: false,
                toolbarsFlag: false,
                scrollStyle: false,
                boxShadow: false//边框
            }
            return data
        }
    },
    mounted() {       
    this.$http.post({url: '/kg/getdata/md'})     #  发送ajax 去后端python 接口请求数据
        .then(response => {
            const { data } = response
            console.log(data.data)
            this.itemDes = data.data
        })
        .catch(error => {
            console.log(error)
        })
    },
}
</script>

"""后端python 接口"""
@app.route('/kg/getdata/md', methods=['post'])
def ajax_test_add():
    file_path = 'md/KG_infer_query.md'     #  markdown 文件的路径
    base_dir = os.path.dirname(__file__)
    print(base_dir)
    path = os.path.join(base_dir, file_path)
    try:
        f_name = open(path, 'r', encoding='UTF-8').read()     # 读取markdown 内容
        tmlmarkdown=markdown.markdown(f_name)                 
        # 成功获取到md文件内容啦 
        print(tmlmarkdown)
        return {'data':tmlmarkdown,'resCode':200}
    except OSError as reason:
        print('读取文件出错了T_T')
        print('出错原因是%s' % str(reason))
    return json.dumps({'err': str(reason),'resCode':500})

标签：md,mavon,markdown,false,return,vue,path,data
来源： https://www.cnblogs.com/lajf/p/15560260.html