From 187f810140d08c7029a6d45c03c6560ae34b2199 Mon Sep 17 00:00:00 2001
From: liuyx <1517482303@qq.com>
Date: Wed, 28 Dec 2022 14:37:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0=E9=A1=B5=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/views/about/About.vue         |  26 ++++-
 admin/src/views/article/Article.vue     | 112 +++++++++++-------
 admin/src/views/article/ArticleList.vue | 117 +++++++++++--------
 admin/src/views/category/Category.vue   | 142 +++++++++++++++++------
 admin/src/views/tag/Tag.vue             | 148 ++++++++++++++++++------
 admin/src/views/website/Website.vue     |  34 +++---
 6 files changed, 397 insertions(+), 182 deletions(-)

diff --git a/admin/src/views/about/About.vue b/admin/src/views/about/About.vue
index 640a108..b109be0 100644
--- a/admin/src/views/about/About.vue
+++ b/admin/src/views/about/About.vue
@@ -10,7 +10,7 @@
 -->
 <template>
   <el-card>
-    <v-md-editor v-model="aboutText" placeholder="向大家介绍一下自己吧！" />
+    <v-md-editor v-model="about.content" placeholder="向大家介绍一下自己吧！" />
     <div class="about-submit-btn">
       <el-button color="#626aef" @click="submit">保 存</el-button>
     </div>
@@ -18,17 +18,31 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
+import { getAboutContent, updateAboutContent } from '../../api/about'
 
-const aboutText = ref('')
+const about = ref({
+  _id: '',
+  content: ''
+})
 
