Vue实战知乎日报（4）--daily-article组件

daily-article是知乎日报中最重要的内容板块:

单独列出来，作具体分析：

内容板块包括主题title，内容content,以及评论区comments

内容渲染主要通过watch监控id变化时触发getArticle函数渲染，使用来自util配置的ajax（引用了axios模块），

通过正则匹配对应src的内容替换res.body的src内容成图片路径，将数据返回给内容，回滚顶部，加载评论。

   getArticle () {
                $.ajax.get('news/' + this.id).then(res => {
                    //replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
                    res.body = res.body
                        .replace(/src="http/g, 'src="' + $.imgPath + 'http');
                    res.body = res.body
                        .replace(/src="https/g, 'src="' + $.imgPath + 'https');
                    this.data = res;
                    window.scrollTo(0, 0);
                    this.getComments();
                })
            }

评论部分：

获取对应链接下的评论内容，之后将内容传递给本地的comments,将头像地址转为代理地址返回给comment；

   getComments () {
                this.comments = [];
                $.ajax.get('story/' + this.id + '/short-comments').then(res => {
                    this.comments = res.comments.map(comment => {
                        // 将头像的图片地址转为代理地址
                        comment.avatar = $.imgPath + comment.avatar;
                        return comment;
                    });
                })
            }

 

关于directives（自定义组件）V-time下一章解析。

源码:

<template>
    <div class="daily-article">
        <div class="daily-article-title">{{ data.title }}</div>
        <div class="daily-article-content" v-html="data.body"></div>
        <div class="daily-comments" v-show="comments.length">
            <span>评论（{{ comments.length }}）</span>
            <div class="daily-comment" v-for="comment in comments" :key="comment.id">
                <div class="daily-comment-avatar">
                    <img :src="comment.avatar">
                </div>
                <div class="daily-comment-content">
                    <div class="daily-comment-name">{{ comment.author }}</div>
                    <div class="daily-comment-time" v-time="comment.time"></div>
                    <div class="daily-comment-text">{{ comment.content }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Time from '../directives/time';
    import $ from '../libs/util';
    export default {
        directives: { Time },
        props: {
            id: {
                type: Number,
                default: 0
            }
        },
        data () {
            return {
                data: {},
                comments: []
            }
        },
        methods: {
            getArticle () {
                $.ajax.get('news/' + this.id).then(res => {
                    res.body = res.body
                        .replace(/src="http/g, 'src="' + $.imgPath + 'http');
                    res.body = res.body
                        .replace(/src="https/g, 'src="' + $.imgPath + 'https');
                    this.data = res;
                    window.scrollTo(0, 0);
                    this.getComments();
                })
            },
            getComments () {
                this.comments = [];
                $.ajax.get('story/' + this.id + '/short-comments').then(res => {
                    this.comments = res.comments.map(comment => {
                        // 将头像的图片地址转为代理地址
                        comment.avatar = $.imgPath + comment.avatar;
                        return comment;
                    });
                })
            }
        },
        watch: {
            id (val) {
                if (val) this.getArticle();
            }
        }
    };
</script>