feat: 添加删除文章功能

app.vue

@@ -12,6 +12,7 @@
 <script lang="ts" setup>
 import miaoHeader from './components/miaoHeader.vue';
 import miaoContentWrapper from './components/miaoContentWrapper.vue';
+import "/style/default.scss";
 
 // @ts-ignore
 useHead({
@@ -32,9 +33,9 @@ useHead({
 }
 </style>
 
-<style lang="scss">
+<!-- <style lang="scss">
 @use '/style/default.scss';
-</style>
+</style> -->
 
 <style>
 .page-enter-active,

components/user/postEditor.vue

@@ -3,27 +3,31 @@
         <!-- editor以后再写 -->
         <el-row :gutter="10">
             <el-col :span="12">
-                <el-input v-model:model-value="title" placeholder="title">
+                <el-input v-model:model-value="title" placeholder="title" :disabled="disabled">
                     <template #prepend>标题</template>
                 </el-input>
             </el-col>
             <el-col :span="12">
-                <el-input-tag v-model:model-value="tags" placeholder="添加标签" />
+                <el-input-tag v-model:model-value="tags" placeholder="添加标签" :disabled="disabled"/>
             </el-col>
         </el-row>
         <el-row>
             <el-col>
-                <el-input v-model:model-value="summary" placeholder="summary" >
+                <el-input v-model:model-value="summary" placeholder="summary" :disabled="disabled">
                     <template #prepend>摘要</template>
                 </el-input>
             </el-col>
         </el-row>
-        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" />
+        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" :disabled="disabled"/>
     </div>
 </template>
 
 <script setup lang="ts">
 
+const props = defineProps<{
+    disabled?: boolean
+}>()
+
 const title = defineModel<string>('title')
 const summary = defineModel<string>('summary')
 const tags = defineModel<string[]>('tags')

hooks/pinia/useUserStore.ts

@@ -20,7 +20,6 @@ export const useUserStore = defineStore("user", () => {
     };
 
     const token = computed(() => {
-        console.log('token')
         if (_token.value) {
             return _token.value;
         }

pages/user/main/post/edit-[id].vue

@@ -7,12 +7,16 @@
                 返回
             </div>
         </div>
-        <editor v-model:title="title" v-model:summary="summary" v-model:tags="tags" v-model:content="content" />
+        <editor v-model:title="title" v-model:summary="summary" v-model:tags="tags" v-model:content="content"
+            :disabled="disableEdit" />
         <el-row>
             <el-col :span="24">
                 <div class="flex-end">
-                    <el-text v-if="message" :type="message.type" style="user-select: none;">{{ message.message }}</el-text>
+                    <el-text v-if="message" :type="message.type" style="user-select: none;">{{ message.message
-                    <el-button @click="handleSubmit" style="margin-left: 10px;">
+                        }}</el-text>
+                    <el-button @click="handleClickDelete" style="margin-left: 10px;" v-if="!isNewPost">
+                        delete
+                    </el-button><el-button @click="handleSubmit" style="margin-left: 10px;">
                         upload
                     </el-button>
                 </div>
@@ -27,6 +31,7 @@ import useDefaultStore from '~/hooks/pinia/useDefaultStore';
 import useFetch from '~/hooks/useMiaoFetch';
 import type { postItem } from '~/types/post';
 import chevronDown from "~/components/icons/chevronDown.vue";
+// import type { Action } from 'element-plus/es/components/index.mjs';
 
 type resType = {
     data: string
@@ -38,12 +43,17 @@ const { post: { getPost, updatePost, uploadPost } } = useFetch()
 const route = useRoute()
 const router = useRouter()
 
+const isNewPost = ref(route.params.id === 'new')
+
 const id = ref<number>(-1)
 const title = ref<string>('')
 const summary = ref<string>('')
 const tags = ref<string[]>([])
 const content = ref<string>('')
 
+// 等待加载完成才允许编辑
+const disableEdit = ref(true)
+
 const message = ref<{ type: "" | "success" | "warning" | "info" | "primary" | "danger", message: string }>()
 
 const handleSubmit = () => {
@@ -54,6 +64,50 @@ const handleSubmit = () => {
     }
 }
 
+const handleClickDelete = async () => {
+    try {
+        await ElMessageBox.confirm(
+            '是否确定删除本篇文章？',
+            '警告',
+            {
+                confirmButtonText: '删除',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+        await ElMessageBox.confirm(
+            '再次确认删除本篇文章',
+            '警告',
+            {
+                confirmButtonText: '删除',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+        try {
+            const response = await $fetch('/api/posts/deletePost', {
+                method: 'POST',
+                body: {
+                    id: id.value
+                }
+            })
+            ElMessage({
+                type: 'success',
+                message: '删除文章完成',
+            })
+            const store = useDefaultStore()
+            store.deleteCache('posts')
+            router.back()
+        } catch {
+            ElMessage({
+                type: 'error',
+                message: '删除失败',
+            })
+        }
+    } catch {
+    }
+}
+
 const handleUpload = async () => {
     try {
         message.value = {
@@ -81,6 +135,7 @@ const handleUpload = async () => {
         }
         const store = useDefaultStore()
         store.deleteCache('posts')
+        isNewPost.value = false
     } catch (error) {
         console.error(error)
         message.value = {
@@ -129,16 +184,27 @@ const handleBack = () => {
 }
 
 onMounted(async () => {
-    console.log('route', route.params.id, route.params.id === 'new')
     if (route.params.id !== 'new') {
+        message.value = {
+            type: 'info',
+            message: '初始化中'
+        }
         id.value = parseInt(route.params.id as string)
         const res = await getPost(id.value) as any as resType
-        console.log(res)
         id.value = res.id
         title.value = res.title
         summary.value = res.summary
         tags.value = []
         content.value = res.data
+        disableEdit.value = false
+
+
+        message.value = {
+            type: 'info',
+            message: ''
+        }
+    } else {
+        disableEdit.value = false
     }
 })
 </script>

server/api/posts/deletePost.ts

@@ -0,0 +1,61 @@
+// miaoBlog/server/api/posts/deletePost.ts
+import DB from 'better-sqlite3';
+import cacheResult from '~/server/utils/cacheRes';
+
+function prepareDB() {
+    const db = new DB('./userData/db/posts.db');
+
+    const deletePostStmt = db.prepare('DELETE FROM posts WHERE id = ?');
+    const deleteContentStmt = db.prepare('DELETE FROM postContent WHERE id = ?');
+    const getTagIdStmt = db.prepare('SELECT tag_id FROM posts WHERE id = ?');
+    const deleteTagsStmt = db.prepare('DELETE FROM tags WHERE id = ?');
+
+    return { db, deletePostStmt, deleteContentStmt, getTagIdStmt, deleteTagsStmt };
+}
+
+export default defineEventHandler(async (event) => {
+    const { db, deletePostStmt, deleteContentStmt, getTagIdStmt, deleteTagsStmt } = cacheResult(prepareDB)();
+
+    const body = await readBody(event);
+    const { id } = body;
+
+    // 检查是否提供了有效的id
+    if (!id || isNaN(Number(id))) {
+        db.close();
+        return {
+            code: 400,
+            msg: '无效的id'
+        };
+    }
+
+    try {
+        // 开启事务
+        db.transaction(() => {
+            // 先从posts表中删除文章记录
+            deletePostStmt.run(Number(id));
+
+            // 再从postContent表中删除文章内容记录
+            deleteContentStmt.run(Number(id));
+
+            // 查找该文章对应的tag_id
+            const tagRow: any = getTagIdStmt.get(Number(id));
+            if (tagRow && tagRow.tag_id) {
+                // 如果存在tag_id，从tags表中删除对应的标签记录
+                deleteTagsStmt.run(tagRow.tag_id);
+            }
+        })();
+
+        db.close();
+        return {
+            code: 200,
+            msg: '删除成功'
+        };
+    } catch (error) {
+        console.error('删除数据时出错:', error);
+        db.close();
+        return {
+            code: 500,
+            msg: '服务器内部错误'
+        };
+    }
+});

style/default.scss

@@ -15,4 +15,8 @@ body {
 
 :focus-visible {
     outline: #15aa8761 auto 1px;
+}
+
+.el-message {
+    z-index: 70582140 !important;
 }