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;
}