JavaWeb学习-案例练习-图书管理前台-10- 图书详情页的实现

缺乏、安全感 2021-11-29 11:10 301阅读 0赞

前面一篇实现了前端图书列表的分页操作，可以点击上一页和下一页，这个我们实现每个页面显示4本书，实际开发中，一般设置20条记录或者40条记录，这个实现原理是一样的。这篇来学习，在前端页面点击这本书的名称/图片，直接进入这本书的详情页。

**1.需求场景**

![20190721224046221.png][]

点击图书图片或者图书名称，可以进入到图书的商品详情页。在案例素材资料中，有一个product\_info.jsp就是这个图书详情页的前端效果。

**2.需求分析**

点击这个图片或者名称，我们需要在product\_list.jsp找到tr这个，给添加一个链接跳转，肯定不能直接跳转到product\_info.jsp, 而是先跳转到一个servlet上。这个servlet需要把book的id给传进去。前面我们在后台页面编辑图书的并回显的时候，我们写过通过id查找图书，所以Dao层和Service层我们可以复用，只需要创建一个新的servlet就可以。

**3.代码实现**

3.1 先从案例素材把product\_info.jsp给拷贝过来

在github找打这个前端给的文件代码：[https://github.com/Anthonyliu86/BookManagement\_JavawebDemo/commit/52a9b2bfbbab47dc5481e1485edf732beb496037][https_github.com_Anthonyliu86_BookManagement_JavawebDemo_commit_52a9b2bfbbab47dc5481e1485edf732beb496037]

3.2 给product\_list.jsp中图书点击添加跳转

找到product\_list.jsp中图书名称和价格这块前端代码，修改如下

<td>
    											<div class="divbookpic">
    												<p>
    													<a href="${pageContext.request.contextPath}/findBookInofServlet?id=${b.id}"><img src="" width="115" height="129"
    														border="0" /> </a>
    												</p>
    											</div>
    
    											<div class="divlisttitle">
    												<a href="${pageContext.request.contextPath}/findBookInofServlet?id=${b.id}">书名:${b.name}<br />售价:${b.price} </a>
    											</div>
    										</td>

然后访问[http://localhost:8080/BookManagement/pageServlet][http_localhost_8080_BookManagement_pageServlet]找一本书，鼠标悬停图书图片看看链接效果是不是下图的红框区域。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70][]

3.3 新建一个servlet

例如在web.servlet包下新建一个FindBookInfoServlet.java的servlet文件，由于我们Dao层和Service层，已经有可用的代码，所以，我们直接来写servlet的代码

package com.anthony.web.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.anthony.domain.Book;
    import com.anthony.service.BookService;
    import com.anthony.service.BookServiceImpl;
    
    
    public class FindBookInfoServlet extends HttpServlet {
    	
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		request.setCharacterEncoding("UTF-8");
    		//先从请求url上获取key为id的值，也就是图书的id
    		String id = request.getParameter("id");
    		//根据id查询这本书，返回这本书
    		BookService bs = new BookServiceImpl();
    		Book  book = bs.findBookById(id);
    		
    		//处理跳转，先把这本书设置成request的属性
    		request.setAttribute("book", book);
    		request.getRequestDispatcher("/product_info.jsp").forward(request, response);
    	}
    
    	
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }

3.4 在product\_info.jsp页面解析图书数据

接下来，就是在product\_info.jsp页面获取reuqest域对象中book这个属性，然后把book.id book.name等信息解析到前端对应代码上。首先，需要在文件开头添加一行jstl约束规范代码，以下是关键代码

<td style="padding:20px 5px 5px 5px"><img
    											src="images/miniicon3.gif" width="16" height="13" /><font
    											class="bookname">  ${book.name}</font>
    
    											<hr />售价：<font color="#FF0000">￥:${book.price}元</font>
    											<hr /> 类别：${book.category}
    
    											<hr />
    											<p>
    												<b>内容简介：</b>
    											</p>${book.description}</td>

重启tomcat,刷新页面，看看图书详情页效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1][]

图书详情页的代码实现过程就到这里，相关代码请看github，地址

[https://github.com/Anthonyliu86/BookManagement\_JavawebDemo.git][https_github.com_Anthonyliu86_BookManagement_JavawebDemo.git]

commit id 信息：af8e7433f272748c393988b2552a02335d7f732e 图书详情页完成

[20190721224046221.png]: /images/20211129/00bd22a135ad4941ba34ef8d8e51a762.png
[https_github.com_Anthonyliu86_BookManagement_JavawebDemo_commit_52a9b2bfbbab47dc5481e1485edf732beb496037]: https://github.com/Anthonyliu86/BookManagement_JavawebDemo/commit/52a9b2bfbbab47dc5481e1485edf732beb496037
[http_localhost_8080_BookManagement_pageServlet]: http://localhost:8080/BookManagement/pageServlet
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70]: /images/20211129/724a60804f814f6281355eeedf5e1c6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1]: /images/20211129/d7e09a86966849adb4e373088da6ac68.png
[https_github.com_Anthonyliu86_BookManagement_JavawebDemo.git]: https://github.com/Anthonyliu86/BookManagement_JavawebDemo.git