78- vue3案例 - 09-文章管理

一. 文章管理页面 - [element-plus 进阶]

功能需求说明:
        (1). 文章列表渲染(带搜索 & 带分页)

        (2). 添加文章(抽屉 &文件上传& 富文本)

        (3). 编辑文章(共用抽屉)

        (4). 删除文章

1. 基本静态结构

        src\views\article\AtricleManage.vue

<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
// 假数据
const articleList = ref([
  {
    id: 5961,
    title: '新的文章啊',
    pub_date: '2022-07-10 14:53:52.604',
    state: '已发布',
    cate_name: '体育'
  },
  {
    id: 5962,
    title: '新的文章啊',
    pub_date: '2022-07-10 14:54:30.904',
    state: null,
    cate_name: '体育'
  }
])
// 编辑逻辑
const onEditArticle = (row) => {
  console.log(row)
}
// 删除逻辑
const onDeleteArticle = (row) => {
  console.log(row)
}
</script>
<template>
  <!-- 可以直接使用components里的组件-->
  <page-container title="文章管理">
    <!-- 具名插槽 -->
    <template #extra>
      <el-button>添加文章</el-button>
    </template>
    <!-- 普通插槽内容 -->

    <!-- 表单区域,下拉框 -->
    <el-form inline>
      <el-form-item label="文章分类：">
        <!-- label展示给用户看的, value 收集起来提交给后台的 -->
        <el-select>
          <el-option label="新闻" value="111"></el-option>
          <el-option label="体育" value="222"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态：">
        <!-- 这里后台标记发布状态,就是通过中文标记的, 已发布 / 草稿 -->
        <el-select>
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="articleList">
      <el-table-column label="文章标题" prop="title">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"></el-table-column>
      <el-table-column label="发表时间" prop="pub_date"> </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <!-- 利用作用域插槽 row 可以获取当前行的数据 => v-for 遍历 item -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditArticle(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDeleteArticle(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
  </page-container>
</template>

<style lang="scss" scoped></style>

二. 中英国际化处理

                App.vue

        默认是英文的，由于这里不涉及切换， 所以在 App.vue 中直接导入设置成中文即可，

<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>

三. 文章分类选择

1. 封装文章分类下拉框数据为组件

        src\views\article\components\ChannelSelect.vue

<template>
  <!-- label展示给用户看的, value 收集起来提交给后台的 -->
  <el-select>
    <el-option label="新闻" value="111"></el-option>
    <el-option label="体育" value="222"></el-option>
  </el-select>
</template>

2. 文章管理调用下框框数据组件

        src\views\article\AtricleManage.vue

<script setup>
import ChannelSelect from './components/ChannelSelect.vue' //引入下拉数据组件
...
</script>

<template>
  <!-- 下拉框 -->
   <el-form-item label="文章分类：">
     <!-- 调用文章分类下拉框数据组件 -->
     <channel-select></channel-select>
  </el-form-item>
</template>

3. 调用接口，动态渲染下拉分类

        src\views\article\components\ChannelSelect.vue

<script setup>
import { artGetChannelService } from '@/api/article.js' // 导入获取分类api
import { ref } from 'vue'

const channelList = ref([])
const getChannelList = async () => {
  const res = await artGetChannelService() // 调用获取分类api
  channelList.value = res.data.data
}

getChannelList() // 一进页面就执行函数
</script>
<template>
  <!-- label展示给用户看的, value 收集起来提交给后台的 -->
  <el-select>
    <el-option
      v-for="channel in channelList"
      :key="channel.id"
      :label="channel.cate_name"
      :value="channel.id"
    ></el-option>
  </el-select>
</template>

4. v-model父子通信完成下拉框选择

        (1). 父组件

                src\views\article\AtricleManage.vue

        

<script setup>
...
// 定义请求参数对象
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})
</script>

<template>
        <!-- 调用文章分类下拉框数据组件 -->
        <!-- Vue2 => v-model: :value 和 @input 的简写 -->
        <!-- Vue3 => v-model: :modelValue 和 @update:modelValue 的简写 -->
        <channel-select v-model="params.cate_id"></channel-select>

        <!-- Vue3 => v-model:cid  :cid 和 @update:cid 的简写 -->
        <!-- <channel-select v-model:cid="params.cate_id"></channel-select> -->

    <!-- 发布状态也需要绑定下,便于将来提交表单 -->
    <el-select v-model="params.state">
      <el-option label="已发布" value="已发布"></el-option>
      <el-option label="草稿" value="草稿"></el-option>
     </el-select>
</template>

        (2). 子组件

                src\views\article\components\ChannelSelect.vue

<script setup>
...
defineProps({
  // 接收父组件传递的数据
  modelValue: {
    type: [Number, String]
  }
})
const emit = defineEmits(['update:modelValue']) // 定义emit事件
</script>

