19.blog前端-最热文章、最新文章、文章归档

 

 

最热文章和最新文章都是同样的，只需要建立一个vue文件，传不同参数即可

CardArticle.vue:

<template>
    <el-card :body-style="{ padding: '8px 18px' }">
        <div slot="header" class="my-category-header">
            <span>{{cardHeader}}</span>
        </div>

        <ul class="my-category-list">
            <li v-for="a in articles"
                @click="view(a.id)"
                :style="itemStyle"
                :key="a.id"
                class="my-category-item">
                    <a>{{a.title}}</a>
            </li>
        </ul>
    </el-card>

</template>

<script>
    export default
    {
        name: 'ArticleCard',
        props: {
            cardHeader: {
                type: String,
                required: true
            },
            articles: {
                type: Array,
                required: true
            },
            itemStyle: Object
        },
        data() {
            return {}
        },
        methods: {
            view(id) {
                this.$router.push({path: `/view/${id}`});
            }
        }
    }
</script>

<style scoped>
    .my-category-header
    {
        font-weight: 600;
    }

    .my-category-list
    {
        list-style-type: none;
    }

    .my-category-item
    {
        padding: 4px;
        font-size: 14px;
        color: #5FB878;
    }

    .my-category-item button:hover
    {
        text-decoration: underline;
    }
</style>

Index.vue

<!--body-->
<template>
  <div>
    <el-container>
        <el-main class="myArticles">
            <!--文章列表-->
            <ArticleScrollPage>

            </ArticleScrollPage>
        </el-main>
        <el-aside>
            <mine></mine>
            <article-tag :tags="hotTags"></article-tag>
            <article-card cardHeader="最热文章" :articles="hotArticles" itemStyle=""></article-card>
            <article-card cardHeader="最新文章" :articles="newArticles" itemStyle=""></article-card>
        </el-aside>
    </el-container>
  </div>
</template>

