真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用Vue+SpringBoot實(shí)現(xiàn)Excel上傳功能

1.使用Vue-Cli創(chuàng)建前端項(xiàng)目

創(chuàng)新互聯(lián)建站專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、亞?wèn)|網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性?xún)r(jià)比高,為亞?wèn)|等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

運(yùn)用vue-cli工具可以很輕松地構(gòu)建前端項(xiàng)目,當(dāng)然,使用WebStorm來(lái)構(gòu)建會(huì)更加簡(jiǎn)潔(如圖)。本文推薦使用WebStorm,因?yàn)樵诤罄m(xù)開(kāi)發(fā)中,IDE會(huì)使我們的開(kāi)發(fā)更加簡(jiǎn)潔。部分配置如圖:

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能
使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

2.Navbar編寫(xiě)

作為一個(gè)WebApp,Navbar作為應(yīng)用的導(dǎo)航欄是必不可少的。在本項(xiàng)目中,筆者引入了bootstrap對(duì)Navbar進(jìn)行了輕松地構(gòu)建。在vue中我們需要在components文件夾中將我們的組件加進(jìn)去,對(duì)于本工程來(lái)說(shuō),Navbar是我們要加入的第一個(gè)組件,他獨(dú)立于router之外,一直固定在網(wǎng)頁(yè)上方。

2.1 首先,我們使用npm來(lái)安裝vue,vue-cli,bootstrap

npm install vue
npm install -g vue-cli
npm install --save bootstrap jquery popper.js

2.2 接下來(lái)我們?cè)赾omponents目錄下new一個(gè)vue組件,并且在main.js中引入bootstrap依賴(lài):

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

2.3 下面就可以開(kāi)始寫(xiě)代碼了,由于本文只關(guān)注table相關(guān)的功能,所以導(dǎo)航欄中除了Script意外的元素都已經(jīng)disable,代碼如下:



2.3 在App.vue中引入MyNavbar

3.Script Table編寫(xiě)

作為自動(dòng)化工具,必不可少的一部分就是引入Script,我們希望用戶(hù)能夠自由地使用H5界面進(jìn)行Script的編寫(xiě),因此在這里使用了vue的數(shù)據(jù)雙向綁定進(jìn)行Table CRUD。

3.1 新建一個(gè)vue組件ScriptTable,代碼如下:



3.3 運(yùn)行dev,打開(kāi)localhost:8080

npm run dev

前端頁(yè)面效果如下:

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

至此,本文相關(guān)的純前端部分完成地差不多了,加上mock的數(shù)據(jù)后,我們可以開(kāi)始進(jìn)行后端的開(kāi)發(fā)了。

4.使用Spring Initializr創(chuàng)建后端項(xiàng)目

為了更輕松地構(gòu)建工程,構(gòu)建RESTful API以及更輕松地配置請(qǐng)求處理,筆者選擇了Spring Boot作為后端框架。

4.1 首先我們使用IDEA集成的Spring Initializr來(lái)構(gòu)建項(xiàng)目,部分配置如圖:

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

4.2 接下來(lái)在pom.xml中引入poi依賴(lài),點(diǎn)擊import change。如下所示:


 org.apache.poi
 poi-ooxml
 4.0.0
 

4.3 接下來(lái)我們?cè)赼pplication.properties中配置server.port=8088,與前端項(xiàng)目分開(kāi)

5.pojo類(lèi)Step的編寫(xiě)

下面是對(duì)pojo類(lèi)的編寫(xiě),本文所需的pojo只有Step一種,與前端的table相對(duì)應(yīng),代碼如下:

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

6.UploadController的編寫(xiě)

接下來(lái)是對(duì)前端Post請(qǐng)求的Handler(Controller)進(jìn)行編寫(xiě),我們將上傳這個(gè)Post請(qǐng)求與"/uploadfile"相對(duì)應(yīng),注意加入@CrossOrigin注解實(shí)現(xiàn)跨域,代碼如下:

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 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 result = loadService.castToStep(new File(UPLOADED_FOLDER + file.getOriginalFilename()));
 return result;
 }
}

7.LoadService的編寫(xiě)

下面該編寫(xiě)Service來(lái)讀取請(qǐng)求中傳送的文件了,簡(jiǎn)單地來(lái)說(shuō)只有一個(gè)步驟,將Excel中的Script轉(zhuǎn)換為pojo的鏈表并在Controller中作為ResponseBody返回.

7.1 首先創(chuàng)建Service接口,代碼如下:

package com.daniel.vuespringbootuploadbe;
import org.springframework.stereotype.Service;
import java.io.File;
import java.util.List;
@Service
public interface LoadService {
 List castToStep(File file);
}

7.2 接下來(lái)創(chuàng)建Service實(shí)現(xiàn)類(lèi),代碼如下:

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 castToStep(File file) {
 List 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;
 }
}

8.搭建簡(jiǎn)單的RESTful API

文章臨近尾聲,現(xiàn)在前后端的獨(dú)立代碼基本開(kāi)發(fā)完畢,是時(shí)候搭建RESTful了,本文中的API非常簡(jiǎn)單,就是對(duì)上傳做出響應(yīng),并將返回的json寫(xiě)入界面上的Table中,完成Script導(dǎo)入,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);
  });
 }

9.運(yùn)行服務(wù),編寫(xiě)Script并上傳

接下來(lái)我們創(chuàng)建一個(gè)Excel,按如圖格式編寫(xiě)簡(jiǎn)單Script,運(yùn)行前后端服務(wù),實(shí)現(xiàn)上傳:

使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能

運(yùn)行后,Excel文件會(huì)上傳到后端工程的static的temp目錄中

總結(jié)

以上所述是小編給大家介紹的使用Vue+Spring Boot實(shí)現(xiàn)Excel上傳功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!


新聞標(biāo)題:使用Vue+SpringBoot實(shí)現(xiàn)Excel上傳功能
URL標(biāo)題:http://weahome.cn/article/pdoihd.html

其他資訊

在線(xiàn)咨詢(xún)

微信咨詢(xún)

電話(huà)咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部