之前加過一個斗圖群，看到很多經(jīng)典的表情碰镜，然后就收藏到了QQ鲫惶， 迫于本屌絲開不起某Q會員做裙，就只能收藏到本地岗憋，無法在其他的電腦上使用。久而久之收藏的也越來越多了菇用，但是管理就成了問題澜驮，每次合適的場景想起一張合適的圖，但怎么都找不到了惋鸥，于是乎，本屌絲打算自己寫一個斗圖收藏網(wǎng)站悍缠。
先露個臉卦绣！
1 實現(xiàn)思路
實現(xiàn)思路其實很簡單粗暴，如果需要加載圖片飞蚓，肯定需要圖片地址滤港，那么，圖片的地址從哪里來呢趴拧？當然是從服務器請求啦溅漾，我要需要做的是什么呢? 我們需要在服務端建立幾個文件夾，然后把一些圖片分好類著榴，放進文件夾就好了添履。
然后我們就用java去讀取指定文件夾的中圖片，然后把這些圖片返回去前端就好了脑又。
2 后端代碼實現(xiàn)
2.1 我們建一個web項目暮胧，寫一個簡單的servlet
// 此處為doPost的全部內(nèi)容
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環(huán)境下開發(fā)的測試路徑（本地開發(fā)時使用）
// 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去請求數(shù)據(jù)就好了来颤。
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);
這個是主要的代碼，涉及到其他功能的代碼疟呐，還需要在加脚曾。
然后就得到了 我們想要的數(shù)據(jù)。就是下面格式：
至于前端的界面你想怎么顯示那都不是事兒了把启具！
4 發(fā)布到Linux上
4.1 java項目打包
這個很簡單了本讥，直接在myeclipse中右鍵，點Exprot... , 在展開java EE，選擇WAR file (MyEclipse)拷沸，然后下一步色查，然后選擇一個保存位置，(隨便那里都可以撞芍，待會兒會把這個war文件放到服務器上的)秧了，在點擊Finish就好了。
4.2 Linux上安裝JDK
4.3 Linux上安裝Tomcat
我這個就不說了序无，百度一大堆验毡。
4.4 發(fā)布
把剛才第一步打包的那個war文件丟到你的linux上的你的tomcat安裝的位置，然后啟動tomcat就好了帝嗡。(注意：我打包的項目叫Servlet02.war晶通，丟到tomcat上啟動之后會自動解壓生成和一個文件名一樣的文件夾，訪問的時候前面需要加上這個文件名)
5 附上本人的斗圖裝X網(wǎng)站地址
簡單吧哟玷，是不是小白都可以說 so easy!
- 圖片暫時還未整理完全狮辽，前端頁面圖片加載待優(yōu)化。
- 后期還會加上搜索功能巢寡，這個數(shù)量有點大喉脖，最近工作還忙，以后再說抑月。
- 目前復制圖片稍微復雜树叽，以后可以加一個as腳本，直接復制爪幻。
（如有愿意貢獻神圖的童鞋歡迎小窗）
更新：17.02.09
評論去很多說多了搜索菱皆，這個功能之前規(guī)劃的有的，但是沒時間做挨稿，昨天晚上寫到很晚今天中終于可以了仇轻，增加以下幾個修改：
- linux對中文文件夾的支持
- 增加搜索，（圖片的tag就是圖片的名稱）
- 圖片的更名還沒有改完內(nèi)容太多奶甘，以后有時間了改篷店，稍安勿躁。
博主博文推薦
更多干貨內(nèi)容請關(guān)注：極樂科技臭家。在學習過程如果有任何疑問疲陕，請來極樂網(wǎng)提問，或者掃描下方二維碼钉赁，關(guān)注極樂官方微信蹄殃，在平臺下方留言。
