2024年12月18日09:19:14

blog/font/blog/src/components/utils/Article.vue

@@ -30,7 +30,7 @@ const router = useRouter();
 const emit = defineEmits(['destroy']);
 const props = defineProps(['post_id','user_id','username','title','updated_at','Likes','showButtons'])
 
-
+console.log("Likes:",props.Likes);
 function handleDelete() {
   ElMessageBox.confirm('您确定要删除这篇文章吗?', '提示', {
     confirmButtonText: '确定',
@@ -51,8 +51,11 @@ function handleDelete() {
   });
 }
 
+//修改按钮，路由传递文章id和修改文章布尔变量，跳转到文章详情页
 function handleEdit() {
 
+  router.push({ name: 'Writing', params: { id: props.post_id } });
+  // r
 }
 
 function handleClick(post_id:number) {

blog/font/blog/src/components/utils/Paper.vue

@@ -62,7 +62,7 @@ const dislikeIconSrc = computed(() => isDisliked.value ? abhorIcon : deabhorIcon
 
 function getpaper(){
   
-  axios.get('/api/post/essay',{ params: {post_id:post_id}})
+  axios.get('http://127.0.0.1:8080/post/essay',{ params: {post_id:post_id}})
     .then(res => {
       console.log("获取文章详情数据成功", res.data.data);
       console.log("传入对象");

blog/font/blog/src/components/utils/StartWriting.vue

@@ -21,7 +21,7 @@
     //判断是否是登录状态
 
     //跳转到书写页面
-    router.push('/writing');
+    router.push({ name: 'Writing', params: { id: 0 } });
     console.log('Custom button clicked');
   };
   </script>

blog/font/blog/src/components/writeBlog/Writing.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted,nextTick } from 'vue';
 import { marked } from 'marked';
 import axios from 'axios';
+import { useRoute } from 'vue-router';
 import { useLoginStore } from '@/stores/Login'; 
 //引入吐司
 import { useToast } from 'vue-toastification' 
@@ -34,7 +35,9 @@ import { useToast } from 'vue-toastification'
 const markdownContent = ref('');
 const title = ref('');
 const loginStore = useLoginStore();
-const toast = useToast()
+const toast = useToast();
+const route = useRoute();
+const post_id = route.params.id;
 // 使用 marked 库将 Markdown 内容转换为 HTML
 const compiledMarkdown = computed(() => {
   return marked.parse(markdownContent.value, { breaks: true });
@@ -42,10 +45,13 @@ const compiledMarkdown = computed(() => {
 
 // 在组件挂载后获取 DOM 元素
 onMounted(() => {
+  isChange();
   const editor = document.getElementById('markdown-editor');
   if (editor) {
     // 初始化时调整高度
-    resizeTextarea();
+    nextTick(() => {
+          resizeTextarea();
+        });
   }
 });
 
@@ -58,9 +64,27 @@ const resizeTextarea = () => {
   }
 };
 
+function isChange(){
+  //在这里判断，是否是修改
+  //如果是修改，则get文章内容
+  if(post_id !== '0'){
+    axios.get('http://localhost:8080/post/essay',{ params: {post_id:post_id}})
+    .then(res => {
+      // console.log("获取文章详情数据成功", res.data.data);
+      // console.log("传入对象");
+      markdownContent.value = res.data.data.content
+      title.value = res.data.data.title
+      resizeTextarea();
+    })
+ }
+}
+
+
+
 const scrollToTop = () => {
-  //保存发布按钮按下后的逻辑
-  console.log("正在发布中")
+  if(post_id === '0'){
+     //保存发布按钮按下后的逻辑
+  console.log("正在发布中",post_id)
   //
   console.log(title.value,'id',loginStore.userInfo.id)
   axios.post('http://localhost:8080/post/new', {
@@ -72,12 +96,28 @@ const scrollToTop = () => {
     // 处理成功响应
     console.log(response.data);
     toast.success("发布成功");
+    // 跳转回主页
+
   })
   .catch(error => {
     // 处理错误
     console.error(error);
     
   });
+  }
+  else{
+    //保存修改按钮按下后的逻辑
+    console.log("正在修改中",post_id)
+    //
+    console.log(title.value,'id',post_id)
+    axios.post('http://localhost:8080/post/update', {
+    token: loginStore.userInfo.token,
+    title: title.value,
+    content: markdownContent.value,
+    post_id:post_id
+    })
+  }
+  
 };
 </script>
 

blog/font/blog/src/page/Announcement.vue

@@ -26,7 +26,7 @@
   //调用axios获取公告
 // 查找全部的方法api
 function getAll() {
-    axios.get('/api/announcements')
+    axios.get('http://127.0.0.1:8080/announcements')
         .then(res => {
             // 使用扩展运算符来保持响应性
             console.log("开始存放",res.data)

blog/font/blog/src/page/Home.vue

@@ -67,7 +67,7 @@ let postOverviewList = reactive<postOverview[]>([]);
 
 // 获取文章概览列表
 function getAll(by: string) {
-  axios.get('/api/post/overview', {
+  axios.get('http://127.0.0.1:8080/post/overview', {
     params: { by: by },
     headers: { token: '' }
   })

blog/font/blog/src/router/index.ts

@@ -40,7 +40,8 @@ const router = createRouter({
         },
         // 书写页面
         {
-            path:'/writing',
+            path:'/writing/:id',
+            name: 'Writing',
             component:Writing
         },
         //找回密码

blog/server/demo/.idea/compiler.xml

@@ -7,7 +7,7 @@
         <sourceOutputDir name="target/generated-sources/annotations" />
         <sourceTestOutputDir name="target/generated-test-sources/test-annotations" />
         <outputRelativeToContentRoot value="true" />
-        <processorPath useClasspath="false">
+        <processorPath>
           <entry name="$MAVEN_REPOSITORY$/org/projectlombok/lombok/unknown/lombok-unknown.jar" />
         </processorPath>
         <module name="demo" />

blog/server/demo/src/main/java/top/lejings/demo/controller/PostsController.java

@@ -51,4 +51,11 @@ public class PostsController {
         return Result.success();
     }
 
+    //修改文章
+    @PostMapping("/update")
+    public Result update(@RequestBody Posts posts){
+        log.info("修改文章");
+        postsService.postsUpdate(posts);
+        return Result.success("修改成功");
+    }
 }

blog/server/demo/src/main/java/top/lejings/demo/mapper/PostsMapper.java

@@ -3,6 +3,7 @@ package top.lejings.demo.mapper;
 import org.apache.ibatis.annotations.Delete;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Select;
+import org.apache.ibatis.annotations.Update;
 import top.lejings.demo.pojo.Posts;
 
 import java.util.List;
@@ -20,4 +21,7 @@ public interface PostsMapper {
 
     @Delete("DELETE FROM posts WHERE post_id = #{post_id}")
     void deletePost(Integer post_id);
+
+    @Update("UPDATE posts SET title = #{title}, content = #{content} WHERE post_id = #{post_id};")
+    void postsUpdate(Posts posts);
 }

blog/server/demo/src/main/java/top/lejings/demo/service/PostsService.java

@@ -12,4 +12,6 @@ public interface PostsService {
     void postsNew(Posts posts);
 
     void deletePost(Integer postId);
+
+    void postsUpdate(Posts posts);
 }

blog/server/demo/src/main/java/top/lejings/demo/service/impl/PostsServiceImpl.java

@@ -58,4 +58,10 @@ public class PostsServiceImpl implements PostsService {
     public void deletePost(Integer postId) {
         postsMapper.deletePost(postId);
     }
+
+    @Override
+    public void postsUpdate(Posts posts) {
+        //本来还有解析token，判断逻辑。但是懒得写了
+        postsMapper.postsUpdate(posts);
+    }
 }