从零开始搭建一个web图书管理项目（增删改查功能）

参考资料：https://blog.csdn.net/qq_23994787/article/details/73612870

http://how2j.cn/

实习第一周，写下一些在建立web项目中的操作步骤和个人心得供自己以后可参考，大量参考了如上链接的资料，十分感谢。有一些东西被我省略了但不影响大体项目的完成，如有错误或不当欢迎指出

1、构建简单的数据库

在数据库名为：how2java中创建表格books

books中包含的信息有：id（每本书的唯一编号）、num（图书编号）、bookname（书名）、publish（出版社名）、author（作者）、status（状态：出借/在库）

auto_increment：会自动生成id号，且是按顺序往下生成（如中间删除了某条数据，再添加，id号不会覆盖原本被删除的号，而是会继续创建新的id号）

default charset=utf-8：解决中文编码问题，如没有这句，则下面添加数据中添加中文就会出错

create table books(id int(11) AUTO_INCREMENT,  num varchar(50) not null,bookname varchar(100) not null,publish varchar(100) not null,author varchar(50) not null,status varchar(30) not null,primary key(id)
)DEFAULT CHARSET=utf8;
select * from booksinsert into books values(null,'I202','Java入门到精通','人民教育出版社','张一','在库');
insert into books values(null,'I202','Java入门到精通','人民教育出版社','张一','在库');
insert into books values(null,'I203','HTML解读','清华出版社','李四','在库');
insert into books values(null,'I203','HTML解读','清华出版社','李四','出借');
insert into books values(null,'I203','HTML解读','清华出版社','李四','在库');
insert into books values(null,'P106','毛概精选','政府出版社','毛泽东','在库');
insert into books values(null,'P106','毛概精选','政府出版社','毛泽东','出借');
insert into books values(null,'M109','莫言小说集','上海出版社','莫言','在库');
insert into books values(null,'M109','莫言小说集','上海出版社','莫言','在库');
insert into books values(null,'M109','莫言小说集','上海出版社','莫言','出借');insert into books values(null,'I123','C语言教程','北大教育出版社','陈三','在库');
insert into books values(null,'I123','C语言教程','北大教育出版社','陈三','在库');
insert into books values(null,'I123','C语言教程','北大教育出版社','陈三','出借');
insert into books values(null,'C106','契科夫小说选','交大出版社','契科夫','出借');
insert into books values(null,'S200','21天学会JSP','火车出版社','宋八','在库');
insert into books values(null,'S200','21天学会JSP','火车出版社','宋八','出借');
insert into books values(null,'S200','21天学会JSP','火车出版社','宋八','出借');
insert into books values(null,'S200','21天学会JSP','火车出版社','宋八','在库');
insert into books values(null,'K170','孙子兵法','上海出版社','孙子','在库');
insert into books values(null,'K170','孙子兵法','上海出版社','孙子','出借');

2、在Eclipse中建立如下包

DAO：存放有关数据层的包

enity：存放实体类

filter：文件流的包，用来解决中文编码问题等

servlet：存放servlet文件

util：其他类包

3、首先在filter包下建立EncodingFilter文件

用该文件作为一个过滤器，对整体项目的中文编码问题进行过滤

