20.blog前端-文章分类、标签分类

BlogAllCategoryTag.vue：

<template>
    <div class="my-categoryTag-body"
         v-title :data-title="categoryTagTitle" >
        <el-container class="my-categoryTag-container">
            <el-main>
                <!--elementUI Tabs标签页-->
                <el-tabs v-model="activeName">

                    <el-tab-pane label="文章分类" name="category">
                        <ul class="my-categoryTag-items">
                            <li v-for="c in categories" @click="view(c.id)" :key="c.id" class="my-categoryTag-item">

                                <div class="my-categoryTag-content">
                                    <a class="my-categoryTag-info">
                                        <!--展示分类图标-->
                                        <img class="my-categoryTag-img" :src="c.avatar?c.avatar:defaultAvatar"/>
                                        <h4 class="my-categoryTag-name">{{c.categoryName}}</h4>
                                        <p class="my-categoryTag-description">{{c.description}}</p>
                                    </a>

                                    <div class="my-categoryTag-meta">
                                        <span>{{c.articlesNumber}} 篇文章</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </el-tab-pane>

                    <el-tab-pane label="标签" name="tag">
                        <ul class="my-categoryTag-items">
                            <li v-for="t in tags" @click="view(t.id)" :key="t.id" class="my-categoryTag-item">

                                <div class="my-categoryTag-content">
                                    <a class="my-categoryTag-info">
                                        <img class="my-categoryTag-img" :src="t.avatar?t.avatar:defaultAvatar"/>
                                        <h4 class="my-categoryTag-name">{{t.tagName}}</h4>
                                    </a>

                                    <div class="my-categoryTag-meta">
                                        <span>{{t.articlesNumber}} 篇文章</span>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </el-tab-pane>

                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import defaultAvatar from '@/assets/img/logo.png'
    import {listTagsDetail} from "@/api/tag"
    import {listCategoriesDetail} from "@/api/category"
    export default
    {
        name: "BlogAllCategoryTag",
        data(){
            return {
                categories: [],
                tags: [],
                defaultAvatar : defaultAvatar,
                currentActiveName: 'category'
            }
        },
        computed: {
            activeName:
            {
                get()
                {
                    return this.currentActiveName = this.$route.params.type;
                    /*等于
                    this.currentActiveName = this.$route.params.type
                    return this.currentActiveName*/
                },
               set(newV)
               {
                   this.currentActiveName = newV;
                   this.$router.push({path:`/${newV}/all`})
               }
            },
            categoryTagTitle()
            {
                return this.activeName === "category"?"文章分类":"标签";
            }
        },
        created(){
            this.listCategories();
            this.listTags();
        },
        methods:{
            //获取全部的分类列表
            listCategories(){
                //发起http请求 请求后端的数据
                listCategoriesDetail().then((res)=>{
                    res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.categories = res.data.data;
                        console.log(this.categories)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
            //获取全部的标签列表
            listTags(){
                //发起http请求 请求后端的数据
                listTagsDetail().then((res)=>{
                    res.data = Result (success,msg,data)
                    if(res.data.success){
                        this.tags = res.data.data;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$message.error("系统错误");
                }).finally(()=>{
                })
            },
            //获取分类、标签详情
            view(id)
            {
                this.$router.push({path:`/${this.activeName}/${id}`});
            },
        }
    }
</script>

<style>
    .my-categoryTag-body
    {
        margin: 60px auto 140px;
    }

    .my-categoryTag-container
    {
        width: 1000px;
    }

    .my-categoryTag-items
    {
        padding-top: 2rem;
    }

    .my-categoryTag-item
    {
        width: 25%;
        display: inline-block;
        margin-bottom: 2.4rem;
        padding: 0 .7rem;
        box-sizing: border-box;
    }

    .my-categoryTag-content
    {
        display: inline-block;
        width: 100%;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        transition: border-color .3s;
        text-align: center;
        padding: 1.5rem 0;
    }

    .my-categoryTag-info
    {
        cursor: pointer;
    }

    .my-categoryTag-img
    {
        margin: -40px 0 10px;
        width: 60px;
        height: 60px;
        vertical-align: middle;
    }

    .my-categoryTag-name
    {
        font-size: 21px;
        font-weight: 200;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 4px;
    }

    .my-categoryTag-description
    {
        min-height: 50px;
        font-size: 13px;
        line-height: 25px;
    }

    .my-categoryTag-meta
    {
        font-size: 12px;
        color: #969696;
    }
</style>

category.js：

import request from "@/request"

export function listCategoriesDetail()
{
    return request({
        url:"/categorys/detail",
        method:'GET',
    })
}

tag.js:

import request from "@/request"

/**
 * 最热标签
 */
export function getHotTags()
{
    return request({
        url:"/tags/hot",
        method:'GET'
    })
}

/**
 * 查询所有标签
 */
export function listTagsDetail()
{
    return request({
        url:"/tags/detail",
        method:'GET',
    })
}

这里后端接口需要改一下，不然传给前端的种类列表，标签列表没有对应的文章数量

CategoryServiceImpl：

 @Override
    public Result findAllDetail()
    {
        List<Category> categories = categoryMapper.selectList(null);
        List<CategoryDetailVo> categoryDetailVos = new ArrayList<>();
        for (Category category : categories)
        {
            LambdaQueryWrapper<Article> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(Article::getCategoryId,category.getId());
            Integer articlesNumber = articleMapper.selectCount(queryWrapper);
            categoryDetailVos.add(copyCategoryDetailList(category,articlesNumber));
        }
        return Result.success(categoryDetailVos);
    }

    private CategoryDetailVo copyCategoryDetailList(Category category, Integer articlesNumber)
    {
        CategoryDetailVo categoryDetailVo = new CategoryDetailVo();
        BeanUtils.copyProperties(category,categoryDetailVo);
        categoryDetailVo.setArticlesNumber(articlesNumber);
        return categoryDetailVo;
    }

TagServiceImpl：

 @Override
    public Result findAllDetail()
    {
        List<Tag> tags = tagMapper.selectList(null);
        List<TagDetailVo> tagDetailVos = new ArrayList<>();
        for (Tag tag : tags)
        {
            Long id = tag.getId();
            LambdaQueryWrapper<ArticleTag> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(ArticleTag::getTagId,id);
            Integer articlesNumber = articleTagMapper.selectCount(queryWrapper);
            tagDetailVos.add(copyTagDetailList(tag,articlesNumber));
        }
        return Result.success(tagDetailVos);
    }

    private TagDetailVo copyTagDetailList(Tag tag, Integer articlesNumber)
    {
        TagDetailVo tagDetailVo = new TagDetailVo();
        BeanUtils.copyProperties(tag,tagDetailVo);
        tagDetailVo.setArticlesNumber(articlesNumber);
        return tagDetailVo;
    }