完结篇
实验目的:掌握前后端分离技术,熟练掌握jQuery中Ajax技术,并能使用jQuery技术实现对前端数据的渲染。
实验要求:
1)完成页面中图书板块的展示(按图书编号的倒序,取5条数据);
2)完成页面中图书类别的展示(取图书类别表中所有的数据)。
QueryProductCountServlet
package cn.edu.jxnu.web.front; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; 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 com.fasterxml.jackson.databind.ObjectMapper; import cn.edu.jxnu.service.ProductService; import cn.edu.jxnu.service.impl.ImplProductService; /** * Servlet implementation class QueryProductCountServlet */ @WebServlet(name = "QueryProductCountServlet",value = "frontend/ProductCount.do") public class QueryProductCountServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public QueryProductCountServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub HashMap<String,Object> model=new HashMap<String,Object>(); ProductService productService=new ImplProductService(); Integer cut; response.setContentType("application/json;charset=utf-8"); PrintWriter writer = response.getWriter(); try { cut =productService.queryProcductCount(); model.put("success", true); model.put("cut", cut); }catch (Exception e) { // TODO: handle exception e.printStackTrace(); model.put("success", false); } ObjectMapper objectMapper = new ObjectMapper(); writer.print(objectMapper.writeValueAsString(model)); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
QueryProductTypeServlet
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 { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } @Override protected 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)); } }
RecomProductServlet
package cn.edu.jxnu.web.front; import cn.edu.jxnu.domain.ProductDomain; import cn.edu.jxnu.service.ProductService; import cn.edu.jxnu.service.impl.ImplProductService; 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 = "RecomProductServlet", value = "/frontend/recom.do") public class RecomProductServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } @Override protected 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(); ProductService productService=new ImplProductService(); //本周推荐 List<ProductDomain> recomList=null; try { recomList= productService.queryProductOrderSaleNum(0,4); model.put("success",true); model.put("recomList",recomList); } catch (Exception e) { e.printStackTrace(); model.put("success",false); } ObjectMapper objectMapper=new ObjectMapper(); out.println(objectMapper.writeValueAsString(model)); } }
index.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link href="css/carousel.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="js/jquery-3.6.0.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="js/bootstrap.min.js"></script> <style> #footer-1 { clear: both; height: 53px; margin: 0; background: transparent url('../frontimages/footer-background.png') repeat-x; text-indent: 0px; text-align: center; } #footer-1 p { margin: 0px; } #footer-1 a { color: white; } #footer-1 .p1 { line-height: 29px; /*border: 1px solid blue;*/ } #footer-1 .p2 { /*border: 1px solid red;*/ line-height: 30px; background-image: url('../frontimages/footer-background-2.png'); background-repeat: no-repeat; width: 760px; margin: 0 auto; background-position: 60px top; color: #888; } .recommendation { padding-top: 20px; padding-bottom: 5px; padding-left: 5px; margin-top: 0px; color: #069; border-bottom: 1px #DEAF50 solid; font: bold 16px/18px "微软雅黑 Light"; } .recom-1 { border: 1px solid #bce8f1; margin-left: 5px; } .search_pre_price { color: #969696; text-decoration: line-through; font-size: 12px; font-weight: normal; font-family: arial, 'Hiragino Sans GB', "Simsun"; } .search_now_price { font-family: arial, 'Hiragino Sans GB', "Simsun"; color: #fa5000; font-size: 14px; overflow: hidden; font-weight: bold; margin-right: 10px; } </style> </head> <body> <header id="header" class="container-fluid"> <div class="row"><img src="frontimages/top-banner.jpg" class="img-responsive"/></div> <div class="row" style="margin-top: 5px;"> <div class="col-md-3"> <img src="frontimages/h1.png" class="img-responsive" style="margin-top: 10px;margin-bottom: 10px;width: 110px;height: 20px;"/> </div> <div class="col-md-6" style="line-height: 20px;margin-top: 10px;margin-bottom: 10px;"> <input type="text" class="form-control" style="width:400px;float:left;" placeholder="请输入关键字"> <button href="#" class="btn btn-lg btn-link" style="font-size: 14px;height: 35px;">搜索</button> </div> <div class="col-md-3"> <!-- Collect the nav links, forms, and other content for toggling --> <ul class="nav navbar-nav"> <li><a href="#"><span>帮助中心</span></a></li> <li><a href="#"><span>帐号</span></a></li> <li><a href="#"><span>购物车</span></a></li> </ul> </div> </div> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="first-slide" src="frontimages/carousel/nav1.jpg" alt="First slide"> </div> <div class="item"> <img class="first-slide" src="frontimages/carousel/nav2.jpg" alt="Second slide"> </div> <div class="item"> <img class="first-slide" src="frontimages/carousel/nav3.jpg" alt="Third slide"> </div> <div class="item"> <img class="first-slide" src="frontimages/carousel/nav4.jpg" alt="Forth slide"> </div> <div class="item"> <img class="first-slide" src="frontimages/carousel/nav5.jpg" alt="Fifth slide"> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div><!-- /.carousel --> <nav class="navbar navbar-default" style="border-bottom:1px solid #9e2b"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">CSS网上书城</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li> <li><a href="#">新书推荐</a></li> <li><a href="#">我的书城</a></li> <li><a href="#">图书信息</a></li> <li><a href="#">畅销排行</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header> <div class="container"> <div class="row" style="margin-top: 5px;"> <div class="col-md-3" > <div class="list-group" id="productTypeList"> <a href="#" class="list-group-item active" style="background-color:#3c763d;"> 图书分类 </a> <a href="#" class="list-group-item">计算机</a> <a href="#" class="list-group-item">文学</a> <a href="#" class="list-group-item">数学</a> <a href="#" class="list-group-item">儿童文学</a> </div> </div><!-- /.col-sm-4 --> <div class="col-md-9" > <div class="row recommendation"> <span>本周推荐</span> </div> <div class="row" style="margin-top: 5px;"> <div class="col-sm-4 col-md-3"> <div class="thumbnail"> <a href="#"><img src="bookImages/b1.jpg" class="img-responsive img-thumbnail" alt="..." style="height: 150px;width:150px;"/></a> <div class="caption"> <h5><a href="#">走近钱学森</a></h5> <p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis"> 钱学森博士是小国火箭、导弹、航天事业的拓荒者和奠基人。......</p> <p><span class="search_now_price">¥34.00</span><span class="search_pre_price">¥68.00</span> </p> </div> </div> </div> <div class="col-sm-4 col-md-3"> <div class="thumbnail"> <a href="#"><img src="bookImages/663765803-1_b_1.jpg" class="img-responsive img-thumbnail" alt="..." style="height: 150px;width:150px;"/></a> <div class="caption"> <h5><a href="#">导弹之父钱学森</a></h5> <p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis"> 钱学森是中国科学界的一位传奇人物,是中国火箭、导弹、航天事业的开拓者和奠基人。......</p> <p><span class="search_now_price">¥34.00</span><span class="search_pre_price">¥68.00</span> </p> </div> </div> </div> <div class="col-sm-4 col-md-3"> <div class="thumbnail"> <a href="#"><img src="bookImages/23254497-1_f_2.jpg" class="img-responsive img-thumbnail" alt="..." style="height: 150px;width:150px;"/></a> <div class="caption"> <h5><a href="#">昆虫记</a></h5> <p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis"> 从远古的回顾到今天的眺望,如果只选择停留在原点 ,便永远望不见地平线另一端的模样。</p> <p><span class="search_now_price">¥44.00</span><span class="search_pre_price">¥88.00</span> </p> </div> </div> </div> <div class="col-sm-4 col-md-3"> <div class="thumbnail"> <a href="#"><img src="bookImages/25320480-1_b_12.jpg" class="img-responsive img-thumbnail" alt="..." style="height: 150px;width:150px;"/></a> <div class="caption"> <h5><a href="#">时空简史</a></h5> <p style="max-height: 40px;line-height:20px; overflow: hidden;text-overflow: ellipsis"> 这不仅是一部动人心魄的科普佳作,更是一部叙事宏大的科学哲学著作。</p> <p><span class="search_now_price">¥44.00</span><span class="search_pre_price">¥88.00</span> </p> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="row recommendation"> <span>新书上架</span> </div> <div class="row"> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> </div> </div> <div class="row" > <div class="row recommendation"> <span>猜你喜欢</span> </div> <div class="row"> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> <div class="col-sm-3 col-md-2"> <div class="thumbnail"> <a href="#"><img src="bookImages/b2.jpg" class="img-responsive img-thumbnail " alt="..." style="width:150px;height:150px;"/></a> <div class="caption"> <h5><a href="#">红与黑</a></h5> <p><span class="search_now_price">¥19.70</span><span class="search_pre_price">¥42.00</span></p> </div> </div> </div> </div> </div> </div> <footer class="container-fluid" id="footer-1"> <div class="row"><p class="p1"><a href="#">首页</a> | <a href="#">新书推荐</a> | <a href="#">我的书城</a> | <a href="#">图书信息</a>| <a href="#">畅销排行</a></p> </div> <div class="row"><p class="p2">版权属于前沿科技 artech.cn, Copyright © 2021 | Privacy Notice | Terms of Use </p></div> </footer> </body> </html>