实现类似于百度搜索的一个联想搜索框
效果图考虑实现的步骤1.创建相应的数据库并且存储数据2.测试一下数据传输回来得搜索结果3.模拟搜索页面4.导入需要用到的JAR包和配置文件5.在网页为输入框绑定事件反馈给服务器6最后运行Tomcat查看实际效果效果图
在输入一个字以后就会出现联想的关联对象
考虑实现的步骤
1.要有一个数据库存储有相关数据
2.搜索框在接受到数据时候能够向后端发送数据并且将数据反馈在客户端
3.这是一个异步的操作
1.创建相应的数据库并且存储数据
-- 创建db10数据库CREATE DATABASE db10;-- 使用db10数据库USE db10;-- 创建user表CREATE TABLE USER(id INT PRIMARY KEY AUTO_INCREMENT,-- 主键idNAME VARCHAR(20),-- 姓名age INT,-- 年龄search_count INT -- 搜索数量);-- 插入测试数据INSERT INTO USER VALUES (NULL,'蔡依林',23,25),(NULL,'蔡某',24,5),(NULL,'蔡某某',25,3),(NULL,'德蔡某',26,7),(NULL,'得天下',93,20),(NULL,'坤之大',18,23),(NULL,'一锅炖',33,21),(NULL,'不下',65,6);
创建好数据库了就该构建一个相互交互系统
2.测试一下数据传输回来得搜索结果
在Mysql中输入查询语句查询，进行模糊查询 显示条数为5条，通过search_count来进行排序
SELECT * FROM USER WHERE NAME LIKE '%蔡%' ORDER BY search_count DESC LIMIT 0,5;
查询结果显示
3.模拟搜索页面
创建一个模拟得搜索页面
用于返回联想搜素数据时候得展示框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>用户搜索</title><style type="text/css">.content {width: 643px;margin: 100px auto;text-align: center;}input[type='text'] {width: 530px;height: 40px;font-size: 14px;}input[type='button'] {width: 100px;height: 46px;background: #5ffdff;border: 0;color: #fff;font-size: 15px}.show {position: absolute;width: 535px;height: 100px;border: 1px solid #1a0099;border-top: 0;display: none;}</style></head><body><form autocomplete="off"><div class="content"><img src="img/95P%60%5DF%5DI$1N(HG_O~S4T942.png" width="300"><br/><br/><input type="text" id="username"><input type="button" value="搜索一下"><div id="show" class="show"></div></div></form></body><script src="js/jquery-3.3.1.min.js"></script><script></script></html>
模拟界面效果
4.导入需要用到的JAR包和配置文件
注意jar包放在lib目录下 不能是libs目录
src下放相应得配置文件 三层架构中写相应得文件
bean层
dao层 直接访问数据库得代码 sql语句就是放在这里
service层 业务层
UserSerbice接口进行规范
UserSerbice接口得实现进行SqlSession对象得使用
package com.itheima.service.impl;import com.itheima.bean.User;import com.itheima.mapper.UserMapper;import com.itheima.service.UserService;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSession;import org.apache.ibatis.session.SqlSessionFactory;import org.apache.ibatis.session.SqlSessionFactoryBuilder;import java.io.IOException;import java.io.InputStream;import java.util.List;public class UserServiceImpl implements UserService {@Overridepublic List<User> selectLike(String username) {List<User> users = null;SqlSession sqlSession = null;InputStream is = null;try{//1.加载核心配置文件is = Resources.getResourceAsStream("MyBatisConfig.xml");//2.获取SqlSession工厂对象SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);//3.通过SqlSession工厂对象获取SqlSession对象sqlSession = sqlSessionFactory.openSession(true);//4.获取UserMapper接口的实现类对象UserMapper mapper = sqlSession.getMapper(UserMapper.class);//5.调用实现类对象的模糊查询方法users = mapper.selectLike(username);}catch (Exception e) {e.printStackTrace();}finally {//6.释放资源if(sqlSession != null) {sqlSession.close();}if(is != null) {try {is.close();} catch (IOException e) {e.printStackTrace();}}}//7.返回结果到控制层return users;}}
控制层接收数据然后调用业务层实现传递数据给服务器后得到服务器返回得数据转换成JSON响应给客户端
package com.itheima.controller;import com.fasterxml.jackson.databind.ObjectMapper;import com.itheima.bean.User;import com.itheima.service.UserService;import com.itheima.service.impl.UserServiceImpl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;@WebServlet("/userServlet")public class UserServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的编码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//1.获取请求参数String username = req.getParameter("username");//2.调用业务层的模糊查询方法得到数据UserService service = new UserServiceImpl();List<User> users = service.selectLike(username);//3.将数据转成JSON，响应到客户端ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(users);resp.getWriter().write(json);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}}
5.在网页为输入框绑定事件反馈给服务器
<script>//1.为用户名输入框绑定鼠标点击事件$("#username").mousedown(function () {//2.获取输入的用户名let username = $("#username").val();//3.判断用户名是否为空if(username == null || username == "") {//4.如果为空，将联想框隐藏$("#show").hide();return;}//5.如果不为空，发送AJAX请求。并将数据显示到联想框$.ajax({//请求的资源路径url:"userServlet",//请求参数data:{"username":username},//请求方式type:"POST",//响应数据形式dataType:"json",//请求成功后的回调函数success:function (data) {//将返回的数据显示到show的divlet names = "";for(let i = 0; i < data.length; i++) {names += "<div>"+data[i].name+"</div>";}$("#show").html(names);$("#show").show();}});});</script>
6最后运行Tomcat查看实际效果
可以看到当在输入框输入字符以后会根据字符显示出相应的联想搜索结果
