Web项目旅游网 day03 分页展示&搜索

一、旅游网综合案例——旅游线路的分页展示

1.1 分析:点击了不同的分类后,将来看到的旅游线路不一样的。通过分析数据库表结构,发现,旅游线路表和分类表是多对一的关系,一个分类下面有多个线路

 Web项目旅游网 day03 分页展示&搜索_第1张图片

1.2 在之前获取分类数据的时候也获取了分类的cid,可通过页面传递cid:

 

route_list.html中获取传递来的cid:

 Web项目旅游网 day03 分页展示&搜索_第2张图片

1.3 根据cid查询不同类别的旅游线路数据:

 Web项目旅游网 day03 分页展示&搜索_第3张图片

1.3.1 前端代码实现:

 Web项目旅游网 day03 分页展示&搜索_第4张图片

 Web项目旅游网 day03 分页展示&搜索_第5张图片

 Web项目旅游网 day03 分页展示&搜索_第6张图片

 Web项目旅游网 day03 分页展示&搜索_第7张图片

 Web项目旅游网 day03 分页展示&搜索_第8张图片

1.3.2 服务器端代码编写:

创建PageBean对象:

 Web项目旅游网 day03 分页展示&搜索_第9张图片

编写RouteServlet:

 Web项目旅游网 day03 分页展示&搜索_第10张图片

 Web项目旅游网 day03 分页展示&搜索_第11张图片

编写RouteService:

 Web项目旅游网 day03 分页展示&搜索_第12张图片

编写RouteDao:

 Web项目旅游网 day03 分页展示&搜索_第13张图片

二、旅游网综合案例——搜索功能实现

2.1 在搜索框输入的信息在前端的传递:

在header.html中:

 Web项目旅游网 day03 分页展示&搜索_第14张图片

在route_list.html中:

 Web项目旅游网 day03 分页展示&搜索_第15张图片

2.2 后台代码实现:

2.2.1 编写Servlet:

 Web项目旅游网 day03 分页展示&搜索_第16张图片

 Web项目旅游网 day03 分页展示&搜索_第17张图片

2.2.2 编写Service:

 Web项目旅游网 day03 分页展示&搜索_第18张图片

2.2.3 编写Dao:

 Web项目旅游网 day03 分页展示&搜索_第19张图片

 Web项目旅游网 day03 分页展示&搜索_第20张图片

2.3 前台代码实现:

 Web项目旅游网 day03 分页展示&搜索_第21张图片

 Web项目旅游网 day03 分页展示&搜索_第22张图片

 Web项目旅游网 day03 分页展示&搜索_第23张图片

 Web项目旅游网 day03 分页展示&搜索_第24张图片

 Web项目旅游网 day03 分页展示&搜索_第25张图片

你可能感兴趣的:(Web项目旅游网站开发,前端,javascript,开发语言,java,servlet)