文章目錄

1、詳情功能---界面展示

2、詳情功能--后臺代碼

RouteServiceTest

擴展Route實體類

Seller.java

RouteImg.java

RouteService

查找路線數據RouteDao.java

查分類CategoryDao.java

查詢商家數據SellerDao.java

查找圖片RouteImgDao.java

RouteDetailServlet

Mybatis中掃描映射文件

3、詳情功能--前臺代碼

route_detail.jsp頁面

1、詳情功能—界面展示

2、詳情功能–后臺代碼

RouteServiceTest

@Test

public void test03() throws JsonProcessingException {

//業務，根據 路線的rid查找 路線的數據，商家的數據，分類的數據，收藏的數據

RouteService routeService = new RouteService();

int rid = 1;

Route route = routeService.findRouteById(rid);

System.out.println(route);

}

需要返回的route對象內部包含 路線的數據，商家的數據，分類的數據，圖片的數據

擴展Route實體類

//分類數據

private Category category;

//商家數據

private Seller seller;

//圖片數據

private List imgList;

Seller.java

public class Seller {

private int sid;//商家id

private String sname;//商家名稱

private String consphone;//商家電話

private String address;//商家地址

}

RouteImg.java

public class RouteImg {

private int rgid;//商品圖片id

private int rid;//旅游商品id

private String bigPic;//詳情商品大圖

private String smallPic;//詳情商品小圖

}

RouteService

(1)通過分析，數據來自四個表，所以可以考慮2，或者3查詢方案

(2)使用Mybatis其實核心 是開發者的sql能力。

# rid =1

# 路線表 tab_route

# 商家表 tab_seller

# 圖片表 tab_route_img

# 分類表 tab_category

select * from tab_route r where r.rid =1 ;

select *

from tab_route r,tab_seller s

where r.rid =1

and r.sid=s.sid ;

# 方式1：內連接查詢的話，因為出現重復的數據，放棄

select *

from tab_route r,tab_seller s,tab_route_img i

where r.rid =1

and r.sid=s.sid

and r.rid = i.rid;

# 方式2：內連接查詢的話，必須一對一

# 一個路線屬于一個商家, 一個路線屬于一個分類

# 一個路線可以包含多個圖片

select *

from tab_route r,tab_seller s,tab_category c

where r.rid =1

and r.sid=s.sid

and r.cid = c.cid;

# 還差圖片數據

select * from tab_route_img i where i.rid=1;

#方式3： 詳情數據來自四個表，拆成四個查詢語句

select * from tab_route r where r.rid = 1; #路線

select * from tab_seller s where s.sid = 1; #商家數據

select * from tab_route_img i where i.rid=1;#圖片數據

select * from tab_category c where c.cid =1;#分類數據

public Route findRouteById(int rid) {

//數據來自四個表，執行四個查找方法

//路線數據

RouteDao routeDao = MySessionUtils2.getMapper(RouteDao.class);

Route route =routeDao.findOneByRid(rid);

//分類數據

CategoryDao categoryDao = MySessionUtils2.getMapper(CategoryDao.class);

Category category = categoryDao.findOneByCid(route.getCid());

//設置給route對象

route.setCategory(category);

//商家數據

SellerDao sellerDao = MySessionUtils2.getMapper(SellerDao.class);

Seller seller = sellerDao.findOneBySid(route.getSid());

//設置給route對象

route.setSeller(seller);

//圖片數據 XxxxDao

RouteImgDao routeImgDao = MySessionUtils2.getMapper(RouteImgDao.class);

List list= routeImgDao.findAllImgByRid(route.getRid());

route.setImgList(list);

return route;

}

查找路線數據RouteDao.java

//select * from tab_route r where r.rid = 1;

Route findOneByRid(int rid);

select * from tab_route r where r.rid =#{rid};

查分類CategoryDao.java

//select * from tab_category c where c.cid =1;

Category findOneByCid(int cid);

select * from tab_category c where c.cid =#{cid}

查詢商家數據SellerDao.java

public interface SellerDao {

//select * from tab_seller s where s.sid = 1;

Seller findOneBySid(int sid) ;

}

select * from tab_seller s where s.sid =#{sid};

查找圖片RouteImgDao.java

public interface RouteImgDao {

//select * from tab_route_img i where i.rid=1;

List findAllImgByRid(int rid);

}

RouteDetailServlet

@WebServlet("/routedetail/*")

public class RouteDetailServlet extends BaseServlet {

// /routedetail/find

public void find(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//1 接收請求，獲取參數

//業務，根據 路線的rid查找 路線的數據，商家的數據，分類的數據，圖片的數據

String ridStr = request.getParameter("rid");

int rid = 1; //"1"

try {

rid = Integer.parseInt(ridStr);

} catch (NumberFormatException e) { //Ctrl+Alt+T

e.printStackTrace();

}

//2 處理參數

RouteService routeService = new RouteService();

Route route = routeService.findRouteById(rid);

//3 響應瀏覽器

String json = toJson(200,route);

response.getWriter().println(json);

}

}

Mybatis中掃描映射文件

3、詳情功能–前臺代碼

route_detail.jsp頁面

查看詳情連接添加rid

查看詳情

\n

route_detail.jsp頁面

將 route_detail.html轉 route_detail.jsp

獲取上個頁面傳過來的rid

使用rid發送請求獲取json

先顯示詳情頁面的所有文字

再使用循環拼接詳情頁的圖片

路線詳情

$(function () {

///route_detail.jsp?rid=3

var rid = getParameter("rid")

// 當前頁面需要取得 由【查看詳情】傳過來的rid

$.get('routedetail/find?rid=' + rid, function (data) {

// 發請求 給 routedetail/find?rid=3 可以獲取rid對應的json數據

if (200 == data.code) {

//console.log(data.data)

var route = data.data;

// 并json數據的值 賦給當前的標簽 html() $(id)

$("#category").html(route.category.cname)

$("#rname").html(route.rname)

$("#title").html(route.rname)

$("#introduce").html(route.routeIntroduce)

$("#sname").html('商家名稱:' + route.seller.sname)

$("#consphone").html('商家電話' + route.seller.consphone)

$("#address").html('地址' + route.seller.address)

$("#price").html(route.price)

//圖片

//左側一張大圖

$('#big_img').attr('src', route.rimage)

//右側多張小圖 前四張可見，第五張起，需要點擊才可見

var alist = '';

//向上的箭頭

alist += ''

var list = route.imgList

for (var i = 0; i < list.length; i++) {

var routeImg = list[i]

//

var a = ''

if(i<4){ //前四張

a = '\n' +

' \n' +

' '

}else{

a = '\n' +

' \n' +

' '

}

alist+=a //將多個a標簽拼接

}

//向下的箭頭

alist += ''

$('#small_imgs').html(alist)

//給小圖添加事件

clickImgs()

}

}, "json")

})

總結

以上是生活随笔為你收集整理的Java旅游项目线路收藏_基于JavaWeb的旅游项目--详情功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。