JavaWeb——使用Vue+Spring Boot实现Excel上传

最新推荐文章于 2025-06-18 14:56:19 发布

Daniel_DDDD

最新推荐文章于 2025-06-18 14:56:19 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/daniel_dai2018/article/details/84631987

本文介绍如何使用Vue和Spring Boot在WebApp中实现Excel上传功能。通过Vue-Cli创建前端项目，编写Navbar和ScriptTable组件，然后用Spring Initializr构建后端，配置RESTful API，实现Excel到pojo的转换并处理上传请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在最前

在上期教程中我们介绍了读写Excel与使用Selenium的入门方法，本期将介绍通过Vue+Spring Boot实现在WebApp中上传Excel导入测试脚本的功能。使用前后端分离的技术是因为这样便于后续功能的迭代，在本文中我们只涉及一个简单的前端界面及一个简单的后台服务。

运行结果展示与源码地址在文末，上期传送门：Java自动化——使用Selenium+POI实现Excel自动化批量查单词

步骤一览

使用Vue-Cli创建前端项目
Navbar编写
脚本表格编写
使用Spring Initializr创建后端项目
pojo类的编写
UploadController的编写
UploadService的编写
搭建简单的RESTful API
运行服务，编写脚本并上传

现在开始

使用Vue-Cli创建前端项目

运用vue-cli工具可以很轻松地构建前端项目，当然，使用WebStorm来构建会更加简洁（如图）。本文推荐使用WebStorm，因为在后续开发中，IDE会使我们的开发更加简洁。部分配置如图：

Navbar编写

作为一个WebApp，Navbar作为应用的导航栏是必不可少的。在本项目中，笔者引入了bootstrap对Navbar进行了轻松地构建。在vue中我们需要在components文件夹中将我们的组件加进去，对于本工程来说，Navbar是我们要加入的第一个组件，他独立于router之外，一直固定在网页上方。

2.1 首先，我们使用npm来安装vue,vue-cli,bootstrap
```
npm install vue
npm install -g vue-cli
npm install --save bootstrap jquery popper.js
```
2.2 接下来我们在components目录下new一个vue组件，并且在main.js中引入bootstrap依赖：
```
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
```
2.3 下面就可以开始写代码了，由于本文只关注table相关的功能，所以导航栏中除了Script意外的元素都已经disable，代码如下：

<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <span class="navbar-brand mb-0 h1">Vue-SpringBoot</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link class="nav-link" to="/home">Home</router-link>
        </li>
        <li class="nav-item active">
          <router-link to="/" class="nav-link">Script</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/history" class="nav-link">History</router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
    export default {
    
    
        name: "MyNavbar"
    }
</script>

<style scoped>

</style>

2.3 在App.vue中引入MyNavbar

Script Table编写

作为自动化工具，必不可少的一部分就是引入Script，我们希望用户能够自由地使用H5界面进行Script的编写，因此在这里使用了vue的数据双向绑定进行Table CRUD。

3.1 新建一个vue组件ScriptTable，代码如下：

<template>
  <div class="container-fluid" id="scriptTable">
    <h3>My Script</h3>
    <form style="margin-top: 1rem">
      <input type="file" @change="getFile($event)" class="" multiple/>
      <input type="button" value="upload" @click="submit($event)" class