當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2024/1/17 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 bookStore第二篇【图书模块、前台页面】小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

圖書模塊

分析

在設(shè)計(jì)圖書管理的時(shí)候，我們應(yīng)該想到：圖書和分類是有關(guān)系的。一個(gè)分類可以對(duì)應(yīng)多本圖書。

為什么要這樣設(shè)計(jì)？這樣更加人性化，用戶在購買書籍的時(shí)候，用戶能夠查看相關(guān)分類后的圖書，而不是全部圖書都顯示給用戶，讓用戶一個(gè)一個(gè)去找。

設(shè)計(jì)實(shí)體

private String id;private String name;private String author;private String description;private double price;//記住圖片的名稱private String image;//記住分類的idprivate String category_id;//各種setter和getter

設(shè)計(jì)數(shù)據(jù)庫表

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：查找圖書的分頁數(shù)據(jù)【圖書一般來說有很多，所以要分頁】*/ 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);}}/**得到圖書的分頁數(shù)據(jù)*/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);}}/**得到按照分類圖書的分頁數(shù)據(jù)*/public List<Book> getPageData(int start, int end,String category_id) {QueryRunner queryRunner = new QueryRunner(Utils2DB.getDataSource());//WHERE字句在limit字句的前邊，注意Object[]的參數(shù)位置！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);}}/*** 得到圖書的總記錄數(shù)*/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);}}/*** 得到分類后圖書的總記錄數(shù)* 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);}}}

測(cè)試DAO

public class BookDemo {BookDaoImpl bookDao = new BookDaoImpl();@Testpublic 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);}@Testpublic 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());}}@Testpublic 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);}/*獲取圖書的分頁數(shù)據(jù)*/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;}/*獲取圖書分類后的分頁數(shù)據(jù)*/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;}

后臺(tái)添加圖書

后臺(tái)要添加圖書的時(shí)候，應(yīng)該說明圖書的類型是什么。

要想在顯示添加圖書的頁面上知道全部類型的id，就要經(jīng)過Servlet把類型的集合傳送過去

綁定鏈接

傳送類型集合的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> 圖書價(jià)錢：</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>詳細(xì)描述</td><td><textarea name="description"></textarea></td></tr><tr><td><input type="submit" value="提交"><input type="reset" value="重置"></td></tr></table> </form>

處理表單數(shù)據(jù)Servlet

else if (method.equals("add")) {//上傳文件和普通數(shù)據(jù)分割開，封裝到Book對(duì)象上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);//設(shè)置編碼upload.setHeaderEncoding("UTF-8");//為上傳表單，則調(diào)用解析器解析上傳數(shù)據(jù)List<FileItem> list = upload.parseRequest(request); //FileItem//遍歷list，得到用于封裝第一個(gè)上傳輸入項(xiàng)數(shù)據(jù)fileItem對(duì)象for(FileItem item : list){if(item.isFormField()){//得到的是普通輸入項(xiàng)String name = item.getFieldName(); //得到輸入項(xiàng)的名稱String value = item.getString("UTF-8");//使用BeanUtils封裝數(shù)據(jù)BeanUtils.setProperty(book, name, value);}else{//得到上傳輸入項(xiàng)//得到上傳文件名全路徑String filename = item.getName();//截取文件名filename = filename.substring(filename.lastIndexOf("\\")+1);InputStream in = item.getInputStream(); //得到上傳數(shù)據(jù)int len = 0;byte buffer[]= new byte[1024];//如果沒有這個(gè)目錄，就創(chuàng)建它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);}//設(shè)置圖片的名字book.setImage(filename);in.close();out.close();//關(guān)閉臨時(shí)文件item.delete();}}}catch (Exception e) {e.printStackTrace();}return book;}

效果：

后臺(tái)顯示圖書模塊

由于我們用的是分頁技術(shù)，所以我們導(dǎo)入之前寫過的Page類和jsp吧…..這些代碼可以在我復(fù)用代碼博文中找到

綁定超鏈接

Servlet處理請(qǐng)求

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對(duì)象，而不是list集合

可以根據(jù)記載在Book對(duì)象的圖片名稱，弄一個(gè)超鏈接，超鏈接指向服務(wù)端的圖片，這樣就可以查看圖片了！

<c:if test="${empty(page.list)}">暫時(shí)還沒有任何圖書哦</c:if><c:if test="${!empty(page.list)}"><table border="1px"><tr><td>書名</td><td>作者</td><td>價(jià)錢</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>

效果：

前臺(tái)頁面

看回我們前臺(tái)頁面的成果圖，我們可以把整個(gè)body頁面看成是三個(gè)div

body占整個(gè)div
導(dǎo)航條是一個(gè)div
顯示圖書的地方是一個(gè)div

設(shè)計(jì)好大概的布局

html代碼引入css

HTML三個(gè)div

<div id="body"><div id="category"><c:forEach items="${categorys}" var="category"></c:forEach>這是導(dǎo)航條</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

在顯示首頁的下部分的時(shí)候，應(yīng)該先去尋找一個(gè)Servlet來把數(shù)據(jù)交給對(duì)應(yīng)的JSP。

如果直接顯示JSP頁面，是沒有后臺(tái)的數(shù)據(jù)的！

Servlet代碼：

//得到所有的分類數(shù)據(jù)，給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顯示數(shù)據(jù)

<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>價(jià)格：${book.price}</li><li>作者：${book.author}</li></div></div><%--這里要清除浮動(dòng)，十分重要！--%><div style="clear: both"></div></c:forEach></div><div id="page"><jsp:include page="/client/page.jsp"/></div> </div>

CSS代碼：

重要的是：如果div浮動(dòng)都黏貼在一起了，那么在后邊多加個(gè)div，用于清除浮動(dòng)效果

#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; }

效果：

按照分類顯示圖書

我們可以根據(jù)左邊的導(dǎo)航條來顯示相對(duì)應(yīng)的分類圖書。

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);

效果：

轉(zhuǎn)載于:https://www.cnblogs.com/zhong-fucheng/p/7203004.html

總結(jié)

以上是生活随笔為你收集整理的bookStore第二篇【图书模块、前台页面】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：已知可生成0~4的rand5(),实现生
下一篇：洛谷——P2871 [USACO07DE