创新设计记录-9：论坛-博客展示

论坛-博客展示

前端

blog_card.vue组件在记录8中已经介绍

<template v-for="(item, key) in blog_list">
<BlogCard :blog_title="item.title" :blog_author="item.user_name" :blog_content="item.content"
          :blog_id="item.id" :is_starred="item.is_starred" />
</template>
<el-empty v-if="this.blog_list.length == 0" description="空空如也"></el-empty>
<script>
    _get_blogs() {
        let user_id = localStorage.getItem('user_id')
        get_blogs(user_id).then(res => {
            this.blog_list = res.data.data
        })
    }
</script>

在博客界面中，每个条目都是一个BolgCard组件]

<h3>
    <el-link :href=url style="font-size: 25px; font-weight: bold;">
        {{ blog_title }}
            </el-link>
</h3>
<script>
    url() {
        return '/forum_blog?blog_id=' + this.blog_id + '&author=' + this.blog_author + '&is_starred=' + this.is_starred
    }
</script>

md文件显示

将博客的内容以md格式显示在界面中的工具用到的包为MarkdownIt的包

当界面刚创建的时候，获取博客的content内容，

在界面中添加一个标签

<div v-html="html" class="md-div"></div>

然后获取到content内容之后就渲染这个标签

<script>
render_md(src) {
    const md = new MarkdownIt(this.md_config);
    this.html = md.render(src)
},
    //获取blog
    get_blog_() {
        get_blog(this.blog_id).then(res => {
            this.blog = res.data.data
            this.render_md(this.blog.content)
        })
    },
</script>

当先获取blog之后，调用render_md（）