大项目之网上书城（三）——主页（中）

程序员文章站 2022-03-22 12:43:46

设计这个勉强看得过去的颜色，填充之前的主页，按照之前的思路，左边是图书分类，中间一个轮播图，然后右边是一个文案广告，加一个热销书推荐，下面是新书推荐，然后下面的右面是新书排行榜。因为我打算把网页弄成动态的，于是热销书推荐，新书推荐，新书排行榜，都要是通过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);
    }

}

上一篇：工信部备案系统启用新域名

下一篇： python 2.7.14安装图文教程

大项目之网上书城（三）——主页（中）

大项目之网上书城（三）——主页（中）

主要改动

1.主页持续施工中

代码

效果图

2.index.js

代码

3.remenservlet

代码

4.xinshuservlet

代码

5.xinshumingservlet

代码

大项目之网上书城（六）——个人页面和书页面Demo

大项目之网上书城（八）——数据库大改&添加图书

大项目之网上书城（九）——订单Demo

# 大项目之网上书城（四）——主页（下中）

大项目之网上书城（五）——主页（End）

大项目之网上书城（三）——主页（中）

大项目之网上书城（七）——书页面以及加入购物车Servlet

大项目之网上书城（一）——注册页面

大项目之网上书城（二）——主页（上）

大项目之网上书城（六）——个人页面和书页面Demo