<script>
    import ArticleScrollPage from "@/components/common/ArticleScrollPage"
    import Mine from "@/components/card/Mine"
    import ArticleTag from "@/components/card/ArticleTag"
    import ArticleCard from "@/components/card/ArticleCard"

    import {getHotArticles,getNewArticles} from "@/api/article"

    import {getHotTags} from "@/api/tag";
    export default
    {
        name: '',
        components:
        {
            ArticleScrollPage,
            mine:Mine,
            "article-tag":ArticleTag,
            "article-card":ArticleCard
        },
        data()
        {
            return{
                hotTags: [], //最热标签
                hotArticles: [], //最热文章
                newArticles: [] //最新文章
            }
        },
        created()
        {
            this.getHotTags();
            this.getHotArticles();
            this.getNewArticles();
        },
        methods:
        {
            getHotTags()
            {
                getHotTags().then((res)=>
                    {
                        if(res.data.success)
                        {
                            this.hotTags = res.data.data
                        }else
                        {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(()=>
                    {
                        this.$message.error("系统出错");
                    }).finally(()=>
                    {

                    })
            },
            getHotArticles()
            {
                getHotArticles().then((res)=>
                {
                    if(res.data.success)
                    {
                        this.hotArticles = res.data.data
                    }else
                    {
                        this.$message.error(res.data.msg)
                    }
                }).catch(()=>
                {
                    this.$message.error("系统出错");
                }).finally(()=>
                {

                })
            },
            getNewArticles()
            {
                getNewArticles().then((res)=>
                {
                    if(res.data.success)
                    {
                        this.newArticles= res.data.data
                    }else
                    {
                        this.$message.error(res.data.msg)
                    }
                }).catch(()=>
                {
                    this.$message.error("系统出错");
                }).finally(()=>
                {

                })
            }
        },

    }
</script>

<style scoped>
.el-container
{
    width: 960px;
}
/*右侧边栏*/
.el-aside
{
    /*右侧和主部空了20px的距离*/
    margin-left: 20px;
    width: 260px;
}
/*主栏*/
.el-main {
    padding: 0px;
    line-height: 16px;
}
/*文章列表*/
.el-card {
    border-radius: 0;
}
/*设置卡片最后一个子元素除外的样式，第一个不用和上面有间隙*/
.el-card:not(:first-child)
{
    margin-top: 20px;
}
</style>

article.js

import request from "@/request"

/**
 * 文章列表
 * @param PageParams
 */
export function getArticles(PageParams)
{
    return request({
        url:"/articles",
        method:'POST',
        data:PageParams
    })
}

/**
 * 获取最热文章列表
 */
export function getHotArticles()
{
    return request({
        url:"/articles/hot",
        method:'POST'
    })
}
/**
 * 获取最新文章列表
 */
export function getNewArticles()
{
    return request({
        url:"/articles/new",
        method:'POST'
    })
}

接下来是文章归档：

CardArchive.vue:

<template>

    <el-card :body-style="{ padding: '8px 18px' }">
        <div slot="header" class="my-category-header">
            <span>{{cardHeader}}</span>
        </div>

        <ul class="my-category-list">
            <li v-for="a in archives"
                @click="view(a.year, a.month)"
                :key="a.year + a.month"
                class="my-category-item">
                <a>{{`${a.year}年${a.month}月(${a.count})`}}</a>
            </li>
        </ul>
    </el-card>

</template>

<script>
    export default {
        name: "ArchiveCard",
        props: {
            cardHeader:
                {
                    type: "",
                    required: true
                },
            archives:
                {
                    type: [],
                    required: true
                }
        },
        methods:
        {
            view(year, month)
            {
                this.$router.push({path: `/archives/${year}/${month}`})
            }
        }
    }
</script>

<style scoped>

    .my-category-header {
        font-weight: 600;
    }

    .my-category-list {
        list-style-type: none;
    }

    .my-category-item {
        display: inline-block;
        width: 40%;
        padding: 4px;
        font-size: 14px;
        color: #5FB878;
    }

    .my-category-item a:hover
    {
        text-decoration: underline;
    }

</style>

article.js 

/**
 * 获取文章归档列表
 */
export function getArchives()
{
    return request({
        url:"/articles/listArchives",
        method:'POST'
    })
}

Index.vue

<!--body-->
<template>
  <div>
    <el-container>
        <el-main class="myArticles">
            <!--文章列表-->
            <ArticleScrollPage>

            </ArticleScrollPage>
        </el-main>
        <el-aside>
            <mine></mine>
            <article-tag :tags="hotTags"></article-tag>
            <article-card cardHeader="最热文章" :articles="hotArticles" itemStyle=""></article-card>
            <article-card cardHeader="最新文章" :articles="newArticles" itemStyle=""></article-card>
            <archive-card cardHeader="文章归档" :archives="archives"></archive-card>
        </el-aside>
    </el-container>
  </div>
</template>

<script>
    import ArticleScrollPage from "@/components/common/ArticleScrollPage"
    import Mine from "@/components/card/Mine"
    import ArticleTag from "@/components/card/ArticleTag"
    import ArticleCard from "@/components/card/ArticleCard"
    import ArchiveCard from "@/components/card/ArchiveCard"

    import {getHotArticles,getNewArticles,getArchives} from "@/api/article"

    import {getHotTags} from "@/api/tag";
    export default
    {
        name: '',
        components:
        {
            ArticleScrollPage,
            mine:Mine,
            "article-tag":ArticleTag,
            "article-card":ArticleCard,
            "archive-card":ArchiveCard
        },
        data()
        {
            return{
                hotTags: [], //最热标签
                hotArticles: [], //最热文章
                newArticles: [], //最新文章
                archives:[] // 文章归档
            }
        },
        created()
        {
            this.getHotTags();
            this.getHotArticles();
            this.getNewArticles();
            this.getArchives();
        },
        methods:
        {
            getHotTags()
            {
                getHotTags().then((res)=>
                    {
                        if(res.data.success)
                        {
                            this.hotTags = res.data.data
                        }else
                        {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(()=>
                    {
                        this.$message.error("系统出错");
                    }).finally(()=>
                    {

                    })
            },
            getHotArticles()
            {
                getHotArticles().then((res)=>
                {
                    if(res.data.success)
                    {
                        this.hotArticles = res.data.data
                    }else
                    {
                        this.$message.error(res.data.msg)
                    }
                }).catch(()=>
                {
                    this.$message.error("系统出错");
                }).finally(()=>
                {

                })
            },
            getNewArticles()
            {
                getNewArticles().then((res)=>
                {
                    if(res.data.success)
                    {
                        this.newArticles= res.data.data
                    }else
                    {
                        this.$message.error(res.data.msg)
                    }
                }).catch(()=>
                {
                    this.$message.error("系统出错");
                }).finally(()=>
                {

                })
            },
            getArchives()
            {
                getArchives().then((res)=>
                {
                    if(res.data.success)
                    {
                        this.archives= res.data.data
                    }else
                    {
                        this.$message.error(res.data.msg)
                    }
                }).catch(()=>
                {
                    this.$message.error("系统出错");
                }).finally(()=>
                {

                })
            }
        },

    }
</script>

<style scoped>
.el-container
{
    width: 960px;
}
/*右侧边栏*/
.el-aside
{
    /*右侧和主部空了20px的距离*/
    margin-left: 20px;
    width: 260px;
}
/*主栏*/
.el-main {
    padding: 0px;
    line-height: 16px;
}
/*文章列表*/
.el-card {
    border-radius: 0;
}
/*设置卡片最后一个子元素除外的样式，第一个不用和上面有间隙*/
.el-card:not(:first-child)
{
    margin-top: 20px;
}
</style>