From 12ba82eaa1a864797c6c9d07a18aef5bd4a169a3 Mon Sep 17 00:00:00 2001 From: ikmkj <1@qq,com> Date: Fri, 20 Jun 2025 09:35:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(image):=20=E6=B7=BB=E5=8A=A0=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=20Markdown=20=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 ImageController 中添加删除图片的接口 - 在 ImageService 中实现删除图片和批量更新图片 ID 的方法 - 在前端集成复制代码插件并优化 Markdown 编辑器配置 - 修复后端分组相关接口的参数类型问题 --- biji-houdaun/pom.xml | 1 - .../controller/GroupingController.java | 11 +++-- .../controller/ImageController.java | 31 +++++++++++- .../bijihoudaun/service/ImageService.java | 15 ++++++ .../service/impl/ImageServiceImpl.java | 36 ++++++++++++++ biji-qianduan/src/components/HomePage.vue | 32 ++++++++++-- biji-qianduan/src/main.js | 46 ++++++++++++------ mydatabase.db | Bin 36864 -> 36864 bytes 8 files changed, 145 insertions(+), 27 deletions(-) diff --git a/biji-houdaun/pom.xml b/biji-houdaun/pom.xml index e8a2c58..73f4d53 100644 --- a/biji-houdaun/pom.xml +++ b/biji-houdaun/pom.xml @@ -47,7 +47,6 @@ org.springframework.boot spring-boot-starter-aop - org.xerial diff --git a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/GroupingController.java b/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/GroupingController.java index b9213bf..31cae62 100644 --- a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/GroupingController.java +++ b/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/GroupingController.java @@ -35,17 +35,20 @@ public class GroupingController { @Operation(summary = "更新分组名称") @PutMapping("/{id}") public R updateGrouping( - @PathVariable Long id, + @PathVariable String id, @RequestBody Grouping grouping) { - grouping.setId(id); + + long l = Long.parseLong(id); + grouping.setId(l); Grouping updated = groupingService.updateGrouping(grouping); return R.success(updated); } @Operation(summary = "删除分组") @DeleteMapping("/{id}") - public R deleteGrouping(@PathVariable Long id) { - groupingService.deleteGrouping(id); + public R deleteGrouping(@PathVariable String id) { + Long idLong = Long.parseLong(id); + groupingService.deleteGrouping(idLong); return R.success(); } } diff --git a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/ImageController.java b/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/ImageController.java index ca7b26d..f9bf92d 100644 --- a/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/ImageController.java +++ b/biji-houdaun/src/main/java/com/test/bijihoudaun/controller/ImageController.java @@ -13,6 +13,8 @@ import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; +import java.util.List; + @Tag(name = "markdown接口") @RestController @RequestMapping("/api/images") @@ -28,14 +30,39 @@ public class ImageController { }) @PostMapping public R uploadImage( - @RequestParam(required = false) Long markdownId, + @RequestParam(required = false) String markdownId, @RequestParam("file") MultipartFile file) { try { - Image image = imageService.uploadImage(markdownId, file); + Long markdownIdLong = Long.parseLong(markdownId); + Image image = imageService.uploadImage(markdownIdLong, file); return R.success(image); } catch (IOException e) { return R.fail(); } } + + @Operation(summary = "根据id删除图片") + @DeleteMapping("/{id}") + public R deleteImage(@PathVariable Long id) { + boolean result = imageService.deleteImage(id); + if (result) { + return R.success(); + } else { + return R.fail(); + } + } + + @Operation(summary = "根据url删除图片") + @DeleteMapping + public R deleteImageByUrl(@RequestParam String url) { + boolean result = imageService.deleteImageByUrl(url); + if (result) { + return R.success(); + } else { + return R.fail(); + } + } + + } diff --git a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/ImageService.java b/biji-houdaun/src/main/java/com/test/bijihoudaun/service/ImageService.java index b657300..1ae546e 100644 --- a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/ImageService.java +++ b/biji-houdaun/src/main/java/com/test/bijihoudaun/service/ImageService.java @@ -31,4 +31,19 @@ public interface ImageService extends IService { * @return 图片列表 */ List getMarkdownImages(Long markdownId); + + /** + * 根据URL删除图片 + * @param url + * @return + */ + boolean deleteImageByUrl(String url); + + /** + * 根据URL批量更新图片ID + * @param list + * @param markdownId + * @return + */ + boolean updateImageId(List list, Long markdownId); } diff --git a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/ImageServiceImpl.java b/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/ImageServiceImpl.java index 0edab47..08a2baf 100644 --- a/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/ImageServiceImpl.java +++ b/biji-houdaun/src/main/java/com/test/bijihoudaun/service/impl/ImageServiceImpl.java @@ -1,5 +1,7 @@ package com.test.bijihoudaun.service.impl; +import cn.hutool.core.collection.CollUtil; +import cn.hutool.core.stream.CollectorUtil; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; @@ -87,4 +89,38 @@ public class ImageServiceImpl .orderByDesc("created_at"); return this.list(queryWrapper); } + + @Override + public boolean deleteImageByUrl(String url) { + Image image = imageMapper.selectOne(new QueryWrapper().eq("url", url)); + if (image == null) { + return false; + } + try { + // 删除文件系统中的图片 + Path filePath = Paths.get(uploadDir, image.getStoredName()); + Files.deleteIfExists(filePath); + + // 删除数据库记录 + this.removeById(image.getId()); + return true; + } catch (IOException e) { + throw new RuntimeException("删除图片失败", e); + } + } + + @Override + public boolean updateImageId(List list, Long markdownId) { + if (CollUtil.isEmpty( list)) { + return false; + } + for (String url : list) { + Image image = imageMapper.selectOne(new QueryWrapper().eq("url", url)); + if (image != null) { + image.setMarkdownId(markdownId); + this.updateById(image); + } + } + return true; + } } diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue index e2f47c1..cf4a23e 100644 --- a/biji-qianduan/src/components/HomePage.vue +++ b/biji-qianduan/src/components/HomePage.vue @@ -49,13 +49,18 @@

{{ selectedFile.title }}

清空 - 编辑 + 编辑 删除 返回 保存
- + @@ -139,6 +146,8 @@ import '@kangc/v-md-editor/lib/theme/style/github.css'; import {groupingId, groupingAll, markdownAll, addGroupings, Preview, updateMarkdown} from '@/api/CommonApi.js' import {DArrowRight} from "@element-plus/icons-vue"; + + const markdownFiles = ref([]); const groupings = ref([]); const groupFiles = ref({}); @@ -154,6 +163,8 @@ const newNoteForm = ref({ title: '', groupingId: null }); const editData=ref(null) + + // 获取所有分组 const fetchGroupings = async () => { try { @@ -197,6 +208,10 @@ const fetchGroupings = async () => { } }; +const handleCopyCodeSuccess = () => { + ElMessage.success('代码已复制到剪贴板'); +}; + // 获取所有Markdown文件（确保ID为字符串） const fetchMarkdownFiles = async () => { try { @@ -277,8 +292,17 @@ const editNote = (file) => { showEditor.value = true; }; -const handleImageUpload=()=>{ - console.log(666) +const handleImageUpload=(event,insertImage,files)=>{ + console.log(files) + + // 插入图片 + insertImage({ + // 图片地址 + url: + 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg' + // 图片描述 + // desc: '七龙珠', + }); } // 在编辑页面，按Ctrl+S保存笔记，或者点击保存，对数据进行保存 diff --git a/biji-qianduan/src/main.js b/biji-qianduan/src/main.js index aad05d8..c88dc20 100644 --- a/biji-qianduan/src/main.js +++ b/biji-qianduan/src/main.js @@ -4,33 +4,47 @@ import router from './router/' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' -import VMdEditor from '@kangc/v-md-editor'; -import '@kangc/v-md-editor/lib/style/base-editor.css'; -import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; -import '@kangc/v-md-editor/lib/theme/style/github.css'; +// 1. 导入编辑器和预览组件 +import VMdEditor from '@kangc/v-md-editor' +import VMdPreview from '@kangc/v-md-editor/lib/preview' -import VMdPreview from '@kangc/v-md-editor/lib/preview'; -import '@kangc/v-md-editor/lib/style/preview.css'; -import '@kangc/v-md-editor/lib/theme/style/github.css'; +// 2. 导入基础样式 +import '@kangc/v-md-editor/lib/style/base-editor.css' +import '@kangc/v-md-editor/lib/style/preview.css' +// 3. 导入主题和样式 +import githubTheme from '@kangc/v-md-editor/lib/theme/github' +import '@kangc/v-md-editor/lib/theme/style/github.css' + +// 4. 导入复制代码插件及其样式 +import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index' +import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css' + +// 5. 导入高亮库 +import hljs from 'highlight.js' const app = createApp(App) -// highlightjs -import hljs from 'highlight.js'; +// 6. 配置编辑器 VMdEditor.use(githubTheme, { Hljs: hljs, -}); +}) + +// 7. 配置预览组件 VMdPreview.use(githubTheme, { Hljs: hljs, -}); +}) -// // 配置Markdown编辑器 -app.use(VMdEditor); -app.use(VMdPreview); +// 8. 为编辑器和预览分别添加复制插件 +VMdEditor.use(createCopyCodePlugin()) +VMdPreview.use(createCopyCodePlugin()) // 注意这里使用同一个插件创建函数 -// 使用Element Plus和路由 +// 9. 注册组件 +app.use(VMdEditor) +app.use(VMdPreview) + +// 10. 使用Element Plus和路由 app.use(ElementPlus) app.use(router) -app.mount('#app') +app.mount('#app') \ No newline at end of file diff --git a/mydatabase.db b/mydatabase.db index b641547af1ad41964b39a74fdfcc3dfdb097dd17..206014a8af653fb9e95c7bc537d8b4867b5be7be 100644 GIT binary patch delta 231 zcmZozz|^pSX@WGP*+dy*3+ipSYA9QrRgSGSQ_aXq^22|m|CWqSQ?sw)ajQN;M1&