黑马程序员_大事件项目笔记5_文章分类添加
文章分类页面-[element-plus 表格]
功能需求说明：
①基本架子-PageContainer封装
②文章分类渲染&loading处理
③文章分类添加编辑[element-plus弹层]
④文章分类删除
3.1添加分类-显示弹层封装弹层组件
官网中的Dialog对话框的代码
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
以上步骤的全部代码
在acticle文件夹中的ArticleChannel.vue文件中
<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { artGetChannelsService } from '../../api/article'
const channelList = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const getChannelList = async () => {
loading.value = true
const res = await artGetChannelsService()
channelList.value = res.data.data
channelList.value = []
console.log(channelList.value)
}
getChannelList()
const onDelChannel = (row, $index) => {
console.log(row, $index)
}
const onEditChannel = (row, $index) => {
console.log(row, $index)
}
const onAddChannel = () => {
dialogVisible.value = true
}
</script>
<template>
<page-container title="文章分类">
<template #extra>
<el-button @click="onAddChannel">添加分类</el-button>
</template>
<el-table v-loading="loading" :data="channelList" style="width: 100%">
<el-table-column type="index" label="序号"> width="100"</el-table-column>
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
<el-table-column prop="cate_alias" labe="分类别名"></el-table-column>
<el-table-column label="操作" width="150">
<!-- row就是channelList的一项，$index 下标 -->
<template #default="{ row, $index }">
<el-button
:icon="Edit"
circle
plain
type="primary"
@click="onEditChannel(row, $index)"
></el-button>
<el-button
:icon="Delete"
circle
plain
type="danger"
@click="onDelChannel(row, $index)"
></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据"></el-empty>
</template>
</el-table>
<el-dialog title="提示" v-model:visible="dialogVisible" width="30%">
<span>我是内容部分</span>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</page-container>
</template>
<style lang="scss" scoped></style>
发装备组件部分
在article文件夹中，新建一个components文件夹
在views文件夹中的components文件夹中的ChannelEdit.vue文件中
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
//组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
//open({})=>表单无需渲染，说明是添加
//open({id,cate_name,...})=>表单需要渲染，说明是编辑
//open调用后，可以打开弹窗
const open = (row) => {
console.log(row)
dialogVisible.value = true
}
//向外暴露的方法
defineExpose({
open
})
</script>
<template>
<el-dialog title="添加弹层" v-model="dialogVisible" width="30%">
<div>渲染表单</div>
<span>我是内容部分</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">
确认</el-button
>
</span>
</template>
</el-dialog>
</template>
在views文件中的ArticleChannel.vue文件中的代码
<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { artGetChannelsService } from '../../api/article'
import ChannelEdit from './components/ChannelEdit.vue'
const channelList = ref([])
const loading = ref(false)
const dialog = ref()
const getChannelList = async () => {
loading.value = true
const res = await artGetChannelsService()
channelList.value = res.data.data
channelList.value = []
console.log(channelList.value)
}
getChannelList()
const onDelChannel = (row, $index) => {
console.log(row, $index)
}
const onEditChannel = (row) => {
dialog.value.open(row)
}
const onAddChannel = () => {
dialog.value.open({})
}
</script>
<template>
<page-container title="文章分类">
<template #extra>
<el-button @click="onAddChannel">添加分类</el-button>
</template>
<el-table v-loading="loading" :data="channelList" style="width: 100%">
<el-table-column type="index" label="序号"> width="100"</el-table-column>
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
<el-table-column prop="cate_alias" labe="分类别名"></el-table-column>
<el-table-column label="操作" width="150">
<!-- row就是channelList的一项，$index 下标 -->
<template #default="{ row, $index }">
<el-button
:icon="Edit"
circle
plain
type="primary"
@click="onEditChannel(row, $index)"
></el-button>
<el-button
:icon="Delete"
circle
plain
type="danger"
@click="onDelChannel(row, $index)"
></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据"></el-empty>
</template>
</el-table>
<channel-edit ref="dialog"></channel-edit>
</page-container>
</template>
<style lang="scss" scoped></style>
3.2.添加分类-添加完成
完成添加和编辑部分的代码
在views文件夹中的article文件夹中的components文件夹中的ChannelEdit.vue文件中
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
const formModel = ref({
cate_name: '',
cate_alias: ''
})
const rules = {
cate_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' },
{
pattern: /^\S{1,10}$/,
message: '分类名必须是1-10位的非空字符',
trigger: 'blur'
}
],
cate_alias: [
{ required: true, message: '请输入分类别名', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9]{1,15}$/,
message: '分类名必须是1-15位的字母或数字',
trigger: 'blur'
}
]
}
//组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
//open({})=>表单无需渲染，说明是添加
//open({id,cate_name,...})=>表单需要渲染，说明是编辑
//open调用后，可以打开弹窗
const open = (row) => {
console.log(row)
dialogVisible.value = true
}
//向外暴露的方法
defineExpose({
open
})
</script>
<template>
<el-dialog title="添加弹层" v-model="dialogVisible" width="30%">
<el-form
:model="formModel"
:rules="rules"
label-width="100px"
style="padding-right: 20px"
>
<el-form-item label="分类名称" prop="cate_name">
<el-input placeholder="请输入我们的分类名称"></el-input>
</el-form-item>
<el-form-item label="分类别名" prop="cate_alias">
<el-input placeholder="请输入我们的分类别名"></el-input> </el-form-item
></el-form>
<span>我是内容部分</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">
确认</el-button
>
</span>
</template>
</el-dialog>
</template>
修改title
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
const formModel = ref({
cate_name: '',
cate_alias: ''
})
const rules = {
cate_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' },
{
pattern: /^\S{1,10}$/,
message: '分类名必须是1-10位的非空字符',
trigger: 'blur'
}
],
cate_alias: [
{ required: true, message: '请输入分类别名', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9]{1,15}$/,
message: '分类名必须是1-15位的字母或数字',
trigger: 'blur'
}
]
}
//组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
//open({})=>表单无需渲染，说明是添加
//open({id,cate_name,...})=>表单需要渲染，说明是编辑
//open调用后，可以打开弹窗
const open = (row) => {
dialogVisible.value = true
formModel.value = { ...row }
}
//向外暴露的方法
defineExpose({
open
})
</script>
<template>
<el-dialog
v-model="dialogVisible"
:title="formModel.id ? '编辑分类' : '添加分类'"
width="30%"
>
<el-form
:model="formModel"
:rules="rules"
label-width="100px"
style="padding-right: 20px"
>
<el-form-item label="分类名称" prop="cate_name">
<el-input placeholder="请输入我们的分类名称"></el-input>
</el-form-item>
<el-form-item label="分类别名" prop="cate_alias">
<el-input placeholder="请输入我们的分类别名"></el-input> </el-form-item
></el-form>
<span>我是内容部分</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">
确认</el-button
>
</span>
</template>
</el-dialog>
</template>
在article.js文件中
import request from '@/utils/request'
// 获取文章分类
export const artGetChannelsService = () => request.get('/my/cate/list')
// 添加文章分类
export const artAddChannelService = (data) => request.post('/my/cate/add', data)
// 编辑文章分类
export const artEditChannelService = (data) =>
request.put('/my/cate/info', data)
// 删除文章分类
export const artDelChannelService = (id) =>
request.delete('/my/cate/del', {
params: { id }
})
ChannelEdit.vue文件中
<script setup>
import { ref } from 'vue'
import { artEditChannelService, artAddChannelService } from '@/api/article.js'
const dialogVisible = ref(false)
const formRef = ref()
const formModel = ref({
cate_name: '',
cate_alias: ''
})
const rules = {
cate_name: [
{ required: true, message: '请输入分类名称', trigger: 'blur' },
{
pattern: /^\S{1,10}$/,
message: '分类名必须是1-10位的非空字符',
trigger: 'blur'
}
],
cate_alias: [
{ required: true, message: '请输入分类别名', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9]{1,15}$/,
message: '分类名必须是1-15位的字母或数字',
trigger: 'blur'
}
]
}
const emit = defineEmits(['success'])
const onSubmit = async () => {
await formRef.value.validate()
const isEdit = formModel
if (isEdit.value) {
await artEditChannelService(formModel.value)
ElMessage.success('编辑成功')
} else {
await artAddChannelService(formModel.value)
ElMessage.success('添加成功')
}
dialogVisible.value = false
emit('success')
}
//组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
//open({})=>表单无需渲染，说明是添加
//open({id,cate_name,...})=>表单需要渲染，说明是编辑
//open调用后，可以打开弹窗
const open = (row) => {
dialogVisible.value = true
formModel.value = { ...row } //添加->重置了表单内容，编辑->存储了需要辉县的数据
}
//向外暴露的方法
defineExpose({
open
})
</script>
<template>
<el-dialog
v-model="dialogVisible"
:title="formModel.id ? '编辑分类' : '添加分类'"
width="30%"
>
<el-form
ref="formRef"
:model="formModel"
:rules="rules"
label-width="100px"
style="padding-right: 20px"
>
<el-form-item label="分类名称" prop="cate_name">
<el-input placeholder="请输入我们的分类名称"></el-input>
</el-form-item>
<el-form-item label="分类别名" prop="cate_alias">
<el-input placeholder="请输入我们的分类别名"></el-input> </el-form-item
></el-form>
<span>我是内容部分</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit"> 确认</el-button>
</span>
</template>
</el-dialog>
</template>
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
