大项目之网上书城(三)——主页(中)
程序员文章站
2022-06-29 08:11:11
设计这个勉强看得过去的颜色,填充之前的主页,按照之前的思路,左边是图书分类,中间一个轮播图,然后右边是一个文案广告,加一个热销书推荐,下面是新书推荐,然后下面的右面是新书排行榜。因为我打算把网页弄成动态的,于是热销书推荐,新书推荐,新书排行榜,都要是通过js+servlet来从数据库获取最新数据,写... ......
目录
大项目之网上书城(三)——主页(中)
尽量日更,我发现我还要写的东西有好多啊。
主要改动
设计这个勉强看得过去的颜色,填充之前的主页,按照之前的思路,左边是图书分类,中间一个轮播图,然后右边是一个文案广告,加一个热销书推荐,下面是新书推荐,然后下面的右面是新书排行榜。因为我打算把网页弄成动态的,于是热销书推荐,新书推荐,新书排行榜,都要是通过js+servlet来从数据库获取最新数据,写起来会非常麻烦啊。(以及我还没有数据库,我还没有dao,没有bookbean,没有service,于是测试起来超麻烦啊。就只给热销书推荐写了个简单的测试。新书推荐因为涉及到图片,我不太了解,还在发展科技树,真的很艰巨啊。再加上我意识到我要设计一下通用的图书详情页面,我要增加个超级用户。超级用户要可以修改数据库,啊,真的好难啊。任重而道远。)
1.主页持续施工中
代码
真实任重而道远,这里同样加了bootstrap的代码,用来显示按钮。。
<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%> <!doctype html> <html> <head> <style> li{ float:left; width:100%; height:10%; font-size:16px; color:#8deeee; } </style> <script type="text/javascript" src="${pagecontext.request.contextpath}/jquery-3.3.1/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="${pagecontext.request.contextpath}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="${pagecontext.request.contextpath}/client/js/index.js"></script> <title>主页</title> </head> <body style="background-color:#bbb"> <!-- 调用头部页面 --> <div style="width:100%;height:100px;float:left"> <jsp:include page="/client/head.jsp"></jsp:include> </div> <!-- 通用内容体大小 --> <div style="width:70%;height:886px;float:left;margin-left:15%;"> <!-- 二级导航 --> <jsp:include page="/client/head2.jsp"></jsp:include> <!-- 图书分类and轮播图and文案and热门推荐and新书上架and新书榜 --> <div style="width:100%;height:800px;float:left;margin-top:2%;background-color:#bbb;"> <!-- 图书分类 --> <div style="width:23%;height:100%;float:left;background-color:#a8f;"> <div style="width:100%;height:6%;text-align:center;line-height:45px;background-color:#556b2f"> <font color="#ddd" style="font-size:20px;">图书分类</font> </div> <div style="width:100%;height:94%;text-align:center;line-height:45px;background-color:#548b54"> <ul style="width:100%;height:100%;text-align:left;"> <li> <a href="${pagecontext.request.contextpath }/client/pai/index.jsp">好书拍卖</a> </li> <li> <a href="${pagecontext.request.contextpath }/client/net_literature/index.jsp">网络文学</a> </li> <li> <a href="${pagecontext.request.contextpath }/client/clothing/index.jsp">服装</a> </li> <li> <a href="${pagecontext.request.contextpath }/client/sport/index.jsp">运动户外</a> </li> <li> <a href="${pagecontext.request.contextpath }/client/nursery/index.jsp">孕婴童</a> </li> <li> <a href="${pagecontext.request.contextpath }/client/nursery/index.jsp">孕婴童</a> </li> <li> <a href="${pagecontext.request.contextpath }/client/food/index.jsp">食品</a> </li> <li> <a href="#">暂无分类</a> </li> <li> <a href="#">暂无分类</a> </li> <li> <a href="#">暂无分类</a> </li> </ul> </div> </div> <!-- 轮播图 --> <div style="width:50%;height:35%;float:left;margin-left:2%;background-size:100% 100%;"id="lun"> <!-- table按钮沉底大法! --> <table style="width:100%;height:100%"> <tr> <td style="vertical-align:bottom;"> <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:60%;" id="l1">1</button> <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l2">2</button> <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l3">3</button> <button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l4">4</button> </td> </tr> </table> </div> <!-- 文案and热门推荐 --> <div style="width:23%;height:35%;float:left;background-color:#bbb;margin-left:2%"> <!-- 文案 --> <div style="width:100%;height:30%;float:left;background-color:#548b54;"> <font style="font-size:20px;text-align:center;display:block;width:100%;color:#ee4000">618年中狂欢</font> <font style="display:block;color:#eead0e">十万童书,每满100减50</font> <font style="display:block;color:#eead0e">艺术绘画,每满100减50</font> </div> <!-- 热门推荐 --> <div style="width:100%;height:64%;float:left;background-color:#a8f;margin-top:8%"> <div style="width:100%;height:25%;text-align:center;line-height:45px;background-color:#556b2f"> <font color="#ddd" style="font-size:20px;">热门推荐</font> </div> <div style="width:100%;height:75%;text-align:center;line-height:45px;background-color:#548b54;margin-top:-5%;"> <ul> <li id="a1" style="text-align:left;color:black"></li> <li id="a2" style="text-align:left;color:black"></li> </ul> <div style="width:100%;height:20%;float:left;margin-top:5%"> <button class="btn btn-info" style="float:left;margin-left:20%;font-size:8px;"id="b1">1</button> <button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b2">2</button> <button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b3">3</button> <button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b4">4</button> </div> </div> </div> </div> <!-- 新书上架 --> <div style="width:50%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;"id="xinshu"> <table border="1"style="width:100%;height:100%"> <tr> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=1" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu1">图书</font> </div> </td> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=2" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu2">图书</font> </div> </td> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=3" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu3">图书</font> </div> </td> </tr> <tr> <td> <div style="width:94%;height:80%;background-color:white;float:left;margin-left:3%"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=4" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu4">图书</font> </div> </td> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=5" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu5">图书</font> </div> </td> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=6" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu6">图书</font> </div> </td> </tr> <tr> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=7" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu7">图书</font> </div> </td> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=8" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu8">图书</font> </div> </td> <td> <div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left"> <img alt="图书" src="${pagecontext.request.contextpath}/xinshuimg?shu=9" style="width:100%;height:100%;"/> </div> <div style="width:94%;float:left;margin-left:3%;height:15%;"> <font style="font-size:16px;margin-left:3%;"id="shu9">图书</font> </div> </td> </tr> </table> </div> <!-- 新书榜 --> <div style="width:23%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;"> <div style="width:100%;height:10%;text-align:center;line-height:45px;background-color:#556b2f"> <font color="#ddd" style="font-size:20px;">新书排行榜</font> </div> <div style="width:100%;height:90%;text-align:center;line-height:45px;background-color:#548b54;margin-top:-5%;"> <ul> <li id="x1" style="text-align:left;color:black"></li> <li id="x2" style="text-align:left;color:black"></li> <li id="x3" style="text-align:left;color:black"></li> <li id="x4" style="text-align:left;color:black"></li> <li id="x5" style="text-align:left;color:black"></li> <li id="x6" style="text-align:left;color:black"></li> <li id="x7" style="text-align:left;color:black"></li> <li id="x8" style="text-align:left;color:black"></li> <li id="x9" style="text-align:left;color:black"></li> </ul> </div> </div> </div> </div> <!-- 调用底部页面 --> <div style="width:100%;height:60px;float:left"> <jsp:include page="/client/foot.jsp"></jsp:include> </div> </body> </html>
效果图
2.index.js
代码
$(function(){ //动态显示初始轮播图 $("#lun").css("background-image","url('img/tu1.jpg')"); //通过点击切换轮播图 $("#l1").click(function(){ $("#lun").css("background-image","url('img/tu1.jpg')"); }); $("#l2").click(function(){ $("#lun").css("background-image","url('img/tu2.jpg')"); }); $("#l3").click(function(){ $("#lun").css("background-image","url('img/tu3.jpg')"); }); $("#l4").click(function(){ $("#lun").css("background-image","url('img/tu4.jpg')"); }); //动态显示初始热门书 $.post("../remen?page=1",function(data){ var code=data; code=code.split("#"); $("#a1").html(code[0]); $("#a2").html(code[1]); }); //动态显示初始新书和初始新书榜 for(var i = 1;i < 10;++i){ var servlet="../xinshuming?shu="+i; $.post(servlet,function(data){ var shu = "#shu" + i; var xin = "#x" + i; $(shu).html(data); $(xin).html(data); }); }; //通过点击b5,b6,b7,b8,将前1到36展示在页面上。 $("#b5").click(function(){ for(var i = 1;i < 10;++i){ var servlet="../xinshuming?shu="+i; $.post(servlet,function(data){ var xin = "#x" + i; $(xin).html(data); }); }; }); $("#b6").click(function(){ for(var i = 10;i < 19;++i){ var servlet="../xinshuming?shu="+i; $.post(servlet,function(data){ var j = i - 9; var xin = "#x" + j; $(xin).html(data); }); }; }); $("#b7").click(function(){ for(var i = 19;i < 28;++i){ var servlet="../xinshuming?shu="+i; $.post(servlet,function(data){ var j = i - 18; var xin = "#x" + i; $(xin).html(data); }); }; }); $("#b8").click(function(){ for(var i = 28;i < 37;++i){ var servlet="../xinshuming?shu="+i; $.post(servlet,function(data){ var j = i - 27; var xin = "#x" + i; $(xin).html(data); }); }; }); //通过点击b1,b2,b3,b4,配合以特殊的查询方式,将前8的热门书展示在页面上。 $("#b1").click(function(){ $.post("../remen?page=1",function(data){ var code=data; code=code.split("#"); $("#a1").html(code[0]); $("#a2").html(code[1]); }); }); $("#b2").click(function(){ $.post("../remen?page=2",function(data){ var code=data; code=code.split("#"); $("#a1").html(code[0]); $("#a2").html(code[1]); }); }); $("#b3").click(function(){ $.post("../remen?page=3",function(data){ var code=data; code=code.split("#"); $("#a1").html(code[0]); $("#a2").html(code[1]); }); }); $("#b4").click(function(){ $.post("../remen?page=4",function(data){ var code=data; code=code.split("#"); $("#a1").html(code[0]); $("#a2").html(code[1]); }); }); });
3.remenservlet
代码
package cn.edu.bdu.mc.servlets; import java.io.ioexception; import java.util.arraylist; import java.util.list; import javax.servlet.servletexception; import javax.servlet.annotation.webservlet; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; /** * servlet implementation class remenservlet */ @webservlet("/remen") public class remenservlet extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public remenservlet() { super(); // todo auto-generated constructor stub } /** * @see httpservlet#doget(httpservletrequest request, httpservletresponse response) */ protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { int page = integer.parseint(request.getparameter("page")); /* list<book> list; bookservice bookservice = new bookservice(); //拟定写一个bookservice类,其中有findbookremen方法,可以根据页数查找热门图书信息,每页只显示2个。 list = bookservice.findbookremen(page); string booknames = list[0].getname()+"#"+list[1].getname(); //将书名返回。 response.getwriter().write(booknames); */ //测试---成功!!! if(page==1) { response.getwriter().print("好书#真是好书啊"); }else { response.getwriter().print("全都是#好书!"); } } /** * @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); } }
4.xinshuservlet
代码
package cn.edu.bdu.mc.servlets; import java.io.ioexception; import javax.servlet.servletexception; import javax.servlet.annotation.webservlet; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; /** * servlet implementation class xinshuservlet */ @webservlet("/xinshu") public class xinshuservlet extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public xinshuservlet() { 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 //通过js动态从数据库中取图片。 int shu = integer.parseint(request.getparameter("shu")); } /** * @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); } }
5.xinshumingservlet
代码
package cn.edu.bdu.mc.servlets; import java.io.ioexception; import javax.servlet.servletexception; import javax.servlet.annotation.webservlet; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; /** * servlet implementation class xinshuservlet */ @webservlet("/xinshuming") public class xinshumingservlet extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public xinshumingservlet() { 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 //通过js动态从数据库中取书名,以及书的路径,写成一个a标签。 int shu = integer.parseint(request.getparameter("shu")); //待填空:类别、书的二级id、书名 string html = "<a href='${pagecontext.request.contextpath}/client/"+"类别/"+"shu?er_id="+"书的二级id"+"' style='font-size:16px'>"+"书名"+"</a>"; response.getwriter().print(html); } /** * @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); } }