bookStore第二篇【图书模块、前台页面】

时间 2019-11-21

原文原文链接

图书模块

分析

在设计图书管理的时候，咱们应该想到：图书和分类是有关系的。一个分类能够对应多本图书。css

为何要这样设计？这样更加人性化，用户在购买书籍的时候，用户可以查看相关分类后的图书，而不是所有图书都显示给用户，让用户一个一个去找。html

设计实体

private String id;
    private String name;
    private String author;
    private String description;
    private double price;

    //记住图片的名称
    private String image;

    //记住分类的id
    private String category_id;

    //各类setter和getter

设计数据库表

CREATE TABLE book ( id VARCHAR(40) PRIMARY KEY, name VARCHAR(10) NOT NULL UNIQUE, description VARCHAR(255), author VARCHAR(10), price FLOAT, image VARCHAR(100), category_id VARCHAR(40), CONSTRAINT category_id_FK FOREIGN KEY (category_id) REFERENCES category (id) );

编写DAO

/** * 图书模块 * 1：添加图书 * 2：查看图书 * 3：查找图书的分页数据【图书通常来讲有不少，因此要分页】 */ public class BookDaoImpl { public void addBook(Book book) { QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource()); String sql = "INSERT INTO book (id,name,description,author,price,image,category_id) VALUES(?,?,?,?,?,?,?)"; try { queryRunner.update(sql, new Object[]{book.getId(), book.getName(), book.getDescription(), book.getAuthor(), book.getPrice(),book.getImage(), book.getCategory_id()}); } catch (SQLException e) { throw new RuntimeException(e); } } public Book findBook(String id) { QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource()); String sql = "SELECT * FROM book WHERE id=?"; try { return (Book) queryRunner.query(sql, id, new BeanHandler(Book.class)); } catch (SQLException e) { throw new RuntimeException(e); } } /**获得图书的分页数据*/ public List<Book> getPageData(int start, int end) { QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource()); String sql = "SELECT * FROM book limit ?,?"; try { return (List<Book>) queryRunner.query(sql, new BeanListHandler(Book.class), new Object[]{start, end}); } catch (SQLException e) { throw new RuntimeException(e); } } /**获得按照分类图书的分页数据*/ public List<Book> getPageData(int start, int end,String category_id) { QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource()); //WHERE字句在limit字句的前边，注意Object[]的参数位置！ String sql = "SELECT * FROM book WHERE category_id=? limit ?,?"; try { return (List<Book>) queryRunner.query(sql, new BeanListHandler(Book.class), new Object[]{ category_id,start, end}); } catch (SQLException e) { throw new RuntimeException(e); } } /** * 获得图书的总记录数 */ public int getTotalRecord() { QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource()); String sql = "SELECT COUNT(*) FROM book"; try { return (int) queryRunner.query(sql, new ScalarHandler()); } catch (SQLException e) { throw new RuntimeException(e); } } /** * 获得分类后图书的总记录数 * getCategoryTotalRecord */ public long getCategoryTotalRecord(String category_id) { try { QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource()); String sql = "SELECT COUNT(*) FROM book WHERE category_id=?"; return (long) queryRunner.query(sql, category_id, new ScalarHandler()); } catch (SQLException e) { throw new RuntimeException(e); } } }

测试DAO

public class BookDemo {

    BookDaoImpl bookDao = new BookDaoImpl();


    @Test

    public void add() {
        Book book = new Book();
        book.setId("5");
        book.setName("SQLServer");
        book.setAuthor("我也不知道");
        book.setImage("33333332432");
        book.setPrice(33.22);
        book.setDescription("这是一本好书");
        book.setCategory_id("2");

        bookDao.addBook(book);
    }

    @Test
    public void look() {

        List<Book> bookList = bookDao.getPageData(3, 3);

        for (Book book : bookList) {
            System.out.println(book.getName());
        }

        List<Book> books = bookDao.getPageData(0,2,"2");

        for (Book book : books) {
            System.out.println(book.getName());

        }
    }

    @Test
    public void find() {
        String id = "2";
        Book book = bookDao.findBook(id);

        System.out.println(book.getName());
    }


}

抽取成DAO接口

public interface BookDao {
    void addBook(Book book);

    Book findBook(String id);

    List<Book> getPageData(int start, int end);

    List<Book> getPageData(int start, int end, String category_id);

    long getTotalRecord();

    long getCategoryTotalRecord(String category_id);
}

编写Service层

