大項目之網上書城（三）——主頁（中）

時間 2019-12-09

標籤項目網上書城主頁简体版

原文原文鏈接

目錄javascript

大項目之網上書城（三）——主頁（中）

大項目之網上書城（三）——主頁（中）

儘可能日更，我發現我還要寫的東西有好多啊。css

主要改動

設計這個勉強看得過去的顏色，填充以前的主頁，按照以前的思路，左邊是圖書分類，中間一個輪播圖，而後右邊是一個文案廣告，加一個熱銷書推薦，下面是新書推薦，而後下面的右面是新書排行榜。由於我打算把網頁弄成動態的，因而熱銷書推薦，新書推薦，新書排行榜，都要是經過js+servlet來從數據庫獲取最新數據，寫起來會很是麻煩啊。（以及我尚未數據庫，我尚未dao，沒有BookBean，沒有service，因而測試起來超麻煩啊。就只給熱銷書推薦寫了個簡單的測試。新書推薦由於涉及到圖片，我不太瞭解，還在發展科技樹，真的很艱鉅啊。再加上我意識到我要設計一下通用的圖書詳情頁面，我要增長個超級用戶。超級用戶要能夠修改數據庫，啊，真的好難啊。任重而道遠。）html

1.主頁持續施工中

代碼

真實任重而道遠，這裏一樣加了bootstrap的代碼，用來顯示按鈕。。java

<%@ 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);
    }

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。