vue+springboot实现excel批量数据的导入导出

①后端配置端口:修改UserController

UserController:

package com.example.springboot.controller;import cn.hutool.core.util.StrUtil;
import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import cn.hutool.poi.excel.ExcelWriter;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.springboot.common.Result;
import com.example.springboot.entity.User;
import com.example.springboot.exception.ServiceException;
import com.example.springboot.service.UserService;
import com.example.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {@AutowiredUserService userservice;@PostMapping("/add")public Result add(@RequestBody User user){try{userservice.save(user);}catch(Exception e){if(e instanceof DuplicateKeyException){return Result.error("插入数据错误");}else{return Result.error("系统错误");}}return Result.success();}@PutMapping("/update")public Result update(@RequestBody User user){userservice.updateById(user);return Result.success();}@DeleteMapping("/delete/{id}")public Result delete(@PathVariable Integer id){User currentUser= TokenUtils.getCurrentUser();if(id.equals(currentUser.getId())){throw new ServiceException("不能删除当前用户");}userservice.removeById(id);return Result.success();}@DeleteMapping("/delete/batch")public Result batchDelete(@RequestBody List<Integer> ids){User currentUser=TokenUtils.getCurrentUser();if(currentUser != null&&currentUser.getId()!=null &&ids.contains(currentUser.getId())){throw new ServiceException("不能删除当前用户");}userservice.removeBatchByIds(ids);return Result.success();}@GetMapping("/selectall")public Result selectall(){List<User>userlist=userservice.list(new QueryWrapper<User>().orderByDesc("id"));return Result.success(userlist);}@GetMapping("/selectbyid/{id}")public Result selectbyid(@PathVariable Integer id){User user=userservice.getById(id);return Result.success(user);}@GetMapping("/selectByPage")public Result selectByPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username,@RequestParam String name){QueryWrapper<User>queryWrapper=new QueryWrapper<User>().orderByDesc("id");queryWrapper.like(StrUtil.isNotBlank(username),"username",username);queryWrapper.like(StrUtil.isNotBlank(name),"name",name);Page<User>page=userservice.page(new Page<>(pageNum,pageSize),queryWrapper);return Result.success(page);}@GetMapping("/export")public void exportData(@RequestParam(required = false) String username,@RequestParam(required = false) String name,@RequestParam(required = false) String ids,HttpServletResponse response) throws IOException {ExcelWriter writer= ExcelUtil.getWriter(true);List<User> list;QueryWrapper<User> queryWrapper=new QueryWrapper<>();if(StrUtil.isNotBlank(ids)){List<Integer> idsArr1=Arrays.stream(ids.split(",")).map(Integer::valueOf).collect(Collectors.toList());queryWrapper.in("id",idsArr1);}else{queryWrapper.like(StrUtil.isNotBlank(username),"username",username);queryWrapper.like(StrUtil.isNotBlank(name),"name",name);}list=userservice.list(queryWrapper);writer.write(list,true);response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("用户信息表", "UTF-8") + ".xlsx");ServletOutputStream outputStream= response.getOutputStream();writer.flush(outputStream,true);writer.close();outputStream.flush();outputStream.close();}@PostMapping("/import")public Result importData(MultipartFile file) throws IOException{ExcelReader reader=ExcelUtil.getReader(file.getInputStream());List<User> userList=reader.readAll(User.class);try{userservice.saveBatch(userList);}catch (Exception e){e.printStackTrace();return Result.error("批量导入数据出错");}return Result.success();}
}

②前端修改页面

 User:

