WEB文件上傳之apache common upload使用（一）

文件上傳一個經常用到的功能，它有許多中實現的方案。

頁面表單 + RFC1897規范 + http協議上傳

頁面控件(flash/html5/activeX/applet) + RFC1897規范 + http協議上傳

頁面控件(flash/html5/activeX/applet) + 自定義數據規范 + http協議上傳

頁面控件(flash/html5/activeX/applet) + FTP協議上傳

頁面控件(flash/html5/activeX/applet) + 自定義協議

?

? 用apache common upload組件實際就是采用的“頁面表單 + RFC1897規范 + http協議上傳”實現方式，需要實現的技術點：

1. 多文件數據的提交

2. 文件數據包接收存儲功能

3. 文件數據上傳進度

4.?WEB頁面無刷新異步提交

?

?時序圖：

  • 文件上傳時序圖


  • 文件上傳進度獲取時序圖

實現思路：

1. 多文件數據的提交

在WEB頁面采用多個<input type="file">利用form表單進行文件提交

?

2. 文件數據包接收存儲功能

服務端采用servlet，利用apache common upload組件接收解析數據包，接收解析的過程中保存進度到session, 文件接收完畢后保存到指定目錄

?

3. 文件數據上傳進度

在WEB頁面在界面寫一個定時器，定時訪問服務器提供上傳進度獲取功能的servlet，獲取文件上傳進度信息

?

4. WEB頁面無刷新異步提交

利用iframe來實現WEB頁面無刷新異步上傳

?

關鍵代碼：

UploadFileServlet.java

Java代碼?

