织梦网站后台视频教程,做网站需要的手续,重庆建设工程信息网官,科讯怎么建设网站1.文章分类页面-element-plus表格
基本架子-PageContainer封装 按需引入的彩蛋#xff0c;components里面的内容都会自动注册 用el-card组件#xff0c;里面使用插槽或具名插槽 文章分类渲染 loading处理 序号#xff1a;
el-table-column typeindexcomponents里面的内容都会自动注册 用el-card组件里面使用插槽或具名插槽 文章分类渲染 loading处理 序号
el-table-column typeindex width50 /loading效果
const getChannelList async () {loading.value trueconst res await artGetChannelsService()channelList.value res.data.dataloading.value false
}空内容
template #emptyel-empty description没有数据 /
/template文章分类添加编辑【element-plus弹层】
el-form
:modelformModel
:rulesrules
label-width100px
stylepadding-right: 30px
el-form-item label分类名称 propcata_nameel-input v-modelformModel.cata_nameplaceholder请输入分类名称/el-form-itemel-form-item label分类别名 propcata_aliasel-input v-modelformModel.cata_aliasplaceholder请输入分类别名/el-form-item
/el-form4. 添加文章分类 接口文档
export const artAddChannelService (data) request.post(/my/cata/add, data)编辑文档
export const artEditChannelService (data) request.put(/my/cata/info, data)5. 文章分类删除
请求参数query 删除文章分类
export const artDelChannelService (id) request.delete(/my/cata/del, {params: {id}
})2.文章管理页面-element-plus 进阶
文章列表渲染带搜索带分页 label是给用户看的value是收集给后台的 在form里面配置inline属性搜索框就能在一行显示了 利用prop配置 利用作用域插槽row可以获取当前行的数据 v-for遍历item 获取文章列表
export const artGetListService (params) request.get(/my/artticle/list, {params})必须是大写字母且字母不能改必须是YYYY年MM月DD日
export const formatTime (time) dayjs(time).format(YYYY年MM月DD日)最后再导入使用 分页渲染
//处理分页逻辑
const onSize (size) {//只要是每页条数变化了那么原本正在访问的当页意义不大了//重新从 第一页渲染params.value.pagenum 1params.value.pagesize sizegetArticleList()
}loading效果
:v-loadingloading添加文章抽屉文件上传富文本 抽屉
el-drawer
v-modelvisibleDrawer
title大标题
directionrt1
size50%/el-drawer(1)open{{}},添加操作添加表单初始化无数据 (2)open{{ id:xx,…}},编辑操作编辑表单初始化需回显 准备数据方法form表单结构重置添加下拉菜单 on-change 钩子 添加文件上传成功和失败都会调用 富文本编辑器
quill-editor themeanow v-model:contentformModel.content/quill-editor添加和编辑是不一样的 父组件监听事件重新渲染
//添加修改成功
const onSuccess (type) {if(type add) {//如果是添加需要跳转渲染最后一页编辑直接渲染当前页const lastPage Math.ceil((total.value 1)/params.value.pagesize)params.value.pagenum lastPage}
}添加完成后的内容重置 3. 编辑文章共用抽屉 编辑文章的回显
imgUrl.value baseURL formModel.value.cover_img
//提交到后台需要的是filez格式将网络图片转成format格式
//网络图片转成File对象要转换
formModel.value.cover_img await imageUrlToFile(imgUrl.value,formModel.value)else{console.log(添加功能)
}封装接口用id获取数据详情-页面中调用渲染 4. 删除文章