<template>
    <!-- 触发,子传父,将$event传递给父组件 -->
    <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
  >
    ...
    </el-select>
</template>

四. 文章列表动态渲染

1. 封装文章列表api

        src\api\article.js

import request from '@/utils/request'
...
// 获取文章列表
export const artGetListService = (params) =>
  request.get('/my/article/list', { params })

2. 页面中调用api

        src\views\article\AtricleManage.vue

<script setup>
...
import { artGetListService } from '@/api/article.js' // 导入api

const articleList = ref([]) // 文章列表
const total = ref(0) // 总条数
// 定义请求参数对象
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})

// 基于 params参数,获取文章列表
const getArticleList = async () => {
  const res = await artGetListService(params.value) // 调用获取文章api
  articleList.value = res.data.data
  total.value = res.data.total
}

getArticleList() // 调用函数
...
</script>

3. 封装格式化日期函数

        src\utils\format.js

import { dayjs } from 'element-plus'

export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

4. 页面中调用日期函数

        src\views\article\AtricleManage.vue

<script setup>
import { formatTime } from '@/utils/format.js'
...
</script>

<template>
    <el-table-column label="发表时间" prop="pub_date">
        <template #default="{ row }"> 
            {{ formatTime(row.pub_date) }}
        </template>
    </el-table-column>
</template>

五. 文章列表-分页渲染

1. 分页渲染 - [Pagination 组件]

        src\views\article\AtricleManage.vue

<template>
 <!--表格区域-->
 ...
 <!-- 分页区域 -->

    <el-pagination
      v-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"
    />
  </page-container>
</template>

2. 提供分页修改逻辑

        src\views\article\AtricleManage.vue

<script setup>
...// 定义请求参数对象
const params = ref({
  pagenum: 1, //当前页
  pagesize: 5, // 当前生效的每页条数
  cate_id: '',
  state: ''
})

// 处理分页逻辑
const onSizeChange = (size) => {
  // console.log('当前每页条数', size)
  // 只要是每页条数变化了,那么原来访问的当前页意义不大了,数据大概率已经不在原来那一页了
  // 重新从第一页渲染即可
  params.value.pagenum = 1
  params.value.pagesize = size
  // 基于最新的当前页 和 每页条数,渲染数据
  getArticleList()
}

const onCurrentChange = (page) => {
  // console.log('页码变化了', page)
  //更新当前页
  params.value.pagenum = page
  //基于最新的当前页,渲染数据
  getArticleList()
}
...
</script>

3. 添加 loading 处理

           src\views\article\AtricleManage.vue

<script setup>
const loading = ref(false) // loading状态,默认关闭

// 基于 params参数,获取文章列表
const getArticleList = async () => {
  // 发送请求前开启loading
  loading.value = true
  // 调用获取文章api
  ...
  // 请求结束关闭loading
  loading.value = false
}
</script>

<template>
  <!-- 表格区域,绑定loading -->
  <el-table :data="articleList" v-loading="loading">
      ...
  </el-table>
</template>

4. 搜索 和 重置 功能

         src\views\article\AtricleManage.vue

<script setup>
...
// 搜索逻辑 => 按照最新的条件,重新检索,从第一页开始展示
const onSearch = () => {
  params.value.pagenum = 1 // 重置页面
  getArticleList()
}

// 重置逻辑 => 将筛选条件清空,重新检索,从第一页开始展示
const onReset = () => {
  params.value.pagenum = 1 // 重置页面
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}
...
</script>

<template>
    <el-form-item>
        <!-- 注册点击事件 -->
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
    </el-form-item>
</template>

六. 添加文章-准备抽屉

1. 封装抽屉组件[Drawer 抽屉]

        src\views\article\components\ArticleeEdit.vue

<script setup>
import { ref } from 'vue'

// 控制抽屉显示隐藏
const visibileDrawer = ref(false)

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

// 将open暴露出去
defineExpose({
  open
})
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer v-model="visibileDrawer" title="大标题" direction="rtl" size="50%">
    <span>Hi thrt!</span></el-drawer
  >
</template>

2. 调用抽屉组件

        src\views\article\AtricleManage.vue

<script setup>
import ArticleeEdit from './components/ArticleeEdit.vue' // 导入抽屉组件
...
const articleEditRef = ref() // 定义ref事件

// 添加逻辑,调用方法显示抽屉
const onAddArticle = () => {
  articleEditRef.value.open({})
}

// 编辑逻辑,调用方法显示抽屉
const onEditArticle = (row) => {
  articleEditRef.value.open(row)
}

<script>

<template>
 <!--添加文章定义点击事件-->
 <el-button type="primary" @click="onAddArticle">添加文章</el-button>

 <!--编辑文章定义点击事件-->
 <el-button :icon="Edit" ... @click="onEditArticle(row)"></el-button>

 <!-- 分页区域 -->
    <el-pagination>...</page-container>

  <!-- 添加编辑的抽屉,ref获取组件暴露的方法 -->
  <articlee-edit ref="articleEditRef"></articlee-edit>
