table of Contents
Large projects of online bookstores (three) - Home (in)
Try more day, I found that I have to write something there are a lot ah.
The main changes
This design barely see past the color, before filling a home, according to previous thinking, the left is the book classification, the middle of a carousel map, and then on the right is an advertising copywriter, plus a recommended selling book, here is a new book recommendation, then the following is the right book list. Because I'm going to put into something dynamic pages, so selling book recommendation, book recommendation, book list, it must be to get the latest data from the database by js + servlet, write them will be very troublesome ah. (And I have not the database, I have not dao, no BookBean, no service, and then test them super trouble ah. It is only to recommend selling the book to write a simple test. Book recommended because it involves pictures, I do not know , still developing the technology tree, really difficult ah. plus I realized I want to look at universal design details page of the book, I want to increase the super user. super user can modify the database you want to, ah, really so hard ah . long way to go.)
1. Home construction continued
Code
Real long way to go, there is also added a bootstrap code to display a button. .
<%@ 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>Renderings
2.index.js
Code
$(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
Code
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
Code
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
Code
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);
}
}