blog/blog-vue
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add admin pagination

Browse Source
This commit is contained in:
merlin
2025-11-06 11:11:08 +08:00
parent bf40e13b82
commit e64cb74c9d
5 changed files with 164 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MarkdownEditor.vue
View File

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

3
src/styles/admin.css
View File

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

39
src/views/admin/article.vue
View File

@@ -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 () => {
}
}
onMounted(() => {
page.value = 1
getarticles()
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("删除失败")
}
}
watch(page, getarticles, { immediate: true })
// onMounted(() => {
// page.value = 1
// getarticles()
// })
</script>

98
src/views/admin/comments.vue
View File

@@ -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="profile" label="" />
<el-table-column prop="comment" label="评论内容" />
<el-table-column prop="sent" label="发送时间" />
<el-table-column prop="u_id" label="发送人ID" />
<el-table-column prop="content" label="评论内容" />
<el-table-column prop="published" 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(() => {
page.value = 1
getComment()
const view = async (scope) =>{
try{
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>

48
src/views/admin/news.vue
View File

@@ -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 () => {
}
}
onMounted(() => {
page.value = 1
getNews()
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("删除失败")
}
}
watch(page, getNews, { immediate: true })
// onMounted(() => {
// page.value = 1
// getNews()
// })
</script>