<template><div><div><el-input style="width: 200px" placeholder="查询用户名" v-model="username"></el-input><el-input style="width: 200px;margin: 0 10px" placeholder="查询姓名" v-model="name"></el-input><el-button type="primary" @click="load(1)">查询</el-button><el-button type="info" @click="reset">重置</el-button></div><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增</el-button><el-button type="danger" @click="delbatch">批量删除</el-button><el-button type="info" @click="exportData" plain>批量导出</el-button><el-upload action="http://localhost:9090/user/import" :headers="{token:user.token}" style="display: inline-block;margin-left: 10px" :show-file-list="false" :on-success="handleImport"><el-button type="primary" plain>批量导入</el-button></el-upload></div><el-table  @selection-change="handleSelectionChange" :data="tableData" stripe :header-cell-style="{backgroundColor:'aliceblue',color:'#666'} "><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="id" label="ID" width="70"></el-table-column><el-table-column prop="username" label="用户名"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="phone" label="手机号"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="头像"><template v-slot="scope"><div style="display: flex;align-items: center"><el-image style="width: 50px;height: 50px;border-radius: 50%" v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image></div></template></el-table-column><el-table-column prop="role" label="角色"></el-table-column><el-table-column label="操作" align="center" width="180"><template v-slot="scope"><div style="display: flex"><el-button type="primary" plain size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button type="danger" plain size="mini" @click="del(scope.row.id)">删除</el-button></div></template></el-table-column></el-table><div class="block" style="margin: 10px 0"><el-pagination@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[100, 200, 300, 400]":page-size="pageSize"layout="total, prev, pager, next":total="total"></el-pagination></div><el-dialog title="收货地址" :visible.sync="formVisible" width="30%"><el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" ></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="form.phone"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input type="textarea" v-model="form.address"></el-input></el-form-item><el-form-item label="角色" prop="role"><el-radio-group v-model="form.role"><el-radio label="管理员"></el-radio><el-radio label="用户"></el-radio></el-radio-group></el-form-item><el-form-item label="头像"><el-uploadclass="avatar-uploader"action="http://localhost:9090/file/upload":headers="{ token: user.token }":file-list="form.avatar?[form.avatar]:[]"list-type="picture":on-success="handleAvatarSuccess"><el-button type="primary">上传头像</el-button></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div>
</template><script>
export default {name:'User',data(){return{tableData:[],pageNum:1,pageSize:5,username:'',name:'',total:0,formVisible:false,form:{},user:JSON.parse(localStorage.getItem('honey-user'||'{}')),rules:{username:[{required:true,message:'请输入用户名',trigger:'blur'}]},ids:[]}},created() {this.load()},methods:{handleImport(res,file,fileList){if(res.code==='200'){this.$message.success("操作成功")this.load(1)}else{this.$message.error(res.msg)}},exportData(){if(!this.ids.length){window.open("http://localhost:9090/user/export?token="+this.user.token+"&username="+this.username+"&name="+this.name)}else{let idStr=this.ids.join(',')window.open("http://localhost:9090/user/export?token="+this.user.token+"&ids="+idStr)}},delbatch(){if(!this.ids.length){this.$message.warning("请选择数据")return}this.$confirm('您确认删除吗','确认删除',{type:'warning'}).then(response=>{this.$request.delete('/user/delete/batch',{data:this.ids}).then(res=>{if(res.code === '200'){this.$message.success('操作成功')this.load(1)}else{this.$message.error(res.msg)}})}).catch(()=>{})},handleSelectionChange(rows){this.ids=rows.map(v=>v.id)},del(id){this.$confirm('您确认删除吗','确认删除',{type:'warning'}).then(response=>{this.$request.delete('/user/delete/'+id).then(res=>{if(res.code === '200'){this.$message.success('操作成功')this.load(1)}else{this.$message.error(res.msg)}})}).catch(()=>{})},handleEdit(row){this.form=JSON.parse(JSON.stringify(row))this.formVisible=true},handleAdd(){this.form={role:'用户'}this.formVisible=true},save(){this.$refs.formRef.validate((valid)=>{if(valid){this.$request({url:this.form.id? '/user/update' : '/user/add',method:this.form.id? 'PUT' : 'POST',data:this.form}).then(res=>{if(res.code === '200'){this.$message.success('保存成功')this.load(1)this.formVisible=false}else{this.$message.error(res.msg)}})}})},handleAvatarSuccess(response,file,fileList){console.log(response)this.form.avatar=response.data},reset(){this.name=''this.username=''this.load()},load(pageNum){if(pageNum){this.pageNum=pageNum}this.$request.get('/user/selectByPage',{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username,name:this.name}}).then(res=>{this.tableData=res.data.recordsthis.total=res.data.total})},handleCurrentChange(pageNum){this.load(pageNum)},}
}
</script><style scoped></style>

