图书管理系统【部署开发环境、解决分类、图书、前台页面模块】

电玩女神 2021-09-30 17:56 423阅读 0赞

# 前言 #

巩固Servlet+JSP开发模式，做一个比较完整的小项目.

# 成果图 #

该项目包含了两个部分，前台和后台。

前台用于显示

![640?wx\_fmt=png][640_wx_fmt_png]

后台用于管理

![640?wx\_fmt=png][640_wx_fmt_png 1]

该项目可分为5个模块来组成：**分类模块，用户模块，图书模块，购买模块，订单模块**。

--------------------

# 搭建环境 #

## 建立包结构 ##

![640?wx\_fmt=png][640_wx_fmt_png 2]

## 导入开发包 ##

![640?wx\_fmt=png][640_wx_fmt_png 3]

## 前台分帧页面 ##

*  index.jsp【没有body标签的】

*  head.jsp

*  body是空白的jsp页面
 *  效果：

![640?wx\_fmt=png][640_wx_fmt_png 4]

--------------------

## 后台分帧页面 ##

*  manager.jsp【嵌套了framset标签，也是没有body标签的】

*  head.jsp

*  left.jsp

*  body.jsp是空白的
 *  效果：

![640?wx\_fmt=png][640_wx_fmt_png 5]

## 分帧的文件夹目录结构 ##

![640?wx\_fmt=png][640_wx_fmt_png 6]

值得注意的是：

*  **文件夹的名字不能使用“manager”，不然会出现：403 Access Denied错误**
 *  **frameset标签是可以嵌套的，分列用“cols”，分行用“rows”**

## 导入工具类和方法的代码 ##

*  过滤中文乱码数据
 *  HTML转义
 *  DAOFactory
 *  JDBC连接池
 *  UUID工具类
 *  c3p0.xml配置文件

这些代码都可以在我的博客分类：**代码库**中找到！

--------------------

# 分类模块 #

首先，我们来做分类模块吧

## 创建实体Category ##

## 在数据库创建表 ##

## 编写CategoryDAO ##

## 测试DAO ##

## 抽取成DAO接口 ##

## 后台页面的添加分类 ##

*  在超链接上，绑定显示添加分类的页面

*  显示添加分类的JSP页面

*  处理添加分类的Servlet

*  效果：

![640?wx\_fmt=gif][640_wx_fmt_gif]

--------------------

## 后台页面的查看分类 ##

*  在超链接上，绑定处理请求的Servlet

*  显示分类页面的JSP

*  效果：

![640?wx\_fmt=png][640_wx_fmt_png 7]

--------------------

# 图书模块 #

## 分析 ##

在设计图书管理的时候，我们应该想到：**图书和分类是有关系的。一个分类可以对应多本图书。**

为什么要这样设计？这样更加人性化，用户在购买书籍的时候，用户能够查看相关分类后的图书，而不是全部图书都显示给用户，让用户一个一个去找。

## 设计实体 ##

## 设计数据库表 ##

## 编写DAO ##

## 测试DAO ##

## 抽取成DAO接口 ##

## 编写Service层 ##

## 后台添加图书 ##

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

**要想在显示添加图书的页面上知道全部类型的id，就要经过Servlet把类型的集合传送过去**

### **绑定链接** ###

### **传送类型集合的Servlet** ###

### **显示JSP页面** ###

### **处理表单数据Servlet** ###

*  uploadData()方法代码

*  效果：

![640?wx\_fmt=gif][640_wx_fmt_gif 1]

--------------------

## 后台显示图书模块 ##

由于我们用的是分页技术，所以我们导入之前写过的Page类和jsp吧.....这些代码可以在我分类的**代码库**中找到

### **绑定超链接** ###

### **Servlet处理请求** ###

### **显示图书JSP页面** ###

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

**可以根据记载在Book对象的图片名称，弄一个超链接，超链接指向服务端的图片，这样就可以查看图片了！**

### **效果：** ###

![640?wx\_fmt=gif][640_wx_fmt_gif 2]

--------------------

# 前台页面 #

看回我们前台页面的成果图，**我们可以把整个body页面看成是三个div**

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

![640?wx\_fmt=png][640_wx_fmt_png 8]

--------------------

## 设计好大概的布局 ##

*  **html代码引入css**

*  HTML三个div

*  CSS代码：

*  大概的布局

![640?wx\_fmt=png][640_wx_fmt_png 9]

--------------------

## IndexServlet ##

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

因为我们的JSP一般都是放在WEB-INF下，是不能直接访问的。还有就是JSP往往是需要我们后台的数据的，因此我们使用Servlet来获取得到数据，再交由JSP来展示就最好不过了。

*  Servlet代码：

--------------------

## JSP显示数据 ##

## CSS代码： ##

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

*  效果：

![640?wx\_fmt=png][640_wx_fmt_png 10]

--------------------

## 按照分类显示图书 ##

我们可以根据左边的导航条来显示相对应的分类图书。

*  Servlet代码：

### **效果：** ###

![640?wx\_fmt=gif][640_wx_fmt_gif 3]

--------------------

> 如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章的同学，可以**关注微信公众号:Java3y**

[640_wx_fmt_png]: /images/20210827/57dfa70a2be444ffaa8ac160996d5d30.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/b472c1c305ab4c8da0a7cef4830f022e.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/b48efcf66b864be3b9fbee82bf9a0017.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/f6406203a4bc482187b0dc8722381598.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/7e5fa651058b4056b9336fbf72f75023.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/5005a30eb1fc4521a0f2440c35784791.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/f2bf462ef2874cb8a51ad73fd522582f.png?wx_fmt=png
[640_wx_fmt_gif]: /images/20210827/1a81873d21884e71a0cef95d05663bcc.png?wx_fmt=gif
[640_wx_fmt_png 7]: /images/20210827/986cb13f39634400b9e2b7eebe028acc.png?wx_fmt=png
[640_wx_fmt_gif 1]: /images/20210827/ddcf4bcc9a0e45be8a56ce2cea858521.png?wx_fmt=gif
[640_wx_fmt_gif 2]: /images/20210827/6033593ea1bf4930b21649cfa3e0aab0.png?wx_fmt=gif
[640_wx_fmt_png 8]: /images/20210827/d4d2bb3e9f8640cf89d97fcb8474d19f.png?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210827/322da05a98ae47a29242042dc0573e73.png?wx_fmt=png
[640_wx_fmt_png 10]: /images/20210827/f91a88df7be3418c8cb4e77eba311851.png?wx_fmt=png
[640_wx_fmt_gif 3]: /images/20210827/2344f70133de434b9e04bcbeba3fe074.png?wx_fmt=gif