Vue3.0项目实战（四）——大事件管理系统文章管理页面 - [element-plus 强化]

最新推荐文章于 2024-10-12 10:41:56 发布
最新推荐文章于 2024-10-12 10:41:56 发布
阅读量1k 收藏 27
点赞数 26
分类专栏： vue3.0项目实战——大事件后台数据管理系统 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56370772/article/details/142071080
版权

目录

1. 文章列表渲染

1.1 基本架子搭建

1.2 中英国际化处理

1.3 文章分类选择

1.4 封装 API 接口，请求渲染文章列表

2. 分页渲染 [element-plus 分页]

3. 添加 loading 处理

4. 搜索 和 重置功能

5. 文章发布&修改 [element-plus - 抽屉]

5.1 点击显示抽屉

5.2 封装抽屉组件 ArticleEdit

5.3 完善抽屉表单结构

5.4 上传图片文件预览 [element-plus - 文件预览]

5.5 富文本编辑器 [ vue-quill ]

5.6 添加文章功能

5.7 添加完成后的内容重置

5.8 编辑文章回显

5.9 编辑文章功能

6. 文章删除

1. 文章列表渲染

1.1 基本架子搭建

① 搜索表单

 <!-- 表单区域   inline 将 el-form-item 在一行显示 -->
      <el-form inline>
        <el-form-item label="文章分类：">
          <!-- <el-select placeholder="请选择" size="large" style="width: 240px">
            <el-option label="体育" value="1111" />
            <el-option label="新闻" value="2222" />
          </el-select> -->
          <!-- vue2.0 v-model 是 :value 和 @input 的简写，
            相当于传递了一个 value 属性给子组件，自定义的事件是 input 事件 -->
          <!-- vue3.0 v-model 是 :modelValue 和 @update:modelValue 的简写 -->
          <!-- 或者也可以写为： 
          <ChannelSelect :modelValue="params.cate_id"></ChannelSelect> 
          -->
          <ChannelSelect v-model="params.cate_id"></ChannelSelect>
        </el-form-item>
        <el-form-item label="发布状态：">
          <el-select
            placeholder="请选择"
            size="large"
            style="width: 240px"
            v-model="params.state"
          >
            <el-option label="已发布" value="已发布" />
            <el-option label="草稿" value="草稿" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单区域 -->

② 文章列表表格准备，模拟假数据渲染

  • el-link 文字超链接

    • underline是否下划线
