JavaWeb小項目之綜合搜索工具（一）：前端篇
JavaWeb小項目之綜合搜索工具（二）：爬蟲篇
JavaWeb小項目之綜合搜索工具（三）：創建RESTful服務篇
前言:
本項目是寫一個類似于綜合搜索一樣的網頁。
輸入一個關鍵詞，然后把此關鍵詞分發到各個搜索引擎之中獲得結果，
并將其在網頁中顯示出來。
后臺采用了Java語言來實現，本來用nodejs或python語言會很方便，但因為有個Java實訓要做，反正語言只是工具，思路才是重點。
主要是練習JavaWeb，所以前端篇會簡要提一下，代碼的下載放于文末。
Ps:關于數據來源，權當是練手，所以目前這一個版本只采用了“百科名醫”網站的站內搜索結果。
設計：
沒有怎么特別設計，就瞎弄。
由于藍色、綠色之類的安全色看的有點膩，遂用了一點少女心的漸變色。
配色丑不丑的話，個人主觀性太強，我也是瞎設計，改了好幾次，也就這樣了。如果覺得難看可以自己改。
如果自己不會設計漸變，那么去哪找好看的漸變色？
附上一家提供180種漸變配色靈感的網站：
https://webgradients.com/
我用的是這個
html{
background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
}
然后最終成品的效果圖如下：
如何實現
思路：
- 關于頁面定位也挺簡單，普通的div+css定位就能大致實現。為了方便，現在還沒有加入響應式設計。
- 對后臺數據的請求使用AJAX來實現，這里減少工作量，直接上JQuery框架
- Loading動畫用CSS3來做
我說一下碰到的坑：
1.input后面的按鈕會出現2px的上下偏差
原因：這是由于默認的CSS屬性box-sizing:border-box;導致的
解決方法：
.btn_search{
/*消除input后面按鈕的偏差*/
vertical-align: top;
}
網上也有其他的解決方案，貼另外一個：
http://www.cnblogs.com/ruanxh123/p/5658868.html
2.漸變背景色不能完全填充整個網頁，當結果很少的時候，頁面會出現空白，我為顯示結果的div添加的height:100%并沒有起到作用。
原因：為子類設置了的height:100%，必須也要為父類添加該屬性。
解決方案:
html,body{
/*
此處不用height:100%是因為內容很少的話，大小只會根據子類來撐開，仍有空白
*/
min-height:100%;
}
3.Loading 動畫的制作，可以參考網上的博客：
http://www.cnblogs.com/jr1993/p/4622039.html
How to Use：
先把Loading動畫弄出來，為其設置display:none;，使之隱藏；
在Ajax beforeSend事件中更改display:block屬性使其顯示出來；
最后在success事件完成之后再隱藏掉
ps:
至于為什么不用Js生成，畢竟生成結果使用Js生成div的，能少生成一個是一個，資源盡量能省就省。而且修改div的結構也很麻煩。
前后端交互部分
這里是溝通前后端的橋梁與媒介，重點寫一下：
1.事件監聽
監聽Search按鈕的點擊事件，以及監聽Input輸入框有變化的時候，觸發SendAjax
//按鈕,搜索框的事件監聽
$("#btn_search").click(function(){
sendAjax();
});
$("#input_search").on("input",function(){
//監聽input的值是否產生變化
//如果是使用了輸入法，input的值會出現一個空格，會觸發一次
//所以要在sendAjax()中加入檢查
sendAjax();
});
2.sendAjax()
function sendAjax(){
search_text=$("#input_search").val();
//檢查是否輸入搜索內容
//如果是使用了輸入法，input的值會出現一個空格，會觸發一次
if(search_text==""||search_text==" "){
console.log("enter value is null");
}else{
$.ajax({
type:"GET",
dataType:"json",
// 地址填上服務器的IP
url:"http://localhost:8080/api/search/getArticle/"+search_text,
beforeSend:function(){
OpenAlertInfo(false); //關閉錯誤提示
rmAlertNotFound(); //關閉上次未找到結果的提示
addLoadingAnim(); //加載Loading動畫
},
success:function(data){
// console.log(data);
//////////////////////////
// 為了讓結果更快顯示，先添加后執行其他任務 //
//////////////////////////
addResult_item(data); //添加搜索結果到頁面
rmLoadingAnim(); //移除Loading動畫
CheckHasResult(); //對結果檢查，沒有則顯示“未找到結果”的提示
},
error:function(XMLHttpRequest, textStatus, errorThrown){
// 請求沒有成功的處理
rmLoadingAnim(); //移除Loading動畫
OpenAlertInfo(true); //顯示未連接到服務器的錯誤提示
}
});
}
}
3.解析服務器返回來的JSON data數據
function addResult_item(data) {
//添加動畫效果，使得搜索框上移，出現分割線
moveSearchUp();
$(".divider").addClass("Anim_DownSlideUp");
//在顯示新的結果之前，清空上次搜索結果
$(".result_group").empty();
// 對JSON數據進行遍歷解析
var all_datas_JSON=data;
for(var bwk in all_datas_JSON){
// console.log(all_datas_JSON[bwk]); //bwk是三個對象(baike_datas...) 的名字(string)
for(var element_i in all_datas_JSON[bwk]){ //element_i是bwk對象中元素的名字
// console.log(all_datas_JSON[bwk][element_i]); //返回一個Object("id","linkHref","linkText")
var linkText=all_datas_JSON[bwk][element_i].linkText; //文章名稱
var linkHref=all_datas_JSON[bwk][element_i].linkHref; //文章鏈接
var summary=all_datas_JSON[bwk][element_i].summary; //文章摘要
// 用Js動態生成結果，DOM的創建操作
$(".result_group").append(["<div class=\"result_item\">",
" <div class=\"item_header\">",
" <p class=\"item_text\"><a href="+linkHref+">"+linkText+"</a></p>",
" </div>",
" <div class=\"item_body\">",
" <p class=\"item_text\">"+summary+"</p>",
" </div>",
" <div class=\"item_footer\">",
" <p class=\"item_text\"></p>",
" </div>",
"</div>"].join(""));
}
}
};
使用Js來生成HTML DOM的話，手動加雙引號簡直反人類，你可以使用
站長工具-JS/HTML格式化
記得SublimeText也有這么個插件，不過名字我倒是忘了，自己上去找找
大概的坑就這么多。
放上代碼地址：
https://coding.net/u/thinker_er/p/JavaWebDemo_Search_DEMO/git
