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

川长思鸟来 2024-05-06 23:19 65阅读 0赞

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

#### 一、前言 ####

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

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

#### 二、认识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**

![fc64737352a94b7888bc9ca971b3c932.png][]

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

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

![ff50a5795fdc4005a67d4b1e810676f0.png][]

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.基础配置**

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

![a1251543d8e44c509ce578c36847680f.png][]

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

![3790cc52e31a460eaf61d0448372d8b8.png][]

**3.文件上传**

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

![07bcb1c5183b4f34ba19fd5df15ae9c6.png][]**4.文件下载**

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

![c02913a89a7943219c4b878f4b034191.png][]

**5.文件查询**

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

![9905daedb269405aaf964fa1402ebad8.png][]**6.缓存**

![0380f724983141fe8e6274325627c2bb.png][]**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里面去写我们的接口出来，然后提供给前端进行调用。

![8164b5d444bf4f419684e21d085a08c9.png][]

![249b7b7615de4c95b0188dd380206667.png][]**源码：**

/**
         * 导出接口
         */
        @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.分析**

我们需要实现的是我们的导入和导出功能，那么我们就需要去调用我们的接口进行功能实现![714331f222884efead96e8601ba41987.png][]

我们直接来调用我们的组件实现我们的上传功能 ![0ca5f678de6747cf878c1ad212f92624.png][]

**2.实现**

![c8419bc633954c6b91b076b3984f0933.png][]

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

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

![3908caa4498740b690605b4c74a60784.png][]

![3ebad0b5236f4839b9b39c5b6282840a.png][]

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

**七、功能展示**

**导入**

![915b4a3f1b2d4adaa18f80c7c6525670.png][]

**导出**

![80d45f23448142188ddd5a0dd3beb8cb.png][]

#### ⛵小结 ####

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

![20201213121345281.gif_pic_center][]

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

[0_Vue_-_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129103838
[0_Vue_-Vue2_Element-ui_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129111414
[0_Vue_-Vue_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129127651
[0_Vue_-SpringBoot_Mybatis-plus_-CSDN_mybatisplus]: https://blog.csdn.net/weixin_65950231/article/details/129134187
[0_Vue_-SpringBoot_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129172565
[0_Vue_-Vue_-CSDN 1]: https://blog.csdn.net/weixin_65950231/article/details/129179229?spm=1001.2014.3001.5501
[fc64737352a94b7888bc9ca971b3c932.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2c7790f053b44d5c9bd5de7a35362e87.png
[ff50a5795fdc4005a67d4b1e810676f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/09ace5d4bb63435e87ee4cc2ab7fd587.png
[a1251543d8e44c509ce578c36847680f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/15349b84e25d4cbeaa1051c6d2b0c557.png
[3790cc52e31a460eaf61d0448372d8b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f0c7a6acd56b4ec79ac47bd9a57d198f.png
[07bcb1c5183b4f34ba19fd5df15ae9c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ed7d9725dffc482bb7bfc74026cb08a9.png
[c02913a89a7943219c4b878f4b034191.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d76e2bb2d0e34c4587af0fab457b3d92.png
[9905daedb269405aaf964fa1402ebad8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/cd6ea97322ea4d7fbe55277348d24f33.png
[0380f724983141fe8e6274325627c2bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/89aa53613b0c4431a657e05f56276dc9.png
[8164b5d444bf4f419684e21d085a08c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d3820f3448544e74b4478403808d9703.png
[249b7b7615de4c95b0188dd380206667.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e7d4d82b9dd94b7d80bda8ada85de0c8.png
[714331f222884efead96e8601ba41987.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/a10195527c5c45b9b535f5cebc11f453.png
[0ca5f678de6747cf878c1ad212f92624.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/03424747651748a3a477334d2806c49e.png
[c8419bc633954c6b91b076b3984f0933.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/426511f1ab194d22aa72a85a726256df.png
[3908caa4498740b690605b4c74a60784.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0af4310deb814d57af917b468c514186.png
[3ebad0b5236f4839b9b39c5b6282840a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/359c36e5456c458185a59f13601a9d05.png
[915b4a3f1b2d4adaa18f80c7c6525670.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/bd79a826cf6d422e9cc01e1506d0142f.png
[80d45f23448142188ddd5a0dd3beb8cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/fbd41ba4b1364153af97cd01891ecb7f.png
[20201213121345281.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2e4a4575839e4089a30c870332685c16.gif