③后端引入依赖:修改pom.xml

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.example</groupId><artifactId>springboot</artifactId><version>0.0.1-SNAPSHOT</version><name>springboot</name><description>springboot</description><properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><spring-boot.version>2.7.6</spring-boot.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.3.0</version></dependency><!-- mybatis-plus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.2</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version></dependency><!-- JWT --><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>4.3.0</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${spring-boot.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.8.1</version><configuration><source>1.8</source><target>1.8</target><encoding>UTF-8</encoding></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>${spring-boot.version}</version><configuration><mainClass>com.example.springboot.SpringbootApplication</mainClass><skip>true</skip></configuration><executions><execution><id>repackage</id><goals><goal>repackage</goal></goals></execution></executions></plugin></plugins></build></project>

 ④修改后端实体类:User

User:

package com.example.springboot.entity;import cn.hutool.core.annotation.Alias;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;@Data
@TableName("user")
public class User {@TableId(type= IdType.AUTO)@Alias("序号")private Integer id;@Alias("用户名")private String username;@Alias("密码")private String password;@Alias("姓名")private String name;@Alias("电话")private String phone;@Alias("邮箱")private String email;@Alias("地址")private String address;@Alias("头像")private String avatar;@Alias("角色")private String role;@TableField(exist = false)private String token;
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

咸鱼之王游戏攻略:平民怎么起号?

在《咸鱼之王》这款游戏中&#xff0c;即使是平民玩家&#xff0c;也有着许多可以优化的操作&#xff0c;以最大程度地提高收益。本攻略将针对平民玩家的日常操作进行详细解读&#xff0c;包括黑市购买、资源管理等方面的建议&#xff0c;希望对广大玩家有所帮助。 一、黑市购买…

王者营地ip地址怎么隐藏

在数字化快速发展的今天&#xff0c;网络安全和隐私保护成为了每个人都需要面对的重要问题。作为一款备受欢迎的游戏社区应用&#xff0c;王者营地为用户提供了丰富的游戏信息和交流平台。然而&#xff0c;与此同时&#xff0c;用户的IP地址也可能在不经意间被泄露&#xff0c;…

JavaEE技术之SpringCloud(Nacos注册中心、Nacos配置中心、Sentinel实现熔断与限流)

文章目录 SpringCloud Alibaba1、简介1.1 背景1.2 Nacos主要功能1.3 Nacos和SpringBoot、SpringCloud版本选择 2、Nacos注册中心2.1 案例准备2.2 Nacos注册中心下载启动2.2.1 下载2.2.2 解压启动2.2.3 nacos-server访问测试 2.3 nacos注册中心客户端整合2.3.1 订单服务整合naco…

最短路径[floyd算法]-----视频讲解+代码实现

求最短路径&#xff0c;一般有三种方法&#xff1a; 单源最短路径--Dijkstra算法 此算法只能求不带负权值的有向无环图 单源最短路径--Bellman-Ford算法&#xff08;少考&#xff09; 此算法优点在于&#xff1a;可以求带权值的有向无环图 但只是缺点明显&#xff0c;时间复杂度…

视频素材哪里找?7个无版权视频素材网站

这篇文章为那些正在学习视频剪辑的新手提供了一份宝贵的资源清单&#xff0c;介绍了7个可以找到高质量且免费可商用的视频素材网站。每个网站都有其独特的资源库&#xff0c;可以帮助用户找到适合各种项目的视频素材&#xff0c;从生活vlog到专业旅行记录&#xff0c;都可以在这…

Gitee添加仓库成员

1.进入你的项目 2.点击管理 3.左侧有个仓库管理 4.要加哪个加哪个&#xff0c;有三个方式~ 可以直接添加之前仓库合作过的开发者

IO系列(一) -一文带你读懂 java 中的IO流!

一、摘要 说到 IO&#xff0c;相信大家都不陌生&#xff0c;英文全称&#xff1a;Input/Output&#xff0c;即输入/输出&#xff0c;通常指数据在内部存储器和外部存储器或其他周边设备之间的输入和输出。 比如我们常用的SD卡、U盘、移动硬盘等等存储文件的硬件设备&#xff…

Cosmo Bunny Girl

可爱的宇宙兔女郎的3D模型。用额外的骨骼装配到Humanoid上,Apple混合了形状。完全模块化,包括不带衣服的身体。 技术细节 内置,包括URP和HDRP PDF。还包括关于如何启用URP和HDRP的说明。 LOD 0:面:40076,tris 76694,verts 44783 装配了Humanoid。添加到Humanoid中的其他…

前端部署真的不简单

现在大部分的中小型公司部署前端代码都是比较简单的&#xff0c;主要步骤如下: 首先&#xff0c;通过脚手架提供的命令npm run build打包前端代码&#xff0c;生成dist文件夹&#xff1b; 最后&#xff0c;将dist文件夹丢给后台开发人员放在他们的工程里面&#xff0c;随后台…

APNGToGifConverter for Mac:一键转换APNG为GIF的神奇小工具!

APNGToGifConverter for Mac &#x1f4bb; 是一款为Mac用户量身定制的、简单易用的图片格式转换工具。它能够将APNG&#xff08;动画PNG&#xff09;文件快速转换为GIF&#xff08;图形交换格式&#xff09;文件&#xff0c;让你的图片动画轻松在各种平台和设备上播放。 &…

Spring Boot整合ElasticSearch实战 - 第511篇

历史文章&#xff08;文章累计500&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 《…

抱怨无用,行动破局

故事的开始 这个专栏&#xff0c;以及本文的目的&#xff0c;是为了记录我从创立盘多啦这个平台开始&#xff0c;到后续的发展历程的专栏。同时也是给自己一个坚持的动力和警醒的作用。 首先&#xff0c;我是一名程序员&#xff0c;并且对于自身感兴趣的东西&#xff0c;都有…