JavaWeb小项目之综合搜索工具（一）：前端篇
JavaWeb小项目之综合搜索工具（二）：爬虫篇
JavaWeb小项目之综合搜索工具（三）：创建RESTful服务篇
前言:
本项目是写一个类似于综合搜索一样的网页。
输入一个关键词，然后把此关键词分发到各个搜索引擎之中获得结果，
并将其在网页中显示出来。
后台采用了Java语言来实现，本来用nodejs或python语言会很方便，但因为有个Java实训要做，反正语言只是工具，思路才是重点。
主要是练习JavaWeb，所以前端篇会简要提一下，代码的下载放于文末。
Ps:关于数据来源，权当是练手，所以目前这一个版本只采用了“百科名医”网站的站内搜索结果。
设计：
没有怎么特别设计，就瞎弄。
由于蓝色、绿色之类的安全色看的有点腻，遂用了一点少女心的渐变色。
配色丑不丑的话，个人主观性太强，我也是瞎设计，改了好几次，也就这样了。如果觉得难看可以自己改。
如果自己不会设计渐变，那么去哪找好看的渐变色？
附上一家提供180种渐变配色灵感的网站：
https://webgradients.com/
我用的是这个
html{
background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
}
然后最终成品的效果图如下：
前端页面效果图.png
搜索.png
如何实现
思路：
- 关于页面定位也挺简单，普通的div+css定位就能大致实现。为了方便，现在还没有加入响应式设计。
- 对后台数据的请求使用AJAX来实现，这里减少工作量，直接上JQuery框架
- Loading动画用CSS3来做
我说一下碰到的坑：
1.input后面的按钮会出现2px的上下偏差
input后面的按钮有明显的偏差.png
原因：这是由于默认的CSS属性box-sizing:border-box;导致的
解决方法：
.btn_search{
/*消除input后面按钮的偏差*/
vertical-align: top;
}
网上也有其他的解决方案，贴另外一个：
http://www.cnblogs.com/ruanxh123/p/5658868.html
2.渐变背景色不能完全填充整个网页，当结果很少的时候，页面会出现空白，我为显示结果的div添加的height:100%并没有起到作用。
div下方的空白.png
原因：为子类设置了的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
网友评论