一、项目概述
1、项目需求描述:
所谓关键字的联想查询,就是当我们在输入框中输入关键字,就能出现一些含有关键字的匹配项,可供我们参考与选择。
2、所需要的技术:
(1) 前端:html+css+javaScript+jQuery+ajax
(2) 后端:servlet+DBCP+Jackson+mybatis
(3) DB: mySql
3、所使用的工具:IDEA+sqlyog+tomcat
二、项目结构
三、环境搭建
根据上述所采用的结构,是一个比较基础的三层架构实现模式。
1、新建一个JavaEE项目:根据项目结构创建对应的目录。
2、所需的第三方jar包
3、mybatis核心配置文件的配置
(1) 引入日志配置文件和数据库连接配置文件
<!--引入数据库连接信息配置文件-->
<properties resource="config.properties"/>
<!--集成LOG4J日志信息-->
<settings>
<setting name="logImpl" value="log4j"/>
</settings>
(2)配置数据库环境,连接池环境
<!--配置数据库环境,可以有多个。default指定默认使用哪个-->
<environments default="mysql">
<!--数据源:连接池-->
<dataSource type="POOLED">
<!--获取数据库连接相关配置-->
<property name="driver" value="${driver}"/>
<property name="url" value="${url}"/>
<property name="username" value="${username}"/>
<property name="password" value="${password}"/>
</dataSource>
(3) 配置映射关系
<!--配置映射关系-->
<mappers>
<!--接口所在的包-->
<package name="com.ajax.dao"/>
</mappers>
四、项目实现
(一)前端页面
1、思路分析:
用户输入框绑定鼠标点击事件—>获取输入框输入的值—> 值的非空判断—>发送ajax请求—>处理响应数据–显示到网页
2、HTML结构
<form autocomplete="off">
<div class="content">
<img src="img/01.png">
<br/><br/>
<input type="text" id="username">
<input type="button" value="搜索一下">
<!--用于显示联想的数据-->
<div id="show" class="show"></div>
</div>
</form>
3、前端逻辑
<script>
//1.用户输入框绑定鼠标点击事件
$("#username").mousedown(function () {
//2.获取用户框输入的值
let username = $("#username").val();
//3.输入值非空判断
//3.1 如果为空,隐藏联想框,结束点击事件。
if(username==null||username==""){
$("#show").hide();
return;//此处是表明如果为空,就直接结束鼠标点击事件,不再去发送请求。
}
//3.2 不为空,准备请求数据,$.ajax发送请求,并回显数据到联想框,并显示联想框
let request={
url:"userServlet",data:{"username":username},type:"GET",dataType:"json",
// 请求成功后的回调函数
success:function (data) {//返回的结果去查看
//将返回的数据数组遍历,拼接
let names="";
for (let i=0;i<data.length;i++){
names+="<div>"+data[i].name+"</div>";//细节,字符串的拼接要看返回的数据
}
//遍历后的结果显示到show的div
$("#show").html(names);
$("#show").show();
}
};
//4.发送请求
$.ajax(request); });
</script>
(二)后端逻辑
1、思路分析:
(1) serlvet : 接收前端发送的数据,创建业务层对象,调用业务层方法,传递参数,响应返回的数据。
(2) service : 实现持久层接口方法,编写业务逻辑。
(3) dao : 定义接口,运用注解方法进行模糊查询sql语句编写。
2、控制器
@WebServlet("/userServlet")
public class userServlet extends HttpServlet {
//调用业务层
private UserService userService=new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.设置请求和响应的编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//2.获取请求发送的参数
String username = request.getParameter("username");
//3.调用业务层的模糊查询方法得到数据
List<User> users = userService.selectLike(username);
//4.将数据转成JSON,响应到客户端
//4.1 创建Jackson核心对象
ObjectMapper mapper = new ObjectMapper();
//4.2 转成json格式
String json = mapper.writeValueAsString(users);
//5.将json数据返回成前端回调函数
response.getWriter().write(json);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
3、业务层
//依赖于dao层
public class UserService implements UserDao {
@Override
public List<User> selectLike(String username) {
InputStream inputStream = null;
List<User> users = null;
SqlSession sqlSession = null;
try {
//1.加载核心配置文件
inputStream = Resources.getResourceAsStream("MyBatisConfig.xml");
//2.获取SqlSession工厂对象
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//3.获取sqlsession
sqlSession = sqlSessionFactory.openSession(true);
//4.获取UserDao接口的实现类对象
UserDao mapper = sqlSession.getMapper(UserDao.class);
//5.调用实现类对象的模糊查询方法
users = mapper.selectLike(username);
} catch (IOException e) {
e.printStackTrace();
} finally {
if (sqlSession != null) {
sqlSession.close();
}
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return users;
}
}
4、持久层
//CRUD接口
public interface UserDao {
//模糊查询
@Select("SELECT * FROM user WHERE name LIKE CONCAT('%',#{username},'%')")
List<User> selectLike(String username);
}
(三)DB数据
五、项目总结
1、分析项目需求后,要想到采用哪些技术去实现,采用什么项目结构,环境如何搭建,需要哪些配置文件,哪些第三方jar包
2、此项目在配置文件阶段,应用到了mabatis框架,采用注解开发的形式,核心配置文件中有几个额外注意的点:
(1) 数据库连接配置文件编写的是连接数据库的相关信息,就和去登录程序页面要正确输入用户名和密码一样,才能连接数据库。
(2) 日志配置文件不是必须,但有了他,能在后端帮助我们了解详细的操作信息,有利于bug的处理。
(3) 因为采用注解开发和动态代理,所以:配置映射关系时,是引入的“dao层接口所在的全限定包名”。
3、项目后端实现:
(1) bean目录: 实体类的成员变量与数据库查询的要表字段名是有对象映射关系的。
(2) dao 目录:CRUD的操作接口,直接和数据库打交道。
(3) service目录:持久层接口的业务逻辑实现,这里面有2个点:<1>使用了“动态代理”技术获取持久层接口的实现类对象,由此对象去操作CRUD方法;<2> 加载核心配置文件,采用的是阿帕奇的第三方jar包中的方法,有异常要捕获。
(4) servlet目录:接收前端数据,创建业务层对象,调用业务层方法,传递前端获取的参数;在响应数据前,有个技术点:json字符串和java不同对象的转换,将查询的数据对象转为json字符串响应给前端。
4、web目录:主要是HTML页面的编辑,以及脚本逻辑编写;存放所有需要的jar包及媒体文件。
5、Tomcat服务器:tomcat应该在新建项目后,就应该立即配置好。
6、mySQL数据库: 借助于他的图形客户端SQLyog,建表插入一些查询所需的数据。
7、前端页面中的细节处理:
(1) 获取值非空判断:关键在于如果不去判断null或“”并且结束点击事件方法,那么当我们点击鼠标事件后,我们传递输入的值为null或’’,传递到后端是没有意义的,同时也要立即结束这个事件。当我们真正输入非空值时,就可以去发送请求,回显数据到页面。
(2) 回调函数返回数据的查看:通常在发送数据格式的时候,已经设置为json格式,那么经过后台处理后返回的数据结构或包含哪些内容就是我们要去看的。
(3) 回调函数返回数据的拼接:拼接数据一看 拼接字符是怎么展示的,二看采用:“传统的字符串拼接”还是“反引号拼接”。
(4) 回调函数返回数据的回显:经过遍历,拼接等处理后的数据如何显示到页面上。
8、ajax异步和后端的交互实现过程分析