package filter;import java.io.IOException;import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;public class EncodingFilter implements Filter{public EncodingFilter(){System.out.println("过滤器构造");}public void destroy(){System.out.println("过滤器销毁");}public void doFilter(ServletRequest request,ServletResponse response,FilterChain chain) throws IOException,ServletException{request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");chain.doFilter(request, response);}public void init(FilterConfig arg0) throws ServletException{System.out.println("过滤器初始化");}
}

4、在util包下建立数据库连接的文件

url中的地址和数据库名依据自身不同来修改

package util;import java.sql.*;public class DBconn {static String url="jdbc:mysql://127.0.0.1:3306/how2java?characterEncoding=utf8";static String username="root";static String pwd="admin";static Connection conn=null;static ResultSet rs=null;static PreparedStatement ps=null;public static void init(){try{Class.forName("com.mysql.jdbc.Driver");conn=DriverManager.getConnection(url,username,pwd);}catch(Exception e){System.out.println("init 数据库驱动初始化失败！");e.printStackTrace();}}public static int addUpdDel(String sql){int i=0;try{PreparedStatement ps=conn.prepareStatement(sql);i=ps.executeUpdate();}catch(SQLException e){System.out.println("数据库增删改异常！");e.printStackTrace();}return i;}public static ResultSet selectsql(String sql){try{ps=conn.prepareStatement(sql);rs=ps.executeQuery(sql);}catch(SQLException e){System.out.println("数据库查询异常！");e.printStackTrace();}return rs;}public static void closeConn(){try{conn.close();}catch(SQLException e){System.out.println("数据库关闭异常！");e.printStackTrace();}}
}

5、在entity包下建立实体类Books

这里介绍一个存取方法的快捷操作方式：在敲好属性之后，按下快捷键shift+alt+s后，找到一个Generate Getters and Setters即可快速创建

package enity;import javax.swing.text.StyledEditorKit.ForegroundAction;public class Books {private int id;private String num;private String bookname;private String publish;private String author;private String status;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getNum() {return num;}public void setNum(String num) {this.num = num;}public String getBookname() {return bookname;}public void setBookname(String bookname) {this.bookname = bookname;}public String getPublish() {return publish;}public void setPublish(String publish) {this.publish = publish;}public String getAuthor() {return author;}public void setAuthor(String author) {this.author = author;}public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}}

6、在DAO包下创建接口

在建立完以上的东西之后，创建一个关于图书管理的方法接口，名字为BooksDao

其中调用了enity类包下的实体类Books

register（Books book）：新建图书，引入参数类型为Books，参数名book

delete（int id）：删除图书，引入参数类型int，参数名id，根据id来删除图书

update（int id，String num，String bookname...）：更新图书，引入参数类型如下，根据id来更新图书

getBooksAll（）：查询所有图书信息，返回类型为Books的列表数组

getBooksSome（String num）：查询一部分图书信息（图书在一样的情况下，编号也一样），因此根据num来查询

list（）：用来返回List<Books>数组

list(int start，int count)：start表示从哪个数据开始，count表示哪个数据作为结束，用来做分页查询使用

getTotal（）：用来返回数据总数

package DAO;import java.util.List;import enity.Books;public interface BooksDao {public boolean register(Books book);  //新建图书public boolean delete(int id);  //删除图书public boolean update(int id,String num,String bookname,String publish,String author,String status);  //更新图书public List<Books> getBooksAll();  //查询所有图书信息public List<Books> getBooksSome(String num);  //查询一部分图书信息public List<Books> list();public List<Books> list(int start,int count);public int getTotal();
}

创建了接口，就应该在接口下写各方法的具体实现了，取名为BooksDaoImpl

其中需要注意的是，如数据类型为int，则在写SQL代码的时候，如：("select * from xx where id="+id)

若为String类型，则为：("select * from xx where num=' "+num+" ' " ) 中间的空格仅为看清楚使用，实际情况不需要空格，但需要注意为以上格式。

