--Web Java front-end design of the curriculum

The main use of technology

• Javascript/JQuery
• html
• css
• Jsp

Preliminary investigation

To see the web page can be divided into two parts, one is the search home page index.html, a search results page/s

index.html

We first look at Baidu Home

It can be roughly divided into the following sections:

• logo
• Input box
• Search button

logo

Using the design center, positioned above the input box

Input box

Compared to the traditional input html tag, and obviously this is the result of a custom-optimized, disable the auto-complete function input, Lenovo capable of keywords, keyword recommendation is as follows:

This section should be used to achieve js, a ajax request to the background, and then display the data to the front end, can be implemented using the JQuery autocomplete plug

Search button

Button Nothing special, simple style customization, to /ssubmit the form interface. Note that users press the Enter button should trigger this event on the input box is completed, this section can also be used to achieve js

/s

Figure looking at may be a bit messy, to sum up:

• logo
• Input box
• Search button
• The results show the number of
• Search tool, you can select a time range, etc.
• Entry:
  1. Page title
  2. Text content
  3. url
  4. (Time) not necessarily
• Pages Article

Button, logo would not have said, about the same as the front, logo remember to add the click time of the jump index.

Input box

And in front of the input box is a little different, that is, the user can get the url keyword search, and then set the input box input the value, this function can also be used js jsp achieve

Search results display

This will combine jsp to display a simple <%=num%>can do

search tool

The main lingua franca was also able to select a date, the effect is as follows:

This dataPicker certainly been done, you do not need to write their own, look online JQuery plugin was like, directly after the introduction, then the value of the time through mass participation url to jsp, jsp, then pass the background parsing return new results

Entry

全部词条可以用一个div括起来，然后每个单个的词条再用一个div括起来，进行样式的定制，这样jsp输出词条只要一个for循环就好了，格式简洁，给标题弄一个点击时间到相关链接，就差不多了，然后正文内容这些，要限制显示的行数，进行CSS的定制，超出自动显示...，这样思路就很清晰了

页数条

这个可以使用js代码进行简单的逻辑判断，然后循环输出就可以了，每个页应该设置点击事件onclick，获得点击的页数码，然后获取url进行跳转

设计理念

由于是基于学院的搜索引擎，所以打算以红色为主，然后各种边框大多数采用圆角，因为自己比较喜欢这种圆润的样式

代码实现（只展示主要代码）

需要的文件大致为index.html，search.jsp，suggest.jsp，autocomplete.js（用于获取关键词联想）

index.html

form表单部分:

<form action="search.jsp" method="GET" enctype="application/x-www-form-urlencoded">
        <div class="search-wrapper">
          <input
            id="input"
            class="search-input"
            type="text"
            placeholder="请输入关键字"
            name="keyword"
            autocomplete="off"
          />
          <button class="search-button" onclick="submit">
            搜索一下
          </button>
        </div>
      </form>

suggest.jsp

这部分很简单，就是java代码通过ElasticSearch实现的类EsSuggest进行请求就好了

String keyword = request.getParameter("term");
if(keyword!=null){
    EsSuggest suggest = new EsSuggest();
    List<String> re = suggest.getSuggest(keyword);
    out.println(JSON.toJSONString(re));
}

autocomplete.js

首先我们要以ajax的方式向后台请求数据，也就是上面的suggest.jsp

function getData(url) {
  var jsonData = "";
  $.ajax({
    type: "get",
    url: url,
    datatype: "json",
    async: false,
    error: function() {
      console.error("Load recommand data failed!");
    },
    success: function(data) {
      jsonData = data;
    }
  });
  return jsonData;
}

然后通过JQuery实现的keyup事件对class为search-input的元素进行监听，一旦有用户输入就对这个元素进行JQuery的autocomplete的事件反馈,然后这里还使用了setTimeout进行异步执行，避免阻塞用户输入

$(function () {
  $(".search-input").keyup(
    function(event){
      setTimeout(function(){
        recommandData=JSON.parse(getData("suggest.jsp?term="+document.getElementById("input").value));
        $(".search-input").autocomplete({
          source: recommandData
        });
      },2000)
    }
  )
});

search.jsp

