圖書管理系統【JavaWeb:部署開發環境、解決分類、圖書、前臺頁面模塊】

時間 2019-11-16

標籤圖書管理系統 javaweb 部署開發環境解決分類圖書前臺頁面模塊欄目 Java 简体版

原文原文鏈接

前言

鞏固Servlet+JSP開發模式，作一個比較完整的小項目.css

成果圖

該項目包含了兩個部分，前臺和後臺。html

前臺用於顯示java

後臺用於管理sql

該項目可分爲5個模塊來組成：分類模塊，用戶模塊，圖書模塊，購買模塊，訂單模塊。數據庫

搭建環境

創建包結構

導入開發包

前臺分幀頁面

index.jsp【沒有body標籤的】

<frameset rows="25%,*">
    <frame src="${pageContext.request.contextPath}/client/head.jsp"/>
    <frame src="${pageContext.request.contextPath}/client/body.jsp"/>
  </frameset>

複製代碼

head.jsp

<body style="text-align: center">
<h1>歡迎來到購物中心</h1>

複製代碼

body是空白的jsp頁面瀏覽器
效果：微信

後臺分幀頁面

manager.jsp【嵌套了framset標籤，也是沒有body標籤的】

<frameset rows="25%,*">
    <frame src="${pageContext.request.contextPath}/background/head.jsp"/>

    <frameset cols="15%,*">
        <frame src="${pageContext.request.contextPath}/background/left.jsp"/>
        <frame src="${pageContext.request.contextPath}/background/body.jsp"/>
    </frameset>
</frameset>
複製代碼

head.jsp

<body style="text-align: center">
<h1>後臺管理</h1>

複製代碼

left.jsp

<a href="#">分類管理</a>

<br>
<br>
<a href="#">圖書管理</a>
<br>
<br>

<a href="#">訂單管理</a>
<br>
<br>

複製代碼

body.jsp是空白的jsp
效果：工具

分幀的文件夾目錄結構

值得注意的是：佈局

文件夾的名字不能使用「manager」，否則會出現：403 Access Denied錯誤
frameset標籤是能夠嵌套的，分列用「cols」，分行用「rows」

導入工具類和方法的代碼

過濾中文亂碼數據
HTML轉義
DAOFactory
JDBC鏈接池
UUID工具類
c3p0.xml配置文件

這些代碼均可以在個人博客分類：代碼庫中找到！

分類模塊

首先，咱們來作分類模塊吧

建立實體Category

private String id;
    private String name;
    private String description;

	//各類setter、getter
複製代碼

在數據庫建立表

CREATE TABLE category (

  id          VARCHAR(40) PRIMARY KEY,
  name        VARCHAR(10) NOT NULL UNIQUE ,
  description VARCHAR(255)


);

複製代碼

編寫CategoryDAO

/** * 分類模塊 * 1：添加分類 * 2：查找分類 * 3：修改分類 * * * */
public class CategoryImpl {

    public void addCategory(Category category) {

        QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource());

        String sql = "INSERT INTO category (id, name, description) VALUES(?,?,?)";
        try {
            queryRunner.update(sql, new Object[]{category.getId(), category.getName(), category.getDescription()});

        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }

    public Category findCategory(String id) {
        QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource());
        String sql = "SELECT * FROM category WHERE id=?";

        try {
            Category category = (Category) queryRunner.query(sql, id, new BeanHandler(Category.class));

            return category;

        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
 
    }

    public List<Category> getAllCategory() {
        QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource());
        String sql = "SELECT * FROM category";

        try {
            List<Category> categories = (List<Category>) queryRunner.query(sql, new BeanListHandler(Category.class));

             return categories;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
     
    }
}

複製代碼

測試DAO

public class demo {

    @Test
    public void add() {

        Category category = new Category();
        category.setId("2");
        category.setName("數據庫系列");
        category.setDescription("這是數據庫系列");

        CategoryImpl category1 = new CategoryImpl();
        category1.addCategory(category);

    }

    @Test
    public void find() {

        String id = "1";
        CategoryImpl category1 = new CategoryImpl();
        Category category = category1.findCategory(id);

        System.out.println(category.getName());
    }
    @Test
    public void getAll() {


        CategoryImpl category1 = new CategoryImpl();
        List<Category> categories = category1.getAllCategory();

        for (Category category : categories) {
            System.out.println(category.getName());
        }
    }

}

複製代碼

抽取成DAO接口

public interface CategoryDao {
    void addCategory(Category category);

    Category findCategory(String id);

    List<Category> getAllCategory();
}

複製代碼

後臺頁面的添加分類

在超連接上，綁定顯示添加分類的頁面

<a href="${pageContext.request.contextPath}/background/addCategory.jsp" target="body">添加分類</a>

複製代碼

顯示添加分類的JSP頁面

<form action="${pageContext.request.contextPath}/CategoryServlet?method=add" method="post">

    分類名稱：<input type="text" name="name"><br>
    分類描述：<textarea name="description"></textarea><br>
    <input type="submit" value="提交">

</form>

複製代碼

處理添加分類的Servlet

if (method.equals("add")) {

            try {
                //把瀏覽器帶過來的數據封裝到bean中
                Category category = WebUtils.request2Bean(request, Category.class);
                category.setId(WebUtils.makeId());

                service.addCategory(category);
                request.setAttribute("message", "添加分類成功！");

            } catch (Exception e) {
                request.setAttribute("message","添加分類失敗");
                e.printStackTrace();
            }
            request.getRequestDispatcher("/message.jsp").forward(request, response);

        }
複製代碼

效果：

後臺頁面的查看分類

在超連接上，綁定處理請求的Servlet

else if (method.equals("look")) {

            List<Category> list = service.getAllCategory();
            request.setAttribute("list", list);
            request.getRequestDispatcher("/background/lookCategory.jsp").forward(request, response);

        } 
複製代碼

顯示分類頁面的JSP

<c:if test="${empty(list)}">

    暫時尚未分類數據哦，請你添加把
</c:if>
<c:if test="${!empty(list)}">

    <table border="1px">
        <tr>
            <td>分類名字</td>
            <td>分類描述</td>
            <td>操做</td>
        </tr>

    <c:forEach items="${list}" var="category">

        <tr>
            <td>${category.name}</td>
            <td>${category.description}</td>
            <td>
                <a href="#">刪除</a>
                <a href="#">修改</a>
            </td>
        </tr>


    </c:forEach>

    </table>
</c:if>

複製代碼

效果：

圖書模塊

分析

在設計圖書管理的時候，咱們應該想到：圖書和分類是有關係的。一個分類能夠對應多本圖書。

爲何要這樣設計？這樣更加人性化，用戶在購買書籍的時候，用戶可以查看相關分類後的圖書，而不是所有圖書都顯示給用戶，讓用戶一個一個去找。

設計實體

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;

    }


複製代碼

後臺添加圖書

後臺要添加圖書的時候，應該說明圖書的類型是什麼。

要想在顯示添加圖書的頁面上知道所有類型的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吧.....這些代碼能夠在我分類的代碼庫中找到

綁定超連接

<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集合

能夠根據記載在Book對象的圖片名稱，弄一個超連接，超連接指向服務端的圖片，這樣就能夠查看圖片了！

<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頁面當作是三個div

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通常都是放在WEB-INF下，是不能直接訪問的。還有就是JSP每每是須要咱們後臺的數據的，所以咱們使用Servlet來獲取獲得數據，再交由JSP來展現就最好不過了。

<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);
複製代碼