Element-UI结合Ruoyi实现图片上传与拖拽排序组件

多行不易

于 2024-10-02 09:59:39 发布

阅读量1.4k

点赞数 17

本文链接：https://blog.csdn.net/weixin_32999557/article/details/142694712

版权

本文还有配套的精品资源，点击获取

简介：本文介绍如何利用Element UI与Ruoyi框架创建一个支持拖拽排序的图片上传组件。结合Vue.js、SortableJS等技术，组件能够实现图片的选取、上传和顺序调整，并通过Vue的响应式原理动态更新界面。文章详细阐述了组件开发的关键步骤，包括Element UI组件的使用、SortableJS的集成、以及样式定制和部署集成的实践。 element-ui ruoyi 图片上传可拖拽调整顺序组件

1. Element UI组件库使用

Element UI 是一个为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它旨在提供一系列可复用、高质量的 Vue 组件，以便快速开发出美观且具有高可用性的 Web 应用程序。

基本引入与使用

Element UI 的引入和使用相对简单。首先，你可以通过 npm 或 yarn 安装它到你的 Vue.js 项目中。

npm install element-ui --save
# 或者
yarn add element-ui

安装完成后，在你的项目的入口文件（如 main.js 或 main.ts ）中，引入 Element UI 并使用 Vue.use() 方法来安装它：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

组件的使用和定制

安装完成后，你可以直接在你的 Vue 组件中使用 Element UI 提供的各种组件，例如按钮、表格、表单等。Element UI 也支持主题定制，你可以通过自定义主题来改变组件的样式，以满足品牌化需求。

对于组件的使用，你需要按照 Element UI 的官方文档指导进行。文档详细列出了每个组件的属性、事件、方法，以及如何在实际项目中应用它们。

<template>
  <el-button type="primary">主要按钮</el-button>
</template>

通过上述步骤，你可以顺利地将 Element UI 组件集成到你的 Vue.js 应用中。在实际使用过程中，你可能还需要深入了解组件的配置项和事件监听，以实现更复杂的交互。更多高级用法和定制技巧，可以参考 Element UI 的官方文档，深入挖掘每个组件的潜力。

2. Vue.js框架应用

2.1 Vue.js基础理论

2.1.1 Vue.js的核心概念

Vue.js是一个渐进式的JavaScript框架，它允许开发者以组件化的方式构建前端界面。其核心概念包括数据驱动和组件化。

数据驱动是指Vue.js利用其独特的双向数据绑定机制，将视图层与数据层紧密联系在一起。当数据发生变化时，视图会自动更新。这种数据驱动的设计理念减少了代码量，提高了开发效率。

组件化是Vue.js的另一大特点。在Vue.js中，一个应用被划分为多个组件，每个组件都有自己的视图、数据和逻辑。组件化的开发方式使得代码更加模块化，便于复用和维护。

在开始编码之前，需要安装Node.js和npm（Node.js的包管理器）。接着，通过npm安装Vue CLI工具，它可以帮助我们快速搭建Vue.js项目的基础结构。

npm install -g @vue/cli

使用Vue CLI创建一个新项目：

vue create my-vue-project

然后按照提示选择预设配置或手动配置项目，完成后会有一个完整的Vue.js项目结构。

2.1.2 Vue.js的生命周期与指令

Vue.js的生命周期由一系列的钩子函数构成，它们在Vue实例的特定生命周期阶段被调用。这些钩子函数包括 created , mounted , updated , destroyed 等。通过这些钩子函数，开发者可以实现在Vue.js生命周期中对实例进行特定操作的需求。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created() {
    console.log('实例已创建，数据已定义，但尚未挂载。');
  },
  mounted() {
    console.log('已挂载到DOM上。');
  }
});

Vue.js提供了多个指令来简化DOM操作，如 v-bind , v-model , v-for , v-if , v-on , 等。这些指令以 v- 开头，是Vue.js的内置指令，用于处理常见的DOM操作和事件绑定。

<div id="app">
  <p v-if="seen">现在你看到我了</p>
  <p v-for="item in items">{{ item }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    seen: true,
    items: ['苹果', '香蕉', '橙子']
  }
});

在 v-for 中使用 in 关键字来迭代数组，而在 v-if 中根据表达式的真假来条件性地渲染元素。通过指令，Vue.js提供了一种简洁有效的方式来操作DOM。

2.2 Vue.js的响应式原理

2.2.1 响应式数据绑定的工作机制

Vue.js的响应式系统是其核心特性之一，它能够监听数据的变化并自动更新DOM。这个系统基于观察者模式，Vue.js使用了 Object.defineProperty 方法来定义数据对象的getter和setter，从而在数据被访问或修改时执行特定的逻辑。