?收藏代碼

  1. package?com.test.servlet;??
  2. ??
  3. import?java.io.File;??
  4. import?java.io.IOException;??
  5. import?java.io.Writer;??
  6. import?java.util.Iterator;??
  7. import?java.util.List;??
  8. ??
  9. import?javax.servlet.ServletException;??
  10. import?javax.servlet.http.HttpServlet;??
  11. import?javax.servlet.http.HttpServletRequest;??
  12. import?javax.servlet.http.HttpServletResponse;??
  13. ??
  14. import?org.apache.commons.fileupload.FileItem;??
  15. import?org.apache.commons.fileupload.FileUploadBase.FileSizeLimitExceededException;??
  16. import?org.apache.commons.fileupload.disk.DiskFileItemFactory;??
  17. import?org.apache.commons.fileupload.servlet.FileCleanerCleanup;??
  18. import?org.apache.commons.fileupload.servlet.ServletFileUpload;??
  19. import?org.apache.commons.io.FileCleaningTracker;??
  20. import?org.apache.commons.io.FileUtils;??
  21. import?org.apache.commons.io.FilenameUtils;??
  22. import?org.apache.commons.io.IOUtils;??
  23. import?org.apache.commons.lang3.ArrayUtils;??
  24. import?org.apache.commons.logging.Log;??
  25. import?org.apache.commons.logging.LogFactory;??
  26. ??
  27. /**?
  28. ?*?文件上傳數據接收類?
  29. ?*??
  30. ?*?@author?chengqi?
  31. ?*?
  32. ?*/??
  33. public?class?UploadFileServlet?extends?HttpServlet?{??
  34. ??
  35. ????/**?日志對象*/??
  36. ????private?Log?logger?=?LogFactory.getLog(this.getClass());??
  37. ??
  38. ????private?static?final?long?serialVersionUID?=?1L;??
  39. ??
  40. ????/**?上傳目錄名*/??
  41. ????private?static?final?String?uploadFolderName?=?"uploadFiles";??
  42. ??
  43. ????/**?上傳臨時文件存儲目錄*/??
  44. ????private?static?final?String?tempFolderName?=?"tempFiles";??
  45. ??
  46. ????/**?上傳文件最大為30M*/???
  47. ????private?static?final?Long?fileMaxSize?=?30000000L;???
  48. ??
  49. ????/**?允許上傳的擴展名*/??
  50. ????private?static?final?String?[]?extensionPermit?=?{"txt",?"xls",?"zip"};??
  51. ??
  52. ????/**?統一的編碼格式*/??
  53. ????private?static?final?String?encode?=?"UTF-8";??
  54. ??
  55. ????@Override??
  56. ????protected?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)?throws?ServletException,?IOException?{??
  57. ????????logger.info("UploadFileServlet#doPost()?start");??
  58. ????????try?{??
  59. ????????????String?curProjectPath?=?this.getServletContext().getRealPath("/");??
  60. ????????????String?saveDirectoryPath?=?curProjectPath?+?"/"?+?uploadFolderName;??
  61. ????????????String?tempDirectoryPath?=?curProjectPath?+?"/"?+?tempFolderName;??
  62. ????????????File?saveDirectory?=?new?File(saveDirectoryPath);??
  63. ????????????File?tempDirectory?=?new?File(tempDirectoryPath);??
  64. ????????????logger.debug("Project?real?path?["?+?saveDirectory.getAbsolutePath()?+?"]");??
  65. ????????????//上傳時產生的臨時文件的默認保存目錄??
  66. ????????????logger.debug("Temp?files?default?save?path?["?+?System.getProperty("java.io.tmpdir")?+?"]");??
  67. ????????????DiskFileItemFactory?factory?=?new?DiskFileItemFactory();??
  68. ????????????//DiskFileItemFactory中DEFAULT_SIZE_THRESHOLD=10240表示如果上傳文件大于10K則會產生上傳臨時文件??
  69. ????????????//上傳臨時文件的默認目錄為java.io.tmpdir中保存的路徑，根據操作系統的不同會有區別??
  70. ??????????????
  71. ????????????if(!tempDirectory.exists())?{??
  72. ????????????????tempDirectory.mkdir();??
  73. ????????????}??
  74. ????????????//重新設置臨時文件保存目錄??
  75. ????????????factory.setRepository(tempDirectory);??
  76. ??
  77. ????????????//設置文件清除追蹤器，文件上傳過程中產生的臨時文件會在??
  78. ????????????FileCleaningTracker?fileCleaningTracker?=?FileCleanerCleanup.getFileCleaningTracker(this.getServletContext());??
  79. ????????????factory.setFileCleaningTracker(fileCleaningTracker);??
  80. ??
  81. ????????????ServletFileUpload?upload?=?new?ServletFileUpload(factory);??
  82. ??
  83. ????????????//設置文件上傳進度監聽器??
  84. ????????????FileProcessListener?processListener?=?new?FileProcessListener(request.getSession());??
  85. ????????????upload.setProgressListener(processListener);??
  86. ??
  87. ????????????//?設置文件上傳的大小限制??
  88. ????????????upload.setFileSizeMax(fileMaxSize);??
  89. ??
  90. ????????????//?設置文件上傳的頭編碼，如果需要正確接收中文文件路徑或者文件名??
  91. ????????????//?這里需要設置對應的字符編碼，為了通用這里設置為UTF-8??
  92. ????????????upload.setHeaderEncoding(encode);??
  93. ??
  94. ????????????//解析請求數據包??
  95. ????????????List<FileItem>?fileItems?=?upload.parseRequest(request);??
  96. ????????????//遍歷解析完成后的Form數據和上傳文件數據??
  97. ????????????for?(Iterator<FileItem>?iterator?=?fileItems.iterator();?iterator.hasNext();)?{??
  98. ????????????????FileItem?fileItem?=?iterator.next();??
  99. ????????????????String?fieldName?=?fileItem.getFieldName();??
  100. ????????????????String?name?=?fileItem.getName();??
  101. ????????????????//如果為上傳文件數據??
  102. ????????????????if(!fileItem.isFormField())?{??
  103. ????????????????????logger.debug("fieldName["?+?fieldName?+?"]?fileName["?+?name?+?"]?");??
  104. ????????????????????if(fileItem.getSize()?>?0)?{??
  105. ????????????????????????String?fileExtension?=?FilenameUtils.getExtension(name);??
  106. ????????????????????????if(!ArrayUtils.contains(extensionPermit,?fileExtension))?{??
  107. ????????????????????????????throw?new?NoSupportExtensionException("No?Support?extension.");??
  108. ????????????????????????}??
  109. ????????????????????????String?fileName?=?FilenameUtils.getName(name);??
  110. ????????????????????????FileUtils.copyInputStreamToFile(fileItem.getInputStream(),???
  111. ????????????????????????????????new?File(saveDirectory,?fileName));??
  112. ????????????????????}??
  113. ????????????????}?else?{?//Form表單數據??
  114. ????????????????????String?value?=?fileItem.getString(encode);??
  115. ????????????????????logger.debug("fieldName["?+?value?+?"]?fieldValue["?+?fieldName?+?"]");??
  116. ????????????????}??
  117. ????????????}??
  118. ????????????responseMessage(response,?State.OK);??
  119. ????????}?catch(FileSizeLimitExceededException?e)?{???
  120. ????????????logger.error(e.getMessage(),?e);??
  121. ????????????responseMessage(response,?State.OVER_FILE_LIMIT);??
  122. ????????}?catch(NoSupportExtensionException?e)?{???
  123. ????????????logger.error(e.getMessage(),?e);??
  124. ????????????responseMessage(response,?State.NO_SUPPORT_EXTENSION);??
  125. ????????}?catch(Exception?e)?{??
  126. ????????????logger.error(e.getMessage(),?e);??
  127. ????????????responseMessage(response,?State.ERROR);??
  128. ????????}?finally?{??
  129. ????????????//清除上傳進度信息??
  130. ????????????request.getSession().removeAttribute("fileUploadProcess");??
  131. ????????}??
  132. ????????logger.info("UploadFileServlet#doPost()?end");???
  133. ????}??
  134. ??
  135. ????public?enum?State?{??
  136. ????????OK(200,?"上傳成功"),??
  137. ????????ERROR(500,?"上傳失敗"),??
  138. ????????OVER_FILE_LIMIT(501,?"超過上傳大小限制"),??
  139. ????????NO_SUPPORT_EXTENSION(502,?"不支持的擴展名");??
  140. ??
  141. ????????private?int?code;??
  142. ????????private?String?message;??
  143. ????????private?State(int?code,?String?message)?{??
  144. ????????????this.code?=?code;??
  145. ????????????this.message?=?message;??
  146. ????????}??
  147. ??
  148. ????????public?int?getCode()?{??
  149. ????????????return?code;??
  150. ????????}??
  151. ????????public?String?getMessage()?{??
  152. ????????????return?message;??
  153. ????????}??
  154. ??
  155. ????}??
  156. ??
  157. ????/**?
  158. ?????*?返回結果函數?
  159. ?????*?@param?response?
  160. ?????*?@param?state?
  161. ?????*/??
  162. ????private?void?responseMessage(HttpServletResponse?response,?State?state)?{??
  163. ????????response.setCharacterEncoding(encode);??
  164. ????????response.setContentType("text/html;?charset="?+?encode);??
  165. ????????Writer?writer?=?null;??
  166. ????????try?{??
  167. ????????????writer?=?response.getWriter();??
  168. ????????????writer.write("<script>");??
  169. ????????????writer.write("window.parent.fileUploadCallBack({\"code\":"?+?state.getCode()?+",\"message\":\""?+?state.getMessage()+?"\"});");??
  170. ????????????writer.write("</script>");??
  171. ????????????writer.flush();??
  172. ????????????writer.close();??
  173. ????????}?catch(Exception?e)?{??
  174. ????????????logger.error(e.getMessage(),?e);??
  175. ????????}?finally?{??
  176. ????????????IOUtils.closeQuietly(writer);??
  177. ????????}??
  178. ????}??
  179. ??
  180. ??
  181. }??

