从0开始写Vue项目-Vue实现用户数据批量上传和数据导出

news2025/7/15 16:30:15
  1. 从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客
  2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客
  3. 从0开始写Vue项目-Vue页面主体布局和登录、注册页面_慕言要努力的博客-CSDN博客
  4. 从0开始写Vue项目-SpringBoot整合Mybatis-plus实现登录、注册功能_慕言要努力的博客-CSDN博客_mybatisplus登陆
  5. 从0开始写Vue项目-SpringBoot实现增删改查和分页查询_慕言要努力的博客-CSDN博客
  6. 从0开始写Vue项目-Vue实现数据渲染和数据的增删改查_慕言要努力的博客-CSDN博客

一、前言 

        我们在之前已经做好了我们的登录和注册,以及能通过登录然后进入到我们项目的某一个界面,我们之前做的演示就是拿的我们的用户来进行我们的增删改查功能。

        那么我们在写项目的功能的时候,有时候会用到我们通过上传文件来进行某些功能,比如我们通过上传用户信息表来做到我们的批量导入用户信息,那么我们现在就来实现这一功能。

二、认识MD5 

1. md5简介
        md5的全称是md5信息摘要算法(英文:MD5 Message-Digest Algorithm ),一种被广泛使用的密码散列函数,可以产生一个128位(16字节,1字节8位)的散列值(常见的是用32位的16进制表示,比如:0caa3b23b8da53f9e4e041d95dc8fa2c),用于确保信息传输的完整一致。

2. md5原理
        md5将整个文件当做一个大文本信息,通过不可逆的字符串变换算法,产生一个唯一的MD5信息摘要。文件的md5类似于人的指纹,在世界上是独立无二的,如果任何人对文件做了任何改动,其md5的值也就是对应的“数字指纹”都会发生变化。

        对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成,将这四个32位分组级联后将生成一个128位散列值。

        md5与对称和非对称加密算法不同,这两种密码是防止信息被窃取,而摘要算法的目标是用于证明原文的完整性。

3. md5特性
(1).不可逆

没有系统有办法知道md5原来的文字是什么。

(2).具有高度的离散性

md5码具有高度的散列性,没有规律可循,哪怕原信息只有一点点的变化,比如多个空格,那么就会导致md5发生巨大变化,也可以说产生的md5码是不可预测的。

(3).压缩性

任意长度的数据,算出的md5值得长度都是固定的。

(4).弱碰撞性

已知原数据和其md5的值,想找到一个具有相同md5值得数据(即伪造数据)是非常困难的。

4. md5的用途

  • 密码的加密存储,用户设置密码时,服务端只记录这个密码的MD5,而不记录密码本身,以后验证用户身份时,只需要将用户输入的密码再次做一下MD5后,与记录的MD5作一个比较即可验证其密码的合法性。
  • 数字签名,比如发布一个程序,为了防止别人在你的程序里插入病毒或木马,你可以在发布这个程序的同时,公开这个程序文件的MD5码,这样别人只需要在任何地方下载这个程序后做一次MD5,然后跟公开的这个MD5作一个比较就知道这个程序是否被第三方修改过。
  • 文件完整性验证,比如当下载一个文件时,服务器返回的信息中包括这个文件的md5,在本地下载完毕时进行md5,将两个md5值进行比较,如果一致则说明文件完整没有丢包现象。
  • 文件上传,比如百度云实现的秒传,就是对比你上传的文件md5在百度服务器是否已经存在了。

三、数据库建立

        我们要实现我们用户数据的批量导入,我们需要在我们的数据库里面新建一个表,用来存放我们上传的表格以及其他的文件,也可以用来存放我们的图片。

存放文件的SQL:file