package DAO;import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import enity.Books;
import util.DBconn;public class BooksDaoImpl implements BooksDao{        public boolean register(Books book){          //新建图书boolean flag=false;DBconn.init();int i=DBconn.addUpdDel("insert into book"+ "s(num,bookname,publish,author,status)"+"values('"+book.getNum()+"','"+book.getBookname()+"','"+book.getPublish()+"','"+book.getAuthor()+"','"+book.getStatus()+"')");if(i>0){flag=true;}DBconn.closeConn();return flag;}public boolean delete(int id){         //根据id删除图书boolean flag=false;DBconn.init();String sql="delete from books where id="+id;int i=DBconn.addUpdDel(sql);if(i>0){flag=true;}DBconn.closeConn();return flag;}public boolean update(int id,String num,String bookname,String publish,String author,String status){  //更新图书boolean flag=false;DBconn.init();String sql="update books set num='"+num+"',bookname='"+bookname+"',publish='"+publish+"',author='"+author+"',status='"+status+"' where id="+id;int i=DBconn.addUpdDel(sql);if(i>0){flag=true;}DBconn.closeConn();return flag;}public List<Books> getBooksAll(){   //显示所有图书信息List<Books> list=new ArrayList<Books>();try{DBconn.init();ResultSet rs=DBconn.selectsql("select * from books");while(rs.next()){Books book=new Books();book.setId(rs.getInt("id"));book.setNum(rs.getString("num"));book.setBookname(rs.getString("bookname"));book.setPublish(rs.getString("publish"));book.setAuthor(rs.getString("author"));book.setStatus(rs.getString("status"));list.add(book);}DBconn.closeConn();return list;}catch(SQLException e){e.printStackTrace();}return null;}public List<Books> getBooksSome(String num){List<Books> list=new ArrayList<Books>();try{DBconn.init();ResultSet rs=DBconn.selectsql("select * from books where num='"+num+"'");while(rs.next()){Books book=new Books();book.setId(rs.getInt("id"));book.setNum(rs.getString("num"));book.setBookname(rs.getString("bookname"));book.setPublish(rs.getString("publish"));book.setAuthor(rs.getString("author"));book.setStatus(rs.getString("status"));list.add(book);}DBconn.closeConn();return list;}catch(SQLException e){e.printStackTrace();}return null;}public List<Books> list(){return list(0,Short.MAX_VALUE);}public List<Books> list(int start,int count){List<Books> books=new ArrayList<Books>();try{DBconn.init();//String sql="select * from books order by id desc limit ?,?";ResultSet rs=DBconn.selectsql("select * from books order by id asc limit "+start+","+count);while(rs.next()){Books book=new Books();book.setId(rs.getInt("id"));book.setNum(rs.getString("num"));book.setBookname(rs.getString("bookname"));book.setPublish(rs.getString("publish"));book.setAuthor(rs.getString("author"));book.setStatus(rs.getString("status"));books.add(book);}DBconn.closeConn();return books;}catch(SQLException e){e.printStackTrace();}return null;}public int getTotal(){int total=0;try{DBconn.init();ResultSet rs=DBconn.selectsql("select count(*) from books");while(rs.next()){total=rs.getInt(1);}DBconn.closeConn();}catch(SQLException e){e.printStackTrace();}return total;}
}

7、在servlet包下创建与数据库交互的servlet文件以此来实现功能

由以上的接口以及我们想要的功能来看，分别创建了以下的servlet文件来进行交互：

1、BookesAllSearchServlet.java：查询所有图书信息

2、BooksBianjiServlet.java：进入编辑模式

3、BooksDeleteServlet.java：删除图书

4、BooksRegisterServlet.java：新建图书

5、BooksSomeSearchServlet.java：查询部分图书信息

6、BooksUpdateServlet.java：更新图书信息

注：doGet和doPost可以用service代替，会自动识别是用Get还是Post方法

BookesAllSearchServlet

package servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.BooksDaoImpl;
import DAO.BooksDao;
import enity.Books;public class BookesAllSearchServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doPost(request,response);}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{int start=0;int count=5;try{start=Integer.parseInt(request.getParameter("start"));}catch(NumberFormatException e){}int next=start+count;int pre=start-count;int total=new BooksDaoImpl().getTotal();int last;if(0==total%count)last=total-count;elselast=total-total%count;pre=pre<0 ? 0:pre;next=next>last ? last :next;request.setAttribute("pre", pre);request.setAttribute("next", next);request.setAttribute("last", last);List<Books> bookAll=new BooksDaoImpl().list(start, count);request.setAttribute("bookAll", bookAll);request.getRequestDispatcher("/BooksAllShow.jsp").forward(request, response);}
}