??

?

GetFileProcessServlet.java

Java代碼?

?收藏代碼

  1. package?com.test.servlet;??
  2. ??
  3. import?java.io.IOException;??
  4. import?java.io.Writer;??
  5. ??
  6. import?javax.servlet.ServletException;??
  7. import?javax.servlet.http.HttpServlet;??
  8. import?javax.servlet.http.HttpServletRequest;??
  9. import?javax.servlet.http.HttpServletResponse;??
  10. ??
  11. import?org.apache.commons.io.IOUtils;??
  12. import?org.apache.commons.logging.Log;??
  13. import?org.apache.commons.logging.LogFactory;??
  14. ??
  15. /**?
  16. ?*?文件上傳進度獲取Servlet?
  17. ?*??
  18. ?*?@author?chengqi?
  19. ?*?
  20. ?*/??
  21. public?class?GetFileProcessServlet?extends?HttpServlet?{??
  22. ??
  23. ????/**?日志對象*/??
  24. ????private?Log?logger?=?LogFactory.getLog(this.getClass());??
  25. ??
  26. ????private?static?final?long?serialVersionUID?=?1L;??
  27. ??
  28. ????@Override??
  29. ????protected?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)??
  30. ????????????throws?ServletException,?IOException?{??
  31. ????????logger.info("GetFileProcessServlet#doGet?start");??
  32. ????????String?fileUploadPercent?=?(String)request.getSession().getAttribute("fileUploadProcess");??
  33. ????????Writer?writer?=?null;??
  34. ????????try?{??
  35. ????????????writer?=?response.getWriter();??
  36. ????????????logger.info("percent:"?+?fileUploadPercent);??
  37. ????????????IOUtils.write(fileUploadPercent?==?null???"0%"?:?fileUploadPercent,?writer);??
  38. ????????????writer.flush();??
  39. ????????????writer.close();??
  40. ????????}?catch(Exception?e)?{??
  41. ????????????logger.error(e.getMessage(),?e);??
  42. ????????}?finally?{??
  43. ????????????IOUtils.closeQuietly(writer);??
  44. ????????}??
  45. ????????logger.info("GetFileProcessServlet#doGet?end");??
  46. ????}??
  47. ??
  48. }??

