在输入一个字以后就会出现联想的关联对象
1.要有一个数据库存储有相关数据
2.搜索框在接受到数据时候能够向后端发送数据并且将数据反馈在客户端
3.这是一个异步的操作
创建好数据库了就该构建一个相互交互系统
在Mysql中输入查询语句查询，进行模糊查询 显示条数为5条，通过search_count来进行排序
SELECT * FROM USER WHERE NAME LIKE '%蔡%' ORDER BY search_count DESC LIMIT 0,5;查询结果显示
创建一个模拟得搜索页面
用于返回联想搜素数据时候得展示框 <!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>模拟界面效果
注意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 { @Override public 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 { @Override protected 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); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } }可以看到当在输入框输入字符以后会根据字符显示出相应的联想搜索结果