解读：

request.getParameter("start")：从jsp页面取得name="start"的值
start初始为0，count初始为5，即每个页面显示5条记录，因此next表示下一页，即让start的下标加上5，pre同理，减5
int total=new BooksDaoImpl().getTotal()：从BooksDaoImpl中调取getTotal方法来返回数据总数并赋值给total
if(0==total%count)：当总数对每页显示的条数取余数等于0时，则刚好完整显示，否则多显示出剩余的条数
pre=pre<0 ? 0:pre：当处于第一页时，若点击上一页则会出现空数值，因此用该判断方法看是否已经到第一页，下一页同理
request.setAttribute("pre", pre)：把pre的值命名为pre并作为一个参数传到jsp页面，供jsp页面取值使用
request.getRequestDispatcher("/BooksAllShow.jsp").forward(request, response)：进行不同页面间跳转

BooksBianjiServlet

package servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.BooksDaoImpl;
import DAO.BooksDao;
import enity.Books;public class BooksBianjiServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doPost(request,response);}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{int start=0;int count=5;try{start=Integer.parseInt(request.getParameter("start"));}catch(NumberFormatException e){}int next=start+count;int pre=start-count;int total=new BooksDaoImpl().getTotal();int last;if(0==total%count)last=total-count;elselast=total-total%count;pre=pre<0 ? 0:pre;next=next>last ? last :next;request.setAttribute("pre", pre);request.setAttribute("next", next);request.setAttribute("last", last);List<Books> bookAll=new BooksDaoImpl().list(start, count);request.setAttribute("bookAll", bookAll);request.getRequestDispatcher("/BooksUpdate.jsp").forward(request, response);}
}

解读：这一页的区别在于跳转的页面不同，这一步是跳转到编辑模式的页面

BooksDeleteServlet

package servlet;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.BooksDao;
import DAO.BooksDaoImpl;public class BooksDeleteServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doPost(request,response);}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{String id=request.getParameter("id");int bookId=Integer.parseInt(id);BooksDao bd=new BooksDaoImpl();if(bd.delete(bookId)){request.setAttribute("xiaoxi","删除成功");request.getRequestDispatcher("/BookesAllSearchServlet").forward(request, response);}else{response.sendRedirect("fail.html");}}
}

解读：response.sendRedirect("fail.html")：也是一个跳转作用，是重新定向，前后页面不是一个request

而request.getRequestDispatcher是请求转发，前后页面共享一个request

BooksRegisterServlet

package servlet;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.BooksDao;
import DAO.BooksDaoImpl;
import enity.Books;public class BooksRegisterServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doPost(request,response);}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{if("".equals(request.getParameter("num")) || "".equals(request.getParameter("bookname")) ||"".equals(request.getParameter("publish")) ||"".equals(request.getParameter("author")) ||"".equals(request.getParameter("status"))){request.getRequestDispatcher("/fail.html").forward(request, response);}else{String num=request.getParameter("num");String bookname=request.getParameter("bookname");String publish=request.getParameter("publish");String author=request.getParameter("author");String status=request.getParameter("status");Books book=new Books();book.setNum(num);book.setBookname(bookname);book.setPublish(publish);book.setAuthor(author);book.setStatus(status);BooksDao bd=new BooksDaoImpl();if(bd.register(book)){request.getRequestDispatcher("/BookesAllSearchServlet").forward(request, response);}else{request.getRequestDispatcher("/login.html").forward(request, response);}}}
}

解读：

if判断语句用来判断jsp页面的输入框是否为空，若为空则跳转到fail.html进行提示
String num=request.getParameter("num")：同样在jsp页面的name="num"的输入框进行取值并赋值给num

BooksSomeSearchServlet

package servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.BooksDaoImpl;import DAO.BooksDao;
import enity.Books;public class BooksSomeSearchServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doPost(request,response);}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{BooksDao bd=new BooksDaoImpl();String num=request.getParameter("num");List<Books> bookSome=bd.getBooksSome(num);request.setAttribute("bookSome", bookSome);request.getRequestDispatcher("/BooksSomeShow.jsp").forward(request, response);}
}

BooksUpdateServlet

package servlet;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.w3c.dom.Document;import DAO.BooksDao;
import DAO.BooksDaoImpl;
import enity.Books;public class BooksUpdateServlet extends HttpServlet{public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doPost(request,response);}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{String id=request.getParameter("id");int bookId=Integer.parseInt(id);String num=request.getParameter("num");String bookname=request.getParameter("bookname");String publish=request.getParameter("publish");String author=request.getParameter("author");String status=request.getParameter("status");BooksDao bd=new BooksDaoImpl();if(bd.update(bookId,num,bookname,publish,author,status)){request.setAttribute("xiaoxi", "更新成功");request.getRequestDispatcher("/BookesAllSearchServlet").forward(request, response);}else{response.sendRedirect("fail.html");}}
}

8、在web下新建一个WEB-INF文件夹，并在WEB-INF文件夹下新建web.xml文件

创建完servlet文件之后，便需要给他们增加映射表以来让前端找得到这些servlet文件，以此来建立连接

<?xml version="1.0" encoding="UTF-8"?>
<web-app><filter><filter-name>EncodingFilter</filter-name><filter-class>filter.EncodingFilter</filter-class></filter><filter-mapping><filter-name>EncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><servlet><!--图书servlet类路径配置--><servlet-name>BookesAllSearchServlet</servlet-name><servlet-class>servlet.BookesAllSearchServlet</servlet-class></servlet><servlet><servlet-name>BooksRegisterServlet</servlet-name><servlet-class>servlet.BooksRegisterServlet</servlet-class></servlet><servlet><servlet-name>BooksSomeSearchServlet</servlet-name><servlet-class>servlet.BooksSomeSearchServlet</servlet-class></servlet><servlet><servlet-name>BooksDeleteServlet</servlet-name><servlet-class>servlet.BooksDeleteServlet</servlet-class></servlet><servlet><servlet-name>BooksUpdateServlet</servlet-name><servlet-class>servlet.BooksUpdateServlet</servlet-class></servlet><servlet><servlet-name>BooksBianjiServlet</servlet-name><servlet-class>servlet.BooksBianjiServlet</servlet-class></servlet><servlet-mapping><!--图书servlet类映射配置--><servlet-name>BookesAllSearchServlet</servlet-name><url-pattern>/BookesAllSearchServlet</url-pattern></servlet-mapping><servlet-mapping><servlet-name>BooksRegisterServlet</servlet-name><url-pattern>/BooksRegisterServlet</url-pattern></servlet-mapping><servlet-mapping><servlet-name>BooksSomeSearchServlet</servlet-name><url-pattern>/BooksSomeSearchServlet</url-pattern></servlet-mapping><servlet-mapping><servlet-name>BooksDeleteServlet</servlet-name><url-pattern>/BooksDeleteServlet</url-pattern></servlet-mapping><servlet-mapping><servlet-name>BooksUpdateServlet</servlet-name><url-pattern>/BooksUpdateServlet</url-pattern></servlet-mapping><servlet-mapping><servlet-name>BooksBianjiServlet</servlet-name><url-pattern>/BooksBianjiServlet</url-pattern></servlet-mapping>
</web-app>

解读：

