參考論文-數(shù)據(jù)導入與查詢系統(tǒng)開發(fā)

洛陽理工學院畢業(yè)設(shè)計（論文）PAGE4數(shù)據(jù)導入與查詢系統(tǒng)開發(fā)摘要以往累積的大多數(shù)據(jù)是以Excel文件格式保存的，不便于查詢其中的數(shù)據(jù)，因此開發(fā)了一個數(shù)據(jù)導入與查詢系統(tǒng)。該系統(tǒng)實現(xiàn)對Excel文件中存儲的數(shù)據(jù)的讀取及展示，并將讀取到的數(shù)據(jù)異步傳輸?shù)椒?wù)器端導入數(shù)據(jù)庫，系統(tǒng)可以對單張表格數(shù)據(jù)進行拆分操作，或者對多張表格數(shù)據(jù)根據(jù)指定列進行合并，修改完成后的表格可以Excel文件格式導出到本地保存。數(shù)據(jù)導入與查詢系統(tǒng)基于B/S架構(gòu)，采用前后端分離的方式進行開發(fā)。前端開發(fā)工具使用WebStorm，使用Vue框架及其相關(guān)插件簡化開發(fā)流程，使用Axios發(fā)送Ajax異步請求傳輸表格數(shù)據(jù)，使用Element組件庫美化前端顯示效果。后端開發(fā)工具選用IntelliJIDEA，框架選用SpringBoot，使用SpringDataJPA實現(xiàn)對數(shù)據(jù)庫的訪問。本系統(tǒng)界面直觀，用戶操作便捷。借助工具實現(xiàn)了前端頁面對Excel文件格式數(shù)據(jù)的解析、展示以及Excel格式的數(shù)據(jù)導出功能，完善了對表格數(shù)據(jù)的過濾、修改，刪除等功能，做到減輕服務(wù)器壓力，減少網(wǎng)頁等待時間，提高用戶體驗。關(guān)鍵詞：數(shù)據(jù)導入與查詢，Excel，Vue，SpringBoot