?

FileProcessListener.java

Java代碼?

?收藏代碼

  1. package?com.test.servlet;??
  2. ??
  3. import?java.text.NumberFormat;??
  4. ??
  5. import?javax.servlet.http.HttpSession;??
  6. ??
  7. import?org.apache.commons.fileupload.ProgressListener;??
  8. import?org.apache.commons.logging.Log;??
  9. import?org.apache.commons.logging.LogFactory;??
  10. ??
  11. /**?
  12. ?*?文件進度監聽器?
  13. ?*??
  14. ?*?@author?chengqi?
  15. ?*?
  16. ?*/??
  17. public?class?FileProcessListener?implements?ProgressListener{??
  18. ??
  19. ????/**?日志對象*/??
  20. ????private?Log?logger?=?LogFactory.getLog(this.getClass());??
  21. ??
  22. ????private?HttpSession?session;??
  23. ??
  24. ????public?FileProcessListener(HttpSession?session)?{??
  25. ????????this.session?=?session;????
  26. ????}??
  27. ??????
  28. ??
  29. ????public?void?update(long?pBytesRead,?long?pContentLength,?int?pItems)?{??
  30. ????????double?readByte?=?pBytesRead;??
  31. ????????double?totalSize?=?pContentLength;??
  32. ????????if(pContentLength?==?-1)?{??
  33. ????????????logger.debug("item?index["?+?pItems?+?"]?"?+?pBytesRead?+?"?bytes?have?been?read.");??
  34. ????????}?else?{??
  35. ????????????logger.debug("item?index["?+?pItems?+?"]?"?+?pBytesRead?+?"?of?"?+?pContentLength?+?"?bytes?have?been?read.");??
  36. ????????????String?p?=?NumberFormat.getPercentInstance().format(readByte?/?totalSize);??
  37. ????????????session.setAttribute("fileUploadProcess",?p);??
  38. ????????}??
  39. ????}??
  40. ??
  41. }??

?

?

apacheUploadDemo.html

?

Html代碼?

