“21天好习惯”第一期－9

最新推荐文章于 2024-06-12 10:16:35 发布

xzyYYDS

最新推荐文章于 2024-06-12 10:16:35 发布

阅读量78

点赞数

分类专栏： Java入门案例实操文章标签： jquery 前端 ajax

本文链接：https://blog.csdn.net/xzyYYDS/article/details/121070358

版权

Java入门案例实操专栏收录该内容

22 篇文章 1 订阅

订阅专栏

完结篇

实验目的：掌握前后端分离技术，熟练掌握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&nbsp; | Privacy Notice
        | Terms of Use </p></div>
</footer>
</body>
</html>

xzyYYDS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“21天好习惯”第一期－9

完结篇实验目的：掌握前后端分离技术，熟练掌握jQuery中Ajax技术，并能使用jQuery技术实现对前端数据的渲染。实验要求：1）完成页面中图书板块的展示（按图书编号的倒序，取5条数据）；2）完成页面中图书类别的展示（取图书类别表中所有的数据）。QueryProductCountServletpackage cn.edu.jxnu.web.front;import java.io.IOException;import java.io.PrintWriter;...
复制链接

扫一扫