当一个Vue实例被创建时，它会遍历data对象中的所有属性，并使用 Object.defineProperty 将它们转为getter/setter。每个组件实例都有一个对应的 watcher 实例，它会在组件渲染的过程中记录所有依赖的数据。当数据变化时，setter会被触发，Vue.js会通知所有依赖于该数据的watcher进行更新。

2.2.2 计算属性与侦听器的运用

在Vue.js中，计算属性和侦听器是处理数据响应式的两种方式。

计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时才会重新求值。这使得它们非常适合在模板中多次使用。计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。

computed: {
  // 计算属性的 getter
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

侦听器（watchers）允许我们执行异步或开销较大的操作作为数据变化的副作用。当你有一些数据需要随着其他数据变动而变动时，可以使用侦听器。不过在大多数情况下，它应该被计算属性所替代。

watch: {
  // 当 `question` 发生改变时，这个函数就会运行
  question: function (newQuestion, oldQuestion) {
    this.getAnswer(newQuestion);
  }
}

通过结合计算属性和侦听器，开发者可以更灵活地控制数据的响应式处理方式，满足不同场景下的需求。

在下一章节，我们将继续探讨Vue.js的响应式原理，包括虚拟DOM的实现和性能优化技巧。

3. SortableJS实现拖拽排序

在现代Web应用中，拖拽排序功能已经成为提升用户体验的重要手段之一。SortableJS是一个轻量级的、功能强大的JavaScript库，它能够帮助开发者轻松地为列表元素添加拖拽排序功能。这一章节我们将深入探讨SortableJS的基本使用方法，以及如何实现拖拽排序的高级功能。

3.1 SortableJS的基本使用

3.1.1 引入SortableJS到项目中

在开始使用SortableJS之前，首先需要将库文件引入到项目中。SortableJS支持多种方式引入，包括直接通过CDN引入，或者是通过npm或yarn安装使用。

对于直接通过CDN引入的方式，可以在HTML文件的 <head> 标签中添加以下代码：

<script src="***"></script>

通过npm或yarn安装的话，可以在项目的 package.json 文件中添加以下依赖：

"dependencies": {
  "sortablejs": "^latest"
}

然后通过命令行运行安装指令：

npm install

或者

yarn install

安装完成后，就可以在项目中的JavaScript文件中通过 require 或 import 方式引入SortableJS。

3.1.2 创建可拖拽的列表

在成功引入SortableJS后，接下来就是实现一个基本的可拖拽列表。首先，需要定义一个HTML结构，提供一个 <ul> 或 <ol> 元素作为列表容器，然后为列表项添加 <li> 元素。

示例HTML结构：

<ul id="sortable-list">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

在上述HTML结构准备好后，接下来可以使用JavaScript来初始化SortableJS，并为其添加拖拽功能。代码如下：

// 选择列表元素
const list = document.getElementById('sortable-list');

// 初始化Sortable
new Sortable(list);

以上代码会使得列表 #sortable-list 中的所有子元素 <li> 能够进行拖拽排序。SortableJS会自动处理拖拽逻辑，并在用户完成拖拽后更新DOM结构。

3.2 拖拽排序的高级功能

3.2.1 分组与约束

当页面上存在多个列表时，有时候用户需要能够从一个列表拖拽项目到另一个列表。为了实现这种跨列表的拖拽，SortableJS支持分组( group )的概念，并可以设置约束( constraint )来限制拖拽行为。

例如，如果我们有两个列表，我们希望第一个列表的项目可以拖拽到第二个列表，但反之则不行，可以这样编写代码：

// 初始化第一个列表
new Sortable(document.getElementById('list-1'), {
  group: 'shared', // 设置相同的组名
});

// 初始化第二个列表，并设置约束条件
new Sortable(document.getElementById('list-2'), {
  group: 'shared',
  sort: true,
  onAdd: function (/**Event*/ evt) {
    // 阻止列表2的项目被拖拽到列表1
    evt.to.classList.contains('list-1') && evt.from.classList.contains('list-2') && evt.from.sortable.cancel();
  }
});

在这个例子中，我们通过为两个列表设置相同的 group 值 shared ，允许它们共享项目。同时，在 list-2 的 onAdd 事件中，我们检查拖拽的来源，如果拖拽来自 list-2 并且目标是 list-1 ，则调用 sortable.cancel() 方法取消这次拖拽，从而实现对拖拽行为的限制。

3.2.2 事件监听与回调函数

SortableJS提供了多种事件监听方法，允许开发者在拖拽的不同阶段执行特定操作。例如， onAdd 事件是在项目被添加到新位置时触发的， onUpdate 事件是在项目顺序改变后触发的，而 onEnd 事件则在拖拽操作结束时触发。

开发者可以通过监听这些事件来执行各种自定义逻辑，比如更新数据库中的排序值，或是进行界面的动态更新。以下是如何监听 onEnd 事件的示例代码：

// 初始化Sortable并绑定onEnd事件
new Sortable(document.getElementById('sortable-list'), {
  onEnd: function (/**Event*/ evt) {
    const { oldIndex, newIndex } = evt;
    // 这里可以调用后端API保存新的排序顺序
    // updateItemOrder(item, newIndex);
    console.log(`Item ${oldIndex} moved to ${newIndex}`);
  }
});

在这个例子中，当拖拽结束后，我们通过 console.log 打印出项目原来的索引和新的索引，实际上我们也可以调用后端API来保存新的顺序。这样的回调机制，为处理拖拽排序后的业务逻辑提供了极大的便利。

通过本章节的介绍，我们了解了SortableJS的基本使用和高级功能。我们学习了如何将SortableJS引入到项目中，并通过简单的配置实现拖拽排序功能。随后，我们探讨了分组与约束的概念，以及如何通过监听事件和回调函数来自定义拖拽排序的行为。这为我们在实际项目中实现拖拽排序功能打下了坚实的基础。

4. Ruoyi框架整合

4.1 Ruoyi框架简介

4.1.1 Ruoyi框架的架构与特点

Ruoyi框架是一个轻量级的Java快速开发平台，其主要目的是帮助开发者快速搭建项目，并能够轻松管理项目的各个部分。Ruoyi框架采用模块化的设计，支持微服务架构，并且内置了很多常用的功能模块，如用户管理、角色管理、菜单管理等，大大提高了开发效率。

Ruoyi框架的主要特点如下：

快速开发： Ruoyi提供了一套完整的后台管理系统模板，开发者可以直接使用或进行个性化定制，避免了从零开始搭建后台的繁琐工作。
微服务架构支持： Ruoyi框架基于Spring Cloud微服务架构，具备服务注册与发现、配置管理、负载均衡等功能。
前后端分离： Ruoyi框架支持前后端分离的开发模式，后端API使用Spring Boot开发，前端则可以使用Vue.js、React或Angular等框架。
安全性： 集成了Spring Security和JWT，提供了一整套安全解决方案，包括权限控制、数据加密等。
扩展性强： Ruoyi框架遵循开闭原则，易于扩展。开发者可以通过实现接口的方式快速添加新的功能模块。

4.1.2 Ruoyi框架的项目结构

Ruoyi框架的项目结构如下：

business - 核心业务代码，按模块划分。
common - 通用代码，如工具类、异常处理、数据校验等。
controller - 控制器层，负责处理前端请求。
dao - 数据访问层，定义与数据库交互的接口。
service - 服务层，编写业务逻辑代码。
service-impl - 服务层实现，提供业务逻辑的具体实现。
entity - 实体类，映射数据库表。
mapper - MyBatis的Mapper接口，用于与数据库交互。
utils - 工具类，包括加密、工具方法等。

flowchart TD
    A[Ruoyi项目根目录] --> B[common]
    A --> C[controller]
    A --> D[dao]
    A --> E[service]
    A --> F[service-impl]
    A --> G[entity]
    A --> H[mapper]
    A --> I[utils]
    B --> B1[工具类]
    B --> B2[异常处理]
    B --> B3[数据校验]
    C --> C1[API接口]
    D --> D1[数据访问接口]
    E --> E1[业务逻辑接口]
    F --> F1[业务逻辑实现]
    G --> G1[实体类定义]
    H --> H1[MyBatis Mapper XML]

4.2 Ruoyi与Vue.js的整合实践

4.2.1 基于Ruoyi的Vue.js项目搭建

要在Ruoyi框架的基础上搭建Vue.js项目，开发者可以遵循以下步骤：

项目初始化： 使用Vue CLI或Vue脚手架快速创建Vue.js项目。
配置代理： 在Vue.js项目的 vue.config.js 中配置代理，以便前端可以正确地调用后端API。
整合Element UI： 安装并配置Element UI组件库，提高开发效率。
添加API模块： 创建专门的模块来管理API调用，使得代码更加模块化。

以下是一个示例配置代理的代码：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '***', // Ruoyi后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 重写路径，将/api替换为空
        }
      }
    }
  }
};

