我要评论大项目之网上书城（四）——主页（下中）
我要更新啊！日更啊！
主要改动
今天完成了昨天计划的任务的准备工作的一部分，以及更早的一些思路，以及为以后筹划的一些思路。
具体点说，今天完成了按照数据库中re_du属性对新书进行排序后展示的功能。也就是说可以在数据库改变后页面做出相应变化。然后计划中为完成的是之前没接触过的往数据库中添加图片，并把这个图片显示到网页上的操作。然后热门推书漏掉了。
哦，还有对注册进行了小小的测试。
1.主页持续施工中
代码
几乎没变，添加了对热度的显示。
<!-- 新书上架中的每一项都加了一个id为re1-9的值来表示热度 -->
<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>
<font style="font-size:8px"id="re1"></font>
</div>
</td>
<!-- 新书榜中的列表，每一项加了一个id为r1-9的值来表示热度，同时将本来在li上的id:x1-9移到了li中的一个新的font中。 -->
<ul>
<li style="text-align:left;color:black"><font id="x1"></font><font id="r1" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x2"></font><font id="r2" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x3"></font><font id="r3" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x4"></font><font id="r4" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x5"></font><font id="r5" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x6"></font><font id="r6" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x7"></font><font id="r7" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x8"></font><font id="r8" style="font-size:8px"></font></li>
<li style="text-align:left;color:black"><font id="x9"></font><font id="r9" style="font-size:8px"></font></li>
</ul>
效果图
表为
时，显示效果为：
表为
时，显示效果为：
2.index.js
超大改动，for循环post的方法竟然失败了，于是我单着一个一个写了。。。建议不要学。
代码
$(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]);
});
//动态显示初始新书和初始新书榜
$.post("../xinshuming?shu=1",function(data){
data = data.split("@")
$("#shu1").html(1+"."+data[0]);
$("#x1").html(1+"."+data[0]);
$("#re1").html("热度:"+data[1]);
$("#r1").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=2",function(data){
data = data.split("@")
$("#shu2").html(2+"."+data[0]);
$("#x2").html(2+"."+data[0]);
$("#re2").html("热度:"+data[1]);
$("#r2").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=3",function(data){
data = data.split("@")
$("#shu3").html(3+"."+data[0]);
$("#x3").html(3+"."+data[0]);
$("#re3").html("热度:"+data[1]);
$("#r3").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=4",function(data){
data = data.split("@")
$("#shu4").html(4+"."+data[0]);
$("#x4").html(4+"."+data[0]);
$("#re4").html("热度:"+data[1]);
$("#r4").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=5",function(data){
data = data.split("@")
$("#shu5").html(5+"."+data[0]);
$("#x5").html(5+"."+data[0]);
$("#re5").html("热度:"+data[1]);
$("#r5").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=6",function(data){
data = data.split("@")
$("#shu6").html(6+"."+data[0]);
$("#x6").html(6+"."+data[0]);
$("#re6").html("热度:"+data[1]);
$("#r6").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=7",function(data){
data = data.split("@")
$("#shu7").html(7+"."+data[0]);
$("#x7").html(7+"."+data[0]);
$("#re7").html("热度:"+data[1]);
$("#r7").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=8",function(data){
data = data.split("@")
$("#shu8").html(8+"."+data[0]);
$("#x8").html(8+"."+data[0]);
$("#re8").html("热度:"+data[1]);
$("#r8").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=9",function(data){
data = data.split("@")
$("#shu9").html(9+"."+data[0]);
$("#x9").html(9+"."+data[0]);
$("#re9").html("热度:"+data[1]);
$("#r9").html("热度:"+data[1]);
});
//通过点击b5,b6,b7,b8,将前1到36展示在页面上。
$("#b5").click(function(){
$.post("../xinshuming?shu=1",function(data){
data = data.split("@")
$("#x1").html(1+"."+data[0]);
$("#r1").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=2",function(data){
data = data.split("@")
$("#x2").html(2+"."+data[0]);
$("#r2").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=3",function(data){
data = data.split("@")
$("#x3").html(3+"."+data[0]);
$("#r3").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=4",function(data){
data = data.split("@")
$("#x4").html(4+"."+data[0]);
$("#r4").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=5",function(data){
data = data.split("@")
$("#x5").html(5+"."+data[0]);
$("#r5").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=6",function(data){
data = data.split("@")
$("#x6").html(6+"."+data[0]);
$("#r6").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=7",function(data){
data = data.split("@")
$("#x7").html(7+"."+data[0]);
$("#r7").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=8",function(data){
data = data.split("@")
$("#x8").html(8+"."+data[0]);
$("#r8").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=9",function(data){
data = data.split("@")
$("#x9").html(9+"."+data[0]);
$("#r9").html("热度:"+data[1]);
});
});
$("#b6").click(function(){
$.post("../xinshuming?shu=10",function(data){
$("#x1").html(10+"."+data);
$("#r1").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=11",function(data){
$("#x2").html(11+"."+data);
$("#r2").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=12",function(data){
$("#x3").html(12+"."+data);
$("#r3").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=13",function(data){
$("#x4").html(13+"."+data);
$("#r4").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=14",function(data){
$("#x5").html(14+"."+data);
$("#r5").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=15",function(data){
$("#x6").html(15+"."+data);
$("#r6").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=16",function(data){
$("#x7").html(16+"."+data);
$("#r7").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=17",function(data){
$("#x8").html(17+"."+data);
$("#r8").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=18",function(data){
$("#x9").html(18+"."+data);
$("#r9").html("热度:"+data[1]);
});
});
$("#b7").click(function(){
$.post("../xinshuming?shu=19",function(data){
$("#x1").html(19+"."+data);
$("#r1").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=20",function(data){
$("#x2").html(20+"."+data);
$("#r2").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=21",function(data){
$("#x3").html(21+"."+data);
$("#r3").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=22",function(data){
$("#x4").html(22+"."+data);
$("#r4").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=23",function(data){
$("#x5").html(23+"."+data);
$("#r5").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=24",function(data){
$("#x6").html(24+"."+data);
$("#r6").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=25",function(data){
$("#x7").html(25+"."+data);
$("#r7").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=26",function(data){
$("#x8").html(26+"."+data);
$("#r8").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=27",function(data){
$("#x9").html(27+"."+data);
$("#r9").html("热度:"+data[1]);
});
});
$("#b8").click(function(){
$.post("../xinshuming?shu=28",function(data){
$("#x1").html(28+"."+data);
$("#r1").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=29",function(data){
$("#x2").html(29+"."+data);
$("#r2").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=30",function(data){
$("#x3").html(30+"."+data);
$("#r3").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=31",function(data){
$("#x4").html(31+"."+data);
$("#r4").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=32",function(data){
$("#x5").html(32+"."+data);
$("#r5").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=33",function(data){
$("#x6").html(33+"."+data);
$("#r6").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=34",function(data){
$("#x7").html(34+"."+data);
$("#r7").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=35",function(data){
$("#x8").html(35+"."+data);
$("#r8").html("热度:"+data[1]);
});
$.post("../xinshuming?shu=36",function(data){
$("#x9").html(36+"."+data);
$("#r9").html("热度:"+data[1]);
});
});
//通过点击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]);
});
});
});
热度
总得有人好奇下这个热度是怎么来的吧，他是根据book表中的点击量和购买量来计算的哦。恩，先放触发器，表结构一会儿放。emmmm，查询一不小心删了，这是从sql文件里扒出来的~
drop trigger if exists `book_insert`;
delimiter ;;
create trigger `book_insert` before insert on `book` for each row begin
set new.re_du = new.click_num + new.buy_num * 100;
end
;;
delimiter ;
drop trigger if exists `book_update`;
delimiter ;;
create trigger `book_update` before update on `book` for each row begin
set new.re_du = new.click_num + new.buy_num * 100;
end
;;
delimiter ;
3.book,user表
表结构
book表
user表
4.xinshumingservlet
代码
这个就是js请求的servlet啦，返回对应排名的书的网址存储好的a标签，还有他的热度。
package cn.edu.bdu.mc.servlets;
import java.io.ioexception;
import java.sql.sqlexception;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import cn.edu.bdu.mc.beans.book;
import cn.edu.bdu.mc.services.bookservice;
import cn.edu.bdu.mc.services.impls.bookserviceimpl;
/**
* 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
try {
//通过js动态从数据库中取书名，以及书的路径，写成一个a标签。
int shu = integer.parseint(request.getparameter("shu"));
book book = new book();
bookservice bookservice = new bookserviceimpl();
book = bookservice.findnewbookbypaiming(shu);
int redu = book.getre_du();
string re_du = "";
if(re_du==null) {
string html = "暂无";
response.getwriter().print(html);
}else if(redu>10000) {
re_du = redu/10000+"万";
}else if(redu>1000) {
re_du = redu/1000+"千";
}else if(redu>100) {
re_du = redu/100+"百";
}else {
re_du = redu+"";
}
string html = "<a href='${pagecontext.request.contextpath}/client/"+book.getclazz()+"/shu?er_id="+book.getsecond_id()+"' style='font-size:16px'>"+book.getbook_name()+"</a>@"+re_du;
response.getwriter().print(html);
} catch (sqlexception e) {
// todo auto-generated catch block
e.printstacktrace();
}
}
/**
* @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.registerservlet
代码
package cn.edu.bdu.mc.servlets;
import java.io.ioexception;
import java.sql.sqlexception;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import cn.edu.bdu.mc.beans.user;
import cn.edu.bdu.mc.services.userservice;
import cn.edu.bdu.mc.services.impls.userserviceimpl;
/**
* servlet implementation class registerservlet
*/
@webservlet("/register")
public class registerservlet extends httpservlet {
private static final long serialversionuid = 1l;
/**
* @see httpservlet#httpservlet()
*/
public registerservlet() {
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
try {
string username = request.getparameter("username");
string password = request.getparameter("password");
string email = request.getparameter("email");
string gender = request.getparameter("gender");
string phone = request.getparameter("phone");
string describtion = request.getparameter("describtion");
user user = new user();
user.setusername(username);
user.setpassword(password);
user.setemail(email);
user.setgender(gender);
if(phone!=null) {
user.setphone(integer.parseint(phone));
}
user.setdescribtion(describtion);
userservice userservice = new userserviceimpl();
//如果注册失败,在register.jsp中用${errormsg}来显示下提示信息。
string msg = userservice.register(user);
if(msg.equals("root")) {
request.setattribute("errormsg", "用户名不能为root");
request.getrequestdispatcher("client/register.jsp").forward(request, response);
}else if(msg.equals("user")) {
request.setattribute("errormsg", "用户名已存在");
request.getrequestdispatcher("client/register.jsp").forward(request, response);
}else {
//如果成功，进入login界面
response.sendredirect("client/login.jsp");
}
} catch (sqlexception e) {
// todo auto-generated catch block
e.printstacktrace();
}
}
/**
* @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);
}
}
效果图
6.userserviceimpl
代码
package cn.edu.bdu.mc.services.impls;
import java.sql.sqlexception;
import cn.edu.bdu.mc.beans.user;
import cn.edu.bdu.mc.daos.userdao;
import cn.edu.bdu.mc.daos.impls.userdaoimpl;
import cn.edu.bdu.mc.services.userservice;
public class userserviceimpl implements userservice {
private static userdao dao = new userdaoimpl();
@override
public string register(user user) throws sqlexception {
// todo auto-generated method stub
if("root".equals(user.getusername())) {
return "root";
}
if(dao.isexistedusername(user.getusername())) {
return "user";
}
dao.adduser(user);
return "success";
}
}
7.bookserviceimpl
package cn.edu.bdu.mc.services.impls;
import java.sql.sqlexception;
import javax.sql.datasource;
import cn.edu.bdu.mc.beans.book;
import cn.edu.bdu.mc.daos.bookdao;
import cn.edu.bdu.mc.daos.impls.bookdaoimpl;
import cn.edu.bdu.mc.services.bookservice;
import cn.edu.bdu.mc.utils.jdbcutil;
public class bookserviceimpl implements bookservice {
private static datasource datasource = jdbcutil.getdatasource();
private static bookdao dao = new bookdaoimpl();
@override
public book findnewbookbypaiming(int shu) throws sqlexception {
// todo auto-generated method stub
return dao.findnewbookbypaiming(shu);
}
/*
其他都是基本操作，这个来在这里放一下代码吧，按理说这种操作不应该放在dao里，当时脑子没想清楚，就这样吧~
private static datasource datasource = jdbcutil.getdatasource();
private static queryrunner queryrunner = new queryrunner(datasource);
@override
public book findnewbookbypaiming(int shu) throws sqlexception {
// todo auto-generated method stub
string sql = "select * from (select * from book where is_new = 1 order by re_du desc)as book1 limit "+(shu-1)+",1";
return queryrunner.query(sql, new beanhandler<book>(book.class));
}
*/
@override
public void click(int book_id) throws sqlexception {
// todo auto-generated method stub
book book = dao.findbookbyid(book_id);
book.setclick_num(book.getclick_num()+1);
dao.update(book);
}
@override
public void buy(int book_id) throws sqlexception {
// todo auto-generated method stub
book book = dao.findbookbyid(book_id);
book.setbuy_num(book.getbuy_num()+1);
dao.update(book);
}
}
8.总结
今天发得有点晚了哈，主要是沉迷进去打了，时间就过的很慢，而且不写出来点什么也不好意思发博客。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论