使用Vue+Spring Boot實現Excel上傳

Daniel_D發表於2019-03-01

寫在最前

在上期教程中我們介紹了讀寫Excel與使用Selenium的入門方法,本期將介紹通過Vue+Spring Boot實現在WebApp中上傳Excel匯入測試指令碼的功能。使用前後端分離的技術是因為這樣便於後續功能的迭代,在本文中我們只涉及一個簡單的前端介面及一個簡單的後臺服務。

執行結果展示與原始碼地址在文末,上期傳送門:Java自動化——使用Selenium+POI實現Excel自動化批量查單詞

步驟一覽

  1. 使用Vue-Cli建立前端專案
  2. Navbar編寫
  3. 指令碼表格編寫
  4. 使用Spring Initializr建立後端專案
  5. pojo類的編寫
  6. UploadController的編寫
  7. UploadService的編寫
  8. 搭建簡單的RESTful API
  9. 執行服務,編寫指令碼並上傳

現在開始

  1. 使用Vue-Cli建立前端專案

    運用vue-cli工具可以很輕鬆地構建前端專案,當然,使用WebStorm來構建會更加簡潔(如圖)。本文推薦使用WebStorm,因為在後續開發中,IDE會使我們的開發更加簡潔。部分配置如圖:

使用Vue+Spring Boot實現Excel上傳

使用Vue+Spring Boot實現Excel上傳

使用Vue+Spring Boot實現Excel上傳

使用Vue+Spring Boot實現Excel上傳

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

  1. 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="btn btn-dark">
    </form>
    <table class="table table-hover text-center table-bordered"
           style="word-break: break-all; word-wrap: break-word;margin-top: 1rem;">
      <thead>
      <th>#</th>
      <th>Platform</th>
      <th>Action</th>
      <th>Path</th>
      <th>Value</th>
      <th>Wait</th>
      <th>Screenshot</th>
      <th>Change</th>
      </thead>
      <tbody>
      <tr v-cloak v-for="(item, index) in steps">
        <th>{{index+1}}</th>
        <td>{{item.platform}}</td>
        <td>{{item.action}}</td>
        <td>{{item.path}}</td>
        <td>{{item.value}}</td>
        <td>{{item.wait}}</td>
        <td>{{item.screenshot}}</td>
        <td><a href="#" v-on:click="edit(item)">Edit</a> | <a href="#" v-on:click='aaa(index)'>Delete</a>
        </td>
      </tr>
      <tr>
        <th></th>
        <td><select class="form-control" v-model="stepstemp.platform">
          <option>Web</option>
          <option>Android</option>
        </select></td>
        <td><select class="form-control" v-model="stepstemp.action">
          <option>click</option>
          <option>get</option>
          <option>input</option>
          <option>swipe</option>
        </select></td>
        <td><input class="form-control" v-model="stepstemp.path" placeholder="Enter the xPath"></td>
        <td><input class="form-control" v-model="stepstemp.value" placeholder="Enter the input value"></td>
        <td><input class="form-control" v-model="stepstemp.wait" placeholder="Waiting seconds"></td>
        <td><select class="form-control" v-model="stepstemp.screenshot">
          <option>yes</option>
          <option>no</option>
        </select></td>
        <td>
          <button class="btn btn-sm btn-dark" v-on:click='save' v-if="isNotEdit">Save</button>
          <button class="btn btn-sm btn-primary" v-on:click='saveEdit' v-else>SaveEdit</button>
        </td>
      </tr>
      </tbody>
    </table>
    <hr/>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'

  export default {
    name: "ScriptTable",
    data() {
      return ({
        steps: [],
        stepstemp: {
          platform: '',
          action: '',
          path: '',
          value: '',
          wait: '',
          screenshot: ''
        },
        isNotEdit: true
      });
    },
    methods: {
      save: function () {
        this.steps.push(this.stepstemp);
        this.stepstemp = {
          platform: '',
          action: '',
          path: '',
          value: '',
          wait: '',
          screenshot: ''
        };
      },
      aaa: function (index) {
        this.steps.splice(index, 1)
      },
      edit: function (item) {
        this.isNotEdit = false;
        this.stepstemp = item;
      },
      saveEdit: function () {
        this.isNotEdit = true;
        this.stepstemp = {
          platform: '',
          action: '',
          path: '',
          value: '',
          wait: '',
          screenshot: ''
        };
      }
    }
  }
</script>


<style scoped>

</style>

複製程式碼

3.3 執行dev,開啟localhost:8080

npm run dev
複製程式碼

前端頁面效果如下:

使用Vue+Spring Boot實現Excel上傳
至此,本文相關的純前端部分完成地差不多了,加上mock的資料後,我們可以開始進行後端的開發了。

  1. 使用Spring Initializr建立後端專案

    為了更輕鬆地構建工程,構建RESTful API以及更輕鬆地配置請求處理,筆者選擇了Spring Boot作為後端框架。

    4.1 首先我們使用IDEA整合的Spring Initializr來構建專案,部分配置如圖:

使用Vue+Spring Boot實現Excel上傳

使用Vue+Spring Boot實現Excel上傳