search.jsp页面在得到get传参后，先判断有没有时间限制，没有就直接搜索，有就进行范围搜索，这里时间格式为HH:mm:ss - HH:mm:ss，用split分开就能得到开始时间和结束时间。

String keyword = request.getParameter("keyword");
if(keyword!=null){
    int pageCount = request.getParameter("page")==null?1:Integer.parseInt(request.getParameter("page"));
    search = new EsSearch();
    search.inseartSearch(keyword);
    String timeLimit = request.getParameter("timeLimit");
    if(timeLimit==null){
        result = search.fullTextSerch(keyword,pageCount);
    }
    else{
        String[] time = timeLimit.split(" - ");
        result = search.rangeSerch(keyword, pageCount, time[0], time[1]);
    }
}

result就是我们想要的结果了，在判断result不为空后就可以开始打印结果

if(result!=null){
    for(int i=0;i<result.size();i++){
        out.println("<div class=\"result-container\">");
        out.println("<a href=\""+result.get(i).getUrl()+"\" target=\"_blank\" class=\"title\">"+result.get(i).getTitle()+"</a>");
        int index = result.get(i).getText().indexOf("<span style=\"color:red;\">");
        out.println("<div class=\"text\">"+result.get(i).getText()+"</div>");
        out.println("<div style=\"float: left;\" class=\"url\">"+result.get(i).getUrl()+"</div>");
        out.println("<div style=\"float: left;color: grey;margin-left: 30px;margin-top: 4px;\">"+result.get(i).getTime()+"</div>");
        out.println("</div>");
        out.println("<div class=\"clear\"></div>");
    }
}

然后对输入框进行初值的设置，即用户输入的词，这里其实可以用纯js实现的，只是懒得改了

document.getElementById("input").setAttribute("value","<%=keyword%>");

如果页数小于一定值就直接全部显示了，不需要前一页后一页这种按钮

if(page==null) 
    page=1;
else{
    page=parseInt(page);
}
totalPage=<%=search==null?0:search.getResultNum()%10==0?search.getResultNum()/10:search.getResultNum()/10+1%>;
if(totalPage<9){
for(var i=1;i<totalPage+1;i++){
    if(i!=page)
        document.getElementById("turn-page").innerHTML+="<li><a onclick=\"turnPage(this)\">"+i+"</a></li>";
    else
        document.getElementById("turn-page").innerHTML+="<li><a class=\"active\" onclick=\"turnPage(this)\">"+i+"</a></li>";
    }
}

页数多就条件语句判断一下，比如最大显示7页，那么如果当前页数大于等于4小于等于最大页数减去4，就让这一页在中间呆着，小于4就靠左，其他的就靠右，这个不好表述，直接上图吧

点击页码后的点击事件如下，主要对有无page传参进行了一个判断，然后获取点击事件的innerHTML就可以知道点击的页码了，亦或者是前进后退符号。replaceParamVal和AddParamVal是自定义的方法，用于替换传参和添加传参，并进行网页的跳转

function turnPage(e) {
  page = e.innerHTML;
  if (page == "«") {
    var currentPage = GetQueryString("page");
    //无page传参
    if (currentPage == null) {
      AddParamVal("page", 1);
    }
    //有page传参
    else {
      currentPage = parseInt(currentPage) - 1;
      if (currentPage <= 0) currentPage = 1;
      replaceParamVal("page", currentPage);
    }
  } else if (page == "»") {
    var currentPage = GetQueryString("page");
    //无page传参
    if (currentPage == null) {
      AddParamVal("page", 2);
    }
    //有page传参
    else {
      currentPage = parseInt(currentPage) + 1;
      //if(currentPage<=0) currentPage=1;
      replaceParamVal("page", currentPage);
    }
  } else {
    var currentPage = GetQueryString("page");
    //无page传参
    if (currentPage == null) {
      AddParamVal("page", parseInt(e.innerHTML));
    }
    //有page传参
    else {
      replaceParamVal("page", parseInt(e.innerHTML));
    }
  }
}

至于日期选择控件，这里是引用其他人的脚本，只需要在网页最后加以下javascript代码就可以了

laydate.render({
    elem: '#test6'
    ,range: true
});

效果如下：

至此，Web前端设计结束