feat: add admin pagination

src/components/MarkdownEditor.vue

@@ -51,7 +51,7 @@ onMounted(() => {
                 console.log(response);
                 if (response.code === 200) {
                     console.log('上传成功');
-                    vditor.insertValue('![](' + response.data.url + ')')
+                    vditor.insertValue('![](' + response.data.data + ')')
                 }
             }
         },

src/styles/admin.css

@@ -9,3 +9,6 @@ h1 {
 .left-menu {
   padding: 5%;
 }
+.el-pagination{
+  justify-content: center;
+}

src/views/admin/article.vue

@@ -13,10 +13,13 @@
             <el-table-column label="操作">
                 <template #default="scope">
                     <el-button size="small" @click="edit(scope)">编辑</el-button>
-                    <el-button size="small" type="danger">删除</el-button>
+                    <el-button size="small" @click="remove(scope)" type="danger">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
+        <div class="pagination-block">
+            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
+        </div>
     </el-card>
 
     <el-dialog v-model="openAddarticlesModal" title="新增文章" style="height: 70%; width: 80%;">
@@ -35,7 +38,7 @@
 <script setup>
 import { userInfoStore } from '@/store/store'
 import { ElMessage } from 'element-plus'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import axios from 'axios'
 import MarkdownEditor from '@/components/MarkdownEditor.vue'
 
@@ -146,10 +149,34 @@ const update = async () => {
     }
 }
 
+const remove = async (scope) =>{
+    try{
+        const response = await axios.post("/api/admin/delete/article",{
+            id: scope.row.id
+        },{
+            headers:{
+                Authorization: `Bearer ${userinfo.token}`,
+            }
+        })
+        if(response.data.code !== 200){
+            ElMessage.error(response.data.message)
+            return
+        }
+        ElMessage.success("删除成功")
+        getarticles()
+    }
+    catch(error){
+        console.log(error)
+        ElMessage.error("删除失败")
+    }
+}
 
-onMounted(() => {
+watch(page, getarticles, { immediate: true })
-    page.value = 1
+
-    getarticles()
+
-})
+// onMounted(() => {
+//     page.value = 1
+//     getarticles()
+// })
 
 </script>

src/views/admin/comments.vue

@@ -7,24 +7,35 @@
         </template>
 
         <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="id" label="评论ID" />
             <el-table-column prop="a_id" label="文章ID" />
-            <el-table-column prop="sender" label="发送人" />
+            <el-table-column prop="u_id" label="发送人ID" />
-            <el-table-column prop="profile" label="" />
+            <el-table-column prop="content" label="评论内容" />
-            <el-table-column prop="comment" label="评论内容" />
+            <el-table-column prop="published" label="发送时间" />
-            <el-table-column prop="sent" label="发送时间" />
             <el-table-column label="操作">
                 <template #default="scope">
-                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+                    <el-button size="small" @click="view(scope)">查看</el-button>
+                    <el-button size="small" type="danger" @click="remove(scope)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
+        <div class="pagination-block">
+            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
+        </div>
     </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="viewData.id" :width="dialogWidth" :before-close="handleClose">
+        <p>{{ viewData.u_id }}</p>
+        <p>{{ viewData.content }}</p>
+        <p>{{ viewData.published }}</p>
+        <p>{{ viewData.a_title }}</p>
+    </el-dialog>
 </template>
 
 <script setup>
 import { userInfoStore } from '@/store/store'
 import { ElMessage } from 'element-plus'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted,computed, reactive, watch } from 'vue'
 import axios from 'axios'
 
 const userinfo = userInfoStore()
@@ -32,9 +43,25 @@ const userinfo = userInfoStore()
 const page = ref(1)
 const pageSize = ref(5)
 const total = ref()
+const dialogVisible= ref(false)
 
 const tableData = ref([])
 