?收藏代碼

  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">??
  2. <html>??
  3. <head>??
  4. ????<title>Apache?common實現基本文件上傳</title>??
  5. ????<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">??
  6. ????<script?type="text/javascript"?src="js/jquery/jquery-1.9.1.js"></script>??
  7. ????<script?type="text/javascript"?src="js/jquery/jquery.form.js"></script>??
  8. ????<script?type="text/javascript">??
  9. ??
  10. ????//定時器對象??
  11. ????var?uploadProcessTimer?=?null;??
  12. ??
  13. ????$(function?(){??
  14. ????????//綁定定時器開始操作到提交按鈕??
  15. ????????$('input[type=submit]').click(function?()?{??
  16. ????????????//啟動上傳進度查詢定時器??
  17. ????????????uploadProcessTimer?=?window.setInterval(getFileUploadProcess,?20);??
  18. ????????})??
  19. ????});??
  20. ??
  21. ????//獲取文件上傳進度??
  22. ????function?getFileUploadProcess()?{??
  23. ????????$.get('/upload/getFileProcessServlet',?function(data)?{??
  24. ????????????$('#fileUploadProcess').html(data);??
  25. ????????});??
  26. ????}??
  27. ??
  28. ????//上傳完成后，由iframe返回腳本自動調用??
  29. ????function?fileUploadCallBack(res)?{??
  30. ????????//清除定時器??
  31. ????????if(uploadProcessTimer)?{??
  32. ????????????window.clearInterval(uploadProcessTimer);??
  33. ????????}??
  34. ????????var?message?=?res['message'];??
  35. ????????var?code?=?res['code'];??
  36. ????????if(code?!=?200)?{??
  37. ????????????$('#fileUploadProcess').html('0%');??
  38. ????????}??
  39. ????????alert(message);??
  40. ????}??
  41. ??
  42. ????</script>??
  43. </head>??
  44. <body>??
  45. <h2>上傳文件1</h2>??
  46. ??
  47. 用戶信息：??<br/>??
  48. <form?id="testForm"?action="/upload/uploadServlet"?method="post"?enctype="multipart/form-data"?target="iframeUpload">??
  49. ????姓名：<input?name="name"?type="text">?<br/>??
  50. ????附件1：<input?name="file1"?type="file"?>?<br/>??
  51. ????附件2：<input?name="file2"?type="file"?>?<br/>??
  52. ????<br><br>??
  53. ????<input?type="submit"?value="提交"?><br/>??
  54. </form>??
  55. 上傳進度：<label?id="fileUploadProcess"></label>??
  56. <iframe?name="iframeUpload"?src=""?width="350"?height="35"?frameborder=0??SCROLLING="no"?style="display:NONE"></iframe>?????
  57. </body>??
  58. </html>??

?
總結：

雖然使用apache common upload組件實現了文件上傳，但是從上傳的效果來看，并不是一個很完美的解決方案。

有如下缺點：

1. 當有多個文件上傳時，無法知道單個文件的上傳進度，因為文件上傳消息中根本就沒有關于單個文件大小的信息

文件上傳消息

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=UTF-8
Transfer-Encoding: chunked
Date: Tue, 22 Apr 2014 07:45:45 GMT

POST /upload/uploadServlet HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/upload/apacheUploadDemo.html
Cookie: JSESSIONID=33498CE814284D67F957CA53D45F0174
Connection: keep-alive

Content-Length 2363
Content-Type multipart/form-data; boundary=---------------------------189163093917262

-----------------------------189163093917262
Content-Disposition: form-data; name="name"?

-----------------------------189163093917262
Content-Disposition: form-data; name="file1"; filename="New Text Document.txt" Content-Type: text/plain
文件數據

-----------------------------189163093917262
Content-Disposition: form-data; name="file2"; filename="New Text Document (2).txt" Content-Type: text/plain
文件數據

-----------------------------189163093917262--

??

?2. 瀏覽器必須將所有文件讀取完畢才開始上傳，并且是一次性提交所有的數據文件，在互聯網環境下，會http連接超時，大文件無法上傳成功。

?

3. 服務端判斷是否超過大小限制，是通過計算接收數據的累積字節數和限制大小比較，這種情況下，如果限制大小是30M，那么在服務端已經讀取了30M完成后才會拋出異常，多余的消耗的服務器的內存和硬盤空間

?

所以基于這些原因，頁面表單 + RFC1897規范 + http協議上傳 + 后臺apache common upload組件接收的這種解決方案，不適合解決WEB頁面一次多文件上傳，大文件上傳情況，比較適合一次單個小文件附件的情況，如：博客附件，登記照片上傳，預覽等情況。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248824.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248824.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248824.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

前端CSS學習筆記

前端CSS學習筆記

