pun97twox
/
uni-blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

后台页面优化

Browse Source
master
liuyx 2 years ago
parent 8e93686e4c
commit 187f810140
6 changed files with 397 additions and 182 deletions
Show Stats Download Patch File Download Diff File

26
admin/src/views/about/About.vue
Unescape View File

@ -10,7 +10,7 @@
--> -->
<template> <template>
<el-card> <el-card>
<v-md-editor v-model="aboutText" placeholder="向大家介绍一下自己吧！" /> <v-md-editor v-model="about.content" placeholder="向大家介绍一下自己吧！" />
<div class="about-submit-btn"> <div class="about-submit-btn">
<el-button color="#626aef" @click="submit">保 存</el-button> <el-button color="#626aef" @click="submit">保 存</el-button>
</div> </div>
@ -18,17 +18,31 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus' 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({ ElMessage({
message: aboutText.value, message,
type: 'success' type: 'success'
}) })
console.log(aboutText.value) getContent()
} }
</script> </script>

112
admin/src/views/article/Article.vue
Unescape View File

@ -68,7 +68,7 @@
<el-form-item label="文章标签"> <el-form-item label="文章标签">
<el-tag <el-tag
v-for="item in article.tagList" v-for="item in article.tagList"
:key="item.id" :key="item._id"
:closable="true" :closable="true"
size="large" size="large"
style="margin-right: 8px" style="margin-right: 8px"
@ -89,7 +89,12 @@
</template> </template>
<div class="popover-title">标签</div> <div class="popover-title">标签</div>
<div class="popover-container"> <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 }} {{ item.name }}
</el-tag> </el-tag>
</div> </div>
@ -111,60 +116,65 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted, watch } from 'vue'
import Upload from '@/components/Upload.vue' import Upload from '@/components/Upload.vue'
// import axios from 'axios'
import { useRoute } from 'vue-router' 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 route = useRoute()
const article = ref({ const article = ref({
id: null, _id: '',
cover: '', cover: 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png',
title: '', title: '',
content: '', content: '',
tagList: [], tagList: [],
category: '' category: '',
createTime: null,
updateTime: null
}) })
const publishDialogVisible = ref(false) // 发布弹窗的可视与否 const publishDialogVisible = ref(false) // 发布弹窗的可视与否
const categoryList = ref([ const categoryList = ref([])
{ const tagList = 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'
}
])
onMounted(() => { onMounted(async () => {
// 当路由中携带有id信息时表示编辑已有文章
if (route.params.id) { if (route.params.id) {
axios.get('/api/article/' + route.params.id).then((res) => { const { data } = await getArticleById(route.params.id)
console.log(res) article.value = data
article.value = res.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 = () => { const removeCategory = () => {
article.value.category = null article.value.category = null
} }
@ -176,8 +186,9 @@ const addCategory = (item) => {
const addTag = (item) => { const addTag = (item) => {
if ( if (
article.value.tagList.length < 3 && 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) article.value.tagList.push(item)
} }
} }
@ -187,11 +198,24 @@ const removeTag = (item) => {
article.value.tagList.splice(idx, 1) article.value.tagList.splice(idx, 1)
} }
const publishArticle = () => { // 发布文章
const publishArticle = async () => {
publishDialogVisible.value = false 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) console.log(article.value)
const { code, message } = await postArticle(article)
if (code === 200) {
ElMessage({
type: 'success',
message
})
}
} }
// 利用父子组件的传值来进行赋值
const upload = (url) => { const upload = (url) => {
// 将子组件Upload中获取的图片url赋值给article的cover // 将子组件Upload中获取的图片url赋值给article的cover
article.value.cover = url article.value.cover = url
@ -217,7 +241,7 @@ const upload = (url) => {
} }
.tag-item { .tag-item {
cursor: pointer; cursor: pointer;
margin-right: 8px; margin: 0 10px 10px 0;
} }
} }
</style> </style>

117
admin/src/views/article/ArticleList.vue
Unescape View File

@ -1,13 +1,18 @@
<template> <template>
<el-card> <el-card>
<el-button <el-popconfirm
style="margin-bottom: 20px" title="都要删了嘛？"
type="danger" @confirm="multipleDelete"
plain confirm-button-text="是"
:disabled="isMultiple" cancel-button-text="否"
@click="multipleDelete"
>批量删除</el-button
> >
<template #reference>
<el-button style="margin-bottom: 20px" type="danger" plain :disabled="isMultiple"
>批量删除</el-button
>
</template>
</el-popconfirm>
<el-table <el-table
:data="articleList" :data="articleList"
:border="true" :border="true"
@ -36,18 +41,27 @@
</el-table-column> </el-table-column>
<el-table-column prop="tags" label="标签" align="center"> <el-table-column prop="tags" label="标签" align="center">
<template #default="scope"> <template #default="scope">
<el-tag v-for="tag in scope.row.tagList" :key="tag.id" style="margin: 0 6px 5px 0"> <el-tag v-for="tag in scope.row.tagList" :key="tag._id" style="margin: 0 6px 5px 0">
{{ tag }} {{ tag.name }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="views" label="浏览量" align="center" /> <el-table-column prop="views" label="浏览量" align="center" width="70" />
<el-table-column prop="createTime" label="发表时间" align="center" /> <el-table-column prop="createTime" label="发表时间" align="center" width="115" />
<el-table-column prop="updateTime" label="更新时间" align="center" /> <el-table-column prop="updateTime" label="更新时间" align="center" width="115" />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="primary" @click="updateArticle(scope.row.id)">修改</el-button> <el-button type="primary" @click="updateArticle(scope.row._id)">修改</el-button>
<el-button type="danger" @click="deleteArticle(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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -55,7 +69,7 @@
class="pagination-container" class="pagination-container"
v-model:current-page="paginition.currentPage" v-model:current-page="paginition.currentPage"
v-model:page-size="paginition.pageSize" v-model:page-size="paginition.pageSize"
:page-sizes="[10, 20]" :page-sizes="[5, 10, 20]"
background background
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="paginition.total" :total="paginition.total"
@ -66,42 +80,46 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import {
getArticleList as apiGetArticleList,
deleteArticleById,
deleteMutipleArticle
} from '@/api/article'
import { ElMessage } from 'element-plus'
const isMultiple = ref(true) const isMultiple = ref(true)
const multipleSelection = ref([]) const multipleSelection = ref([])
const router = useRouter() const router = useRouter()
const articleList = [ const articleList = ref([])
{
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 paginition = ref({ const paginition = ref({
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 5,
total: 40 total: 0
}) })
const multipleDelete = () => { onMounted(() => {
console.log(multipleSelection.value) 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) => { const handleSelectionChange = (selection) => {
@ -123,16 +141,23 @@ const updateArticle = (id) => {
}) })
} }
const deleteArticle = (id) => { const deleteArticle = async (id) => {
console.log(id) const { code, message } = await deleteArticleById(id)
ElMessage({
type: code === 200 ? 'success' : 'error',
message
})
getArticleList()
} }
const handleSizeChange = (val) => { const handleSizeChange = (val) => {
console.log(`${val} items per page`) paginition.value.pageSize = val
getArticleList()
} }
const handleCurrentChange = (val) => { const handleCurrentChange = (val) => {
console.log(`current page: ${val}`) paginition.value.currentPage = val
getArticleList()
} }
</script> </script>

142
admin/src/views/category/Category.vue
Unescape View File

@ -11,7 +11,7 @@
<template> <template>
<el-card> <el-card>
<div class="operation-container"> <div class="operation-container">
<el-button type="primary" @click="openDialog" <el-button type="primary" @click="openAddDialog"
><el-icon><Plus /></el-icon>新增</el-button ><el-icon><Plus /></el-icon>新增</el-button
> >
<el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete" <el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete"
@ -30,8 +30,17 @@
<el-table-column prop="articleNum" label="文章量" align="center" /> <el-table-column prop="articleNum" label="文章量" align="center" />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="primary" @click="updateCategory(scope.row.id)">修改</el-button> <el-button type="primary" @click="openUpdateDialog(scope.row._id)">修改</el-button>
<el-button type="danger" @click="deleteCategory(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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -47,7 +56,7 @@
@current-change="handleCurrentChange" @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 :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
<el-form-item label="名称" label-width="auto"> <el-form-item label="名称" label-width="auto">
<el-input v-model="categoryFrom.name"></el-input> <el-input v-model="categoryFrom.name"></el-input>
@ -55,8 +64,22 @@
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = 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> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -64,28 +87,20 @@
</template> </template>
<script setup> <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 isMultiple = ref(true)
const multipleSelection = ref([]) const multipleSelection = ref([])
const categoryList = [ const categoryList = ref([])
{
id: 0,
name: '学习笔记',
articleNum: 5
},
{
id: 1,
name: '生活',
articleNum: 5
},
{
id: 2,
name: '散文',
articleNum: 5
}
]
const categoryFrom = ref({ const categoryFrom = ref({
_id: '',
name: '' name: ''
}) })
const paginition = ref({ const paginition = ref({
@ -93,14 +108,25 @@ const paginition = ref({
pageSize: 10, pageSize: 10,
total: 40 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 = () => { const multipleDelete = () => {
console.log(multipleSelection.value) console.log(multipleSelection.value)
} }
// 当选择项发生变化时，multipleSelection数组中的值变为selection
const handleSelectionChange = (selection) => { const handleSelectionChange = (selection) => {
// 当选择项发生变化时，multipleSelection数组中的值变为selection
multipleSelection.value = selection multipleSelection.value = selection
if (multipleSelection.value.length <= 0) { if (multipleSelection.value.length <= 0) {
isMultiple.value = true 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) => { // 根据id删除分类
console.log(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) => { const handleSizeChange = (val) => {
@ -125,9 +170,40 @@ const handleCurrentChange = (val) => {
console.log(`current page: ${val}`) console.log(`current page: ${val}`)
} }
const openDialog = () => { // 提交新增表单
dialogVisible.value = true const submitAddForm = async () => {
categoryFrom.value.name = '' 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> </script>

148
admin/src/views/tag/Tag.vue
Unescape View File

@ -11,7 +11,7 @@
<template> <template>
<el-card> <el-card>
<div class="operation-container"> <div class="operation-container">
<el-button type="primary" @click="openDialog" <el-button type="primary" @click="openAddDialog"
><el-icon><Plus /></el-icon>新增</el-button ><el-icon><Plus /></el-icon>新增</el-button
> >
<el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete" <el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete"
@ -25,8 +25,17 @@
<el-table-column prop="articleNum" label="文章量" align="center" /> <el-table-column prop="articleNum" label="文章量" align="center" />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="primary" @click="updateTag(scope.row.id)">修改</el-button> <el-button type="primary" @click="updateTag(scope.row._id)">修改</el-button>
<el-button type="danger" @click="deleteTag(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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -42,16 +51,30 @@
@current-change="handleCurrentChange" @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 :model="tagFrom" label-width="120px" label-position="left" class="dialog-form">
<el-form-item label="名称" label-width="auto"> <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-item>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = 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> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -59,28 +82,20 @@
</template> </template>
<script setup> <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 isMultiple = ref(true)
const multipleSelection = ref([]) const multipleSelection = ref([])
const tagList = [ const tagList = ref([])
{ const tagFrom = ref({
id: 0, _id: '',
name: 'Vue3',
articleNum: 5
},
{
id: 1,
name: 'JavaScript',
articleNum: 5
},
{
id: 2,
name: 'ElementPlus',
articleNum: 5
}
]
const categoryFrom = ref({
name: '' name: ''
}) })
const paginition = ref({ const paginition = ref({
@ -88,14 +103,26 @@ const paginition = ref({
pageSize: 10, pageSize: 10,
total: 40 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 = () => { const multipleDelete = () => {
console.log(multipleSelection.value) console.log(multipleSelection.value)
} }
// 当选择项发生变化时，multipleSelection数组中的值变为selection
const handleSelectionChange = (selection) => { const handleSelectionChange = (selection) => {
// 当选择项发生变化时，multipleSelection数组中的值变为selection
multipleSelection.value = selection multipleSelection.value = selection
if (multipleSelection.value.length <= 0) { if (multipleSelection.value.length <= 0) {
isMultiple.value = true 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) => { const handleSizeChange = (val) => {
@ -120,9 +157,48 @@ const handleCurrentChange = (val) => {
console.log(`current page: ${val}`) console.log(`current page: ${val}`)
} }
const openDialog = () => { // 打开“添加标签”的弹窗
dialogVisible.value = true const openAddDialog = () => {
categoryFrom.value.name = '' 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> </script>

34
admin/src/views/website/Website.vue
Unescape View File

@ -13,7 +13,7 @@
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="网站名称"> <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>
<el-form-item label="网站作者"> <el-form-item label="网站作者">
<el-input v-model="websiteInfo.author" class="m-form-item" /> <el-input v-model="websiteInfo.author" class="m-form-item" />
@ -52,28 +52,28 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getSiteInfo, updateSiteInfo } from '@/api/site'
const websiteInfo = ref({ const websiteInfo = ref({})
avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
name: 'Liuyx的个人博客', onMounted(() => {
author: 'Liuyx', getInfo()
intro: '抓住现在',
sentence: '过去与未来，存在于每个当下。',
date: '',
notice: '',
github: 'https://github.com/liuyxcc',
gitee: 'https://gitee.com/liuyxcc',
icp: ''
}) })
const submitWebsiteInfo = () => { const getInfo = async () => {
const { data } = await getSiteInfo()
websiteInfo.value = data
}
const submitWebsiteInfo = async () => {
const { message } = await updateSiteInfo(websiteInfo.value)
ElMessage({ ElMessage({
message: websiteInfo.value, type: 'success',
type: 'success' message
}) })
console.log(websiteInfo.value) getInfo()
} }
</script> </script>

Write Preview
Loading…
Cancel
Save