/*添加图书*/
    public void addBook(Book book) {
        bookDao.addBook(book);

    }

    /*查找图书*/
    public Book findBook(String id) {
        return bookDao.findBook(id);
    }

    /*查找图书*/
    public Book findBook(String id) {
        return bookDao.findBook(id);
    }

    /*获取图书的分页数据*/
    public Page getPageData(String pageNum) {

        Page page=null;
        if (pageNum == null) {
            page = new Page(1, bookDao.getTotalRecord());
        } else {
            page = new Page(Integer.valueOf(pageNum), bookDao.getTotalRecord());
        }

        List<Book> books = bookDao.getPageData(page.getStartIndex(), page.getLinesize());
        page.setList(books);

        return page;

    }

    /*获取图书分类后的分页数据*/
    public Page getPageData(String currentPageCount,String category_id) {

        Page page=null;
        if (currentPageCount == null) {
            page = new Page(1, bookDao.getCategoryTotalRecord(category_id));
        } else {
            page = new Page(Integer.valueOf(currentPageCount), bookDao.getCategoryTotalRecord(category_id));
        }

        List<Book> books = bookDao.getPageData(page.getStartIndex(), page.getLinesize(), category_id);
        page.setList(books);
        return page;

    }

后台添加图书

后台要添加图书的时候，应该说明图书的类型是什么。sql

要想在显示添加图书的页面上知道所有类型的id，就要通过Servlet把类型的集合传送过去数据库

绑定连接

<a href="${pageContext.request.contextPath}/BookServlet?method=addUI" target="body">添加图书</a><br>

传送类型集合的Servlet

String method = request.getParameter("method");
        BussinessServiceImpl service = new BussinessServiceImpl();

        if (method.equals("addUI")) { List<Category> list = service.getAllCategory(); request.setAttribute("list", list); request.getRequestDispatcher("/background/addBook.jsp").forward(request, response); }

显示JSP页面

<form action="${pageContext.request.contextPath}/BookServlet?method=add" method="post" enctype="multipart/form-data">

    <table border="1px" width="30%">
        <tr>
            <td> 图书名称：</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td> 做者：</td>
            <td><input type="text" name="author"></td>
        </tr>
        <tr>
            <td> 图书价钱：</td>
            <td><input type="text" name="price"></td>
        </tr>
        <tr>
            <td>类型：</td>
            <td>
                <select name="category_id">
                    <c:forEach items="${list}" var="category">
                        <option value="${category.id}">${category.name}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td> 上传图片</td>
            <td><input type="file" name="image"></td>
        </tr>
        <tr>
            <td>详细描述</td>
            <td><textarea name="description"></textarea></td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>

处理表单数据Servlet