最先创建好的filter类可以看到在其中也增加了映射，它的路径设置为“/*”代表将所有文件进行过滤
一般来说，<servlet>下的<servlet-name>应与<servlet-mapping>下的<servlet-name>一致
<servlet>下的<servlet-class>中填入全路径
<serlvet-mapping>下的<url-pattern>为路径，是后续操作中需要找到该文件的一个路径名称，一般与文件同名

9、接下来看看简陋的前端代码

前端代码有用html和jsp书写的页面，如下：

1、BooksAllShow.jsp：显示所有图书的界面

2、BooksManager.jsp：图书管理主界面

3、BooksRegister.jsp：新建图书界面

4、BooksSomeShow.jsp：显示一部分图书界面

5、BooksUpdate.jsp：更新图书界面

6、fail.html：失败操作界面

BooksAllShow.jsp

解读已放在代码注释中

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!-- 调用了一个jsp类包，prefix="c"表示后续皆以<c:开头 -->
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <!-- 这三个是用bootstrap中用来美化界面的 -->
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<html><head><base href="<%=basePath%>"><title>图书页面</title></head><script>
$(function(){$("a").addClass("btn btn-default btn-xs");   //bootstrap中用来美化按钮的
});
function del(){             //点击删除后会弹出一个确认框confirm，返回值为true和false，用来判断后续操作是否进行删除var d=confirm("确定删除吗？");if(d){return true;}else{return false;}
}
function open_win(){  //打开一个新的窗口，具体属性参考w3schoolwindow.open("BooksBianjiServlet","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=1300, height=600,left=150,top=100")
}
</script><body><h1>${xiaoxi}</h1>  <!-- 从上一个servlet中传来的参数为“xiaoxi”的值显示到此处 --><form action="BooksRegister.jsp" method="post" align="center">   <!-- action表示表单提交的动作，以post形式进行数据提交 -->
<input type="submit" value="新建图书" >
</form><form action="BooksSomeSearchServlet" method="post" align="center">
<input type="text" name="num">
<input type="submit" value="搜索图书">
</form><form action="BooksUpdateServlet" method="post"> <table  width="1200" border="1" cellpadding="0" class="table table-striped table-bordered table-hover  table-condensed" align='center'><tr><th>ID</th><th>图书编号</th><th>书名</th><th>出版社</th><th>作者</th><th>状态</th><th>删除</th><th>编辑</th></tr><c:forEach var="B" items="${bookAll}"  >     <!-- 可理解为一个加强型的for循环，重复打印一个表格出来。传过来的数据为bookAll，用B来代替--><tr><td>${B.id}</td>    <!-- 对上一个servlet的页面传过来的参数进行取值 --><td>${B.num}</td><td>${B.bookname}</td><td>${B.publish}</td><td>${B.author}</td><td>${B.status}</td><td><a href="BooksDeleteServlet?id=${B.id}" onclick="javascript:return del()">删除</a></td>  <!-- 用onclick事件触发js中的del函数，若返回值为false，则不会进行前一步的链接跳转；若为true，则跳转到BooksDeleteServlet，并将id的值传给它 --><td><a href="javacript:void(0)" onclick="open_win()">编辑</a></td></tr></c:forEach>  <tr><td colspan="8" align="center"><a href="BookesAllSearchServlet?start=0">[首  页]</a><a href="BookesAllSearchServlet?start=${pre}">[上一页]</a><a href="BookesAllSearchServlet?start=${next}">[下一页]</a><a href="BookesAllSearchServlet?start=${last}">[末  页]</a></td></tr></table></form> </body>
</html>

BooksManager.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
</head>
<body>
${xiaoxi} <br> <form action="BookesAllSearchServlet" method="post" align="center">
<input type="submit" value="查看所有图书">
</form></body>
</html>

BooksRegister.jsp

注：form最好写在table外层

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑页面</title>
</head><script type="text/javascript">
$(function(){$("a").addClass("btn btn-default btn-xs");});
function check(){var d=confirm("确定新建吗？");if(d){document.getElementById('form1').submit();  //document.getElementById取id，用submit提交表单}else{}
}</script>
<body><form action="BooksRegisterServlet" method="post" id="form1">
<table  width="1200" border="1" cellpadding="0" class="table table-striped table-bordered table-hover  table-condensed" align='center'><tr><th>图书编号</th><th>书名</th><th>出版社</th><th>作者</th><th>状态</th><th>确定</th><th>重置</th></tr><tr><td><input type="hidden" name="qwer"></td><td><input type="text" name="num"></td><td><input type="text" name="bookname"></td><td><input type="text" name="publish"></td><td><input type="text" name="author"></td><td><select name="status"><option value="在库" selected>在库</option><option value="出借">出借</option></select></td><td><a   onclick="check()">确定</a>  </td><td><input type="reset" value="重置"></td></tr></table>
</form>
</body>
</html>

BooksSomeShow.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<html><head><base href="<%=basePath%>"><title>图书页面</title></head><script>
$(function(){$("a").addClass("btn btn-default btn-xs");});
function del(){var d=confirm("确定删除吗？");if(d){return true;}else{return false;}
}
</script><body><h1>${xiaoxi}</h1><table  width="1200" border="1" cellpadding="0" class="table table-striped table-bordered table-hover  table-condensed" align='center'><tr><th>ID</th><th>图书编号</th><th>书名</th><th>出版社</th><th>作者</th><th>状态</th><th>删除</th><th>编辑</th></tr><c:forEach var="B" items="${bookSome}"  > <form action="BooksUpdateServlet" method="post"> <tr><td>${B.id}</td><td>${B.num}</td><td>${B.bookname}</td><td>${B.publish}</td><td>${B.author}</td><td>${B.status}</td><td><a href="BooksDeleteServlet?id=${B.id}" onclick="javascript:return del()">删除</a>  <td><input type="submit" value="编辑"/></td></tr></form> </c:forEach>  </table></body>
</html>

BooksUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
</head><script type="text/javascript">
$(function(){$("a").addClass("btn btn-default btn-xs");});
function update(){var d=confirm("确定更新吗？");if(d){document.getElementById('form1').submit();}else{}
}
</script>
<body>
<form action="BookesRegister.html" method="post" align="center">
<input type="submit" value="新建图书" >
</form><form action="BooksSomeSearchServlet" method="post" align="center">
<input type="text" name="num">
<input type="submit" value="搜索图书">
</form><table  width="1000" border="1" cellpadding="0" class="table table-striped table-bordered table-hover  table-condensed" align='center'><tr><th>ID</th><th>图书编号</th><th>书名</th><th>出版社</th><th>作者</th><th>状态</th><th>确定</th></tr>
<c:forEach var="B" items="${bookAll}"  >
<form action="BooksUpdateServlet?id=${B.id}" method="post" id="form1"> <tr><td>${B.id}</td><td><input type="text" name="num" value="${B.num}"></td><td><input type="text" name="bookname" value="${B.bookname}"></td><td><input type="text" name="publish" value="${B.publish}"></td><td><input type="text" name="author" value="${B.author}"></td><td><input type="text" name="status" value="${B.status}"></td><td><a  onclick="update()">确定</a></td></tr></form></c:forEach> <tr><td colspan="7" align="center"><a href="BooksBianjiServlet?start=0">[首  页]</a><a href="BooksBianjiServlet?start=${pre}">[上一页]</a><a href="BooksBianjiServlet?start=${next}">[下一页]</a><a href="BooksBianjiServlet?start=${last}">[末  页]</a></td></tr></table></body>
</html>

fail.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title></head>
<body>
<div style="color:red">录入数据不能为空！请重试！</div><br><br>
<a href="login.html" color="green">点击返回用户登录界面</a><br><br>
<a href="BookesRegister.html" color="red">点击返回新建图书界面</a><br><br>
<a href="zhuce.html" color="blue">点击返回注册用户界面</a>
</body>
</html>

注：其中的login.html和zhuce.html是我再做了一个用户登录的界面连接到这边来，原理一样

10、来看看简陋的成果吧

首先是用户登录界面（详细代码和过程就没有贴出来了，与图书管理的建立过程是一样的）

登录进去之后：

点击查看所有图书之后：

点击编辑之后会进入编辑模式：