<!-- 文章列表 -->
      <el-table
        style="width: 100%"
        stripe
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column label="文章标题" prop="title" align="center">
          <template #default="scope">
            <el-link type="primary" :underline="false">
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="分类"
          prop="cate_name"
          align="center"
        ></el-table-column>
        <el-table-column label="发布时间" prop="pub_date" align="center">
          <template #default="scope">
            {{ formatTime(scope.row.pub_date) }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="state"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <el-button
                type="primary"
                :icon="Edit"
                circle
                plain
                @click="onEditArticle(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                plain
                @click="onDeleteArticle(scope.row)"
                :icon="Delete"
                circle
              ></el-button>
            </div>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据"></el-empty>
        </template>
      </el-table>

1.2 中英国际化处理

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

① 全局配置

② ConfigProvider

1.3 文章分类选择

为了便于维护，直接拆分成一个小组件 ChannelSelect.vue

① 新建 article/manage/components/ChannelSelect.vue

② 页面中导入渲染

③ 调用接口，动态渲染下拉分类，设计成 v-model 的使用方式

  • vue2.0 v-model 是 :value 和 @input 的简写，相当于传递了一个 value 属性给子组件，自定义的事件是 input 事件。

  • vue3.0 v-model 是 :modelValue 和 @update:modelValue 的简写。相当于传递了一个 modelValue 属性给子组件，自定义的事件是 update:modelValue 事件。

④ 父组件定义参数绑定

⑤ 发布状态，也绑定一下，便于将来提交表单

1.4 封装 API 接口，请求渲染文章列表

① api/article.js 封装接口

② 页面中调用保存数据

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

④ 导入使用（vue 3.0 废弃了过滤器）

2. 分页渲染 [element-plus 分页]

① 分页组件

  • current-page / v-model:current-page：当前页数
  • page-size / v-model:page-size：每页显示条目个数

  • page-sizes：每页显示个数选择器的选项设置

  • background：是否为分页按钮添加背景色

  • layout：组件布局，子组件名用逗号分隔

  • total：总条目数

  • size-change：page-size 改变时触发

  • current-change：current-page 改变时触发

② 提供分页修改逻辑

  • 每页显示数据条数，处理函数
  • 当前页改变的时候触发，

3. 添加 loading 处理

① 准备数据

② el-table上面绑定

③ 发送请求时添加 loading

4. 搜索 和 重置功能

① 注册事件

② 绑定处理

5. 文章发布&修改 [element-plus - 抽屉]

5.1 点击显示抽屉

① 准备数据

② 准备抽屉容器

③ 点击修改布尔值显示抽屉

<el-button type="primary" @click="onAddArticle">发布文章</el-button>

const drawer = ref(false)
const onAddArticle = () => {
  drawer.value = true
}

5.2 封装抽屉组件 ArticleEdit

添加 和 编辑，可以共用一个抽屉，所以可以将抽屉封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

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

具体实现：

① 封装组件 article/manage/components/ArticleEdit.vue，向外暴露 open 方法

② 父组件中通过 ref 绑定抽屉组件

③ 点击调用方法显示弹窗

5.3 完善抽屉表单结构

① 准备数据

② 准备 form 表单结构

 <el-form :model="formModel">
      <el-form-item label="文章标题：" prop="title">
        <el-input
          placeholder="请输入文章标题"
          v-model="formModel.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章分类：" prop="cate_id">
        <ChannelSelect
          v-model="formModel.cate_id"
          :width="'100%'"
        ></ChannelSelect>
      </el-form-item>
      <el-form-item label="文章封面：" prop="cover_img">
        <!--
          此处需要关闭 element-plus 的自动上传，不需要配置 action 等参数
          只需要做前端的本地预览图片即可，无需在提交之前上传图片
          语法： Window.ULR.createObjectURL() 创建本地预览的地址，来预览图片
          show-file-list	是否显示已上传文件列表
          on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
          auto-upload	是否自动上传文件
         -->
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :on-change="onUploadFile"
          :auto-upload="false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容：" prop="content">
        <div class="editor">
          <!-- 富文本编辑器 -->
          <QuillEditor
            ref="editorRef"
            theme="snow"
            v-model:content="formModel.content"
            content-type="html"
          />
        </div>
      </el-form-item>
      <el-form-item prop="state">
        <el-button type="primary" @click="onPublicArticle('已发布')">
          发布
        </el-button>
        <el-button type="info" @click="onPublicArticle('草稿')">草稿</el-button>
      </el-form-item>
    </el-form>

③ 一打开默认重置添加的 form 表单数据

④ 扩展 下拉菜单 width props

5.4 上传图片文件预览 [element-plus - 文件预览]

① 关闭自动上传，准备结构

  • 此处需要关闭 element-plus 的自动上传，不需要配置 action 等参数

  • 只需要做前端的本地预览图片即可，无需在提交之前上传图片

  • 语法： Window.ULR.createObjectURL() 创建本地预览的地址，来预览图片

  • show-file-list  是否显示已上传文件列表

  • on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

  • auto-upload 是否自动上传文件

② 准备数据 和 选择图片的处理逻辑

  • 为选中的文件创建一个临时的、本地的 URL，以便在页面上可以直接预览或访问这个文件，而不需要立即上传到服务器

  • window.URL.createObjectURL(file)：使用浏览器的 URL.createObjectURL() 方法，为传入的 file 对象（即用户选择的文件）生成一个本地的临时 URL。

    • 这个 URL 是一个字符串，指向本地的文件资源。blob:http://localhost:5173/d2d71faf-2c60-4fd9-92cb-ea0eeae052cf

    • blob: URL 可以直接用作 HTML 标签（如 <img>、<video>、<audio> 等）的 src 属性，无需进一步处理。

  • 立即将图片对象，存入 formModel.value.cover_img 中，将来点击发布按钮的时候，提交给后台的服务器

③ 样式美化

5.5 富文本编辑器 [ vue-quill ]

官网地址：VueQuill | Rich Text Editor Component for Vue 3

① 安装包

  • pnpm add @vueup/vue-quill@latest

② 注册成局部组件

③ 页面中使用绑定

④ 样式美化

5.6 添加文章功能

① 封装添加接口

② 注册点击事件调用

  • 提交给后台的 data 是一个 FormDate 对象

③ 父组件监听事件，重新渲染

5.7 添加完成后的内容重置

5.8 编辑文章回显

如果是编辑操作，一打开抽屉，就需要发送请求，获取数据进行回显

① 封装接口，根据 id 获取详情数据

② 页面中调用渲染

  • 显示图片 "cover_img": "/uploads/885eb38f6270eb10b42aedadd84fea23.jpg"，需要与基地址拼接

  • 提交给后台的图片数据格式是 file 对象格式

  • 所以需要将网络地址 "cover_img": "/uploads/885eb38f6270eb10b42aedadd84fea23.jpg"，又转化成 file 对象，存储起来 (正常情况下, 后台应该两个都支持)

③ chatGPT prompt：封装一个函数，基于 axios， 网络图片地址，转 file 对象， 请注意：写中文注释

// 将网络图片地址转换为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;
  }
}

5.9 编辑文章功能

① 封装编辑接口

② 提交时调用

6. 文章删除

① 封装删除接口

② 页面中添加确认框调用