else if (method.equals("add")) { //上传文件和普通数据分割开，封装到Book对象上 Book book = uploadData(request); book.setId(WebUtils.makeId()); service.addBook(book); request.setAttribute("message", "添加图书成功"); request.getRequestDispatcher("/message.jsp").forward(request, response); }

uploadData()方法代码

private Book uploadData(HttpServletRequest request) {

        Book book = new Book();
        try{

            //1.获得解析器工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();

            //2.获得解析器
            ServletFileUpload upload = new ServletFileUpload(factory);

            //设置编码
            upload.setHeaderEncoding("UTF-8");


            //为上传表单，则调用解析器解析上传数据
            List<FileItem> list = upload.parseRequest(request);  //FileItem

            //遍历list，获得用于封装第一个上传输入项数据fileItem对象
            for(FileItem item : list){

                if(item.isFormField()){

                    //获得的是普通输入项
                    String name = item.getFieldName();  //获得输入项的名称
                    String value = item.getString("UTF-8");

                    //使用BeanUtils封装数据
                    BeanUtils.setProperty(book, name, value);
                }else{

                    //获得上传输入项

                    //获得上传文件名全路径
                    String filename = item.getName();

                    //截取文件名
                    filename = filename.substring(filename.lastIndexOf("\\")+1);

                    InputStream in = item.getInputStream();   //获得上传数据

                    int len = 0;
                    byte buffer[]= new byte[1024];

                    //若是没有这个目录，就建立它
                    String savepath = this.getServletContext().getRealPath("/image");
                    File file = new File(savepath);
                    if (!file.exists()) {
                        file.mkdir();
                    }

                    FileOutputStream out = new FileOutputStream(savepath + "\\" + filename);
                    while((len=in.read(buffer))>0){
                        out.write(buffer, 0, len);
                    }
                    //设置图片的名字
                    book.setImage(filename);

                    in.close();
                    out.close();

                    //关闭临时文件
                    item.delete();
                }
            }

        }catch (Exception e) {
            e.printStackTrace();
        }
        return book;
    }

效果：

后台显示图书模块

因为咱们用的是分页技术，因此咱们导入以前写过的Page类和jsp吧…..这些代码能够在我复用代码博文中找到bash

绑定超连接

<a href="${pageContext.request.contextPath}/BookServlet?method=look" target="body">查看图书</a>

Servlet处理请求

else if (method.equals("look")) { String currentPageCount = request.getParameter("currentPageCount"); Page page = service.getPageData(currentPageCount); request.setAttribute("page",page); request.getRequestDispatcher("/background/listBook.jsp").forward(request, response); }

显示图书JSP页面

Servlet端传过来的是Page对象，而不是list集合markdown

能够根据记载在Book对象的图片名称，弄一个超连接，超连接指向服务端的图片，这样就能够查看图片了！app

<c:if test="${empty(page.list)}"> 暂时尚未任何图书哦 </c:if> <c:if test="${!empty(page.list)}"> <table border="1px"> <tr> <td>书名</td> <td>做者</td> <td>价钱</td> <td>描述</td> <td>图片</td> <td>操做</td> </tr> <c:forEach var="book" items="${page.list}" > <tr> <td>${book.name}</td> <td>${book.author}</td> <td>${book.price}</td> <td>${book.description}</td> <td><a href="${pageContext.request.contextPath}/image/${book.image}">查看图片</a></td> <td> <a href="#">删除</a> <a href="#">修改</a> </td> </tr> </c:forEach> </table> <br> <jsp:include page="page.jsp"/> </c:if>

效果：

前台页面

看回咱们前台页面的成果图，咱们能够把整个body页面当作是三个divjsp

body占整个div
导航条是一个div
显示图书的地方是一个div

设计好大概的布局

html代码引入css

<link rel="stylesheet" href="body.css" type="text/css">

HTML三个div

<div id="body">
    <div id="category">
        <c:forEach items="${categorys}" var="category">

        </c:forEach>

        这是导航条
    </div>

    <div id="bookandpages">
        <div id="books">
            这是书籍的地方

        </div>

        <div id="page">
            这是页码
        </div>
    </div>

</div>

CSS代码：

#body { position: relative; }


#category { border: 1px solid #000; position: absolute; width: 300px; height: 400px; float: left; left: 200px; top: 70px;; }

#bookandpages { border: 1px solid #000000; position: absolute; width: 600px; height: 600px;; float: left; left: 500px; margin-left: 50px; }

#books { border: 1px solid #000; width: 600px; height: 550px;; }

#page { border: 1px solid #000; position: absolute; height: 48px; width: 600px; }

大概的布局

IndexServlet

在显示首页的下部分的时候，应该先去寻找一个Servlet来把数据交给对应的JSP。布局

若是直接显示JSP页面，是没有后台的数据的！post

<frame src="${pageContext.request.contextPath}/IndexServlet"/>

Servlet代码：

//获得全部的分类数据，给body页面
        BussinessServiceImpl service = new BussinessServiceImpl();
        List<Category> categories = service.getAllCategory();
        request.setAttribute("categories", categories);
        String currentPageCount = request.getParameter("currentPageCount");

        //获得全部分类的图书，给body页面
        Page page = service.getPageData(currentPageCount);
        request.setAttribute("page", page);

        request.getRequestDispatcher("/client/body.jsp").forward(request,response);

JSP显示数据

<div id="body">
    <div id="category">
        书籍分类 :
        <br>
        <c:forEach items="${categories}" var="categories">
            <li>
                <a href="${pageContext.request.contextPath}/ListBookServlet?category_id=${categories.id}">${categories.name}</a>
            </li>
        </c:forEach>
    </div>

    <div id="bookandpages">
        <c:forEach items="${page.list}" var="book">
        <div id="books">

                <div id="image">
                    <img src="${pageContext.request.contextPath}/image/${book.image}" width="83px" height="118px">
                </div>
                <div id="bookinfo">
                    <li>
                        书名：${book.name}
                    </li>
                    <li>价格：${book.price}</li>
                    <li>做者：${book.author}</li>
                </div>


        </div>
            <%--这里要清除浮动，十分重要！--%>
            <div style="clear: both"></div>
        </c:forEach>

    </div>
    <div id="page">
        <jsp:include page="/client/page.jsp"/>
    </div>
</div>

CSS代码：

重要的是：若是div浮动都黏贴在一块儿了，那么在后边多加个div，用于清除浮动效果

#body { position: relative; }

#category { border: 1px solid #000; position: absolute; width: 300px; height: 400px; float: left; left: 200px; top: 70px;; }

#bookandpages { border: 1px solid #000000; position: absolute; width: 780px; height: 538px;; float: left; left: 500px; margin-left: 50px; }

#books{ margin-left: 50px; margin-top: 30px; }
#image{ float: left; }
#bookinfo{ float: left; }
#page { height: 62px; width: 780px; position: fixed; margin-left: 549px; margin-top: 477px; text-align: center; line-height: 50px; }

效果：

按照分类显示图书

咱们能够根据左边的导航条来显示相对应的分类图书。

Servlet代码：

BussinessServiceImpl service = new BussinessServiceImpl();
        String currentPageCount = request.getParameter("currentPageCount");
        String category_id = request.getParameter("category_id");

        Page page = service.getPageData(currentPageCount, category_id);
        List<Category>  categories = service.getAllCategory();

        request.setAttribute("page", page);
        request.setAttribute("categories", categories);
        request.getRequestDispatcher("/client/body.jsp").forward(request,response);