本文共 2278 字,大约阅读时间需要 7 分钟。
前面一篇实现了前端图书列表的分页操作,可以点击上一页和下一页,这个我们实现每个页面显示4本书,实际开发中,一般设置20条记录或者40条记录,这个实现原理是一样的。这篇来学习,在前端页面点击这本书的名称/图片,直接进入这本书的详情页。
1.需求场景
点击图书图片或者图书名称,可以进入到图书的商品详情页。在案例素材资料中,有一个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找打这个前端给的文件代码:
3.2 给product_list.jsp中图书点击添加跳转
找到product_list.jsp中图书名称和价格这块前端代码,修改如下
然后访问 找一本书,鼠标悬停图书图片看看链接效果是不是下图的红框区域。
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约束规范代码,以下是关键代码
${book.name}
售价:¥:${book.price}元
类别:${book.category}
内容简介:
${book.description}
重启tomcat,刷新页面,看看图书详情页效果。
图书详情页的代码实现过程就到这里,相关代码请看github,地址
commit id 信息:af8e7433f272748c393988b2552a02335d7f732e 图书详情页完成
转载地址:http://ajows.baihongyu.com/