CREATE TABLE `file` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件名称',
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件类型',
  `size` bigint DEFAULT NULL COMMENT '文件大小(kb)',
  `url` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '下载链接',
  `md5` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文件md5',
  `creat_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '时间',
  `is_delete` tinyint(1) DEFAULT '0' COMMENT '是否删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=158 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

四、文件上传

1.新建我们的Files.Java

我们要在我们的后台进行类的书写,以及一定的方法。

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("file")
public class Files {
        @TableId(type = IdType.AUTO)
        private Integer id;
        private String name;
        private String type;
        private Long size;
        private String url;
        private String md5;
        private Boolean isDelete;
}

2.基础配置

        设置我们的上传到磁盘的文件存放的路径,虽然我们存放的数据是在数据库,但是当我们在使用的时候,我们要去进行一定的审视,即我们需要将我们文件存放的磁盘地址进行一定的注明。

此还需要在我们的基础配置里面进行配置

3.文件上传 

        然后就是我们进行文件上传的接口了,我们需要在上传的时候给我们的文件定义一个唯一标识码,为的是当我们上传多个统一的文件,我们只显示一个文件,就大大的减少了我们的数据。然后我们将我们的文件上传到磁盘的某一个位置上去,并且获取我们这个文件的MD5,如果上传的文件出现重复,就删除多余的,就只显示一个文件,最后就设置我们文件的大小,类型以及我们的路径和md5唯一标识,将以上信息存放到我们的数据库里面。

4.文件下载

        我们进行文件下载的时候,我们需要根据文件的唯一标识码获取文件,获取到我们的文件之后,需要设置我们文件的输出格式,然后读取字节流进行放行和文件关闭。

5.文件查询 

        我们需要通过遍历我们的files表来识别我们文件的md5唯一标识码,最后通过这个唯一标识码来进行我们文件的查询。

6.缓存

7.源码

import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.crypto.SecureUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.common.Constants;
import com.example.demo.common.Result;
import com.example.demo.entity.Files;
import com.example.demo.mapper.FileMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.List;

@RestController
@RequestMapping("/file")
public class FileController {

    @Value("${files.upload.path}")
    private String fileUploadPath;

    @Value("${server.ip}")
    private String serverIp;

    @Resource
    private FileMapper fileMapper;

    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    @PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();
        String type = FileUtil.extName(originalFilename);
        long size = file.getSize();
        // 定义一个文件唯一的标识码
        String fileUUID = IdUtil.fastSimpleUUID() + StrUtil.DOT + type;
        File uploadFile = new File(fileUploadPath + fileUUID);
        // 判断配置的文件目录是否存在,若不存在则创建一个新的文件目录
        File parentFile = uploadFile.getParentFile();
        //判断目录是否存在,不存在就新建
        if (!parentFile.exists()) {
             parentFile.mkdirs();
        }
        String url;
        // 获取文件的md5
        String md5 = SecureUtil.md5(file.getInputStream());
        // 从数据库查询是否存在相同的记录
        Files dbFiles = getFileByMd5(md5);
        if (dbFiles != null) {
            url = dbFiles.getUrl();
        } else {
            // 上传文件到磁盘
            file.transferTo(uploadFile);
            // 数据库若不存在重复文件,则不删除刚才上传的文件
            url = "http://" + serverIp + ":9090/file/" + fileUUID;
        }
        //存储到数据库
        Files saveFile = new Files();
        saveFile.setName(originalFilename);
        saveFile.setType(type);
        saveFile.setSize(size/1024);
        saveFile.setUrl(url);
        saveFile.setMd5(md5);
        fileMapper.insert(saveFile);
        return url;
    }

    @GetMapping("/{fileUUID}")
    public void download(@PathVariable String fileUUID, HttpServletResponse response) throws IOException {
        // 根据文件的唯一标识码获取文件
        File uploadFile = new File(fileUploadPath + fileUUID);
        // 设置输出流的格式
        ServletOutputStream os = response.getOutputStream();
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileUUID, "UTF-8"));
        response.setContentType("application/octet-stream");

        // 读取文件的字节流
        os.write(FileUtil.readBytes(uploadFile));
        os.flush();
        os.close();
    }

    /**
     * 通过文件的md5查询文件
     * @param md5
     * @return
     */
    private Files getFileByMd5(String md5) {
        // 查询文件的md5是否存在
        QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("md5", md5);
        List<Files> filesList = fileMapper.selectList(queryWrapper);
        return filesList.size() == 0 ? null : filesList.get(0);
    }

    //    @CachePut(value = "files", key = "'frontAll'")
    @PostMapping("/update")
    public Result update(@RequestBody Files files) {
        fileMapper.updateById(files);
        flushRedis(Constants.FILES_KEY);
        return Result.success();
    }

    @GetMapping("/detail/{id}")
    public Result getById(@PathVariable Integer id) {
        return Result.success(fileMapper.selectById(id));
    }

    //清除一条缓存,key为要清空的数据
//    @CacheEvict(value="files",key="'frontAll'")
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id) {
        Files files = fileMapper.selectById(id);
        files.setIsDelete(true);
        fileMapper.updateById(files);
        flushRedis(Constants.FILES_KEY);
        return Result.success();
    }

    @PostMapping("/del/batch")
    public Result deleteBatch(@RequestBody List<Integer> ids) {
        // select * from sys_file where id in (id,id,id...)
        QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
        queryWrapper.in("id", ids);
        List<Files> files = fileMapper.selectList(queryWrapper);
        for (Files file : files) {
            file.setIsDelete(true);
            fileMapper.updateById(file);
        }
        return Result.success();
    }

    /**
     * 分页查询接口
     * @param pageNum
     * @param pageSize
     * @param name
     * @return
     */
    @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize,
                           @RequestParam(defaultValue = "") String name) {

        QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
        // 查询未删除的记录
        queryWrapper.eq("is_delete", false);
        queryWrapper.orderByDesc("id");
        if (!"".equals(name)) {
            queryWrapper.like("name", name);
        }
        return Result.success(fileMapper.selectPage(new Page<>(pageNum, pageSize), queryWrapper));
    }

    // 设置缓存
    private void setCache(String key, String value) {
        stringRedisTemplate.opsForValue().set(key, value);
    }

    // 删除缓存
    private void flushRedis(String key) {
        stringRedisTemplate.delete(key);
    }

}

五、需要使用功能的Java后台

        我们做的是我们的用户数据的批量导入和用户信息表导出,也就是我们的上传功能和导出功能,那么我们就需要在我们用户的Controller里面去写我们的接口出来,然后提供给前端进行调用。

源码:

/**
     * 导出接口
     */
    @GetMapping("/export")
    public void export(HttpServletResponse response) throws Exception {
        //从数据库查询出所有的数据
        List<User> list = userService.list();
        //通过工具类创建writer 写出到磁盘路径
        //ExcelWriter writer = ExcelUtil.getWriter(filesUploadPath + "/用户信息.xlsx");
        //在内存操作,写出到浏览器
        ExcelWriter writer = ExcelUtil.getWriter(true);
        //自定义标题别名
        writer.addHeaderAlias("username", "用户名");
        writer.addHeaderAlias("password", "密码");
        writer.addHeaderAlias("nickname", "昵称");
        writer.addHeaderAlias("sex", "性别");
        writer.addHeaderAlias("phone", "联系方式");
        writer.addHeaderAlias("address", "地址");
        writer.addHeaderAlias("email", "邮箱");
        writer.addHeaderAlias("createTime", "创建时间");
        writer.addHeaderAlias("avatarUrl", "头像");
        writer.addHeaderAlias("role", "身份");

        //一次性写出list类的对象到excel,使用默认样式,强制输出标题
        writer.write(list, true);

        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        String fileName = URLEncoder.encode("用户详情","UTF-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName +".xlsx");

        ServletOutputStream out = response.getOutputStream();
        writer.flush(out, true);
        out.close();
        writer.close();
    }

    /**
     * excel导入
     * @param
     * @throws Exception
     */
    @PostMapping("/import")
    public Result imp(MultipartFile file) throws Exception {
        InputStream inputStream = file.getInputStream();
        ExcelReader reader = ExcelUtil.getReader(inputStream);
        //通过JavaBean的方式读取Excel内的对象,但要求表头必须是英文,跟JavaBean的属性要对应
        List<User> list = reader.readAll(User.class);
        userService.saveBatch(list);
        return Result.success(true);
    }

六、前端Vue

1.分析

我们需要实现的是我们的导入和导出功能,那么我们就需要去调用我们的接口进行功能实现

我们直接来调用我们的组件实现我们的上传功能 

2.实现

<el-upload action="http://localhost:9090/user/import" :show-file-list="false" accept=".xlsx"
                 :on-success="handleExcelImportSuccess" style="display: inline-block">
        <el-button type="primary" class="ml-5"><i class="el-icon-upload" />导入</el-button>
      </el-upload>
      <el-button type="primary" class="ml-5" @click="exp"><i class="el-icon-download" />导出</el-button>

        我们给我们的这个导入和导出分别写上一个方法,用来实现我们的功能,我们的导入是直接写在我们的组件之上,而我们的导出是进行方法命名,打开我们的路径,来实现我们数据的导出。

methods: {
    // 用户信息文件导出
    exp() {
      window.open("http://localhost:9090/user/export")
    },
    // 文件导入成功
    handleExcelImportSuccess() {
      this.$message.success("文件导入成功")
      this.load()
    },
  }

七、功能展示

导入 

导出 

⛵小结

        以上就是对从0开始写Vue项目-Vue实现用户数据批量上传和数据导出简单的概述,后面会陆续更新其他的代码,请持续关注!!! 

        如果这篇文章有帮助到你,希望可以给作者点个赞👍,创作不易,如果有对后端技术、前端领域感兴趣的,也欢迎关注 ,我将会给你带来巨大的收获与惊喜💝💝💝!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/369102.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

04--WXML

1、什么是WXML什么是Wxml呢&#xff1f;我们首先要介绍一下Html&#xff0c;Html的全称为HyperTextMarkup Language&#xff0c;翻译过来就是超文本标记语言&#xff0c;这种语言目前已经普遍用于前端开发&#xff0c;而wxml正是从html演变而来&#xff0c;它基于微信这个平台&…

4EVERLAND:ERC-721 Token的存储选择

4EVERLAND&#xff1a;一个 Web3 基础设施&#xff0c;可促进项目更轻松、更快速地托管前端、存储数据/NFT/文件&#xff0c;并在 IPFS、Arweave 和 Dfinity 之上访问它们。 NFT , 数字所有权 使用以太坊标准的 NFT 创新ERC-721解决了互联网内容的主要问题之一&#xff1a;所…

计算机网络(2)从十六进制的ip数据报中得到详细字段信息

本博文介绍如何将十六进制的ip报文拆分出具体的字段信息。社会计算机网络和网络协议分析的初学者参考&#xff08;今天看了网络协议分析期末复习重点的最后一个大题&#xff0c;竟然一头雾水&#xff0c;然后快马加鞭翻阅各种资料&#xff0c;然后差不多学会 了&#xff09;wir…

RK3568平台开发系列讲解(驱动基础篇)中断子系统框架

🚀返回专栏总目录 文章目录 一、中断硬件的组成二、软件框架三、中断常见概念沉淀、分享、成长,让自己和他人都能有所收获!😄 📢中断是指 CPU 正常运行期间,由于内外部事件或程序预先安排的事件,引起的 CPU 暂时停止正在运行的程序, 转而为该内部或外部预先安排的事…

零基础入门反序列化及常用trick

前言 反序列化是一个尤为重要的知识点&#xff0c;最近对反序列化进行了简单学习&#xff0c;并总结如下&#xff0c;希望能对正在学习的师傅有所帮助。 前提 了解序列化和反序列化 学习反序列化之前&#xff0c;首先要知道序列化&#xff0c;简单的举个栗子来说 <?ph…

C语言学习及复习笔记-【10】数组

10. 字符串 定义&#xff1a;在 C 语言中&#xff0c;字符串实际上是使用 null 字符 ‘\0’ 终止的一维字符数组。因此&#xff0c;一个以 null 结尾的字符串&#xff0c;包含了组成字符串的字符。 以下是 C/C 中定义的字符串的内存表示&#xff1a; 10.1 C 中有大量操作字符串…

Linux 脚本(sh)之 定时清理悬空、指定镜像,自动增长版本号

定时任务(images_clean)&#xff1a; 位置&#xff1a;/mydata/hostmachine_jenkins/images_clean.sh 作用&#xff1a;Jenkins发布之后&#xff0c;遗留下来的老版镜像以及悬空镜像进行定时清理 注意&#xff1a;如果你需要发布新的服务&#xff0c;那么你需要进入当前目录…

Git导出增量包的操作步骤

前言在项目开发部署中&#xff0c;通常是将一个Git项目全量打包发布&#xff0c;但有的场景只需要导出有变更的那部分文件&#xff0c;增量发布&#xff0c;此时就需要使用Git导出增量包了。一、查看提交记录拿到提交ID码①例如使用的gitlab使用方法参考下图(一目了然) 【推荐】…

利用机器学习(mediapipe),进行人手的21个3D手关节坐标检测

感知手的形状和动作的能力可能是在各种技术领域和平台上改善用户体验的重要组成部分。例如,它可以构成手语理解和手势控制的基础,并且还可以在增强现实中将数字内容和信息覆盖在物理世界之上。虽然自然而然地出现在人们手中,但是强大的实时手感知力无疑是一项具有挑战性的计…

【基础算法】字符串哈希

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…

逆风翻盘拿下感知实习offer,机会总是留给有准备的人

个人背景211本&#xff0c;985硕&#xff0c;本科是计算机科学与技术专业&#xff0c;研究生是自学计算机视觉方向&#xff0c;本科主要做C和python程序设计开发&#xff0c;java安卓开发&#xff0c;研究生主要做目标检测&#xff0c;现在在入门目标跟踪和3d目标检测。无论文&…

区分效度全流程分析

基本说明 区分效度&#xff08;又称判别效度、区别效度&#xff09;&#xff0c;其实质也是一种结构效度。区分效度强调本不应该在同一因子的测量项&#xff0c;确实不在同一因子下面。比如说&#xff0c;测量项A和 B分别测量两个属性&#xff0c;应该分属于因子A和因子B中&…

正交实验与极差分析

正交试验极差分析流程如下图&#xff1a; 正交试验说明 正交试验是研究多因素试验的设计方法。对于多因素、多水平的实验要求&#xff0c;如果每个因素的每个水平都要进行试验&#xff0c;这样就会耗费大量的人力和时间&#xff0c;正交试验可以选择出具有代表性的少数试验进行…

【Java基础 下】 027 -- 异常、File、综合案例

目录 一、异常 1、异常的分类 ①、Error ②、Exception ③、小结 2、编译时异常和运行时异常 ①、编译时异常 ②、运行时异常 ③、为什么异常要分成编译时异常和运行时异常&#xff1f; ④、小结&#xff08;运行时异常和编译时异常的区别&#xff09; 3、异常的作用 ①、查看b…

百万数据excel导出功能如何实现?

最近我做过一个MySQL百万级别数据的excel导出功能&#xff0c;已经正常上线使用了。 这个功能挺有意思的&#xff0c;里面需要注意的细节还真不少&#xff0c;现在拿出来跟大家分享一下&#xff0c;希望对你会有所帮助。 原始需求&#xff1a;用户在UI界面上点击全部导出按钮…

基于Java的浏览器的设计与实现毕业设计

技术&#xff1a;Java等摘要&#xff1a;当今世界是一个以计算机网络为核心的信息时代&#xff0c;互联网为人们快速获取、发布和传递信息提供了便捷&#xff0c;而浏览器作为互联网上查找信息的重要工具&#xff0c;给人们提供了巨大而又宝贵的信息财富&#xff0c;受到了大家…

苹果ios签名证书的生成方法

在使用hbuilderx打包uniapp或html5应用的时候&#xff0c;假如是打包ios应用&#xff0c;是需要ios签名证书&#xff0c;和证书profile文件的&#xff0c;这个证书要求是p12格式的证书&#xff0c;profile文件又叫描述文件。 这两个文件&#xff0c;需要在苹果开发者中心生成&…

利用关联来发现复杂攻击模式

日志是网络活动的重要依据&#xff0c;包含了关于您网络上所有用户和系统活动的详尽信息。基本日志分析可帮助您轻松地对数百万个日志进行分类&#xff0c;并挑选出可以表明存在可疑活动的日志&#xff0c;识别与正常网络活动不符的异常日志。通常&#xff0c;单独查看某个日志…

WindowsPowerShell 停止、启动、暂停和重启服务、卸载服务

PowerShell 停止、启动、暂停和重启服务、卸载服务 PowerShell 停止、启动、暂停和重启服务 官文 powershell卸载服务 官文 目录PowerShell 停止、启动、暂停和重启服务、卸载服务停止、启动、暂停和重启停止服务启动服务暂停服务重启服务卸载移除服务停止、启动、暂停、重启…

WIFI 安全总论

一、总体逻辑安全策略认证机制 加密机制为了增强无线网络安全性&#xff0c;至少需要提供认证和加密两个安全机制&#xff1a;1、 认证机制&#xff1a;认证机制用来对用户的身份进行验证&#xff0c;以限定特定的用户&#xff08;授权的用户&#xff09;可以使用网络资源。2、…