Skip to content

Commit 9628022

Browse files
weiwosuoaiweiwosuoai
committed
1、详情页支持图片放大
2、博客页显示分类、阅读量、标签，UI 美化
1 parent 5c2a6ed commit 9628022

19 files changed

+204
-46
lines changed

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/ArticleCategoryRelDao.java

+2
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ public interface ArticleCategoryRelDao {
99
List<ArticleCategoryRelDO> selectByArticleIds(List<Long> articleIds);
1010

1111
List<ArticleCategoryRelDO> selectByCategoryId(Long categoryId);
12+
13+
ArticleCategoryRelDO selectByArticleId(Long articleId);
1214
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/ArticleTagRelDao.java

+2
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ public interface ArticleTagRelDao {
99
List<ArticleTagRelDO> selectByArticleIds(List<Long> articleIds);
1010

1111
List<ArticleTagRelDO> selectByTagId(Long queryTagId);
12+
13+
List<ArticleTagRelDO> selectByArticleId(Long articleId);
1214
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/CategoryDao.java

+1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77
public interface CategoryDao {
88
List<CategoryDO> selectAllCategory();
99

10+
CategoryDO selectByCategoryId(Long categoryId);
1011
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/TagDao.java

+2
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@
66

77
public interface TagDao {
88
List<TagDO> selectAllTag();
9+
10+
List<TagDO> selectByTagIds(List<Long> tagIds);
911
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/impl/ArticleCategoryRelDaoImpl.java

+7
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,11 @@ public List<ArticleCategoryRelDO> selectByCategoryId(Long categoryId) {
3636
wrapper.lambda().in(ArticleCategoryRelDO::getCategoryId, categoryId);
3737
return articleCategoryRelMapper.selectList(wrapper);
3838
}
39+
40+
@Override
41+
public ArticleCategoryRelDO selectByArticleId(Long articleId) {
42+
QueryWrapper<ArticleCategoryRelDO> wrapper = new QueryWrapper<>();
43+
wrapper.lambda().eq(ArticleCategoryRelDO::getArticleId, articleId);
44+
return articleCategoryRelMapper.selectOne(wrapper);
45+
}
3946
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/impl/ArticleTagRelDaoImpl.java

+7
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,11 @@ public List<ArticleTagRelDO> selectByTagId(Long queryTagId) {
3636
wrapper.lambda().in(ArticleTagRelDO::getTagId, queryTagId);
3737
return articleTagRelMapper.selectList(wrapper);
3838
}
39+
40+
@Override
41+
public List<ArticleTagRelDO> selectByArticleId(Long articleId) {
42+
QueryWrapper<ArticleTagRelDO> wrapper = new QueryWrapper<>();
43+
wrapper.lambda().eq(ArticleTagRelDO::getArticleId, articleId);
44+
return articleTagRelMapper.selectList(wrapper);
45+
}
3946
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/impl/CategoryDaoImpl.java

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.quanxiaoha.weblog.web.dao.impl;
22

3+
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
34
import com.quanxiaoha.weblog.common.domain.mapper.CategoryMapper;
45
import com.quanxiaoha.weblog.common.domain.dos.CategoryDO;
56
import com.quanxiaoha.weblog.web.dao.CategoryDao;
@@ -27,4 +28,11 @@ public List<CategoryDO> selectAllCategory() {
2728
return categoryMapper.selectList(null);
2829
}
2930

31+
@Override
32+
public CategoryDO selectByCategoryId(Long categoryId) {
33+
QueryWrapper<CategoryDO> wrapper = new QueryWrapper<>();
34+
wrapper.lambda().eq(CategoryDO::getId, categoryId);
35+
return categoryMapper.selectOne(wrapper);
36+
}
37+
3038
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/dao/impl/TagDaoImpl.java

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.quanxiaoha.weblog.web.dao.impl;
22

3+
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
34
import com.quanxiaoha.weblog.common.domain.mapper.TagMapper;
45
import com.quanxiaoha.weblog.common.domain.dos.TagDO;
56
import com.quanxiaoha.weblog.web.dao.TagDao;
@@ -26,4 +27,11 @@ public class TagDaoImpl implements TagDao {
2627
public List<TagDO> selectAllTag() {
2728
return tagMapper.selectList(null);
2829
}
30+
31+
@Override
32+
public List<TagDO> selectByTagIds(List<Long> tagIds) {
33+
QueryWrapper<TagDO> wrapper = new QueryWrapper<>();
34+
wrapper.lambda().in(TagDO::getId, tagIds);
35+
return tagMapper.selectList(wrapper);
36+
}
2937
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/model/vo/article/QueryArticleDetailRspVO.java

+6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
package com.quanxiaoha.weblog.web.model.vo.article;
22

3+
import com.quanxiaoha.weblog.web.model.vo.tag.QueryTagListRspVO;
34
import lombok.AllArgsConstructor;
45
import lombok.Builder;
56
import lombok.Data;
67
import lombok.NoArgsConstructor;
78

89
import java.util.Date;
10+
import java.util.List;
911

1012
/**
1113
* @author: 犬小哈
@@ -21,6 +23,10 @@ public class QueryArticleDetailRspVO {
2123
private String title;
2224
private String content;
2325
private Date updateTime;
26+
private Long categoryId;
27+
private String categoryName;
28+
private Long readNum;
29+
private List<QueryTagListRspVO> tags;
2430
private QueryArticleLinkRspVO preArticle;
2531
private QueryArticleLinkRspVO nextArticle;
2632
}

‎weblog-springboot/weblog-web/src/main/java/com/quanxiaoha/weblog/web/service/impl/ArticleServiceImpl.java

+16
Original file line numberDiff line numberDiff line change
@@ -225,8 +225,24 @@ public Response queryArticleDetail(QueryArticleDetailReqVO queryArticleDetailReq
225225
.title(articleDO.getTitle())
226226
.updateTime(articleDO.getUpdateTime())
227227
.content(MarkdownUtil.parse2Html(articleContentDO.getContent()))
228+
.readNum(articleDO.getReadNum())
228229
.build();
229230

231+
// 查询文章所属分类
232+
ArticleCategoryRelDO articleCategoryRelDO = articleCategoryRelDao.selectByArticleId(articleId);
233+
CategoryDO categoryDO = categoryDao.selectByCategoryId(articleCategoryRelDO.getCategoryId());
234+
vo.setCategoryId(categoryDO.getId());
235+
vo.setCategoryName(categoryDO.getName());
236+
237+
// 查询文章标签
238+
List<ArticleTagRelDO> articleTagRelDOS = articleTagRelDao.selectByArticleId(articleId);
239+
List<Long> tagIds = articleTagRelDOS.stream().map(p -> p.getTagId()).collect(Collectors.toList());
240+
List<TagDO> tagDOS = tagDao.selectByTagIds(tagIds);
241+
242+
List<QueryTagListRspVO> queryTagListRspVOS = tagDOS.stream()
243+
.map(p -> QueryTagListRspVO.builder().id(p.getId()).name(p.getName()).build()).collect(Collectors.toList());
244+
vo.setTags(queryTagListRspVOS);
245+
230246
// 上一篇
231247
ArticleDO preArticle = articleDao.selectPreArticle(articleId);
232248
if (Objects.nonNull(preArticle)) {

‎weblog-vue3/package-lock.json

+18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎weblog-vue3/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"md-editor-v3": "^3.0.1",
2828
"moment": "^2.29.4",
2929
"universal-cookie": "^4.0.4",
30+
"v-viewer": "^3.0.11",
3031
"vue": "^3.2.47",
3132
"vue-router": "^4.1.6",
3233
"vue3-highlightjs": "^1.0.5",

‎weblog-vue3/src/layouts/components/Header.vue

+12-2
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,21 @@
6363
<ul class="py-2" aria-labelledby="user-menu-button">
6464
<li>
6565
<a @click="$router.push('/admin')"
66-
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">进入后台</a>
66+
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
67+
<svg class="inline w-3 h-3 mb-2px mr-1 text-gray-700 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
68+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14v4m-4 1h8M1 10h18M2 1h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z"/>
69+
</svg>
70+
进入后台
71+
</a>
6772
</li>
6873
<li>
6974
<a @click="logout"
70-
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">退出登录</a>
75+
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
76+
<svg class="inline w-3 h-3 mb-2px mr-1 text-gray-700 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
77+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h11m0 0-4-4m4 4-4 4m-5 3H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h3"/>
78+
</svg>
79+
退出登录
80+
</a>
7181
</li>
7282
</ul>
7383
</div>

‎weblog-vue3/src/main.js

+24-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { createApp } from 'vue'
2-
// import ElementPlus from 'element-plus'
3-
// import 'element-plus/dist/index.css'
42
import 'virtual:windi.css'
53

64
import '@/assets/main.css'
@@ -11,21 +9,43 @@ import store from './store'
119
import "@/permission"
1210

1311
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
12+
// 代码高亮
1413
import VueHighlightJS from 'vue3-highlightjs'
1514
import 'vue3-highlightjs/styles/monokai-sublime.css'
1615

17-
16+
// 富文本图片预览
17+
import "viewerjs/dist/viewer.css";
18+
import Viewer from "v-viewer";
1819

1920
const app = createApp(App)
2021

2122
app.use(store)
2223
app.use(router)
23-
// app.use(ElementPlus, { locale: zhCn })
2424

2525
app.use(VueHighlightJS)
2626

2727
// 引入图标
2828
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
2929
app.component(key, component)
3030
}
31+
32+
app.use(Viewer, {
33+
defaultOptions: {
34+
inline: false, // 默认值：false。启用内联模式。
35+
button: true, // 在查看器的右上角显示按钮。
36+
navbar: true, // 指定导航栏的可见性。
37+
title: true, // 指定标题的可见性和内容。
38+
toolbar: true, // 指定工具栏及其按钮的可见性和布局。
39+
tooltip: true, // 放大或缩小时显示带有图像比率（百分比）的工具提示。
40+
movable: true, // 启用以移动图像。
41+
zoomable: true, // 启用以缩放图像
42+
rotatable: true, // 启用以旋转图像
43+
scalable: true, // 启用以缩放图像。
44+
transition: true, // 为某些特殊元素启用CSS3转换。
45+
fullscreen: true, // 启用以在播放时请求全屏。
46+
keyboard: true, // 启用键盘支持。
47+
// url: 'src', //默认值：'src'。定义获取原始图像URL以供查看的位置。
48+
},
49+
});
50+
3151
app.mount('#app')

‎weblog-vue3/src/pages/admin/login.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<!-- 右边栏 -->
1212
<div class="col-span-6 px-3 md:col-span-2 sm:col-span-6">
1313
<div class="login-container-right flex justify-center items-center flex-col">
14-
<h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
14+
<h2 class="font-bold text-3xl text-gray-800 mt-5">欢迎回来</h2>
1515
<div class="flex items-center justify-center my-5 text-gray-400 space-x-2">
1616
<span class="h-[1px] w-16 bg-gray-200"></span>
1717
<span>账号密码登录</span>

0 commit comments

Comments
 (0)