(一)模拟热搜

 

本篇文章要介绍的模拟热搜功能,上图是hao123主页网页,当我们点击到搜索框会自动弹出排名靠前的热搜

除了热搜之外,我们还要根据搜索框的文本,然后会自动弹出与关键字相关信息

我们的目的确定了,先确定下需求文档

1. 当输入框没有文本,并且输入框获取到焦点时自动在输入框下弹出用户搜索的关键字最多的列表,失去焦点,列表消失

2. 当输入框有文本时,并获取到焦点自动弹出与文本相关标题列表信息

根据需求文档,我们需要先搞定数据库

需要两个表,一个表保存用户搜索的关键字和搜索关键字的次数,热搜的功能需要靠他实现,另一个表需要保存与关键字相关的标题,关键字与内容相关我们暂不考虑,需求文档没有这个需求

数据库

本篇文章使用的是myserver数据库,其他数据库的可以自行修改相关新建表的语法即可

打开我们的idea,新建一个topSearch表,idea是个优秀的开发工具他具备了编辑数据库的功能,通过idea可以编辑mysql,myserver数据库等(免费给idea打广告),不熟悉idea的数据功能也可以选择其他数据库开发工具

create table topSearch --热门搜索
(
    ts_id    int identity constraint topSearch_pk primary key nonclustered,--热搜关键字ID
    ts_key   varchar(64),-- 关键字
    ts_count integer--关键字搜索次数
)
go

还有一个info表

create table info --信息
(
    info_id int identity constraint info_pk primary key nonclustered,--信息id
    info_title      varchar(128), --信息的标题
    info_clickCount int --用户查看访问信息的次数
)
go

后端

考虑到小白不懂一些框架,这里我不会用到主流框架,只用原始方式编写后台代码

1. 先编写一个热搜功能,提供一个接口供前端使用

前期工作:新建包,添加数据库驱动包

编写业务

package com.servlet;

import com.service.TopSearchService;
import com.service.impl.TopSearchServiceImpl;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

public class TopSearchServlet extends HttpServlet {

    TopSearchService topSearchService=new TopSearchServiceImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //设置跨域请求
        response.setHeader("Access-Control-Allow-Origin","*");
        //处理中文乱码
        response.setContentType("text/html;charset=utf-8");
        //获取热搜列表
        List<String> lists=topSearchService.list();
        PrintWriter out=response.getWriter();
        if (lists.size() > 0) {
            out.println(toJson(lists));
        }
    }
    public static String toJson(List<String> list) {
        String data = "";
        int count=1;
        for (String str : list) {
            // "1":"title1","2":"title2",
            data+="\""+count+"\":\""+str+"\",";
            count++;
        }
        data+="\"length\":"+count;
        return "{"+data+"}";
    }
}

业务写完了,但是对数据库操作的代码我们没有写,业务代码报错

编写service接口

package com.service;

import java.util.List;

public interface TopSearchService {
    /**
     * 获取热搜前10名
     * @return
     */
    public List<String> list();
}

编写获取Connection工具,连接数据库属性值根据自身情况修改

package com.util;

import java.sql.*;

public class DBUtil {
    private static String driver;
    private static String url;
    private static String username;
    private static String password;

    static {
        driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
        url = "jdbc:sqlserver://localhost;database=test";
        username = "sa";
        password = "123456";
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } 
    }

    public static Connection getConn() throws SQLException {
        return DriverManager.getConnection(url, username, password);
    }

    public static void close(Connection conn, Statement st, ResultSet rs) {
        try {
            if (conn != null) {
                conn.close();
            }
            if (st != null) {
                st.close();
            }
            if (rs != null) {
                rs.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

编写TopSearchServiceImpl

package com.service.impl;

import com.service.TopSearchService;
import com.util.DBUtil;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

public class TopSearchServiceImpl implements TopSearchService {
    private Connection connection = null;
    private Statement statement = null;
    private ResultSet resultSet = null;

    @Override
    public List<String> list() {
        String sql = "select top 10 ts_key from topSearch order by ts_count desc";
        List<String> list = new ArrayList<>(10);
        try {
            connection = DBUtil.getConn();
            statement = connection.createStatement();
            resultSet = statement.executeQuery(sql);
            while (resultSet.next()) {
                list.add(resultSet.getString("ts_key"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(connection, statement, resultSet);
        }
        return list;
    }
}

热搜后台功能基本完成了,给数据库topSearch表添加数据

启动我们的服务器tomcat,打开网页访问localhost:8080:/你的项目名/topSearch,不出意外的话应该如下图i

输出的json格式,json方便前端使用获取数据,后端给前端提供了一个url(localhost:8080:/你的项目名/topSearch)接口,所以前端只需要利用ajax请求这个url就可以得到数据,这也是某种意义上的前后端分离思想

(二)模拟热搜