目录

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

    • 主要改动
    • 1.主页持续施工中
      • 代码
      • 效果图
    • 2.index.js
      • 代码
    • 3.ReMenServlet
      • 代码
    • 4.XinShuServlet
      • 代码
    • 5.XinShuMingServlet
      • 代码

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

尽量日更，我发现我还要写的东西有好多啊。

主要改动

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

代码

这个代码有问题，请看第四天的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 stubdoGet(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 stubdoGet(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 stubdoGet(request, response);}}

转载于:https://www.cnblogs.com/zhangA/p/11032558.html

大项目之网上书城（三）——主页（中）相关推荐

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

    目录 大项目之网上书城(四)--主页(下中) 主要改动 1.主页持续施工中 代码 效果图 2.index.js 代码 热度 3.Book,User表 表结构 4.XinShuMingServlet 代 ...

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

    目录 大项目之网上书城(五)--主页(End) 主要改动 1.主页(终于完成啦) 完整代码 效果图 2.head.jsp的小改动 代码 3.login.jsp ###代码 效果图 4.login.js ...

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

    目录 大项目之网上书城(八)--数据库大改&添加图书 主要改动 1.数据库新增表 代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改 代码 4.addBook. ...

  4. 大项目之网上书城（十二）——完成啦

    目录 大项目之网上书城(十二)--完成啦 主要改动 新增代码 1.addCategory.jsp 效果图 2.bookManager.jsp 效果图 3.userManager.jsp 效果图 4.e ...

  5. mysql数据库添加图书信息_大项目之网上书城（八）——数据库大改添加图书

    大项目之网上书城(八)--数据库大改&添加图书 主要改动 今天也是各种各种各种出错的一天啊,经历了各种方法的重写,各种触发器的重写. 那么book表一分为n,多个子表更新数据的时候会联动boo ...

  6. 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）

    网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...

  7. SSM+网上书城系统 毕业设计-附源码180919

    目  录 摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...

  8. 计算机毕业设计之java+SSM架构的网上书城系统

    项目介绍 网上书城系统的需求和管理上的不断提升,网上书城管理的潜力将无限扩大,网上书城系统在业界被广泛关注,本系统及对此进行总体分析,将网上书城信息管理的发展提供参考.网上书城系统对网上书城有着明显的 ...

  9. 网上书城项目——前三阶段（Java实现）

    网上书城项目 第一阶段:使用JavaScript对register.html页面实现表单验证 需求 代码实现 第二阶段 :实现用户的注册和登录 需求1:用户注册 需求2:用户登陆 需要提前掌握的知识 ...

最新文章

  1. python 批量处理文件重命名
  2. Linux-4.查看网卡信息,状态
  3. STC89C52单片机 LED灯闪烁
  4. 欢迎使用CSDN-markdown编辑器2018
  5. android log丢失（二）使用and4.4log kernel机制
  6. activemq控制面板里的NumberOfPendingMessages、MessagesEnqueued、MessagesDequeued含义
  7. 前端学习（3063）：vue+element今日头条管理-总页码处理2
  8. 炸窝（Collections当中的addAll方法）
  9. python_numpy_矩阵乘法multiply()、dot()、 matmul()、 * 、 @ 辨析
  10. RHEL7.X双网卡绑定
  11. 华为交换机基础命令合集
  12. 华为HCSE培训教材
  13. promise跟ajax区别,Promise和AJAX有什么区别？
  14. 易语言多线程任务分配让不同的线程账号执行不同的多个任务
  15. JAVA中的getBytes()方法
  16. linux下定时备份文件,Linux下定时备份文件
  17. frp,ngrok服务器搭建
  18. 直播系统开发，一对一直播源码开发
  19. oracle配置并发备份,oracle数据库还原以及备份 包括快速备份（并发压缩）
  20. 中频电路与射频电路的衔接

热门文章

  1. 自动驾驶三大难题：技术成熟度、法规容忍度、成本接受度
  2. java dropdownlist_Html.DropDownList 使用
  3. 电子罗盘电磁干扰_如何正确判断无人机指向故障？让电子罗盘远离磁干扰
  4. 前所未有的家庭杜比影院！飞利浦欧风OLED804电视值得期待
  5. 程序员兼职、远程外包、按需雇佣、远程工作和自由工作指南 — 第二部分
  6. 用手机APP实现PLC远程监控
  7. 使用freemarker插件，在浏览器生成word并提供下载
  8. 用了30年的电流反馈放大器竟然是错的，PSpice仿真来判定立见端倪
  9. 提高软件执行效率的几条原则
  10. tab 多播linux,Linux