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

其他 2020-03-03 12:35:46 阅读次数: 0

参考资料：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 books


insert 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;
		else
			last=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);
	}
}

解读：

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

			}
		}
		
	}
}

解读：

  1. if判断语句用来判断jsp页面的输入框是否为空，若为空则跳转到fail.html进行提示 
  2. 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>

解读：

  1. 最先创建好的filter类可以看到在其中也增加了映射，它的路径设置为“/*”代表将所有文件进行过滤
  2. 一般来说，<servlet>下的<servlet-name>应与<servlet-mapping>下的<servlet-name>一致
  3. <servlet>下的<servlet-class>中填入全路径
  4. <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(){  //打开一个新的窗口，具体属性参考w3school
	window.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}" οnclick="javascript:return del()">删除</a></td>  
	       <!-- 用onclick事件触发js中的del函数，若返回值为false，则不会进行前一步的链接跳转；若为true，则跳转到BooksDeleteServlet，并将id的值传给它 -->
	       <td><a href="javacript:void(0)" οnclick="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   οnclick="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}" οnclick="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  οnclick="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、来看看简陋的成果吧

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

登录进去之后：

点击查看所有图书之后：

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

Joker-ls
发布了12 篇原创文章 · 获赞 14 · 访问量 6448
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_42678675/article/details/81164771
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022