欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-11 17:11:22
今天完成了昨天计划的任务的准备工作的一部分，以及更早的一些思路，以及为以后筹划的一些思路。 具体点说，今天完成了按照数据库中re_du属性对新书进行排序后展示的功能。也就是说可以在数据库改变后页面做出相应变化。然后计划中为完成的是之前没接触过的往数据库中添加图片，并把这个图片显示到网页上的操作。然... ......

目录

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

我要更新啊！日更啊！

主要改动

今天完成了昨天计划的任务的准备工作的一部分，以及更早的一些思路，以及为以后筹划的一些思路。

具体点说，今天完成了按照数据库中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.总结

今天发得有点晚了哈，主要是沉迷进去打了，时间就过的很慢，而且不写出来点什么也不好意思发博客。

上一篇： ES6中常用的小技巧，用了事半功倍哦

下一篇： Linux 服务器管理建议

推荐阅读