【前端开发学习笔记16】Vue_9

文章分类架子

多个页面复用，封装成组件：

• props 定制标题
• 默认插槽 default 定制内容主体
• 具名插槽 extra 定制按钮

<template><el-card class="page-container"><template #header><div class="header"><span>{{ title }}</span><div class="extra"><slot name="extra"></slot></div></div></template><slot></slot></el-card>
</template>

文章分类渲染

1. 封装API：请求获取表格数据

2. el - table表格动态渲染

3. 表格静态样式

添加分类

用dialogVisible 控制显示隐藏

const dialogVisible = ref(false)

// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({}) => 表单无需渲染，说明是添加
// open({ id, cate_name,...... }) => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {console.log(row)dialogVisible.value = true
}// 向外暴露方法
defineExpose({open
})

 输入规范

1. api/article.js 封装请求 API

// 添加文章分类
export const artAddChannelService = (data) => request.post ('/my/cate/add', data)
// 编辑文章分类
export const artEditChannelService = (data) => request.put ('/my/cate/info', data)

2.页面中校验，判断，提交请求

<el - form ref="formRef">
const formRef = ref ()
const onSubmit = async () => {
await formRef.value.validate ()
formModel.value.id
? await artEditChannelService (formModel.value)
: await artAddChannelService (formModel.value)
ElMessage ({
type:'success',
message: formModel.value.id? ' 编辑成功 ' : ' 添加成功 '
})
dialogVisible.value = false
}

3.通知父组件进行回显

删除分类

封装：

// 删除文章分类
export const artDelChannelService = (id) =>request.delete('/my/cate/del', {params: { id }})

配置中文

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script><template><div><!-- App.vue只需要留一个路由出口router-view即可 --><el-config-provider:locale="zhCn"><router-view></router-view></el-config-provider></div>
</template><style scoped></style>

封装API接口，请求渲染

1.api/article.js 封装接口：

export const artGetListService = (params) => request.get('/my/article/list', { params })

 

2.页面中调用保存数据：

const articleList = ref([])
const total = ref(0)const getArticleList = async () => {const res = await artGetListService(params.value)articleList.value = res.data.datatotal.value = res.data.total
}
getArticleList()

3.新建 utils/format.js 封装格式化日期函数：

import { dayjs } from 'element-plus'
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

4.导入使用

分页渲染

1.添加el-pagination组件

<el-paginationv-model:current-page="params.pagenum"v-model:page-size="params.pagesize":page-sizes="[2,3,5,10]":background="true"layout="jumper,total,sizes,prev,pager,next":total="total"@size-change="onSizeChange"@current-change="onCurrentChange"style="margin-top:20px;justify-content:flex-end;"
></el-pagination>

2.提供分页修改逻辑

const onSizeChange = (size) => {params.value.pagenum = 1params.value.pagesize = sizegetArticleList()
}
const onCurrentChange = (page) => {params.value.pagenum = pagegetArticleList()
}

添加 loading 处理

1.准备数据：

const loading = ref(false)

2.el - table 上面绑定： 

<el-table v-loading="loading">...</el-table>

3.发送请求时添加 loading： 

const getArticleList = async () => {loading.value = trueloading.value = false
}
getArticleList()

抽屉组件

1.准备数据：

import { ref } from 'vue'
const visibleDrawer = ref(false)

2.准备抽屉容器： 

<el-drawer v-model="visibleDrawer" title="I am the title"><span>Hi there!</span></el-drawer>

3.点击修改布尔值显示抽屉： 

<el-button type="primary" @click="onAddArticle">发布文章</el-button>
const visibleDrawer = ref(false)
const onAddArticle = () => {visibleDrawer.value = true
}

封装抽屉组件 ArticleEdit

添加和编辑可以共用一个抽屉，所以将抽屉封装成一个组件。
组件对外暴露一个方法 open，基于 open 的参数，初始化表单数据，并判断区分是添加还是编辑：

1. open({}) => 添加操作，添加表单初始化无数据
2. open({ id: xx,... }) => 编辑操作，编辑表单初始化需回显

上传文件

1.关闭自动上传，准备结构：

import { Plus } from '@element-plus/icons-vue'<el-uploadclass="avatar-uploader":auto-upload="false":show-file-list="false":on-change="onUploadFile"
><img v-if="imgUrl" :src="imgUrl" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>

2.准备数据和选择图片的处理逻辑：

const imgUrl = ref('')
const onUploadFile = (uploadFile) => {imgUrl.value = URL.createObjectURL(uploadFile.raw)formModel.value.cover_img = uploadFile.raw
}

富文本编辑器 [vue - quill]

官网地址：https://vueup.github.io/vue - quill/

1.安装包：

pnpm add @vueup/vue-quill@latest

2.注册成局部组件：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

3.页面中使用绑定：

<div class="editor"><quill-editortheme="snow"v-model:content="formModel.content"contentType="html"></quill-editor>
</div>

添加文章功能

1封装添加接口：

export const artPublishService = (data) => request.post('my/article/add', data)

2.注册点击事件调用

// 转换 formData 数据
const fd = new FormData()
for (let key in formModel.value) {fd.append(key, formModel.value[key])
}

3.父组件监听事件,重新渲染

<article-edit ref="articleEditRef" @success="onSuccess"></article-edit>
<script>const onSuccess = (type) => {if (type === 'add') {const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)params.value.pagenum = lastPage}getArticleList()}
</script>

文章编辑

1.封装编辑接口：

export const artEditService = (data) => request.put('my/article/info', data)

2.提交时调用： 

const onPublish = async (state) => {if (formModel.value.id) {await artEditService(fd)ElMessage.success('编辑成功')visibleDrawer.value = falseemit('success', 'edit')} else {// 添加请求}
}