4.2 接下來在pom.xml中引入poi依賴,點選import change。如下所示:

 <dependency>
     <groupId>org.apache.poi</groupId>
     <artifactId>poi-ooxml</artifactId>
     <version>4.0.0</version>
 </dependency>
複製程式碼

4.3 接下來我們在application.properties中配置server.port=8088,與前端專案分開

  1. pojo類Step的編寫

    下面是對pojo類的編寫,本文所需的pojo只有Step一種,與前端的table相對應,程式碼如下:

import lombok.Data;
@Data
public class Step {
    private String platform;
    private String action;
    private String path;
    private String value;
    private int wait;
    private String screenshot;
}
複製程式碼
  1. UploadController的編寫

    接下來是對前端Post請求的Handler(Controller)進行編寫,我們將上傳這個Post請求與"/uploadfile"相對應,注意加入@CrossOrigin註解實現跨域,程式碼如下:

package com.daniel.vuespringbootuploadbe;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.List;

@Controller
@CrossOrigin
@ResponseBody
public class UploadController {

    private static String UPLOADED_FOLDER = "src/main/resources/static/temp/";

    @Autowired
    private LoadService loadService;

    @PostMapping("/upload")
    public List<Step> singleFileUpload(MultipartFile file) {
        try {
            // Get the file and save it somewhere
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);
        } catch (IOException e) {
            e.printStackTrace();
        }
        // Print file data to html
        List<Step> result = loadService.castToStep(new File(UPLOADED_FOLDER + file.getOriginalFilename()));
        return result;
    }

}

複製程式碼
  1. LoadService的編寫

    下面該編寫Service來讀取請求中傳送的檔案了,簡單地來說只有一個步驟,將Excel中的Script轉換為pojo的連結串列並在Controller中作為ResponseBody返回.

    7.1 首先建立Service介面,程式碼如下:

package com.daniel.vuespringbootuploadbe;

import org.springframework.stereotype.Service;

import java.io.File;
import java.util.List;

@Service
public interface LoadService {
    List<Step> castToStep(File file);
}

複製程式碼

7.2 接下來建立Service實現類,程式碼如下:

package com.daniel.vuespringbootuploadbe;

import org.apache.poi.openxml4j.exceptions.InvalidFormatException;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.stereotype.Service;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Service
public class LoadServiceImpl implements LoadService {


    @Override
    public List<Step> castToStep(File file) {
        List<Step> steps = new ArrayList<>();
        Workbook workbook = null;
        try {
            workbook = new XSSFWorkbook(file);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (InvalidFormatException e) {
            e.printStackTrace();
        }
        Sheet sheet = workbook.getSheetAt(0);
        int num = sheet.getLastRowNum() - sheet.getFirstRowNum();
        //Read steps
        for (int i = 0; i < num; i++) {
            Row row = sheet.getRow(i+1);
            Step step = new Step();
            step.setPlatform(row.getCell(0).getStringCellValue());
            step.setAction(row.getCell(1).getStringCellValue());
            step.setPath(row.getCell(2).getStringCellValue());
            step.setValue(row.getCell(3).getStringCellValue());
            step.setWait((int) row.getCell(4).getNumericCellValue());
            step.setScreenshot(row.getCell(5).getStringCellValue());
            steps.add(step);
        }
        try {
            workbook.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return steps;
    }
}

複製程式碼
  1. 搭建簡單的RESTful API

    文章臨近尾聲,現在前後端的獨立程式碼基本開發完畢,是時候搭建RESTful了,本文中的API非常簡單,就是對上傳做出響應,並將返回的json寫入介面上的Table中,完成Script匯入,npm安裝axios後,在ScriptTable元件中加入如下程式碼:

      getFile: function (event) {
        this.file = event.target.files[0];
        console.log(this.file);
      },
      submit: function (event) {
        event.preventDefault();
        let formData = new FormData();
        formData.append("file", this.file);
        axios.post('http://localhost:8088/upload', formData)
          .then(function (response) {
            for (let i = 0; i < response.data.length; i++) {
              var tempData = {
                platform: response.data[i].platform,
                action: response.data[i].action,
                path: response.data[i].path,
                value: response.data[i].value,
                wait: response.data[i].wait,
                screenshot: response.data[i].screenshot
              };
              this.steps.push(tempData);
            }
          }.bind(this))
          .catch(function (error) {
            alert("Fail");
            console.log(error);
          });
      }
複製程式碼
  1. 執行服務,編寫Script並上傳

    接下來我們建立一個Excel,按如圖格式編寫簡單Script,執行前後端服務,實現上傳:

使用Vue+Spring Boot實現Excel上傳

執行後,Excel檔案會上傳到後端工程的static的temp目錄中

結果展示

使用Vue+Spring Boot實現Excel上傳

結語

本文只是實現了基礎的上傳指令碼功能,要實現指令碼執行,我們還要在BE專案中實現相關服務進行封裝,需要Selenium的幫助。之後的教程中會做詳細闡述,敬請期待。

附錄

原始碼地址:

前端專案——gitee.com/daniel_ddd/…

後端專案——gitee.com/daniel_ddd/…

相關文章