因为奋斗超太帅啦
关注
专栏目录
vue-cli3.0+element-ui上传组件el-upload的使用
11-28
在Vue CLI 3.0项目中，Element-UI的上传组件`el-upload`是一个非常实用的工具，用于处理各种文件上传需求。以下是对这个组件的详细解析和使用方法。 首先，`el-upload`组件提供了丰富的属性来满足各种限制条件： 1...
Vue3.0项目实战（一）——Vue3 大事件管理系统项目搭建
weixin_56370772的博客
08-25 1207
如何在 git commit 前执行 eslint 检查？使用 husky 这个 git hooks 工具如何只检查暂存区代码？使用 lint-staged 工具4. 目录调整4.1 目录调整默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是以下工作：删除一些初始化的默认文件修改剩余代码内容新增调整我们需要的目录结构拷贝全局样式和图片，安装预处理器支持① 删除文件② 修改内容routes: []})
vue项目中的常见问题（vue-cli版本3.0.0）
weixin_33873846的博客
04-09 478
一、样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="less" 也可以加上scoped代表样式只在此作用域中有效。 2.使用element插件时修改其样式，在vue中不起作用，这里有几种方法可以尝试 如果 ...
大事件（over）
AYBBZXY的博客
02-23 1193
rule: 当前校验规则的相关的信息value: 所校验的表单元素的表单值callback:回调→两种调用方式:① callback() 校验成功 ②callback(new Error(错误信息)) 检验失败 [无论成功还是失败都需要callback回调]// 判断 value 和 当前 form 中收集的 password 是否一致if (value!callback(new Error('两次输入密码不一致'))} else {
HTML-引入Vue3和Element Plus
04-24
在本项目中，我们主要探讨如何在HTML页面中引入Vue3框架和Element Plus UI库，以便构建一个功能丰富的前端应用。Vue3是Vue.js的最新版本，提供了许多性能优化和新特性，而Element Plus则是一个基于Vue3的高质量UI...
element-plus离线文档
05-07
Element Plus 是一个基于 Vue 3 的开源组件库，它提供了丰富的 UI 组件，用于构建现代 Web 应用程序。这个离线文档包含了 Element Plus 的所有官方文档，方便开发者在没有网络连接或者内网环境中查阅和学习。 ...
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
在这篇文章中，作者讲述了如何利用Vue.js和Element-UI框架共同制作一个简单登录页面的实例。Vue.js是一个构建用户界面的渐进式JavaScript框架，而Element-UI是基于Vue 2.0的桌面端组件库，提供了丰富的组件以帮助...
基于DDD领域驱动设计的SpringCloud短视频项目管理后台使用Vue 3.0 + Element Plus 进行构建
03-13
【标题】中的“基于DDD领域驱动设计的SpringCloud短视频项目管理后台使用Vue 3.0 + Element Plus 进行构建” 提供了几个关键的技术点： 1. **领域驱动设计（Domain-Driven Design, DDD）**：这是一种软件开发方法论...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 252
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
腾讯IM SDK：TUIKit发送多张图片
q1003675852的博客
10-09 324
本文记录腾讯IM SDK：TUIKit发送多张图片的实现方法
计算机毕业设计 基于Python的智能文献管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
weixin_19164791635
10-03 2139
本文介绍了一款基于Python的智能文献管理系统，该系统通过自动化的数据爬虫和文本挖掘技术，为用户提供了文献信息的收集、管理和分析服务。系统的主要功能包括用户管理、文献类型管理、文献信息管理、文献注释管理、在线论坛和系统管理等。该系统旨在提高学术文献管理的效率和质量，促进学术资源的共享与交流，对提升学术研究的质量和效率具有重要的价值。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 1027
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
计算机毕业设计 基于Python的荣誉证书管理系统的设计与实现 Python毕业设计 Python毕业设计选题 Django框架 Vue【附源码+安装调试】
m0_74181697的博客
10-07 3413
基于Python的荣誉证书管理系统是一个为教育机构设计的证书管理平台，提供证书生成、存储、查询和管理功能。系统旨在提高管理效率，增强证书安全性，优化查询体验，并支持教育决策。该系统有助于推动教育信息化，提升教育机构的管理水平。
基于java SpringBoot和Vue校园求职招聘系统设计
程序猿大波的博客
10-08 668
随着信息技术的迅猛发展，基于Java Spring Boot和Vue的校园求职招聘系统设计成为了解决高校就业难问题的重要手段。本文旨在探讨如何利用Java Spring Boot框架构建后端服务，以及使用Vue.js进行前端开发，从而创建一个高效、易用且功能全面的校园求职招聘平台。首先，系统采用Java Spring Boot进行后端开发，利用其自动配置和独立运行的特点，快速搭建起RESTful API，实现用户管理、职位发布、简历投递等核心功能。
如何使用ssm实现基于Java的校园二手物品交易平台的设计与实现+vue
寒夜
10-06 3132
【代码】ssm基于Java的校园二手物品交易平台的设计与实现+vue
Vue vben admin开源库中table组件tips
weixin_47454566的博客
10-09 451
Vue vben admin开源库
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
最新发布
Mr. Zhang Xiaojian's Blog
10-12 297
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
【VUE】Vue2中的diff流程
10-07 330
Vue2中的diff流程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值