</template>

3. 完善抽屉表单结构

        src\views\article\components\ArticleeEdit.vue

        (1).  准备数据 & 判断新增 和 编辑

<script setup>
import { ref } from 'vue'
import ChannelSelect from './ChannelSelect.vue'

// 控制抽屉显示隐藏
const visibileDrawer = ref(false)

// 默认数据
const defaultForm = {
  title: '', // 标题
  cate_id: '', // 分类id
  cover_img: '', // 封面图片 file 对象
  content: '', // string内容
  state: '' // 状态
}
// 准备数据
const formModel = ref({
  ...defaultForm
})

// 组件对外暴露一个方法 open,基于open传来的参数,区分添加还是编辑
const open = (row) => {
  visibileDrawer.value = true //显示抽屉

  if (row.id) {
    // 需要基于row.id 发送请求,获取编辑对应的详情数据,进行回显
    console.log('编辑回显')
  } else {
    formModel.value = { ...defaultForm } // 基于默认的数据,重置form数据
    console.log('添加')
  }
}

// 将open暴露出去
defineExpose({
  open
})
</script>

        (2). 准备form表单

<template>
  <el-drawer
    v-model="visibileDrawer"
    :title="formModel.id ? '编辑文章' : '添加文章'"
    direction="rtl"
    size="50%"
  >
    <!-- 发表文章表单 -->
    <el-form :model="formModel" ref="formRef" label-width="100px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="文章分类" prop="cate_id">
        <!--下拉框数据子组件,width:相当于属性-->
        <channel-select
          v-model="formModel.cate_id"
          width="100%"
        ></channel-select>
      </el-form-item>
      <el-form-item label="文章封面" prop="cover_img"> 文件上传 </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <div class="editor">富文本编辑器</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">发布</el-button>
        <el-button type="info">草稿</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

        (3). 对下拉框数据子组件扩展宽度

                src\views\article\components\ChannelSelect.vue

<script setup>
defineProps({
  // 接收父组件传递的数据
  modelValue: {
    type: [Number, String]
  },
  width: {
    type: String
  }
})
</script>

<template>
 <el-select
    ...
    :style="{ width }"
  >
</template>

七. 添加文章-上传预览

        src\views\article\components\ArticleeEdit.vue

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

<script setup>
...
import { Plus } from '@element-plus/icons-vue'
...
</script>

<template>
 <el-form-item label="文章封面" prop="cover_img">
        <!-- 此处需要关闭 element-plus 的自动上传,不需要配置 action等参数
             只需要做前端的本地预览图片即可,无需在提交前上传图标 
             语法: URL.createObjectURL(...)创建本地预览的地址,来预览   
        -->
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="onSelectFile"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
</template>

2. 图片上传相关逻辑

<script setup>
...
// 图片上传相关逻辑
const imgUrl = ref('')
const onSelectFile = (uploadFile) => {
  imgUrl.value = URL.createObjectURL(uploadFile.raw) //预览图片
  // 立刻将图片对象.存入 fromModel.value.cover_img 将来用于提交
  formModel.value.cover_img = uploadFile.raw
}

</script>

3. 图片框架样式美化

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
</style>

八. 添加文章- 富文本编辑器[vue-quill]

        src\views\article\components\ArticleeEdit.vue

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

1. 安装vue-quill

pnpm add @vueup/vue-quill@latest

 2. 页面中使用vue-quill

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

<template>
...
 <el-form-item label="文章内容" prop="content">
        <div class="editor">
          <quill-editor
            v-model:content="formModel.content"
            content-type="html"
            theme="snow"
          ></quill-editor>
        </div>
      </el-form-item>
</template>

3. vue-quill样式美化

<style lang="scss" scoped>
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
...
</style>

 九. 添加文章-完成

1. 封装添加文章api

        src\api\article.js

// 添加文章
// 注意: data需要是一个formData格式的对象
export const artPublishService = (data) => request.post('/my/article/add', data)

2. 页面中调用

          src\views\article\components\ArticleeEdit.vue

<script setup>
...
// 提交
const emit = defineEmits(['success'])
const onPublish = async (state) => {
  //将已发布 或 草稿,存入 formModel
  formModel.value.state = state

  // 注意: 当前接口,需要的是formData 对象
  // 将普通对象 => 转换成 => formData对象
  const fd = new FormData()
  for (let key in formModel.value) {
    fd.append(key, formModel.value[key])
  }

  // 发请求
  if (formModel.value.id) {
    // 编辑操作
    console.log('编辑操作')
  } else {
    // 添加操作
    await artPublishService(fd)
    ElMessage.success('添加成功')
    visibileDrawer.value = false // 关闭抽屉

    // 通知父组件,添加成功了
    emit('success', 'add')
  }
}