4.2.2 Ruoyi组件在Vue.js中的应用

Ruoyi框架中的组件可以通过npm包的形式提供给Vue.js项目使用，或者将Ruoyi项目中的静态资源直接复制到Vue.js项目中。

安装Ruoyi的npm包： 如果Ruoyi提供了npm包，则可以通过npm安装后在Vue.js项目中直接引用。
资源导入： 将Ruoyi项目中的静态资源如CSS样式、图片等导入到Vue.js项目中。
模块引用： 对于Ruoyi中的通用功能模块，如用户登录、权限控制等，可以在Vue.js项目中直接引用和使用。

以下是如何在Vue.js中使用Ruoyi的组件的示例代码：

import RuoyiButton from 'ruoyi-components/lib/button'; // 假设存在Ruoyi组件的npm包

export default {
  components: {
    RuoyiButton
  }
};

在Vue模板中使用该按钮：

<template>
  <ruoyi-button type="primary">按钮</ruoyi-button>
</template>

通过上述步骤，Vue.js项目与Ruoyi框架可以有效地整合，使得前后端开发更加协调和高效。

5. ImageUpload.vue组件开发

5.1 组件需求分析与设计

5.1.1 功能需求梳理

在开发ImageUpload.vue组件时，首先要对功能需求进行全面的梳理。这个组件旨在提供一个易用且美观的用户界面，使用户能够上传图片，并且提供图片预览、上传状态反馈、拖拽排序以及删除图片的功能。梳理需求需要考虑以下几个方面：