DATAIMPORTANDQUERYSYSTEMDEVELOPMENTABSTRACTMostofthedataaccumulatedinthepastwassavedinExcelfileformat,whichisnotconvenientforqueryingthedata,soadataimportandquerysystemwasdeveloped.ThesystemcanreadanddisplaythedatastoredintheExcelfile,andasynchronouslytransferthereaddatatotheservertoimportthedatabase.Thesystemcansplitasingletabledata,oraccordingtomultipletabledataSpecifythecolumnstobemerged,andthemodifiedtablecanbeexportedtothelocalfileinExcelfileformat.ThedataimportandquerysystemisbasedontheB/Sarchitectureandisdevelopedbyseparatingthefrontandbackends.Thefront-enddevelopmenttoolsuseWebStorm,usetheVueframeworkandrelatedplug-instosimplifythedevelopmentprocess,useAxiostosendAjaxasynchronousrequeststotransfertabledata,andusetheElementcomponentlibrarytobeautifythefront-enddisplayeffects.Theback-enddevelopmenttoolusesIntelliJIDEA,theframeworkusesSpringBoot,andusesSpringDataJPAtoimplementaccesstothedatabase.Theinterfaceofthissystemisintuitiveandtheoperationisconvenientforusers.Withthehelpoftools,thefront-endpageanalyzesanddisplaysExcelfileformatdataandExcelformatdataexportfunctions,andimprovesthefiltering,modification,anddeletionoftabledata,soastoreduceserverpressure,reducewebpagewaitingtime,andimproveuserexperience.KEYWORDS:Dataimportandquery，Excel，Vue，SpringBoot前言目錄前言 1第1章緒論 21.1系統(tǒng)開發(fā)背景 21.2系統(tǒng)開發(fā)目標 21.3相關(guān)技術(shù)簡介 31.3.1B/S結(jié)構(gòu) 31.3.2Vue框架 31.3.3SpringBoot框架 31.3.4SpringDataJPA 31.4系統(tǒng)開發(fā)環(huán)境 4第2章需求分析 52.1系統(tǒng)用例圖 52.2系統(tǒng)流程與功能需求 52.2.1系統(tǒng)流程分析 62.2.2功能需求分析 6第3章系統(tǒng)總體設(shè)計 83.1系統(tǒng)模塊設(shè)計 83.1.1系統(tǒng)功能模塊結(jié)構(gòu) 83.1.2主要模塊說明 93.2數(shù)據(jù)庫設(shè)計 93.2.1E-R圖 93.2.2數(shù)據(jù)庫與表設(shè)計 10第4章詳細設(shè)計與實現(xiàn) 124.1前端設(shè)計 124.1.1前端環(huán)境搭建 124.1.2文件管理模塊 134.1.3單表操作模塊 154.1.4多表操作模塊 184.2后端設(shè)計 204.2.1后端環(huán)境搭建 204.2.2表格存儲實現(xiàn) 22第5章系統(tǒng)測試 235.1采用的測試方法 235.2文件導入功能的測試 235.3單表操作模塊的測試 245.3.1基本信息修改 245.3.2刪除行及列測試 255.3.3表數(shù)據(jù)排序與過濾 265.4多表操作模塊的測試 27結(jié)論 29謝辭 30參考文獻 31前言以往積累的大多數(shù)據(jù)是以Excel文件格式保存的，Excel是MicrosoftOffice的重要組件之一，常用于對數(shù)據(jù)表格進行計算、生成分析圖表等，但缺乏對多個工作表的數(shù)據(jù)整合和查詢功能。網(wǎng)絡(luò)上存在一些提供Excel文件在線處理的網(wǎng)站，基于B/S結(jié)構(gòu)，使得用戶可以用瀏覽器在頁面上通過上傳Excel文件并指定對文件的操作以得到預(yù)期的結(jié)果。以用戶角度而言，無需下載安裝額外的軟件是一大便利，但是文件上傳過程受制于多方面因素如網(wǎng)絡(luò)環(huán)境、文件大小的影響，部分情況下會影響用戶使用體驗。指定文件操作時也需要用戶自行分辨操作類型，選擇對應(yīng)頁面跳轉(zhuǎn)以執(zhí)行，該過程中頁面功能不夠直觀，降低用戶體驗。本次的研究重點要解決用戶操作復(fù)雜的問題，令用戶在簡單操作下便可對選擇的Excel文件進行多種復(fù)雜操作，包括表的重命名，單表數(shù)據(jù)的拆分和多表數(shù)據(jù)的合并。通過用戶對頁面上的表格給出相應(yīng)的操作條件對表執(zhí)行對應(yīng)操作，以此來簡化用戶操作，提高用戶體驗，并完成網(wǎng)頁數(shù)據(jù)導出功能，解決用戶對于數(shù)據(jù)的處理問題。本系統(tǒng)采用B/S架構(gòu)，使用Vue框架開發(fā)前端顯示和交互界面，使用SpringBoot框架開發(fā)后端系統(tǒng)，做到前后端分離，采用“增量模型”的研究方法，逐步達到上述設(shè)計要求。第1章標題第1章緒論1.1系統(tǒng)開發(fā)背景數(shù)據(jù)查詢是當今時代下越來越常見的功能需求，面對海量的數(shù)據(jù)，如何準確的查找到自己需要的數(shù)據(jù)或者對這海量的數(shù)據(jù)以適當?shù)姆椒ㄟM行統(tǒng)計分析，并將分析結(jié)果加以匯總、理解，從數(shù)據(jù)中提取有用信息形成結(jié)論，發(fā)揮大量數(shù)據(jù)的作用，找出研究對象的內(nèi)在規(guī)律，幫助決策者做出判斷，采取合適的行動。以往積累的大多數(shù)據(jù)是以Excel文件格式保存的，Excel對單個Excel文件內(nèi)的數(shù)據(jù)查詢以及數(shù)據(jù)匯總方面做得非常優(yōu)秀，用戶可以利用軟件內(nèi)置的多種工具完成自己的需求，得到適當?shù)谋砀駜?nèi)容。而Excel軟件對多個Excel文件的數(shù)據(jù)操作是較為不便的，需要使用者自行處理多張Excel表間的關(guān)聯(lián)關(guān)系。網(wǎng)絡(luò)上也存在一些提供單個或多個Excel文件在線處理的網(wǎng)站，但有的網(wǎng)站側(cè)重于表格的網(wǎng)絡(luò)共享屬性，即多人在不同地點同時使用同一張表格數(shù)據(jù)，在網(wǎng)頁端還原了桌面端Excel軟件的使用方式，沒有多表匯總的需求，無法滿足題設(shè)環(huán)境的需求。有的網(wǎng)站實現(xiàn)了多表匯總的需求，但是頁面繁多，需要使用者自行選擇需要使用的網(wǎng)頁。并且網(wǎng)頁操作直觀性低，Excel文件需要執(zhí)行文件上傳操作，遠程服務(wù)器端解析后返回數(shù)據(jù)至頁面進行展示，該過程較為耗時，一般會出現(xiàn)文件傳輸和解析期間瀏覽器無法操作的問題，降低用戶體驗。數(shù)據(jù)導入與查詢系統(tǒng)主要實現(xiàn)Excel數(shù)據(jù)的數(shù)據(jù)庫導入和表數(shù)據(jù)的匯總查詢，借助數(shù)據(jù)庫的優(yōu)點最大化數(shù)據(jù)的作用。1.2系統(tǒng)開發(fā)目標開發(fā)設(shè)計一個基于Web的數(shù)據(jù)導入與查詢系統(tǒng)，能夠?qū)xcel工作表導入到數(shù)據(jù)庫成為數(shù)據(jù)庫表，并能查詢表中各列數(shù)據(jù)。數(shù)據(jù)導入后，能夠修改表名，給表添加說明信息，以及進行對表的拆分，表的合并等功能并能對最終生成的結(jié)果表導出到本地進行保存。1.3相關(guān)技術(shù)簡介本節(jié)將對系統(tǒng)開發(fā)過程中涉及的主要技術(shù)進行簡要介紹。1.3.1B/S結(jié)構(gòu)B/S結(jié)構(gòu)即瀏覽器/服務(wù)器結(jié)構(gòu)，在此種結(jié)構(gòu)下，客戶端不需要安裝特定的軟件，只需要瀏覽器即可，瀏覽器與Web服務(wù)器交互，Web服務(wù)器與后端數(shù)據(jù)庫交互，可以便捷的在不同平臺下工作。1.3.2Vue框架Vue是一套用于構(gòu)建用戶界面的漸進式框架。漸進式意味著開發(fā)者可以使用Vue的部分功能，在系統(tǒng)已有基礎(chǔ)上帶來更棒的交互體驗。開發(fā)者也可以借助Vue官方提供的諸如VueRouter、Vuex等工具便捷的實現(xiàn)更多業(yè)務(wù)邏輯。鑒于Vue框架的配置繁雜，Vue官方也提供了VueCLI用于簡化Vue項目初始化配置過程。1.3.3SpringBoot框架SpringBoot這一輕量級框架不僅繼承了Spring框架的優(yōu)秀特性，也摒棄了Spring項目中麻煩的項目配置，在項目創(chuàng)建過程中通過起步依賴簡化配置，做到了項目的“開箱即用”，開發(fā)者不需要關(guān)注大量的配置信息即可進行應(yīng)用的邏輯編寫。SpringBoot也解決了項目依賴間的版本沖突問題。SpringBoot框架的另一個重要策略是“約定優(yōu)先于配置”。省去了不少重復(fù)性的操作，減輕了開發(fā)者的工作量。1.3.4SpringDataJPASpringDataJPA是Spring基于ORM框架、JPA規(guī)范的基礎(chǔ)上框架，使開發(fā)者擺脫對DAO層的操作，只需要給出DAO層接口，大部分數(shù)據(jù)庫操作都可以借助它實現(xiàn)，而且使用方法更加簡單。本系統(tǒng)中使用的SpringDataJPA的底層實現(xiàn)是Hibernate框架，SpringDataJPA相當于對該框架的一層封裝，是JPA規(guī)范下用來進行數(shù)據(jù)持久化的解決方案。1.4系統(tǒng)開發(fā)環(huán)境開發(fā)語言：Java、JavaScript、HTML、CSS開發(fā)平臺：IntelliJIDEA、WebStorm數(shù)據(jù)庫：MySQL5.5操作系統(tǒng)：Windows10專業(yè)版Web服務(wù)器：ApacheTomcat9.0瀏覽器：GoogleChromeREF_Ref168484390\r\h錯誤!未找到引用源。REF_Ref168484424\h錯誤!未找到引用源。PAGE6PAGE7第2章需求分析需求分析要求開發(fā)者對問題進行充分的調(diào)研，并依據(jù)調(diào)研結(jié)果對問題進行分析，要求做到深入理解項目的具體要求，繼而理解系統(tǒng)要求。需求分析是軟件計劃階段不可或缺的重要環(huán)節(jié)，也是軟件生命周期中的重要環(huán)節(jié)。2.1系統(tǒng)用例圖本系統(tǒng)中只有一類用戶，即使用者。圖2-1使用者用例圖使用者用例圖如圖2-1所示，使用者包含的功能主要有Excel文件導入和導出，對已導入的單個Excel文件進行操作，如修改表名、修改表描述、修改表數(shù)據(jù)。對已導入的多個Excel文件進行合并操作。2.2系統(tǒng)流程與功能需求2.2.1系統(tǒng)流程分析使用者進入系統(tǒng)后需要通過文件管理器選擇本地文件進行解析，若解析失敗則給出提示信息，使用者可以繼續(xù)選擇文件。若解析成功，使用者可以選擇單個或者多個文件進行操作，用戶操作完成后即代表系統(tǒng)結(jié)束。系統(tǒng)流程如下圖2-2所示。圖2-2系統(tǒng)流程圖2.2.2功能需求分析由用例圖分析可知，本數(shù)據(jù)導入與查詢系統(tǒng)是面向使用者開發(fā)的，給使用者提供的功能：（1）文件導入：使用者無需登錄，即可選擇本地Excel文件至瀏覽器端進行表數(shù)據(jù)解析，在會話有效期內(nèi)用戶對其選擇的文件具有訪問權(quán)限。（2）單表操作：使用者在選擇文件后，由系統(tǒng)進行文件解析操作，使用者可以選擇文件列表的某一項點擊以進入當前文件操作頁面，頁面內(nèi)可以完成表名的修改、表描述的修改、表數(shù)據(jù)的修改。（3）多表操作：使用者在選擇文件解析后，可以點擊多表操作按鈕進入多表操作界面，界面內(nèi)通過選擇表的連接方式實現(xiàn)多表的合并。（4）表格數(shù)據(jù)導出：使用者在單表/多表頁面完成對表格數(shù)據(jù)的更改后，可以對當前表格內(nèi)容以Excel文件格式導出到本地文件系統(tǒng)。第3章REF_Ref168484495\h錯誤!未找到引用源。洛陽理工學院畢業(yè)設(shè)計（論文）PAGE11第3章系統(tǒng)總體設(shè)計系統(tǒng)總體設(shè)計明確了系統(tǒng)的模塊構(gòu)成及模塊間的關(guān)系，本章對數(shù)據(jù)導入與查詢系統(tǒng)的總體設(shè)計進行說明。3.1系統(tǒng)模塊設(shè)計3.1.1系統(tǒng)功能模塊結(jié)構(gòu)匯總前述用戶功能進行功能模塊劃分，得到系統(tǒng)的功能模塊結(jié)構(gòu)，如圖3-1所示。圖3-1系統(tǒng)功能模塊結(jié)構(gòu)圖3.1.2主要模塊說明1.文件管理模塊文件管理模塊的主要功能是Excel文件的讀取和生成，解析使用者選擇的Excel文件數(shù)據(jù)，并將其存儲在由Vuex提供的單一狀態(tài)樹state中，供組件使用。表格數(shù)據(jù)導出時也可由state提供表數(shù)據(jù)的最終修改數(shù)值，交由xlsx插件生成Excel文件至本地文件系統(tǒng)。2.單表操作模塊單表操作模塊的主要功能是向用戶展示讀取到的Excel文件數(shù)據(jù)，讓使用者可對表格名稱，表格描述及表格數(shù)據(jù)執(zhí)行操作，包括表格名稱、描述、數(shù)據(jù)的修改，表格數(shù)據(jù)的過濾以及刪除表格某行或某列。3.多表操作模塊多表操作模塊的主要功能是向用戶展示多張表的數(shù)據(jù)，使使用者在有參照的情況下選擇多表之間的連接條件，使用者確定條件后，由系統(tǒng)按給出的條件進行表的合并操作并在界面展示合并完成的表格數(shù)據(jù)。3.2數(shù)據(jù)庫設(shè)計在信息管理系統(tǒng)中，數(shù)據(jù)庫是占據(jù)重要地位的存在，合理的數(shù)據(jù)庫設(shè)計對于應(yīng)用的執(zhí)行效率有很大幫助，同時也易于有關(guān)人員維護。3.2.1E-R圖本系統(tǒng)無需記錄使用者信息，只需記錄表格數(shù)據(jù)相關(guān)信息，表格數(shù)據(jù)分為兩部分：表信息和表數(shù)據(jù)，故存在兩個實體。1.表信息屬性表信息即前端傳輸來的除表格數(shù)據(jù)以外的數(shù)據(jù)，包括存儲名、原始名、描述信息、總列數(shù)屬性。存儲名是由表格原始名生成的唯一不重復(fù)的屬性，用于在數(shù)據(jù)庫中存儲，描述信息為關(guān)于表格的描述，總列數(shù)是為了記錄存儲及查詢時需要查找的字段。其中存儲名為主鍵。圖3-2表信息實體E-R圖2.表數(shù)據(jù)屬性表數(shù)據(jù)即表格存儲的數(shù)據(jù)，包括行號和列數(shù)據(jù)屬性。行號由存儲名拼接行號組成，作為主鍵，通過存儲名可模糊查找得到表格全部數(shù)據(jù)。列數(shù)據(jù)與Excel表格中的列一一對應(yīng)。Excel2013版中表格列數(shù)最大為16384（XFD，2的14次方），在本系統(tǒng)的數(shù)據(jù)庫中建立如此多的列數(shù)據(jù)是不現(xiàn)實的，故此處只取10列數(shù)據(jù)進行存儲，即Excel表格中A列到J列的內(nèi)容，為了便于管理和理解，數(shù)據(jù)庫中列的命名與Excel表中的列名保持一致，即以字母命名，結(jié)合數(shù)據(jù)庫情況以小寫字母命名。圖3-3表數(shù)據(jù)實體E-R圖3.2.2數(shù)據(jù)庫與表設(shè)計由E-R圖可導出關(guān)系模式。在本系統(tǒng)中，數(shù)據(jù)庫命名為excel，其中建立2張表：表信息表和表數(shù)據(jù)表。由于外鍵不便于系統(tǒng)維護，本數(shù)據(jù)庫表中不使用外鍵。1.表信息表表3-1表信息表（namelist）字段名數(shù)據(jù)類型主鍵非空描述namevarchar(30)YY數(shù)據(jù)庫中的存儲名origin_namevarchar(30)NY文件原始名descriptionvarchar(30)NY文件描述col_countintNY文件數(shù)據(jù)總列數(shù)2.表數(shù)據(jù)表表3-2表數(shù)據(jù)表（exceldata）字段名數(shù)據(jù)類型主鍵非空描述line_numvarchar(20)YY行號，由存儲名和行號構(gòu)成avarchar(20)NN表數(shù)據(jù)A列內(nèi)容bvarchar(20)NN表數(shù)據(jù)B列內(nèi)容cvarchar(20)NN表數(shù)據(jù)C列內(nèi)容dvarchar(20)NN表數(shù)據(jù)D列內(nèi)容evarchar(20)NN表數(shù)據(jù)E列內(nèi)容fvarchar(20)NN表數(shù)據(jù)F列內(nèi)容gvarchar(20)NN表數(shù)據(jù)G列內(nèi)容hvarchar(20)NN表數(shù)據(jù)H列內(nèi)容ivarchar(20)NN表數(shù)據(jù)I列內(nèi)容jvarchar(20)NN表數(shù)據(jù)J列內(nèi)容第3章標題PAGE8PAGE15第4章詳細設(shè)計與實現(xiàn)系統(tǒng)采用Vue和SpringBoot前后端分離開發(fā)，Vue負責前端頁面的開發(fā)，SpringBoot負責后端系統(tǒng)的開發(fā)。前端負責處理數(shù)據(jù)的獲取和頁面數(shù)據(jù)的展示，采用異步請求盡可能提高用戶體驗，減少頁面等待時間。后端負責提供前端發(fā)送和獲取數(shù)據(jù)需要使用的接口，處理與數(shù)據(jù)庫的交互。4.1前端設(shè)計4.1.1前端環(huán)境搭建1.安裝Node.jsNode.js是一個基于ChromeV8引擎的JavaScript運行環(huán)境。Node.js是一個能讓JavaScript運行在服務(wù)器端的開發(fā)平臺，其本質(zhì)是對ChromeV8引擎的封裝。進行Vue開發(fā)需要Node環(huán)境的支持。Node.js的安裝過程較為簡單，只需在官網(wǎng)下載對應(yīng)系統(tǒng)的安裝包直接進行安裝即可。2.使用VueCLI快速配置VueVueCLI是一個基于Vue.js進行快速開發(fā)的完整系統(tǒng)，用于快速設(shè)置Vue項目的基本配置信息，簡化開發(fā)，同時也提供項目資源監(jiān)控，依賴安裝等功能。也稱作腳手架。當安裝好Node環(huán)境后，在控制臺使用npm命令安裝VueCLI腳手架，然后使用vuecreateexcelproj創(chuàng)建Vue前端項目。也可以使用vueui命令使用圖形化界面創(chuàng)建項目。3.安裝相應(yīng)模塊項目中需要使用到封裝了Ajax網(wǎng)絡(luò)請求的Axios，用于美化頁面顯示效果的ElementUI組件庫，用于處理前端路由跳轉(zhuǎn)的VueRouter，用于組件間數(shù)據(jù)狀態(tài)管理的Vuex，以及前端解析和生成Excel文件的xlsx。上述模塊需要使用npm命令安裝相應(yīng)的文件，使用npminstallaxios安裝Axios，使用npminstallelement-ui安裝ElementUI，使用npminstallvue-router安裝VueRouter，使用npminstallvuex安裝Vuex，使用npminstallxlsx安裝xlsx。因為軟件版本更替，安裝命令可能有部分改動，建議在官網(wǎng)獲取安裝方式。4.前端項目結(jié)構(gòu)通過上述步驟建立并安裝相應(yīng)模塊后，前端項目的文件結(jié)構(gòu)如下圖所示，同時也給出前端項目配置文件package.json文件中的主要配置內(nèi)容。圖4-1項目結(jié)構(gòu)及配置文件主要內(nèi)容4.1.2文件管理模塊1.文件解析使用Element庫的文件上傳組件，明確接受的文件類型為Excel文件（文件擴展名為.xls或.xlsx）和數(shù)量，處理鉤子函數(shù)中的文件處理邏輯，調(diào)用xlsx工具對選擇的文件進行解析，數(shù)據(jù)解析完成后由Vuex進行狀態(tài)管理。若解析過程出錯，則彈出提示框提示信息“文件解析錯誤”。對于選擇的Excel文件的內(nèi)容，需要滿足第一行為標題行，自第二行起為數(shù)據(jù)行，且不能存在復(fù)雜單元格的情況，如合并的單元格。系統(tǒng)只會讀取第一張工作表，其余的工作表不會進行讀取。圖4-2文件解析界面圖4-3文件選擇框2.文件導出在單表操作和多表操作界面，提供按鈕進行當前表格數(shù)據(jù)的導出功能，按下按鈕即從當前路由地址判斷導出哪個文件，并從Vuex中取出合適的數(shù)據(jù)交由xlsx插件進行Excel文件的生成。點擊導出按鈕后，會自動調(diào)用瀏覽器的下載功能，保存至本地文件系統(tǒng)默認下載路徑。圖4-4單表操作頁面文件導出功能圖4-5導出數(shù)據(jù)效果圖4.1.3單表操作模塊點擊文件列表中的某項后，通過更改瀏覽器地址欄內(nèi)容即前端路由方式來更換頁面右側(cè)區(qū)域內(nèi)容，顯示選擇表的相關(guān)信息及操作菜單。提供刪除行和刪除列操作，借助Vue響應(yīng)式系統(tǒng)，會自動更新表格內(nèi)容匹配修改后的數(shù)據(jù)。圖4-6單表操作頁面通過點擊文件名和描述右側(cè)的圖標可對文件名或文件描述信息進行修改，輸入修改值后需要點擊右側(cè)對號圖標進行保存。表格展示提供排序功能和過濾器，表格內(nèi)標題行三角形按鈕為排序按鈕，箭頭形按鈕為過濾菜單按鈕。系統(tǒng)會根據(jù)表格內(nèi)容自動生成過濾器過濾條件，可以組合多列過濾條件，提供按鈕一鍵清空當前頁面內(nèi)全部過濾器內(nèi)容。圖4-7文件名修改圖4-8文件描述修改通過“編輯表格”按鈕可以修改表格屬性，通過修改表格的contenteditable屬性的布爾值實現(xiàn)表格內(nèi)容編輯功能的開啟與關(guān)閉，由于編輯期間會導致表格部分功能無法使用，需要彈窗提示使用者編輯結(jié)束后關(guān)閉編輯功能。圖4-9編輯表格功能開啟提示圖4-10編輯表格功能關(guān)閉提示4.1.4多表操作模塊點擊“表格合并”按鈕后通過前端路由更換網(wǎng)頁右側(cè)內(nèi)容為多表操作模塊，多表操作頁面會在一行列出使用者上傳的兩張表格的內(nèi)容，在下方給出兩張表格的連接條件。使用者確定表連接條件后可點擊“確認合并”按鈕，之后由系統(tǒng)處理表格數(shù)據(jù)并將合并后的表格在下方展示，對合并后的表格提供文件導出功能。圖4-11多表合并頁面以左表的學號列為參照，合并左表的學號、姓名、專業(yè)及右表的校內(nèi)指導老師、導師聯(lián)系電話這5列內(nèi)容，合并結(jié)果如下：圖4-12多表合并結(jié)果展示4.2后端設(shè)計4.2.1后端環(huán)境搭建1.構(gòu)建數(shù)據(jù)庫根據(jù)數(shù)據(jù)庫設(shè)計環(huán)節(jié)相關(guān)內(nèi)容，建立數(shù)據(jù)庫及對應(yīng)表。2.搭建項目通過IDEA提供的SpringInitializr工具初始化SpringBoot項目，添加需要用到的起步依賴，如SpringMVC，SpringDataJPA，MySQL，Lombok，Junit和fastjson。3.配置文件采用yml格式的文件對MySQL、端口和JPA進行配置。配置內(nèi)容如下圖所示。圖4-13配置文件內(nèi)容其中，url部分的完整內(nèi)容為：useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC4.Ajax請求跨域Ajax請求跨域問題有多種解決方案，這里在后端的解決跨域問題。在SpringBoot中通過注解方式添加如下配置文件處理跨域問題，配置內(nèi)容如下圖所示。圖4-14Ajax請求跨域問題處理addMapping()設(shè)置允許跨域訪問的路徑allowedOrigins()設(shè)置允許跨域訪問的源allowedMethods()設(shè)置允許請求方法maxAge()設(shè)置預(yù)檢間隔時間allowedHeaders()設(shè)置允許頭部設(shè)置allowCredentials()設(shè)置是否發(fā)送cookie5.后端項目結(jié)構(gòu)通過上述步驟，可以創(chuàng)建出如下圖所示的項目結(jié)構(gòu)。圖4-15后端項目結(jié)構(gòu)其中，static文件夾下的文件為前端項目使用npmrunbuild命令后生成的dist文件夾下的內(nèi)容，直接拷貝到此處即可。4.2.2表格存儲實現(xiàn)由于Excel文件在前端頁面已經(jīng)實現(xiàn)了解析，后端只需提供接口接收前端傳輸?shù)谋砀駭?shù)據(jù)即可，后端在接受數(shù)據(jù)后使用fastjson對傳輸?shù)臄?shù)據(jù)進行解析，取出數(shù)據(jù)后保存在對應(yīng)實體類中，之后由SpringDataJPA提供的實現(xiàn)類進行數(shù)據(jù)的存儲。REF_Ref168484640\r\h錯誤!未找到引用源。REF_Ref168484646\h錯誤!未找到引用源。PAGE29第5章系統(tǒng)測試系統(tǒng)測試的目的是驗證系統(tǒng)是否滿足最初規(guī)定的需求，以及發(fā)現(xiàn)軟件潛在的問題，保證系統(tǒng)的正常運行。本章對本系統(tǒng)采用的測試方法和部分功能的測試進行簡要介紹。5.1采用的測試方法測試方法有多種，常見的測試方法有黑盒測試和白盒測試。黑盒測試即不考慮系統(tǒng)內(nèi)部結(jié)構(gòu)和特性的情況下，檢查程序能否按照既定需求運行，適當?shù)慕邮蛰斎霐?shù)據(jù)并產(chǎn)生正確的輸出信息。黑盒測試站在用戶角度測試程序的輸入和輸出之間的對應(yīng)關(guān)系，易于測試人員理解復(fù)雜程序的工作邏輯并著手進行測試。白盒測試需要了解程序內(nèi)部邏輯并測試所有邏輯路徑，測試人員需要細致思考程序代碼的具體實現(xiàn)并檢測代碼中每條分支和路徑，以揭示隱藏較深的邏輯錯誤，對代碼的測試較為徹底。白盒測試是窮舉路徑測試。本系統(tǒng)測試采用黑盒測試的方法，通過對比輸出數(shù)據(jù)與預(yù)期輸出數(shù)據(jù)進行黑盒測試。5.2文件導入功能的測試選擇如下圖所示數(shù)據(jù)進行文件導入測試。圖示數(shù)據(jù)符合前文所述對表格內(nèi)容的要求：第一行為標題、自第二行起為數(shù)據(jù)行、全部內(nèi)容位于第一張工作表中。文件導入功能的測試效果圖如圖4-4所示。圖5-1測試數(shù)據(jù)5.3單表操作模塊的測試該模塊包含對表名、表格描述及表數(shù)據(jù)的修改，對表數(shù)據(jù)的排序與過濾，刪除行或列。5.3.1基本信息修改修改文件名為“1測試數(shù)據(jù)（修改）”，描述為“測試修改”，表數(shù)據(jù)第一行專業(yè)改為“軟件工程”。圖5-2基本信息修改測試效果圖5.3.2刪除行及列測試刪除表格第一行，第二行及第三列的數(shù)據(jù)。圖5-3刪除行及列測試效果圖5.3.3表數(shù)據(jù)排序與過濾將學號列以降序排列。圖5-4學號列降序效果圖單列過濾出學號為“B16040103”和“B16040104”的數(shù)據(jù)。圖5-5單列過濾效果圖在上述基礎(chǔ)上，過濾出姓名為“齊琪”的數(shù)據(jù)。圖5-6多列過濾效果圖清除所有過濾器，導出當前表格數(shù)據(jù)。圖5-7數(shù)據(jù)導出效果圖5.4多表操作模塊的測試以左表學號列為參照，合并左表全部列和右表全部列為例一。以左表學號列為參照，合并左表全部列和右表“校內(nèi)指導老師”列為例二。圖5-8例一條件合并效果圖圖5-9例二條件合并效果圖結(jié)論結(jié)論本課題的任務(wù)是要求設(shè)計一個可以將Excel數(shù)據(jù)導入數(shù)據(jù)庫，并利用數(shù)據(jù)庫對單表和多表數(shù)據(jù)進行包括文件導入，數(shù)據(jù)展示、查找、修改、刪除，表格合并，數(shù)據(jù)導出等操作的系統(tǒng)。經(jīng)過前期的資料收集、需求分析、項目規(guī)劃和后期的代碼編寫、錯誤修復(fù)以及代碼和頁面的優(yōu)化，最終實現(xiàn)了要求的各項功能。文件管理模塊中，在前端界面實現(xiàn)了Excel文件的導入并解析數(shù)據(jù)，以及將頁面表格中的數(shù)據(jù)轉(zhuǎn)換為Excel文件導出到本地文件系統(tǒng)。相比于執(zhí)行文件上傳服務(wù)器端，再由服務(wù)器端解析并以Json格式返回數(shù)據(jù)展示，前端解析對于用戶體驗較好，無需較長等待時間，并且減輕了服務(wù)器端的處理壓力。即使是面對大量數(shù)據(jù)的解析，前端處理的耗時也比后端處理的耗時要小，在測試之后，本系統(tǒng)最終選擇前端工具解析Excel文件。單表操作模塊，使用前端路由來進行組件間傳值，使組件展示需求的數(shù)據(jù)，表格操作也可以正確對表數(shù)據(jù)進行修改更同步更新至組件data中和Vuex的狀態(tài)管理中，實現(xiàn)表格數(shù)據(jù)的全局共享。多表操作模塊，使用flex布局在同一行列出兩張表格的數(shù)據(jù)供使用者參照，使用者根據(jù)表數(shù)據(jù)選擇表格的連接條件并執(zhí)行表格合并，當未選擇連接條件時，隱藏合并表格顯示區(qū)域。若連接條件不全則提示使用者補全條件。連接條件滿足條件時由系統(tǒng)執(zhí)行合并操作并借助Vue的響應(yīng)式顯示合并后的表格。對比資料收集階段的同類設(shè)計，本系統(tǒng)界面相對美觀，功能相對直觀、易用，用戶體驗有部分提升。不過本系統(tǒng)依舊存在部分問題，因為技術(shù)問題，頁面布局有些僵硬，多表界面只能展示兩張表格，原計劃由使用者選擇展示哪些表格，并以ElementUI提供的走馬燈效果整合多張表格數(shù)據(jù)的展示效果，之后確定某幾張表格的連接條件再進行合并，此種實現(xiàn)相對困難，最終選擇限制使用者選擇的文件數(shù)量為2，多表界面顯示就簡單了許多。本系統(tǒng)使用兩兩表操作，來等效實現(xiàn)多表操作。由于本課題同類的研究及資料不多，本課題的開發(fā)比較具有挑戰(zhàn)性，雖然完成了課題任務(wù)，在今后的工作之余，我打算繼續(xù)嘗試Element組件庫中其他組件的使用，豐富前端顯示效果。對數(shù)據(jù)庫設(shè)計進行審查，嘗試找出更高效的存儲方式，以此進一步優(yōu)化系統(tǒng)。致謝洛陽理工學院畢業(yè)設(shè)計（論文）16PAGE32謝辭畢業(yè)設(shè)計到此也基本畫上句點。首先要感謝畢業(yè)設(shè)計期間指導教師高春玲老師自始至終的指導，從確定選題到畢業(yè)設(shè)計程序編寫再到論文撰寫，高老師對我我給出了許多建設(shè)性意見，為我的畢業(yè)設(shè)計提供了廣闊的思路，拓寬了我看待問