...
</script>

<template>
...
    <!-- 注册点击事件 -->
    <el-button type="primary" @click="onPublish('已发布')">发布</el-button>
    <el-button type="info" @click="onPublish('草稿')">草稿</el-button>
</template>

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

         src\views\article\AtricleManage.vue

<script setup>
...
// 添加 或 编辑成功的 回调
const onSuccess = (type) => {
  if (type === 'add') {
    // 如果是添加,最好渲染最后一页
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
    // 更新成,最大页码数,在渲染
    params.value.pagenum = lastPage
  }
  getArticleList()
}
...
</script>

<template>
...
  <!-- 添加编辑的抽屉,ref获取组件暴露的方法 -->
  <articlee-edit ref="articleEditRef" @success="onSuccess"></articlee-edit>
</template>

4. 添加完成后的内容重置 

        src\views\article\components\ArticleeEdit.vue

<script setup>
...
const formRef = ref()
const editorRef = ref() //富文本的ref
const open = (row) => {
  visibileDrawer.value = true //显示抽屉

  if (row.id) {
    // 需要基于row.id 发送请求,获取编辑对应的详情数据,进行回显
    console.log('编辑回显')
  } else {
    formModel.value = { ...defaultForm } // 基于默认的数据,重置form数据
    // 这里重置了表单的数据,但是图片上传img地址,富文本编辑器内容 => 需要手动重置
    imgUrl.value = ''
    editorRef.value.setHTML('') // 使用富文本编辑器的内置方法清空
  }
}
...
</script>

<template>
...
  <quill-editor ref="editorRef" ... ></quill-editor>
</template>

十. 文章管理-编辑 

1. 封装获取详情api

        src\api\article.js

// 获取文章详情
export const artGetDetailService = (id) =>
  request.get('my/article/info', { params: { id } })

2. 页面中调用渲染

        src\views\article\components\ArticleeEdit.vue

<script setup>
import { artGetDetailService } from '@/api/article' // 导入api
import { baseURL } from '@/utils/request'
import axios from 'axios'
...
const open = async (row) => {
  visibileDrawer.value = true //显示抽屉
  if (row.id) {
    // 需要基于row.id 发送请求,获取编辑对应的详情数据,进行回显
    const res = await artGetDetailService(row.id)
    formModel.value = res.data.data
    // 图片需要单独处理回显
    imgUrl.value = baseURL + formModel.value.cover_img
    // 注意: 提交给后台,需要的数据格式,是file对象格式
    // 需要将网络图片地址 => 转换成 file对象,存储起来,将来便于提交
    const file = await imageUrlToFile(imgUrl.value, formModel.value.cover_img)
    formModel.value.cover_img = file
  } else {
    formModel.value = { ...defaultForm } // 基于默认的数据,重置form数据
    // 这里重置了表单的数据,但是图片上传img地址,富文本编辑器内容 => 需要手动重置
    imgUrl.value = ''
    editorRef.value.setHTML('') // 使用富文本编辑器的内置方法清空
  }
}

// 将网络图片地址转换为File对象
async function imageUrlToFile(url, fileName) {
  try {
    // 第一步：使用axios获取网络图片数据
    const response = await axios.get(url, { responseType: 'arraybuffer' })
    const imageData = response.data

    // 第二步：将图片数据转换为Blob对象
    const blob = new Blob([imageData], {
      type: response.headers['content-type']
    })

    // 第三步：创建一个新的File对象
    const file = new File([blob], fileName, { type: blob.type })

    return file
  } catch (error) {
    console.error('将图片转换为File对象时发生错误:', error)
    throw error
  }
}
</script>

3.  编辑提交

        (1). 封装编辑提交api

                src\api\article.js

// 编辑文章提交接口
export const artEditService = (data) => request.put('my/article/info', data)

        (2). 页面中提交时调用

                src\views\article\components\ArticleeEdit.vue

<script setup>
...
import { artEditService } from '@/api/article' // 导入api
...
const onPublish = async (state) => {
  ...
  // 发请求
  if (formModel.value.id) {
    // 编辑操作
    await artEditService(fd)
    ElMessage.success('修改成功')
    visibileDrawer.value = false // 关闭弹窗
    emit('success', 'edit')
  } else {
    ...
  }
}


</script>

十一. 文章管理-删除

1. 封装删除api

         src\api\article.js

export const artDelService = (id) => request.delete('my/article/info', { params: { id } })

2. 页面中调用删除api

        src\views\article\AtricleManage.vue

<script setup>
...
import { artDelService } from '@/api/article.js'
...
// 删除逻辑
const onDeleteArticle = async (row) => {
  await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getArticleList()
}

</script>