+const viewData = reactive({
+    id:"",
+    a_id:"",
+    a_title:"",
+    u_id:"",
+    content:"",
+    published:""
+})
+
+const articlebuffer = ref()
+
+const dialogWidth = computed(() => {
+    return window.innerWidth < 768 ? '90%' : '60%'
+})
+
 const getComment = async () => {
     try {
         const response = await axios.get("/api/admin/get/comments", {
@@ -54,13 +81,64 @@ const getComment = async () => {
         total.value = response.data.data.total
     } catch (error) {
         console.log(error)
-        ElMessage.error("获取文章失败")
+        ElMessage.error("获取评论失败")
     }
 }
 
-onMounted(() => {
+const view = async (scope) =>{
-    page.value = 1
+    try{
-    getComment()
+        const response = await axios.get("/api/blog/get/article/"+ scope.row.a_id)
-})
+        if(response.data.code !== 200){
+            ElMessage.error(response.data.message)
+            return
+        }
+        else{
+            articlebuffer.value = response.data.data
+            viewData.id = scope.row.id
+            viewData.u_id = scope.row.u_id
+            viewData.a_id = scope.row.a_id
+            viewData.a_title = response.data.data.title
+            viewData.content = scope.row.content
+            viewData.published = scope.row.published
+            console.log("查询成功")
+            dialogVisible.value = true
+            return
+        }
+    }
+    catch (error){
+        console.log(error)
+        ElMessage.error("查询失败")
+    }
+}
+
+const remove = async (scope) =>{
+    try{
+        const response = await axios.post("/api/admin/delete/comment",{
+            id: scope.row.id
+        },{
+            headers:{
+                Authorization: `Bearer ${userinfo.token}`,
+            }
+        })
+        if(response.data.code !== 200){
+            ElMessage.error(response.data.message)
+            return
+        }
+        ElMessage.success("删除成功")
+        getComment()
+    }
+    catch(error){
+        console.log(error)
+        ElMessage.error("删除失败")
+    }
+}
+
+watch(page, getComment, { immediate: true })
+
+
+// onMounted(() => {
+//     page.value = 1
+//     getComment()
+// })
 
 </script>

src/views/admin/news.vue

@@ -13,10 +13,13 @@
             <el-table-column label="操作">
                 <template #default="scope">
                     <el-button size="small" @click="edit(scope)">编辑</el-button>
-                    <el-button size="small" type="danger">删除</el-button>
+                    <el-button size="small" @click="remove(scope)" type="danger">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
+        <div class="pagination-block">
+            <el-pagination layout="prev, pager, next" :total=total v-model:page-size="pageSize" v-model:current-page="page"/>
+        </div>
     </el-card>
 
     <el-dialog v-model="openAddNewsModal" title="新增新闻" style="height: 70%; width: 80%;">
@@ -35,7 +38,7 @@
 <script setup>
 import { userInfoStore } from '@/store/store'
 import { ElMessage } from 'element-plus'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import axios from 'axios'
 import MarkdownEditor from '@/components/MarkdownEditor.vue'
 
@@ -77,9 +80,6 @@ const editor2ready = () =>{
 const getNews = async () => {
     try {
         const response = await axios.get("/api/blog/get/news", {
-            headers: {
-                Authorization: "Bearer " + userinfo.token,
-            },
             params: {
                 current: page.value,
                 size: pageSize.value
@@ -104,6 +104,10 @@ const submit = async () => {
         const response = await axios.post("/api/admin/add/news", {
             title: title.value,
             content: editor1.value.getContent(),
+        },{
+            headers: {
+                Authorization: "Bearer " + userinfo.token,
+            }
         })
         if (response.data.code !== 200) {
             ElMessage.error(response.data.message)
@@ -120,7 +124,6 @@ const submit = async () => {
 }
 
 const update = async () => {
-    console.log(userinfo.token)
     try{
         const response = await axios.post("/api/admin/update/news", {
             id: id.value,
@@ -145,10 +148,35 @@ const update = async () => {
     }
 }
 
+const remove = async (scope) =>{
+    try{
+        const response = await axios.post("/api/admin/delete/news",{
+            id: scope.row.id
+        },{
+            headers:{
+                Authorization: `Bearer ${userinfo.token}`,
+            }
+        })
+        if(response.data.code !== 200){
+            ElMessage.error(response.data.message)
+            return
+        }
+        ElMessage.success("删除成功")
+        getNews()
+    }
+    catch(error){
+        console.log(error)
+        ElMessage.error("删除失败")
+    }
+}
 
-onMounted(() => {
+
-    page.value = 1
+watch(page, getNews, { immediate: true })
-    getNews()
+
-})
+
+// onMounted(() => {
+//     page.value = 1
+//     getNews()
+// })
 
 </script>