学习springboot+vue笔记八--springboot集成hutool进行数据表的导出导入

最新推荐文章于 2025-03-29 16:49:29 发布

cngm110

最新推荐文章于 2025-03-29 16:49:29 发布

阅读量838

点赞数 7

文章标签：学习 spring boot vue.js

本文链接：https://blog.youkuaiyun.com/cngm110/article/details/136604394

版权

项目架构参照前几篇笔记

springboot后端集成使用hutool

引入hutool依赖及相关依赖

首先查阅hutoo官网[https://www.hutool.cn/]，查阅相关的配置和引用依赖。查看参考文档maven的引入方式

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.26</version>
</dependency>

另外还需要poi-ooxml 的版本在4.1.2以上的依赖，查找mvn中央库，选择5.0.0版本.

 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.0.0</version>
        </dependency>

刷新依赖后。
目前porn文件的完整代码为：

<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zhuoaninfo</groupId>
    <artifactId>vueDemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>vueDemo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <!--            <scope>provided</scope>-->
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>io.opentracing.contrib</groupId>
            <artifactId>opentracing-spring-web</artifactId>
            <version>0.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter</artifactId>
            <version>RELEASE</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mariadb.jdbc</groupId>
            <artifactId>mariadb-java-client</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
<!--        集成swagger3-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>
<!--解决配置文件中的路径不能为com.zhuoaninfo.vueDemo.controller的问题，强制升级spring-plugin-core为2.0-->
        <dependency>
            <groupId>org.springframework.plugin</groupId>
            <artifactId>spring-plugin-core</artifactId>
            <version>2.0.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.plugin</groupId>
            <artifactId>spring-plugin-metadata</artifactId>
            <version>2.0.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.3</version>
        </dependency>
<!--        引入hutool依赖-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.26</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.0.0</version>
        </dependency>
    </dependencies>
    <build>
        <finalName>manager</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.7.5</version>
                <configuration>
                    <fork>true</fork>
                    <includeSystemScope>true</includeSystemScope>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <repositories>
        <repository>
            <id>aliyun-repos</id>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
        <repository>
            <id>central</id>
            <url>https://maven.aliyun.com/repository/central</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>aliyun-plugin</id>
            <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>
</project>

使用hutool

在userController 配置导出导入代码，如下：

 @RequestMapping("/users/export")
    public void exportUser(HttpServletResponse response) throws IOException {
        List<User> uerlist = userService.list();
        ExcelWriter writer = ExcelUtil.getWriter(true);
        writer.addHeaderAlias("id","ID");
        writer.addHeaderAlias("name","用户名");
        writer.addHeaderAlias("password","密码");
        writer.addHeaderAlias("realName","真实姓名");
        writer.addHeaderAlias("address","地址");
        writer.addHeaderAlias("create_time","创建时间");

        writer.write(uerlist, 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);
        writer.close();
        IoUtil.close(out);
    }
    @PostMapping("/users/imp")
    public boolean imptUser(MultipartFile file) throws IOException {
        InputStream inputStream=file.getInputStream();
        ExcelReader reader=ExcelUtil.getReader(inputStream);
        List<User> list=reader.readAll(User.class);
       return userService.saveBatch(list);
    }

导出直接访问对应的接口即可下载文件，http://localhost:8181/vueDemo/user/export
为了然导入模版支持中文，在实体类user.class上面使用了@Alias注解。User.class的代码如下：

package com.zhuoaninfo.vueDemo.entity;

import cn.hutool.core.annotation.Alias;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;
import java.sql.Timestamp;
@Data
@TableName("sys_user")
public class User {
    @TableId(type= IdType.AUTO)
    private Integer id;
    @Alias("用户名")
    private String name;
    @Alias("真实姓名")
    private String realName;
    @JsonIgnore
    @Alias("密码")
    private String password;
    @Alias("地址")
    private String address;
    private Timestamp create_time;
}

后端配置完成。

vue前端调用后端，实现导出导入功能

导出按钮功能

对上一篇笔记拆解后的User.vue中的导出按钮增加 handleExportU点击事件。

 <el-button type="primary" @click="handleExportU" class="ml"><i class="el-icon-top mr" ></i>导出</el-button>

在方法中写事件

 handleExportU(){
        window.open("http://127.0.0.1:8181/vueDemo/users/export");
      }

保存按钮，测试点击导出按钮，即可下载<用户信息.xlsx>,导出功能正常。

导入按钮功能

给导入按钮增加一个upload控件并绑定成功回调事件impSucc，代码如下：

<el-upload
              action="http://127.0.0.1:8181/vueDemo/users/imp"
              multiple
              :limit="1"
              :on-success="impSucc"
            style="display:inline-block" >
        <el-button type="primary" ><i class="el-icon-bottom mr"></i>导入</el-button>
          </el-upload>

在方法中写事件

impSucc(){
        this.$message("导入成功！！")
        this.load();
      }

保存按钮，测试导入功能正常。
user.vue的完整代码为：

<template>
  <div>
 <el-main>
      
      <div class="pard">
              <el-input style="width:200px" suffix-icon="el-icon-search" v-model="username" placeholder="请输入查询用户名"></el-input>
               <el-input style="width:200px" class="ml" suffix-icon="el-icon-search" v-model="real_name" placeholder="请输入查询真实姓名"></el-input>
              <el-button class="ml" type="primary" @click="load">搜索</el-button>
      </div>
      <div class="pard">
        <el-button type="warning" @click="handleAddUser()"><i class="el-icon-circle-plus-outline  mr
"></i>新增</el-button>
 <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='再考虑考虑'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm ="delBatch"
              >
        <el-button type="info" slot="reference" class="ml mr" >
          <i class="el-icon-remove-outline mr" ></i>
          批量删除</el-button></el-popconfirm>
          <el-upload
              action="http://127.0.0.1:8181/vueDemo/users/imp"
              multiple
              :limit="1"
              :on-success="impSucc"
            style="display:inline-block" >
        <el-button type="primary" ><i class="el-icon-bottom mr"></i>导入</el-button>
          </el-upload>
        <el-button type="primary" @click="handleExportU" class="ml"><i class="el-icon-top mr" ></i>导出</el-button>
      </div>
      <el-table :data="tableData"  :header-cell-class-name="rowbgclass" @selection-change="handleSelectionChange">
         <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column prop="id" label="ID" width="140"></el-table-column>
        <el-table-column prop="name" label="姓名" width="140">
        </el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button type="success" @click="handleEditUser(scope.row)"><i class="el-icon-edit mr" ></i> 编辑</el-button>
           <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='再考虑考虑'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm ="delUser(scope.row.id)"
              >
           <el-button class="ml" type="danger" slot="reference" ><i class="el-icon-delete mr"></i>删除</el-button></el-popconfirm>
           </template>
        </el-table-column>
      </el-table>
      <div style="padding:10px 0">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
       :total="totalSize">
    </el-pagination>
      </div>
      <el-dialog :title="userDialogTitle" :visible.sync="dialogFormVisible">
  <el-form :model="form" label-width="80px">
    <el-form-item label="用户名" >
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" >
      <el-input v-model="form.realName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" >
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSaveUser()">确 定</el-button>
  </div>
</el-dialog>
    </el-main>
  </div>
</template>

<script>
export default {
name:'UserPage',
data(){
  return{
        rowbgclass:'.rowcbgclass',
        tableData: [],
        totalSize:0,
        pageNum:1,
        pageSize:2,
        username:''  ,
        real_name:'' ,
        dialogFormVisible:false,
        form:{},
        userDialogTitle:'',
        multipleSelection: []
  }
},
created(){
  this.load();
},
methods:{
   handleSizeChange(pageSize) {
        this.pageSize=pageSize;
        this.load();
      },
      handleCurrentChange(pageNum) {
        this.pageNum=pageNum;
        this.load();
      },
      load(){
        this.Req.get('/vueDemo/getPages',{
          params: {
            "pageNum": this.pageNum,
            "pageSize":this.pageSize,
            "name":this.username,
            "real_name":this.real_name
          }
        }).then(res=>{
          this.totalSize=res.total;
          this.tableData=res.records;
        })       
      },
      changeIClass(){
        if(this.arrowClass=='el-icon-arrow-down')
        {
          this.arrowClass='el-icon-arrow-up'}
          else{
            this.arrowClass='el-icon-arrow-down'
          }
      },
      handleAddUser(){
        this.dialogFormVisible=true;
        this.userDialogTitle="新增用户信息";
        this.form={};
      },
      handleSaveUser(){
        this.dialogFormVisible=false;
        this.Req.post('/vueDemo/user',this.form).then(res=>{
          if(res){
            this.$message("保存成功");
            this.load();
          }else{
            this.$message("保存失败")
          }
          }) 
      },
      handleEditUser(row){
        this.dialogFormVisible=true;
        this.userDialogTitle="编辑用户信息";
        this.form=row;
      },
      delUser(id){
        this.Req.delete('/vueDemo/'+id).then(
          res=>{
            if(res){
              this.$message("删除成功！");
              this.load();
            }else{
              this.$message("删除失败，请联系管理员！");
            }
          }
        )
      },
      handleSelectionChange(val){
       this.multipleSelection=val;
      },
      delBatch(){
        var ids=this.multipleSelection.map(val=>val.id);
        this.Req.post('/vueDemo/del/delbatch',ids).then(
          res=>{
            console.log(res)
            if(res){
              this.$message("批量删除成功");
              this.load()
            }else{
              this.$message("批量删除成功,请检查");
            }
          }
        )
      },
      handleExportU(){
        window.open("http://127.0.0.1:8181/vueDemo/users/export");
      },
      impSucc(){
        this.$message("导入成功！！")
        this.load();
      }
}
}
</script>
<style>
</style>