JavaWeb小項(xiàng)目之綜合搜索工具（一）：前端篇
JavaWeb小項(xiàng)目之綜合搜索工具（二）：爬蟲篇
JavaWeb小項(xiàng)目之綜合搜索工具（三）：創(chuàng)建RESTful服務(wù)篇
前言:
本項(xiàng)目是寫一個(gè)類似于綜合搜索一樣的網(wǎng)頁秧廉。
輸入一個(gè)關(guān)鍵詞，然后把此關(guān)鍵詞分發(fā)到各個(gè)搜索引擎之中獲得結(jié)果惯驼，
并將其在網(wǎng)頁中顯示出來。
后臺采用了Java語言來實(shí)現(xiàn)涡真，本來用nodejs或python語言會(huì)很方便师逸，但因?yàn)橛袀€(gè)Java實(shí)訓(xùn)要做，反正語言只是工具究流，思路才是重點(diǎn)蔼啦。
主要是練習(xí)JavaWeb榆纽，所以前端篇會(huì)簡要提一下，代碼的下載放于文末捏肢。
Ps:關(guān)于數(shù)據(jù)來源奈籽，權(quán)當(dāng)是練手，所以目前這一個(gè)版本只采用了“百科名醫(yī)”網(wǎng)站的站內(nèi)搜索結(jié)果鸵赫。
設(shè)計(jì)：
沒有怎么特別設(shè)計(jì)衣屏，就瞎弄。
由于藍(lán)色辩棒、綠色之類的安全色看的有點(diǎn)膩狼忱，遂用了一點(diǎn)少女心的漸變色。
配色丑不丑的話一睁，個(gè)人主觀性太強(qiáng)钻弄，我也是瞎設(shè)計(jì)，改了好幾次者吁，也就這樣了窘俺。如果覺得難看可以自己改。
如果自己不會(huì)設(shè)計(jì)漸變复凳，那么去哪找好看的漸變色瘤泪？
附上一家提供180種漸變配色靈感的網(wǎng)站：
https://webgradients.com/
我用的是這個(gè)
html{
background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
}
然后最終成品的效果圖如下：
如何實(shí)現(xiàn)
思路：
- 關(guān)于頁面定位也挺簡單灶泵，普通的div+css定位就能大致實(shí)現(xiàn)。為了方便对途，現(xiàn)在還沒有加入響應(yīng)式設(shè)計(jì)丘逸。
- 對后臺數(shù)據(jù)的請求使用AJAX來實(shí)現(xiàn)，這里減少工作量掀宋，直接上JQuery框架
- Loading動(dòng)畫用CSS3來做
我說一下碰到的坑：
1.input后面的按鈕會(huì)出現(xiàn)2px的上下偏差
原因：這是由于默認(rèn)的CSS屬性box-sizing:border-box;導(dǎo)致的
解決方法：
.btn_search{
/*消除input后面按鈕的偏差*/
vertical-align: top;
}
網(wǎng)上也有其他的解決方案，貼另外一個(gè)：
http://www.cnblogs.com/ruanxh123/p/5658868.html
2.漸變背景色不能完全填充整個(gè)網(wǎng)頁仲锄，當(dāng)結(jié)果很少的時(shí)候劲妙，頁面會(huì)出現(xiàn)空白，我為顯示結(jié)果的div添加的height:100%并沒有起到作用儒喊。
原因：為子類設(shè)置了的height:100%镣奋，必須也要為父類添加該屬性。
解決方案:
html,body{
/*
此處不用height:100%是因?yàn)閮?nèi)容很少的話怀愧，大小只會(huì)根據(jù)子類來撐開侨颈，仍有空白
*/
min-height:100%;
}
3.Loading 動(dòng)畫的制作，可以參考網(wǎng)上的博客：
http://www.cnblogs.com/jr1993/p/4622039.html
How to Use：
先把Loading動(dòng)畫弄出來芯义，為其設(shè)置display:none;哈垢，使之隱藏；
在Ajax beforeSend事件中更改display:block屬性使其顯示出來扛拨；
最后在success事件完成之后再隱藏掉
ps:
至于為什么不用Js生成耘分，畢竟生成結(jié)果使用Js生成div的，能少生成一個(gè)是一個(gè)绑警，資源盡量能省就省求泰。而且修改div的結(jié)構(gòu)也很麻煩。
前后端交互部分
這里是溝通前后端的橋梁與媒介计盒，重點(diǎn)寫一下：
1.事件監(jiān)聽
監(jiān)聽Search按鈕的點(diǎn)擊事件渴频，以及監(jiān)聽Input輸入框有變化的時(shí)候，觸發(fā)SendAjax
//按鈕,搜索框的事件監(jiān)聽
$("#btn_search").click(function(){
sendAjax();
});
$("#input_search").on("input",function(){
//監(jiān)聽input的值是否產(chǎn)生變化
//如果是使用了輸入法北启，input的值會(huì)出現(xiàn)一個(gè)空格卜朗，會(huì)觸發(fā)一次
//所以要在sendAjax()中加入檢查
sendAjax();
});
2.sendAjax()
function sendAjax(){
search_text=$("#input_search").val();
//檢查是否輸入搜索內(nèi)容
//如果是使用了輸入法，input的值會(huì)出現(xiàn)一個(gè)空格暖庄，會(huì)觸發(fā)一次
if(search_text==""||search_text==" "){
console.log("enter value is null");
}else{
$.ajax({
type:"GET",
dataType:"json",
// 地址填上服務(wù)器的IP
url:"http://localhost:8080/api/search/getArticle/"+search_text,
beforeSend:function(){
OpenAlertInfo(false); //關(guān)閉錯(cuò)誤提示
rmAlertNotFound(); //關(guān)閉上次未找到結(jié)果的提示
addLoadingAnim(); //加載Loading動(dòng)畫
},
success:function(data){
// console.log(data);
//////////////////////////
// 為了讓結(jié)果更快顯示聊替，先添加后執(zhí)行其他任務(wù) //
//////////////////////////
addResult_item(data); //添加搜索結(jié)果到頁面
rmLoadingAnim(); //移除Loading動(dòng)畫
CheckHasResult(); //對結(jié)果檢查，沒有則顯示“未找到結(jié)果”的提示
},
error:function(XMLHttpRequest, textStatus, errorThrown){
// 請求沒有成功的處理
rmLoadingAnim(); //移除Loading動(dòng)畫
OpenAlertInfo(true); //顯示未連接到服務(wù)器的錯(cuò)誤提示
}
});
}
}
3.解析服務(wù)器返回來的JSON data數(shù)據(jù)
function addResult_item(data) {
//添加動(dòng)畫效果培廓，使得搜索框上移惹悄，出現(xiàn)分割線
moveSearchUp();
$(".divider").addClass("Anim_DownSlideUp");
//在顯示新的結(jié)果之前，清空上次搜索結(jié)果
$(".result_group").empty();
// 對JSON數(shù)據(jù)進(jìn)行遍歷解析
var all_datas_JSON=data;
for(var bwk in all_datas_JSON){
// console.log(all_datas_JSON[bwk]); //bwk是三個(gè)對象(baike_datas...) 的名字(string)
for(var element_i in all_datas_JSON[bwk]){ //element_i是bwk對象中元素的名字
// console.log(all_datas_JSON[bwk][element_i]); //返回一個(gè)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動(dòng)態(tài)生成結(jié)果肩钠，DOM的創(chuàng)建操作
$(".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的話泣港，手動(dòng)加雙引號簡直反人類暂殖，你可以使用
站長工具-JS/HTML格式化
記得SublimeText也有這么個(gè)插件，不過名字我倒是忘了当纱，自己上去找找
大概的坑就這么多呛每。
放上代碼地址：
https://coding.net/u/thinker_er/p/JavaWebDemo_Search_DEMO/git
