1. 完成页面中图书板块的展示（按图书编号的倒序，取5条数据）；

package cn.edu.jxnu.web.front;import cn.edu.jxnu.domain.ProductDomain;import cn.edu.jxnu.service.impl.ImplProductService;import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.util.List;@WebServlet(name = "QueryProductIdServlet", value = "/frontend/getid.do")public class QueryProductIdServelt extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {HashMap<String,Object> model=new HashMap<String,Object>();resp.setContentType("application/json;charset=utf-8");PrintWriter out=resp.getWriter();ImplProductService productService=new ImplProductService();//图书编号List<ProductDomain> typeId=null;try {typeId=productService.queryProductOrderID(0,5);model.put("success",true);model.put("typeList",typeId);} catch (Exception e) {e.printStackTrace();model.put("success",false);}ObjectMapper objectMapper=new ObjectMapper();out.println(objectMapper.writeValueAsString(model));}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}}

2.完成页面中图书类别的展示（取图书类别表中所有的数据）。

package cn.edu.jxnu.web.front;import cn.edu.jxnu.domain.ProductTypeDomain;import cn.edu.jxnu.service.ProductTypeService;import cn.edu.jxnu.service.impl.ImplProductTypeService;import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.*;import javax.servlet.http.*;import javax.servlet.annotation.*;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.util.List;@WebServlet(name = "QueryProductTypeServlet", value = "/frontend/gettype.do")public class QueryProductTypeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {HashMap<String,Object> model=new HashMap<String,Object>();response.setContentType("application/json;charset=utf-8");PrintWriter out=response.getWriter();ProductTypeService productTypeService=new ImplProductTypeService();//图书类型List<ProductTypeDomain> typeList=null;try {typeList=productTypeService.queryProductType();model.put("success",true);model.put("typeList",typeList);} catch (Exception e) {e.printStackTrace();model.put("success",false);}ObjectMapper objectMapper=new ObjectMapper();out.println(objectMapper.writeValueAsString(model));}}

Js

$(function () {//定义访问后台，获取图书列表以及图书类别列表的URLvar url = '/frontend/getid.do';var typeurl='/frontend/gettype.do'//访问后台，获取编号后五的五本图书条列表$.getJSON(url,function (data){if (data.success) {//获取后台传递过来的图书列表var recomList = data.typeList;var swiperHtml = '';//遍历图书列表，$.map(recomList, function (item, index) {swiperHtml += ' <li class="row recom-1" style="margin-top:5px;margin-bottom:5px;display:block;height:242px;background-color:#f8f8f8" id="recom_product">\n' +'<div class="col-md-3"  style="line-height:242px;">\n' +'\t\t\t<a href="..' + item.bookImage + '" target="_blank" alt="点击看大图" class="img-thumbnail"><img src="..' + item.bookImage + '" class="imgBook"/></a>\n' +'</div>\n' +'<div class="col-md-9" style="">\t\n' +'           <div class="row">\t\t\n' +'\t\t\t<ul>\n' +'\t\t\t   <li><span style="font-weight:bold;font-size:14px;line-height:24px;">' + item.bookName + '</span>\n' +'\t\t\t   <li><span class="search_now_price">' + item.discount + '</span><span class="search_pre_price">' + item.price + '</span>\n' +'   \n' +'\t\t\t   <li><span style="color:blue">'+item.bookAuthor+'</span><span style="color:blue">'+'</span>\n' +'\t\t\t   <span style="color:blue">'+item.bookPublishTime+'</span>\n' +'\t\t\t   <li>ISBN：<span style="color:blue">'+item.bookIsbn+'</span>\n' +'\t\t\t   <li>\t\t<p style="height:60px;overflow:hidden">'+ item.bookIntroduction+'               \n' +'\t\t\t</ul>\n' +'\t\t\t</div>\n' +'\t\t\t<div class="row" style="">\n' +'\t\t\t\t<button type="button" class="btn btn-primary">收藏<tton>\n' +'\t\t\t\t<button type="button" class="btn btn-success">加入购物车<tton>\n' +'\t\t\t\t<button type="button" class="btn btn-danger">一键购买<tton>\n' +'\t\t\t </div>\n' +'</div>\n';});//将图书列表赋值给前端HTML控件$('#recom_product').html(swiperHtml);}})$.getJSON(typeurl,function (data){if(data.success){var recomtype = data.typeList;var typeHtml = '';$.map(recomtype,function (item,index){typeHtml +='<a href="#" class="list-group-item" id="type">'+item.bookTypeName+'</a>';})$('#type').html(typeHtml);}})});