裝X - 建立自己的斗圖網站庫

01-25

之前加過一個斗圖群，看到很多經典的表情，然後就收藏到了QQ，迫於本屌絲開不起某Q會員，就只能收藏到本地，無法在其他的電腦上使用。久而久之收藏的也越來越多了，但是管理就成了問題，每次合適的場景想起一張合適的圖，但怎麼都找不到了，於是乎，本屌絲打算自己寫一個斗圖收藏網站。

先露個臉！

1 實現思路

實現思路其實很簡單粗暴，如果需要載入圖片，肯定需要圖片地址，那麼，圖片的地址從哪裡來呢？當然是從伺服器請求啦，我要需要做的是什麼呢? 我們需要在服務端建立幾個文件夾，然後把一些圖片分好類，放進文件夾就好了。

然後我們就用java去讀取指定文件夾的中圖片，然後把這些圖片返回去前端就好了。

2 後端代碼實現

2.1 我們建一個web項目，寫一個簡單的servlet

// 此處為doPost的全部內容public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); ReadList rl = new ReadList(); String json = rl.read(); // 此處返回一個json格式的字元串，前端在進行 JSON.parse(); out.println(json); out.flush(); out.close();}

2.2 在寫一個簡單的讀取方法類，就是上面的 ReadList

package com.cxw.face;import java.io.File;public class ReadList { public String read() { // windwos環境下開發的測試路徑（本地開發時使用）// String path = "D:\dtimg"; // 實際部署在linux上的真是圖片位置。 String path = "/opt/project/face/images/face"; String dirObj = "{"; // 讀取指定位置的文件 File file = new File(path); // 讀取這個文件夾下的所有文件和文件夾 File[] ss = file.listFiles(); // 對所有的文件夾遍歷 for (int i = 0; i < ss.length; i++) { String key = ss[i].getName(); // 文件夾名稱 File[] zs = ss[i].listFiles(); // 此文件夾下的文件 // 以文件夾名稱為key，拼接成json dirObj += """ + key + "": [" ; for (int j = 0; j < zs.length; j++) { String zn = zs[j].getName(); long size = zs[j].length(); dirObj += "{"name":"" + zn + "","size":""+size+""},"; } dirObj = dirObj.substring(0, dirObj.length()-1); dirObj += "],"; } dirObj = dirObj.substring(0, dirObj.length()-1); // 注意：json的末尾不能多加逗號(,)。 dirObj += "}"; return dirObj; }}

這個後台的代碼就完了，就這麼一點。

3. 前端代碼

前端的代碼非常簡單，就是一個ajax去請求數據就好了。

var xhr = new XMLHttpRequest();xhr.timeout = 16000;xhr.responseType = "text";xhr.open("POST", "/Servlet02/face", true);xhr.onload = function(){ if(this.status == 200||this.status == 304){ var txt = this.responseText; var obj = JSON.parse(txt); console.log(obj); }}xhr.send(null);