上传功能 ：用户能够通过点击按钮或拖拽图片到指定区域来上传图片。
预览功能 ：上传前图片能够在页面上预览，支持多图预览。
拖拽排序 ：用户可以拖拽图片，实时调整上传图片的顺序。
图片管理 ：用户能够删除已上传的图片，同时提供确认机制防止误操作。
状态反馈 ：组件需要实时反馈上传进度，以及上传成功或失败的状态。

5.1.2 组件的结构规划

在确定功能需求后，接下来规划组件的结构，设计组件的内部结构和接口。ImageUpload.vue的结构规划如下：

模板部分 ：包含图片上传区域、图片列表展示区、拖拽排序的控制按钮等。
脚本部分 ：主要包含图片上传的逻辑、图片列表状态管理、拖拽排序处理等。
样式部分 ：负责实现响应式布局和良好的用户交互体验。

具体地，组件结构可以用以下伪代码表示：

<template>
  <!-- 图片上传区域 -->
  <div class="upload-area">
    <!-- 拖拽上传的提示信息 -->
    <p>拖拽图片到这里上传</p>
  </div>
  <!-- 图片列表展示区 -->
  <div class="image-list">
    <!-- 列表项 -->
    <div v-for="image in images" :key="image.id" class="image-item">
      <!-- 图片预览 -->
      <img :src="image.src" alt="Uploaded Image">
      <!-- 删除按钮 -->
      <button @click="removeImage(image)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片列表数据
      images: []
    };
  },
  methods: {
    // 上传图片的处理函数
    uploadImage() {},
    // 删除图片的处理函数
    removeImage() {}
  }
}
</script>

<style scoped>
.upload-area {
  /* 样式定义 */
}
.image-list {
  /* 样式定义 */
}
.image-item {
  /* 样式定义 */
}
</style>

5.2 组件的实现过程

5.2.1 模板编写与数据绑定

在确定了组件的结构后，接下来进入编码阶段。首先，从模板部分入手，编写上传区域和图片列表展示区的HTML代码，并绑定必要的数据和事件处理函数。以下是实现这些功能的步骤：

上传区域 ：使用 input 类型为 file 的标签来创建一个上传按钮，并利用Vue.js的动态属性绑定来处理用户的文件选择事件。
图片展示 ：利用Vue.js的列表渲染功能，遍历绑定在组件实例的 images 数组，将上传的图片以列表形式展示出来。

<template>
  <!-- 其他代码保持不变 -->
  <!-- 图片上传区域 -->
  <div class="upload-area">
    <input type="file" @change="handleFileUpload" multiple>
  </div>
  <!-- 图片列表展示区 -->
  <div class="image-list">
    <div v-for="image in images" :key="image.id" class="image-item">
      <!-- 图片预览 -->
      <img :src="image.src" alt="Uploaded Image">
      <!-- 删除按钮 -->
      <button @click="removeImage(image)">删除</button>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    handleFileUpload(e) {
      const files = e.target.files;
      // 处理文件上传逻辑
    },
    removeImage(image) {
      // 删除图片逻辑
    }
  }
}

5.2.2 方法与逻辑处理