一 CSS介紹 層疊樣式表(英文全稱&#xff1a;Cascading Style Sheets)是一種用來表現HTML&#xff08;超文本標記語言&#xff09;或XML&#xff08;標準通用標記語言的一個子集&#xff09;等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁&#xff0c;還可以配合各種腳本語…
閱讀更多...
自律以自救

自律以自救

在一次邏輯思維的跨年晚會上&#xff0c;羅胖曾以「帝王」來形容活在當下移動互聯網世界的人們。一個手機 App 可以讓你足不出戶&#xff0c;享受上百名廚師團隊的服務&#xff0c;中飯想吃啥菜式、樣品&#xff0c;輸入框中一應俱全&#xff0c;光論規格&#xff0c;可能已超過…
閱讀更多...
Validform使用入門

Validform使用入門

Validform使用入門 1、引入css 請查看下載文件中的style.css&#xff0c;把里面Validform必須部分復制到你的css中&#xff08;文件里這個注釋 "/*以下部分是Validform必須的*/" 之后的部分是必須的&#xff09;。之前發現有部分網友把整個style.css都引用在了頁面…
閱讀更多...
Java爬取并下載酷狗音樂

Java爬取并下載酷狗音樂

本文方法及代碼僅供學習&#xff0c;僅供學習。 案例&#xff1a; 下載酷狗TOP500歌曲&#xff0c;代碼用到的代碼庫包含&#xff1a;Jsoup、HttpClient、fastJson等。 正文&#xff1a; 1、分析是否可以獲取到TOP500歌單 打開酷狗首頁&#xff0c;查看TOP500&#xff0c;發現存…
閱讀更多...
C 表達式及返回值

C 表達式及返回值

以下程序的輸出結果是__A____。 #include<stdio.h> main() {int i10,j10;printf("%d,%d\n",i,j--); } A、11,10 B、9,10 C、010,9 D、10,9 8.若變量a、i已正確定義&#xff0c;且i已正確賦值&#xff0c;合法的語句是___B___。 A、a1 B、i; C、…
閱讀更多...
Webpack/Vue-cli兩種方式加載markdown文件并實現代碼高亮

Webpack/Vue-cli兩種方式加載markdown文件并實現代碼高亮

準備的資源&#xff1a; highlight.js &#xff1a; 實現代碼高亮&#xff0c;通過npm install highlight.js -D安裝 vue-markdown-loader&#xff1a;解析md文件的必備loader&#xff0c;通過npm install vue-markdown-loader -D安裝 下面我們分兩個場景來說明一下md文件的…
閱讀更多...
新浪微博第三方登陸重定向錯誤23123

新浪微博第三方登陸重定向錯誤23123

新浪微博第三方登陸重定向錯誤23123 2019年06月02日 13:49:43 溫室花朵 閱讀數&#xff1a;2更多 個人分類&#xff1a; 第三方微博登陸21323編輯當我們使用微博第三方登陸的時候&#xff0c;發現登陸出錯了&#xff0c;錯誤碼為&#xff1a;21323&#xff0c;解決方案如下&…
閱讀更多...
Utility Manager 的一些百度不了的操作

Utility Manager 的一些百度不了的操作

一進來是不是這樣的&#xff01; 那突然出了點問題&#xff0c;咋辦呢&#xff01; 就像這樣子的&#xff0c; 恢復默認布局就OK啦&#xff01;哈哈哈&#xff0c;太聰明啦&#xff0c;但是百度了好長時間還是找不到啊&#xff0c;怎么辦吶&#xff0c;煩死啦&#xff01; 其實…
閱讀更多...
Echart 5.0+版本報錯Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“

Echart 5.0+版本報錯Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“

首先第一步需要檢查echarts的導入方式&#xff0c;在5.0以后的版本&#xff0c;echarts做了比較大的調整&#xff0c;在vue中引入時必須使用如下命令 // import echarts from echarts 這種方式高版本不支持import * as echarts from echartsvue.prototype.$echarts echarts其次…
閱讀更多...
記錄一次內網滲透試驗

記錄一次內網滲透試驗

0x00 前言 目標&#xff1a;給了一個目標機ip&#xff0c;要求得到該服務器權限&#xff0c;并通過該ip滲透至內網控制內網的兩臺服務器 攻擊機&#xff1a;kali (192.168.31.51) 目標機&#xff1a;windows 2003 (192.168.31.196) 0x01 信息收集 nmap端口探測 御劍后臺掃描 …
閱讀更多...
2018-2019 1 20165203 實驗五 通用協議設計

2018-2019 1 20165203 實驗五 通用協議設計

2018-2019 1 20165203 實驗五 通用協議設計 OpenSSL學習 定義&#xff1a;OpenSSL是為網絡通信提供安全及數據完整性的一種安全協議&#xff0c;囊括了主要的密碼算法、常用的密鑰和證書封裝管理功能以及SSL協議&#xff0c;并提供了豐富的應用程序供測試或其它目的使用。基本功…
閱讀更多...
弄懂webpack，只要看這一片就夠了（文末有福利）

弄懂webpack，只要看這一片就夠了（文末有福利）

什么是webpack ? webpack是什么&#xff0c;官網中是這么說的。 ? 本質上&#xff0c;webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時&#xff0c;它會遞歸地構建一個依賴關系圖(dependency graph)&#xff0c;其中包…
閱讀更多...
beta沖刺總結那周余嘉熊掌將得隊

beta沖刺總結那周余嘉熊掌將得隊

作業格式 課程名稱&#xff1a;軟件工程1916|W&#xff08;福州大學&#xff09;作業要求&#xff1a;項目Beta沖刺團隊名稱&#xff1a; 那周余嘉熊掌將得隊作業目標&#xff1a;beta沖刺總結隊員學號隊員姓名博客地址備注221600131Jaminhttps://www.cnblogs.com/JaminWu/隊長…
閱讀更多...
在Winform中菜單動態添加“最近使用文件”

在Winform中菜單動態添加“最近使用文件”

最近在做文件處理系統中&#xff0c;要把最近打開文件顯示出來&#xff0c;方便用戶使用。網上資料有說&#xff0c;去遍歷“C:\Documents and Settings\Administrator\Recent”下的最近文檔本。文主要介紹在Winform界面菜單中實現【最近使用的文件】動態菜單的處理&#xff0c…
閱讀更多...
Vue組件通信原理剖析（一）事件總線的基石 $on和$emit

Vue組件通信原理剖析（一）事件總線的基石 $on和$emit

首先我們先從一個面試題入手。 面試官問&#xff1a; “Vue中組件通信的常用方式有哪些&#xff1f;” 我答&#xff1a; 1. props 2. 自定義事件 3. eventbus 4. vuex 5. 還有常見的邊界情況$parent、$children、$root、$refs、provide/inject 6. 此外還有一些非props特性$att…
閱讀更多...
display：flex彈性布局

display：flex彈性布局

一、背景 前段時間幫公司運維小姑娘調整她自己寫的頁面樣式時發現她用了display: flex&#xff0c;我這個后端老古董還不太懂flex&#xff0c;自愧不如啊&#xff0c;所以寫篇博客記錄學習下。 現在寫的前端頁面還停留在依賴 display 屬性 position屬性 float屬性的布局方式&…
閱讀更多...
一些好的思維方式

一些好的思維方式

定理s 一、墨菲定律 觀點&#xff1a;1.任何事都沒有表面看起來那么簡單&#xff1b;2.所有的事都會比你預計的時間長&#xff1b;3.會出錯的事總會出錯&#xff1b;4.如果你擔心某種情況發生&#xff0c;那么它就更有可能發生。 墨菲定律的核心觀點就4點&#xff0c;不算復雜&…
閱讀更多...
Vue組件通信原理剖析（二）全局狀態管理Vuex

Vue組件通信原理剖析（二）全局狀態管理Vuex

首先我們先從一個面試題入手。 面試官問&#xff1a; “Vue中組件通信的常用方式有哪些&#xff1f;” 我答&#xff1a; 1. props 2. 自定義事件 3. eventbus 4. vuex 5. 還有常見的邊界情況$parent、$children、$root、$refs、provide/inject 6. 此外還有一些非props特性$att…
閱讀更多...
初識單點登錄及JWT實現

初識單點登錄及JWT實現

單點登錄 多系統&#xff0c;單一位置登錄&#xff0c;實現多系統同時登錄的一種技術 &#xff08;三方登錄&#xff1a;某系統使用其他系統的用戶&#xff0c;實現本系統登錄的方式。如微信登錄、支付寶登錄&#xff09; 單點登錄一般是用于互相授信的系統&#xff0c;實現單一…
閱讀更多...
Vue組件通信原理剖析（三）provide/inject原理分析

Vue組件通信原理剖析（三）provide/inject原理分析

首先我們先從一個面試題入手。 面試官問&#xff1a; “Vue中組件通信的常用方式有哪些&#xff1f;” 我答&#xff1a; 1. props 2. 自定義事件 3. eventbus 4. vuex 5. 還有常見的邊界情況$parent、$children、$root、$refs、provide/inject 6. 此外還有一些非props特性$att…
閱讀更多...
最新文章

Copyright @ 2022~2023