-const submit = () => {
+onMounted(() => {
+  getContent()
+})
+
+const getContent = async () => {
+  const { data } = await getAboutContent()
+  about.value = data
+}
+
+const submit = async () => {
+  const { code, message } = await updateAboutContent(about.value)
   ElMessage({
-    message: aboutText.value,
+    message,
     type: 'success'
   })
-  console.log(aboutText.value)
+  getContent()
 }
 </script>
 
diff --git a/admin/src/views/article/Article.vue b/admin/src/views/article/Article.vue
index 3140462..f2d9ba1 100644
--- a/admin/src/views/article/Article.vue
+++ b/admin/src/views/article/Article.vue
@@ -68,7 +68,7 @@
         <el-form-item label="文章标签">
           <el-tag
             v-for="item in article.tagList"
-            :key="item.id"
+            :key="item._id"
             :closable="true"
             size="large"
             style="margin-right: 8px"
@@ -89,7 +89,12 @@
             </template>
             <div class="popover-title">标签</div>
             <div class="popover-container">
-              <el-tag v-for="item of tagList" :key="item.id" class="tag-item" @click="addTag(item)">
+              <el-tag
+                v-for="item of tagList"
+                :key="item._id"
+                class="tag-item"
+                @click="addTag(item)"
+              >
                 {{ item.name }}
               </el-tag>
             </div>
@@ -111,60 +116,65 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import Upload from '@/components/Upload.vue'
-// import axios from 'axios'
 import { useRoute } from 'vue-router'
-import axios from 'axios'
+import { getArticleById, postArticle } from '../../api/article'
+import { getTagList } from '../../api/tag'
+import { getCategoryList } from '../../api/category'
+import { ElMessage } from 'element-plus'
+import dayjs from 'dayjs'
 
 const route = useRoute()
 const article = ref({
-  id: null,
-  cover: '',
+  _id: '',
+  cover: 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png',
   title: '',
   content: '',
   tagList: [],
-  category: ''
+  category: '',
+  createTime: null,
+  updateTime: null
 })
 const publishDialogVisible = ref(false) // 发布弹窗的可视与否
-const categoryList = ref([
-  {
-    id: 1,
-    name: '工具'
-  },
-  {
-    id: 2,
-    name: 'Vue'
-  },
-  {
-    id: 3,
-    name: '面试'
-  }
-])
-const tagList = ref([
-  {
-    id: 1,
-    name: 'JS'
-  },
-  {
-    id: 2,
-    name: 'Linux'
-  },
-  {
-    id: 3,
-    name: 'Vite'
-  }
-])
+const categoryList = ref([])
+const tagList = ref([])
 
-onMounted(() => {
+onMounted(async () => {
+  // 当路由中携带有id信息时表示编辑已有文章
   if (route.params.id) {
-    axios.get('/api/article/' + route.params.id).then((res) => {
-      console.log(res)
-      article.value = res.data
-    })
+    const { data } = await getArticleById(route.params.id)
+    article.value = data
+    console.log(article.value)
   }
+  // 获取所有标签列表
+  tagList.value = (await getTagList()).data
+  // 获取所有分类列表
+  categoryList.value = (await getCategoryList()).data
 })
 
+watch(
+  () => route.path,
+  async () => {
+    if (route.params.id) {
+      const { data } = await getArticleById(route.params.id)
+      article.value = data
+      console.log(article.value)
+    } else {
+      article.value = {
+        _id: '',
+        cover: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-6dqemx.jpg',
+        title: '',
+        content: '',
+        tagList: [],
+        category: '',
+        createTime: null,
+        updateTime: null
+      }
+    }
+  }
+)
+
 const removeCategory = () => {
   article.value.category = null
 }
@@ -176,8 +186,9 @@ const addCategory = (item) => {
 const addTag = (item) => {
   if (
     article.value.tagList.length < 3 &&
-    article.value.tagList.findIndex((it) => it.id === item.id) === -1
+    article.value.tagList.findIndex((it) => it._id === item._id) === -1
   ) {
+    // 当文章标签列表长度小于3且选中的标签不在文章标签列表中时才会添加
     article.value.tagList.push(item)
   }
 }
@@ -187,11 +198,24 @@ const removeTag = (item) => {
   article.value.tagList.splice(idx, 1)
 }
 
-const publishArticle = () => {
+// 发布文章
+const publishArticle = async () => {
   publishDialogVisible.value = false
+  if (article.value._id === '') {
+    article.value.createTime = dayjs(new Date()).format('YYYY-MM-DD')
+  }
+  article.value.updateTime = dayjs(new Date()).format('YYYY-MM-DD')
   console.log(article.value)
+  const { code, message } = await postArticle(article)
+  if (code === 200) {
+    ElMessage({
+      type: 'success',
+      message
+    })
+  }
 }
 
+// 利用父子组件的传值来进行赋值
 const upload = (url) => {
   // 将子组件Upload中获取的图片url赋值给article的cover
   article.value.cover = url
@@ -217,7 +241,7 @@ const upload = (url) => {
   }
   .tag-item {
     cursor: pointer;
-    margin-right: 8px;
+    margin: 0 10px 10px 0;
   }
 }
 </style>
diff --git a/admin/src/views/article/ArticleList.vue b/admin/src/views/article/ArticleList.vue
index 97a6255..1a367c6 100644
--- a/admin/src/views/article/ArticleList.vue
+++ b/admin/src/views/article/ArticleList.vue
@@ -1,13 +1,18 @@
 <template>
   <el-card>
-    <el-button
-      style="margin-bottom: 20px"
-      type="danger"
-      plain
-      :disabled="isMultiple"
-      @click="multipleDelete"
-      >批量删除</el-button
+    <el-popconfirm
+      title="都要删了嘛？"
+      @confirm="multipleDelete"
+      confirm-button-text="是"
+      cancel-button-text="否"
     >
+      <template #reference>
+        <el-button style="margin-bottom: 20px" type="danger" plain :disabled="isMultiple"
+          >批量删除</el-button
+        >
+      </template>
+    </el-popconfirm>
+
     <el-table
       :data="articleList"
       :border="true"
@@ -36,18 +41,27 @@
       </el-table-column>
       <el-table-column prop="tags" label="标签" align="center">
         <template #default="scope">
-          <el-tag v-for="tag in scope.row.tagList" :key="tag.id" style="margin: 0 6px 5px 0">
-            {{ tag }}
+          <el-tag v-for="tag in scope.row.tagList" :key="tag._id" style="margin: 0 6px 5px 0">
+            {{ tag.name }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="views" label="浏览量" align="center" />
-      <el-table-column prop="createTime" label="发表时间" align="center" />
-      <el-table-column prop="updateTime" label="更新时间" align="center" />
+      <el-table-column prop="views" label="浏览量" align="center" width="70" />
+      <el-table-column prop="createTime" label="发表时间" align="center" width="115" />
+      <el-table-column prop="updateTime" label="更新时间" align="center" width="115" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" @click="updateArticle(scope.row.id)">修改</el-button>
-          <el-button type="danger" @click="deleteArticle(scope.row.id)">删除</el-button>
+          <el-button type="primary" @click="updateArticle(scope.row._id)">修改</el-button>
+          <el-popconfirm
+            title="确定删除吗？"
+            @confirm="deleteArticle(scope.row._id)"
+            confirm-button-text="是"
+            cancel-button-text="否"
+          >
+            <template #reference>
+              <el-button type="danger">删除</el-button>
+            </template>
+          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
@@ -55,7 +69,7 @@
       class="pagination-container"
       v-model:current-page="paginition.currentPage"
       v-model:page-size="paginition.pageSize"
-      :page-sizes="[10, 20]"
+      :page-sizes="[5, 10, 20]"
       background
       layout="total, sizes, prev, pager, next, jumper"
       :total="paginition.total"
@@ -66,42 +80,46 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import {
+  getArticleList as apiGetArticleList,
+  deleteArticleById,
+  deleteMutipleArticle
+} from '@/api/article'
+import { ElMessage } from 'element-plus'
 
 const isMultiple = ref(true)
 const multipleSelection = ref([])
 const router = useRouter()
-const articleList = [
-  {
-    id: 123,
-    cover: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-6dqemx.jpg',
-    title: '测试',
-    category: '分类1',
-    tagList: ['标签1', '标签2', '标签3'],
-    views: 0,
-    createTime: '2022-11-17',
-    updateTime: '2022-11-17'
-  },
-  {
-    id: 124,
-    cover: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-6dqemx.jpg',
-    title: '测试',
-    category: '分类1',
-    tagList: ['标签1', '标签2', '标签3'],
-    views: 0,
-    createTime: '2022-11-17',
-    updateTime: '2022-11-17'
-  }
-]
+const articleList = ref([])
 const paginition = ref({
   currentPage: 1,
-  pageSize: 10,
-  total: 40
+  pageSize: 5,
+  total: 0
 })
 
-const multipleDelete = () => {
-  console.log(multipleSelection.value)
+onMounted(() => {
+  getArticleList()
+})
+
+const getArticleList = async () => {
+  const { data } = await apiGetArticleList(paginition.value.currentPage, paginition.value.pageSize)
+  articleList.value = data.articleList
+  paginition.value.total = data.count
+}
+
+const multipleDelete = async () => {
+  const idArray = []
+  for (const item of multipleSelection.value) {
+    idArray.push(item._id)
+  }
+  const { code, message } = await deleteMutipleArticle(idArray)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getArticleList()
 }
 
 const handleSelectionChange = (selection) => {
@@ -123,16 +141,23 @@ const updateArticle = (id) => {
   })
 }
 
-const deleteArticle = (id) => {
-  console.log(id)
+const deleteArticle = async (id) => {
+  const { code, message } = await deleteArticleById(id)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getArticleList()
 }
 
 const handleSizeChange = (val) => {
-  console.log(`${val} items per page`)
+  paginition.value.pageSize = val
+  getArticleList()
 }
 
 const handleCurrentChange = (val) => {
-  console.log(`current page: ${val}`)
+  paginition.value.currentPage = val
+  getArticleList()
 }
 </script>
 
diff --git a/admin/src/views/category/Category.vue b/admin/src/views/category/Category.vue
index 3182079..7133151 100644
--- a/admin/src/views/category/Category.vue
+++ b/admin/src/views/category/Category.vue
@@ -11,7 +11,7 @@
 <template>
   <el-card>
     <div class="operation-container">
-      <el-button type="primary" @click="openDialog"
+      <el-button type="primary" @click="openAddDialog"
         ><el-icon><Plus /></el-icon>新增</el-button
       >
       <el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete"
@@ -30,8 +30,17 @@
       <el-table-column prop="articleNum" label="文章量" align="center" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" @click="updateCategory(scope.row.id)">修改</el-button>
-          <el-button type="danger" @click="deleteCategory(scope.row.id)">删除</el-button>
+          <el-button type="primary" @click="openUpdateDialog(scope.row._id)">修改</el-button>
+          <el-popconfirm
+            title="确定删除吗？"
+            @confirm="deleteCategoryById(scope.row._id)"
+            confirm-button-text="是"
+            cancel-button-text="否"
+          >
+            <template #reference>
+              <el-button type="danger">删除</el-button>
+            </template>
+          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
@@ -47,7 +56,7 @@
       @current-change="handleCurrentChange"
     />
     <!-- “新增分类”对话框 -->
-    <el-dialog v-model="dialogVisible" title="新增分类" width="30%">
+    <el-dialog v-model="addDialogVisible" title="新增分类" width="30%">
       <el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
         <el-form-item label="名称" label-width="auto">
           <el-input v-model="categoryFrom.name"></el-input>
@@ -55,8 +64,22 @@
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="dialogVisible = false">提交</el-button>
+          <el-button @click="addDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitAddForm">提交</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- “修改分类”对话框 -->
+    <el-dialog v-model="updateDialogVisible" title="修改分类" width="30%">
+      <el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
+        <el-form-item label="名称" label-width="auto">
+          <el-input v-model="categoryFrom.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="updateDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitUpdateForm">提交</el-button>
         </span>
       </template>
     </el-dialog>
@@ -64,28 +87,20 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import {
+  getCategoryList as apiGetCategoryList,
+  getCategoryById,
+  deleteCategoryById as apiDelCategoryById,
+  updateCategory as apiUpdateCategory
+} from '@/api/category'
+import { ElMessage } from 'element-plus'
 
 const isMultiple = ref(true)
 const multipleSelection = ref([])
-const categoryList = [
-  {
-    id: 0,
-    name: '学习笔记',
-    articleNum: 5
-  },
-  {
-    id: 1,
-    name: '生活',
-    articleNum: 5
-  },
-  {
-    id: 2,
-    name: '散文',
-    articleNum: 5
-  }
-]
+const categoryList = ref([])
 const categoryFrom = ref({
+  _id: '',
   name: ''
 })
 const paginition = ref({
@@ -93,14 +108,25 @@ const paginition = ref({
   pageSize: 10,
   total: 40
 })
-const dialogVisible = ref(false)
+const addDialogVisible = ref(false)
+const updateDialogVisible = ref(false)
+
+onMounted(async () => {
+  getCategoryList()
+})
+
+const getCategoryList = async () => {
+  const { data } = await apiGetCategoryList()
+  categoryList.value = data
+}
 
+// 批量删除
 const multipleDelete = () => {
   console.log(multipleSelection.value)
 }
 
+// 当选择项发生变化时，multipleSelection数组中的值变为selection
 const handleSelectionChange = (selection) => {
-  // 当选择项发生变化时，multipleSelection数组中的值变为selection
   multipleSelection.value = selection
   if (multipleSelection.value.length <= 0) {
     isMultiple.value = true
@@ -109,12 +135,31 @@ const handleSelectionChange = (selection) => {
   }
 }
 
-const updateCategory = (id) => {
-  console.log(id)
+// 显示新增分类弹窗
+const openAddDialog = () => {
+  addDialogVisible.value = true
+  categoryFrom.value.name = ''
+}
+
+// 显示修改分类弹窗
+const openUpdateDialog = async (id) => {
+  updateDialogVisible.value = true
+  categoryFrom.value._id = id
+  const { data } = await getCategoryById(id)
+  categoryFrom.value.name = data.name
 }
 
-const deleteCategory = (id) => {
-  console.log(id)
+// 根据id删除分类
+const deleteCategoryById = async (id) => {
+  // console.log(id)
+  const { code, message } = await apiDelCategoryById(id)
+  if (code === 200) {
+    ElMessage({
+      type: 'success',
+      message
+    })
+  }
+  getCategoryList()
 }
 
 const handleSizeChange = (val) => {
@@ -125,9 +170,40 @@ const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
 }
 
-const openDialog = () => {
-  dialogVisible.value = true
-  categoryFrom.value.name = ''
+// 提交新增表单
+const submitAddForm = async () => {
+  if (categoryFrom.value.name.trim() === '') {
+    ElMessage({
+      type: 'error',
+      message: '分类名不能为空！'
+    })
+    return
+  }
+  addDialogVisible.value = false
+  const { code, message } = await apiUpdateCategory(categoryFrom.value)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getCategoryList()
+}
+
+// 提交修改后的标签
+const submitUpdateForm = async () => {
+  if (categoryFrom.value.name.trim() === '') {
+    ElMessage({
+      type: 'error',
+      message: '标签名不能为空！'
+    })
+    return
+  }
+  updateDialogVisible.value = false
+  const { code, message } = await apiUpdateCategory(categoryFrom.value)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getCategoryList()
 }
 </script>
 
diff --git a/admin/src/views/tag/Tag.vue b/admin/src/views/tag/Tag.vue
index 371609f..178b70b 100644
--- a/admin/src/views/tag/Tag.vue
+++ b/admin/src/views/tag/Tag.vue
@@ -11,7 +11,7 @@
 <template>
   <el-card>
     <div class="operation-container">
-      <el-button type="primary" @click="openDialog"
+      <el-button type="primary" @click="openAddDialog"
         ><el-icon><Plus /></el-icon>新增</el-button
       >
       <el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete"
@@ -25,8 +25,17 @@
       <el-table-column prop="articleNum" label="文章量" align="center" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" @click="updateTag(scope.row.id)">修改</el-button>
-          <el-button type="danger" @click="deleteTag(scope.row.id)">删除</el-button>
+          <el-button type="primary" @click="updateTag(scope.row._id)">修改</el-button>
+          <el-popconfirm
+            title="确定删除吗？"
+            @confirm="deleteTag(scope.row._id)"
+            confirm-button-text="是"
+            cancel-button-text="否"
+          >
+            <template #reference>
+              <el-button type="danger">删除</el-button>
+            </template>
+          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
@@ -42,16 +51,30 @@
       @current-change="handleCurrentChange"
     />
     <!-- “新增标签”对话框 -->
-    <el-dialog v-model="dialogVisible" title="新增标签" width="30%">
-      <el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
+    <el-dialog v-model="addDialogVisible" title="新增标签" width="30%">
+      <el-form :model="tagFrom" label-width="120px" label-position="left" class="dialog-form">
         <el-form-item label="名称" label-width="auto">
-          <el-input v-model="categoryFrom.name"></el-input>
+          <el-input v-model="tagFrom.name"></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="dialogVisible = false">提交</el-button>
+          <el-button @click="addDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitAddForm">提交</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- “修改标签”对话框 -->
+    <el-dialog v-model="updateDialogVisible" title="修改标签" width="30%">
+      <el-form :model="tagFrom" label-width="120px" label-position="left" class="dialog-form">
+        <el-form-item label="名称" label-width="auto">
+          <el-input v-model="tagFrom.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="updateDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitUpdateForm">提交</el-button>
         </span>
       </template>
     </el-dialog>
@@ -59,28 +82,20 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  getTagList as apiGetTagList,
+  getTagById,
+  updateTag as apiUpdateTag,
+  deleteTagById
+} from '@/api/tag'
 
 const isMultiple = ref(true)
 const multipleSelection = ref([])
-const tagList = [
-  {
-    id: 0,
-    name: 'Vue3',
-    articleNum: 5
-  },
-  {
-    id: 1,
-    name: 'JavaScript',
-    articleNum: 5
-  },
-  {
-    id: 2,
-    name: 'ElementPlus',
-    articleNum: 5
-  }
-]
-const categoryFrom = ref({
+const tagList = ref([])
+const tagFrom = ref({
+  _id: '',
   name: ''
 })
 const paginition = ref({
@@ -88,14 +103,26 @@ const paginition = ref({
   pageSize: 10,
   total: 40
 })
-const dialogVisible = ref(false)
+const addDialogVisible = ref(false)
+const updateDialogVisible = ref(false)
 
+onMounted(() => {
+  getTagList()
+})
+
+// 获取标签列表
+const getTagList = async () => {
+  const { data } = await apiGetTagList()
+  tagList.value = data
+}
+
+// 批量删除标签
 const multipleDelete = () => {
   console.log(multipleSelection.value)
 }
 
+// 当选择项发生变化时，multipleSelection数组中的值变为selection
 const handleSelectionChange = (selection) => {
-  // 当选择项发生变化时，multipleSelection数组中的值变为selection
   multipleSelection.value = selection
   if (multipleSelection.value.length <= 0) {
     isMultiple.value = true
@@ -104,12 +131,22 @@ const handleSelectionChange = (selection) => {
   }
 }
 
-const updateTag = (id) => {
-  console.log(id)
+// 显示弹窗修改标签
+const updateTag = async (id) => {
+  updateDialogVisible.value = true
+  tagFrom.value._id = id
+  const { data } = await getTagById(id)
+  tagFrom.value.name = data.name
 }
 
-const deleteTag = (id) => {
-  console.log(id)
+// 删除标签
+const deleteTag = async (id) => {
+  const { code, message } = await deleteTagById(id)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getTagList()
 }
 
 const handleSizeChange = (val) => {
@@ -120,9 +157,48 @@ const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
 }
 
-const openDialog = () => {
-  dialogVisible.value = true
-  categoryFrom.value.name = ''
+// 打开“添加标签”的弹窗
+const openAddDialog = () => {
+  addDialogVisible.value = true
+  tagFrom.value.name = '' // 清空
+  tagFrom.value._id = ''
+}
+
+// 提交新增标签表单
+const submitAddForm = async () => {
+  if (tagFrom.value.name.trim() === '') {
+    ElMessage({
+      type: 'error',
+      message: '标签名不能为空！'
+    })
+    return
+  }
+  addDialogVisible.value = false
+  // 提交的表单中，id为-1
+  const { code, message } = await apiUpdateTag(tagFrom.value)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getTagList()
+}
+
+// 提交修改后的标签
+const submitUpdateForm = async () => {
+  if (tagFrom.value.name.trim() === '') {
+    ElMessage({
+      type: 'error',
+      message: '标签名不能为空！'
+    })
+    return
+  }
+  updateDialogVisible.value = false
+  const { code, message } = await apiUpdateTag(tagFrom.value)
+  ElMessage({
+    type: code === 200 ? 'success' : 'error',
+    message
+  })
+  getTagList()
 }
 </script>
 
diff --git a/admin/src/views/website/Website.vue b/admin/src/views/website/Website.vue
index 16a3c9b..1a2171b 100644
--- a/admin/src/views/website/Website.vue
+++ b/admin/src/views/website/Website.vue
@@ -13,7 +13,7 @@
         </el-upload>
       </el-form-item>
       <el-form-item label="网站名称">
-        <el-input v-model="websiteInfo.name" class="m-form-item" />
+        <el-input v-model="websiteInfo.siteName" class="m-form-item" />
       </el-form-item>
       <el-form-item label="网站作者">
         <el-input v-model="websiteInfo.author" class="m-form-item" />
@@ -52,28 +52,28 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
+import { getSiteInfo, updateSiteInfo } from '@/api/site'
 
-const websiteInfo = ref({
-  avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
-  name: 'Liuyx的个人博客',
-  author: 'Liuyx',
-  intro: '抓住现在',
-  sentence: '过去与未来，存在于每个当下。',
-  date: '',
-  notice: '',
-  github: 'https://github.com/liuyxcc',
-  gitee: 'https://gitee.com/liuyxcc',
-  icp: ''
+const websiteInfo = ref({})
+
+onMounted(() => {
+  getInfo()
 })
 
-const submitWebsiteInfo = () => {
+const getInfo = async () => {
+  const { data } = await getSiteInfo()
+  websiteInfo.value = data
+}
+
+const submitWebsiteInfo = async () => {
+  const { message } = await updateSiteInfo(websiteInfo.value)
   ElMessage({
-    message: websiteInfo.value,
-    type: 'success'
+    type: 'success',
+    message
   })
-  console.log(websiteInfo.value)
+  getInfo()
 }
 </script>