组件的第二部分关注于方法和逻辑的实现，包括文件上传的处理和图片列表的更新。

文件上传处理 ：当用户选择文件后，可以使用File API来处理这些文件。这里可以用 FormData 对象将图片文件和可能需要的其他数据一起发送到服务器。代码示例如下：

methods: {
  async handleFileUpload(e) {
    const files = e.target.files;
    for (const file of files) {
      const formData = new FormData();
      formData.append('file', file);
      // 可能需要添加其他字段

      try {
        const response = await this.uploadImageToServer(formData);
        // 处理响应数据，例如添加到images列表
      } catch (error) {
        console.error('上传失败:', error);
      }
    }
  },
  uploadImageToServer(formData) {
    // 实现向服务器上传文件的逻辑
  }
}

图片列表更新 ：每上传一个新的图片文件，我们希望将这个图片文件的URI添加到 images 数组中，以便组件能够自动更新列表。代码示例如下：

methods: {
  // handleFileUpload中添加新图片后的逻辑
  addImageToList(file) {
    this.images.push({ id: Date.now(), src: URL.createObjectURL(file) });
  }
}

通过以上步骤，我们完成了ImageUpload.vue组件从需求分析、结构规划到具体实现的整个过程。在接下来的章节中，我们将进一步讨论图片上传与预览功能的实现细节，以及如何通过拖拽排序功能进一步优化用户交互体验。

6. 图片上传与预览功能

图片上传与预览功能在Web应用中是十分常见的需求，它不仅仅提供了用户与应用交互的一种方式，而且还能够优化用户体验，使得信息的上传更为直观和便捷。本章节将探讨如何实现一个高效的图片上传与预览功能。

6.1 图片上传功能实现

6.1.1 前端图片上传技术选型

在前端实现图片上传功能，我们通常会面临多种技术选型，每种技术都有其适用场景和优缺点。

原生` : 最基础的文件上传方式，简单易用，兼容性良好。
第三方库（如Fine Uploader, Dropzone.js等） : 提供更多的交互和配置选项，适合复杂需求。
HTML5拖拽API : 可以实现拖拽上传，提供更灵活的用户体验。

对于本项目，我们选择基于原生 <input type="file"> 结合JavaScript进行处理，因为它简洁、跨浏览器兼容性好，并且可以通过自定义UI来达到设计要求。

6.1.2 后端图片处理与存储

上传到服务器的图片需要经过一系列处理，并且存储到合适的位置。

图片处理 : 通过后端语言（如Node.js, PHP, Python等）对图片进行压缩、格式转换、尺寸调整等操作。
图片存储 : 选择合适的存储方案，如直接存储在服务器的磁盘、对象存储服务（如AWS S3）或云存储服务。

考虑到安全性和易管理性，我们将图片存储在服务器的本地文件系统，并使用UUID（通用唯一识别码）来保证文件名的唯一性，并且避免了用户猜测文件名从而获取未经授权访问的问题。

6.2 图片预览与管理

6.2.1 图片展示组件的开发

图片展示组件用于在用户界面上展现上传后的图片。

组件需求 : 图片需要以缩略图的形式展示，并且点击后可以全屏查看。
实现技术 : 使用Vue.js的 <transition> 组件实现图片加载的渐显效果，以及 <img> 标签来展示图片本身。

示例代码片段：

<template>
  <div>
    <transition name="fade">
      <img v-if="imageUrl" :src="imageUrl" class="image-preview" @click="previewImage"/>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 图片地址
    };
  },
  methods: {
    previewImage() {
      // 全屏预览图片的逻辑
    }
  }
};
</script>

<style>
.image-preview {
  max-width: 100px;
  cursor: pointer;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

6.2.2 图片删除与管理逻辑

用户在管理自己的图片时，应该能够方便地进行删除操作。

删除功能 : 在图片下方提供一个删除按钮，点击后触发删除事件。
管理逻辑 : 在图片上传组件中加入删除方法，并且将删除的图片链接从列表中移除。

示例代码片段：

methods: {
  deleteImage(imageIndex) {
    // 删除图片的后端接口调用逻辑
    this.imageList.splice(imageIndex, 1);
  }
}

处理好删除事件后端的安全性也非常重要，需要验证用户权限，确保用户不能删除不属于他的图片。

本章节通过前后端结合的方式，探讨了图片上传与预览功能的实现。前端使用Vue.js构建了用户友好的界面，后端则负责处理图片的存储和管理。这些技术点的应用不仅使得功能实现得以保证，还提升了整体的用户体验。

本文还有配套的精品资源，点击获取

多行不易

关注

17
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