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)潔。部分配置如圖:
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è)面效果如下:
至此,本文相關(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)目,部分配置如圖:
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 ListsingleFileUpload(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 { ListcastToStep(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 ListcastToStep(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)上傳:
運(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)站的支持!