BooksManagementSystem（图书管理系统）
-
创建数据库
-- 添加数据库 create database if not exists bms; -
创建表
-- 创建user表 create table `user`( `id` int(11) not null auto_increment comment '学号', `username` varchar(20) default null, `password` varchar(20) default null, primary key(`id`) )ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;-- 创建一个表 create table `book`( `bookID` int(11) not null auto_increment comment '图书编号', `bookName` varchar(20) default null comment '图书名称', `bookPublishing` varchar(20) default null comment '图书出版社', `bookAuthor` varchar(20) default null comment '图书作者', primary key(`bookID`) )ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; -
插入数据
-- 表中添加数据 insert into `book` values(1,'国学的读与做','华夏出版社','潘志坚，江洋 著'); insert into `book` values (null,'浮生六记（软精装）','江苏人民出版社','[清] 沈复 著，霍振国 译'), (null,'标准日语临摹字帖',' 江苏凤凰科学技术出版社','易人外语编辑部 编');
二、搭建maven环境
-
搭建框架：dao、Filter、pojo、service、servlet、utils、app
-
pom.xml中配置依赖
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.lyh</groupId> <artifactId>BooksManagementSystem</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.7</maven.compiler.source> <maven.compiler.target>1.7</maven.compiler.target> </properties> <dependencies> <!-- mysql驱动依赖--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.47</version> </dependency> <!-- servlet依赖--> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <!-- 测试依赖--> <dependency> <groupId>org.junit.jupiter</groupId> <artifactId>junit-jupiter</artifactId> <version>5.9.1</version> <scope>test</scope> </dependency> <!-- jstl标签库--> <dependency> <groupId>javax.servlet.jsp.jstl</groupId> <artifactId>jstl-api</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> </dependencies> </project> -
web.xml修改头部
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <display-name>Archetype Created Web Application</display-name> <!-- 设置欢迎页面--> <welcome-file-list> <welcome-file>login.jsp</welcome-file> </welcome-file-list> </web-app> -
配置tomcat，并运行
-
导入resources配置文件
driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/bms?useUnicode=true&characterEncoding=utf8&useSSL=true username=root password=123456 -
编写过滤器Filter
package com.lyh.Filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import java.io.IOException; //处理乱码问题 @WebFilter("/*") public class CharacterFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { servletRequest.setCharacterEncoding("UTF-8"); filterChain.doFilter(servletRequest,servletResponse); } @Override public void destroy() { } }
三、编写pojo实体类
-
user实体类
package com.lyh.pojo; public class User { private Integer id; private String userName; private String passWord; public User() { } public User(Integer id, String userName, String passWord) { this.id = id; this.userName = userName; this.passWord = passWord; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getPassWord() { return passWord; } public void setPassWord(String passWord) { this.passWord = passWord; } @Override public String toString() { return "user{" + "id=" + id + ", userName='" + userName + '\'' + ", passWord='" + passWord + '\'' + '}'; } } -
book实体类
package com.lyh.pojo; public class Book { private Integer bookID; private String bookName; private String bookPublishing; private String bookAuthor; public Book() { } public Book(Integer bookID, String bookName, String bookPublishing, String bookAuthor) { this.bookID = bookID; this.bookName = bookName; this.bookPublishing = bookPublishing; this.bookAuthor = bookAuthor; } public Integer getBookID() { return bookID; } public void setBookID(Integer bookID) { this.bookID = bookID; } public String getBookName() { return bookName; } public void setBookName(String bookName) { this.bookName = bookName; } public String getBookPublishing() { return bookPublishing; } public void setBookPublishing(String bookPublishing) { this.bookPublishing = bookPublishing; } public String getBookAuthor() { return bookAuthor; } public void setBookAuthor(String bookAuthor) { this.bookAuthor = bookAuthor; } @Override public String toString() { return "user{" + "bookID=" + bookID + ", bookName='" + bookName + '\'' + ", bookPublishing='" + bookPublishing + '\'' + ", bookAuthor='" + bookAuthor + '\'' + '}'; } }
四、编写dao层
-
编写jdbc连接类（也就是BaseDao）并测试
package com.lyh.dao; import com.lyh.pojo.User; import org.junit.jupiter.api.Test; import java.io.IOException; import java.io.InputStream; import java.sql.*; import java.util.Properties; /** * 连接数据库工具类 */ public class BaseDao { private static String driver; private static String url; private static String username; private static String password; private Connection connection; private ResultSet resultSet; private PreparedStatement preparedStatement; //静态代码块，类加载的时候就初始化了 static { Properties properties = new Properties(); /* BaseDao.class获取当前工具类的Class文件 getClassLoader()获取该Class文件的类装载器 getResourceAsStream(“db.properties”)通过类加载器的方法加载资源,返回的是字节流 使用Properties类是为了可以从.properties属性文件对应的文件输入流中， 加载属性列表到Properties类对象， 然后通过getProperty方法用指定的键在此属性列表中搜索属性 */ //通过类加载器读取对应的资源 InputStream resourceAsStream = BaseDao.class.getClassLoader().getResourceAsStream("db.properties"); try { properties.load(resourceAsStream); } catch (IOException e) { e.printStackTrace(); } driver = properties.getProperty("driver"); url = properties.getProperty("url"); username = properties.getProperty("username"); password = properties.getProperty("password"); try { //加载驱动 Class.forName(driver); } catch (ClassNotFoundException e) { e.printStackTrace(); } } //创建连接 private void getconnection() { try { connection = DriverManager.getConnection(url, username, password); } catch (SQLException e) { e.printStackTrace(); } } //执行sql语句 /** * Object...意思就是你写一个参数，他读取一个参数，写两个读取两个 */ //增删改 public int executeUpdate(String sql, Object... objects) { //获取连接 getconnection(); try { //select * from user where name=? and pwd=?; preparedStatement = connection.prepareStatement(sql); if (objects != null) { for (int i = 0; i < objects.length; i++) { preparedStatement.setObject(i + 1, objects[i]); } } int i = preparedStatement.executeUpdate(); //关闭资源 close(); return i; } catch (SQLException e) { e.printStackTrace(); } return -1; } //查询 public ResultSet executeQuery(String sql,Object...objects){ //获取连接 getconnection(); try { preparedStatement = connection.prepareStatement(sql); if (objects!=null){ for (int i = 0; i < objects.length; i++) { preparedStatement.setObject(i+1,objects[i]); } } resultSet = preparedStatement.executeQuery(); return resultSet; } catch (SQLException e) { e.printStackTrace(); } return null; } //关闭连接 public void close() { try { if (resultSet != null) { resultSet.close(); } if (preparedStatement != null) { preparedStatement.close(); } if (connection != null) { connection.close(); } } catch (SQLException e) { e.printStackTrace(); System.out.println("失败"); } } // @Test // public void t1(){ // User user = new User(null,"王子恩","123123"); // String sql="insert into `user`(username,password) values('"+user.getUserName()+"','"+user.getPassWord()+"');"; // int update = executeUpdate(sql); // if (update>0){ // System.out.println("添加成功"); // } // } } -
编写UserDao接口
package com.lyh.dao.user; import com.lyh.pojo.User; public interface UserDao { //添加用户 boolean addUser(User user); //查询用户信息（登录） User Login(User user); } -
编写UserDaoImpl实现类
package com.lyh.dao.user; import com.lyh.dao.BaseDao; import com.lyh.pojo.User; import java.sql.ResultSet; import java.sql.SQLException; public class UserDaoImpl extends BaseDao implements UserDao { @Override public boolean addUser(User user) { String sql="insert into `user`(username,password) values(?,?);"; int i = this.executeUpdate(sql, user.getUserName(), user.getPassWord()); if (i<=0){ return false; } return true; } @Override public User Login(User user) { String sql="select * from user where username=? and password=?"; ResultSet resultSet = this.executeQuery(sql, user.getUserName(), user.getPassWord()); System.out.println(sql); try { User user1=null; if (resultSet.next()){ user1=new User(resultSet.getInt(1),resultSet.getString(2),resultSet.getString(3)); } close(); return user1; } catch (SQLException e) { e.printStackTrace(); } return null; } } -
编写BookDao
package com.lyh.dao.book; import com.lyh.pojo.Book; import java.util.List; /** * 图书实例化接口 */ public interface BookDao { //查询图书 List<Book> listBookByName(String bookName); //添加图书 int addBook(Book book); //修改图书 int updateBook(Book book); //删除图书 int delBook(Integer bookID); } -
编写BookDaoImpl
package com.lyh.dao.book; import com.lyh.dao.BaseDao; import com.lyh.pojo.Book; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; public class BookDaoImpl extends BaseDao implements BookDao { @Override public List<Book> listBookByName(String bookName) { List list = new ArrayList(); String sql="select * from book;"; ResultSet resultSet = executeQuery(sql); try { while (resultSet.next()){ Book book = new Book( resultSet.getInt(1), resultSet.getString(2), resultSet.getString(3), resultSet.getString(4) ); list.add(book); } } catch (SQLException e) { e.printStackTrace(); System.out.println("查询错误"); } return list; } @Override public int addBook(Book book) { String sql="insert into book(bookName,bookPublishing,bookAuthor) values(?,?,?);"; return executeUpdate(sql,book.getBookName(),book.getBookPublishing(),book.getBookAuthor()); } @Override public int updateBook(Book book) { String sql="update book set bookName=?,bookPublishing=?,bookAuthor=? where bookID=?;"; return executeUpdate(sql,book.getBookName(),book.getBookPublishing(),book.getBookAuthor(),book.getBookID()); } @Override public int delBook(Integer bookID) { String sql="delete from book where bookID=?;"; return executeUpdate(sql,bookID); } }
五、编写service层
-
编写UserService接口
package com.lyh.service; import com.lyh.pojo.User; public interface UserService { /** * 用户注册 */ boolean doRegedit(User user); /** * 用户登录 */ User doLogin(User user); } -
编写UserServiceImpl实现类
package com.lyh.service; import com.lyh.dao.user.UserDao; import com.lyh.dao.user.UserDaoImpl; import com.lyh.pojo.User; public class UserServiceImpl implements UserService { private UserDao userDao=new UserDaoImpl(); @Override public boolean doRegedit(User user) { return userDao.addUser(user); } @Override public User doLogin(User user) { return userDao.Login(user); } } -
编写BookService
package com.lyh.service; import com.lyh.pojo.Book; import java.util.List; public interface BookService { //查询图书 List<Book> listBookByName(String bookName); //添加图书 int addBook(Book book); //修改图书 int updateBook(Book book); //删除图书 int delBook(Integer bookID); } -
编写BookServiceImpl
package com.lyh.service; import com.lyh.dao.book.BookDao; import com.lyh.dao.book.BookDaoImpl; import com.lyh.pojo.Book; import java.util.List; public class BookServiceImpl implements BookService{ private BookDao bookDao=new BookDaoImpl(); @Override public List<Book> listBookByName(String bookName) { return bookDao.listBookByName(bookName); } @Override public int addBook(Book book) { return bookDao.addBook(book); } @Override public int updateBook(Book book) { return bookDao.updateBook(book); } @Override public int delBook(Integer bookID) { return bookDao.delBook(bookID); } }
六、编写servlet层
-
编写LoginServlet类（登录）：从页面上抓取数据添加到数据库中；往service层传递数据
package com.lyh.servlet; import com.lyh.pojo.User; import com.lyh.service.UserService; import com.lyh.service.UserServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/doLogin") public class LoginServlet extends HttpServlet { private UserService userService=new UserServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username = req.getParameter("username"); String password = req.getParameter("password"); User user = new User(null, username, password); User user1 = userService.doLogin(user); if (user1!=null){ req.getSession().setAttribute("user",user); resp.sendRedirect("index.jsp"); }else { resp.sendRedirect("error.jsp"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } -
编写RegeditServlet类（注册）：从页面上抓取数据添加到数据库中；往service层传递数据
package com.lyh.servlet; import com.lyh.pojo.User; import com.lyh.service.UserService; import com.lyh.service.UserServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/doRegedit") public class RegeditServlet extends HttpServlet { private UserService userService=new UserServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username = req.getParameter("username"); String password = req.getParameter("password"); User user = new User(null,username,password); boolean b = userService.doRegedit(user); if (b){ resp.sendRedirect("login.jsp"); }else { resp.sendRedirect("error.jsp"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } -
编写AddBookServlet类（添加）：从页面上抓取数据添加到数据库中：往service层传递数据
package com.lyh.servlet; import com.lyh.pojo.Book; import com.lyh.service.BookService; import com.lyh.service.BookServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 添加图书 */ @WebServlet("/addBook") public class AddBookServlet extends HttpServlet { private BookService bookService=new BookServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String bookName = req.getParameter("bookName"); String bookPublishing = req.getParameter("bookPublishing"); String bookAuthor = req.getParameter("bookAuthor"); Book book = new Book(null,bookName,bookPublishing,bookAuthor); int i = bookService.addBook(book); if (i>0){ System.out.println("添加成功"); resp.sendRedirect("HomePage.jsp"); }else { resp.sendRedirect("error.jsp"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } -
编写DelBookServlet类（删除）：根据页面session中活得图书编号然后根据编号删除这一类
package com.lyh.servlet; import com.lyh.service.BookService; import com.lyh.service.BookServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/delBook") public class DelBookServlet extends HttpServlet { private BookService bookService=new BookServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String bookID = req.getParameter("bookID"); int i = bookService.delBook(Integer.parseInt(bookID)); if (i>0){ System.out.println("删除成功"); resp.sendRedirect("HomePage.jsp"); }else { System.out.println("删除失败"); resp.sendRedirect("error.jsp"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } -
编写UpdateServlet类（修改）：从页面上抓取数据添加到数据库中：往service层传递数据
package com.lyh.servlet; import com.lyh.pojo.Book; import com.lyh.service.BookService; import com.lyh.service.BookServiceImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/UpdateBook") public class UpdateServlet extends HttpServlet { private BookService bookService=new BookServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String bookID = req.getParameter("bookID"); String bookName = req.getParameter("bookName"); String bookPublishing = req.getParameter("bookPublishing"); String bookAuthor = req.getParameter("bookAuthor"); Book book = new Book(); book.setBookID(Integer.valueOf(bookID)); book.setBookName(bookName); book.setBookPublishing(bookPublishing); book.setBookAuthor(bookAuthor); int i = bookService.updateBook(book); if (i>0){ System.out.println("修改成功"); resp.sendRedirect("HomePage.jsp"); }else { resp.sendRedirect("error.jsp"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } -
编写ListBookFilter过滤器(过滤页面直接显示数据库中的数据到页面，每次访问都会过滤)
package com.lyh.Filter; import com.lyh.pojo.Book; import com.lyh.service.BookService; import com.lyh.service.BookServiceImpl; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.io.IOException; import java.util.List; @WebFilter("/HomePage.jsp") public class ListBookFilter implements Filter { private BookService bookService=new BookServiceImpl(); @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpSession session = ((HttpServletRequest) servletRequest).getSession(); List<Book> books = bookService.listBookByName(null); session.setAttribute("bookList",books); filterChain.doFilter(servletRequest,servletResponse); } @Override public void destroy() { } }
七、前端页面
-
错误页面（error.jsp）
<%-- Created by IntelliJ IDEA. User: Admin Date: 2023/2/11 Time: 16:52 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <h1> 你是猪吗，这都能输入戳错误 </h1> </body> </html> -
登录页面（login.jsp）
<%-- Created by IntelliJ IDEA. User: Admin Date: 2023/1/4 Time: 19:52 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; padding: 0; font: 16px/20px microsft yahei; } .wrap { width: 100%; height: 100%; padding: 10% 0; position: fixed; opacity: 0.8; background: linear-gradient(to bottom right,#000000, #656565); background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6); } .container { width: 60%; margin: 0 auto; } .container h1 { text-align: center; color: #FFFFFF; font-weight: 500; } .container input { width: 320px; display: block; height: 36px; border: 0; outline: 0; padding: 6px 10px; line-height: 24px; margin: 32px auto; -webkit-transition: all 0s ease-in 0.1ms; -moz-transition: all 0s ease-in 0.1ms; transition: all 0s ease-in 0.1ms; } .container input[type="text"] , .container input[type="password"] { background-color: #FFFFFF; font-size: 16px; color: #50a3a2; } .container input[type='submit'] { font-size: 16px; letter-spacing: 2px; color: #666666; background-color: #FFFFFF; } .container input:focus { width: 400px; } .container input[type='submit']:hover { cursor: pointer; width: 400px; } .to_login{ color: #a7c4c9; } .text{ color: #e2dfe4; } .wrap ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -20; background-color: thistle; } .wrap ul li { list-style-type: none; display: block; position: absolute; bottom: -120px; width: 15px; height: 15px; z-index: -8; border-radius: 50%; background-color:rgba(255, 255, 255, 0.15); animotion: square 25s infinite; -webkit-animation: square 25s infinite; background-color: cornflowerblue; } .wrap ul li:nth-child(1) { left: 0; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 15s; -moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 11s; } .wrap ul li:nth-child(3) { left: 20%; width: 25px; height: 25px; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(4) { width: 50px; height: 50px; left: 30%; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(5) { width: 60px; height: 60px; left: 40%; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(6) { width: 75px; height: 75px; left: 50%; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } .wrap ul li:nth-child(7) { left: 60%; width: 30px; height: 30px; animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; -webkit-animation-duration: 8s; } .wrap ul li:nth-child(8) { width: 90px; height: 90px; left: 70%; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .wrap ul li:nth-child(9) { width: 50px; height: 50px; left: 80%; animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; -webkit-animation-duration: 20s; } .wrap ul li:nth-child(10) { width: 75px; height: 75px; left: 90%; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; animation-duration: 30s; -moz-animation-duration: 30s; -o-animation-duration: 30s; -webkit-animation-duration: 30s; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } </style> </head> <body> <div class="wrap"> <div class="container"> <h1 style="color: white; margin: 0; text-align: center">Sign up</h1> <form action="./doLogin" method="post"> <label><input type="text" name="username" placeholder="Your username"/></label> <label><input type="password" name="password" placeholder="password" /></label> <input type="submit" value="Sign up"/> <p class="change_link" style="text-align: center"> <span class="text">Already a member ?</span> <a href="redegit.jsp" class="to_login"> Go and log in </a> </p> </form> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> -
注册页面（redegit.jsp）
<%-- Created by IntelliJ IDEA. User: Admin Date: 2023/2/11 Time: 18:48 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; padding: 0; font: 16px/20px microsft yahei; } .wrap { width: 100%; height: 100%; padding: 10% 0; position: fixed; opacity: 0.8; background: linear-gradient(to bottom right,#000000, #656565); background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6); } .container { width: 60%; margin: 0 auto; } .container h1 { text-align: center; color: #FFFFFF; font-weight: 500; } .container input { width: 320px; display: block; height: 36px; border: 0; outline: 0; padding: 6px 10px; line-height: 24px; margin: 32px auto; -webkit-transition: all 0s ease-in 0.1ms; -moz-transition: all 0s ease-in 0.1ms; transition: all 0s ease-in 0.1ms; } .container input[type="text"] , .container input[type="password"] { background-color: #FFFFFF; font-size: 16px; color: #50a3a2; } .container input[type='submit'] { font-size: 16px; letter-spacing: 2px; color: #666666; background-color: #FFFFFF; } .container input:focus { width: 400px; } .container input[type='submit']:hover { cursor: pointer; width: 400px; } .to_login{ color: #a7c4c9; } .text{ color: #e2dfe4; } .wrap ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -20; background-color:cadetblue; } .wrap ul li { list-style-type: none; display: block; position: absolute; bottom: -120px; width: 15px; height: 15px; z-index: -8; border-radius: 50%; background-color:rgba(255, 255, 255, 0.15); animotion: square 25s infinite; -webkit-animation: square 25s infinite; } .wrap ul li:nth-child(1) { left: 0; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 15s; -moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 11s; } .wrap ul li:nth-child(3) { left: 20%; width: 25px; height: 25px; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(4) { width: 50px; height: 50px; left: 30%; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(5) { width: 60px; height: 60px; left: 40%; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(6) { width: 75px; height: 75px; left: 50%; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } .wrap ul li:nth-child(7) { left: 60%; width: 30px; height: 30px; animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; -webkit-animation-duration: 8s; } .wrap ul li:nth-child(8) { width: 90px; height: 90px; left: 70%; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .wrap ul li:nth-child(9) { width: 50px; height: 50px; left: 80%; animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; -webkit-animation-duration: 20s; } .wrap ul li:nth-child(10) { width: 75px; height: 75px; left: 90%; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; animation-duration: 30s; -moz-animation-duration: 30s; -o-animation-duration: 30s; -webkit-animation-duration: 30s; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } </style> </head> <body> <div class="wrap"> <div class="container"> <h1 style="color: white; margin: 0; text-align: center">Sign up</h1> <form action="./doRegedit" method="post" id="regedit"> <label><input type="text" placeholder="Your username" name="username"/></label> <label><input type="password" placeholder="password" id="pwd" value="" name="password" /></label> <label><input type="password" placeholder="Please confirm your password" id="tmpPwd" value="" name="tmppassword" /></label> <input type="submit" value="Register" onclick="regedit()"/> <p class="change_link" style="text-align: center"> <span class="text">Already a member ?</span> </p> </form> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script type="text/javascript"> function regedit() { var pwdEL = document.getElementById("pwd"); var tmpPwdEL = document.getElementById("tmpPwd"); if(pwdEL.value==tmpPwdEL.value && pwdEL.value!=null&&pwdEL!=""){ //数据进行提交 document.getElementById("regedit").submit(); } } </script> </body> </html> -
主页面（HomePage.jsp）
<%-- Created by IntelliJ IDEA. User: Admin Date: 2023/1/4 Time: 19:52 To change this template use File | Settings | File Templates. --%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户主页面</title> <style type="text/css"> * { box-sizing: border-box; margin-right: 20px; } body { margin: 0; padding: 0; font: 16px/20px microsft yahei; } .wrap { width: 100%; height: 100%; padding: 10% 0; position: fixed; opacity: 0.8; background: linear-gradient(to bottom right, #000000, #656565); background: -webkit-linear-gradient(to bottom right, #50a3a2, #53e3a6); } .container { width: 60%; margin: 0 auto; } .container h1 { text-align: center; color: #FFFFFF; font-weight: 500; } .container input { width: 320px; display: block; height: 36px; border: 0; outline: 0; padding: 6px 10px; line-height: 24px; margin: 32px auto; -webkit-transition: all 0s ease-in 0.1ms; -moz-transition: all 0s ease-in 0.1ms; transition: all 0s ease-in 0.1ms; } .container input[type="text"], .container input[type="password"] { background-color: #FFFFFF; font-size: 16px; color: #50a3a2; } .container input[type='submit'] { font-size: 16px; letter-spacing: 2px; color: #666666; background-color: #FFFFFF; } .container input:focus { width: 400px; } .container input[type='submit']:hover { cursor: pointer; width: 400px; } .to_login { color: #a7c4c9; } .text { color: #e2dfe4; } .wrap ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -20; background-color: cadetblue; } .wrap ul li { list-style-type: none; display: block; position: absolute; bottom: -120px; width: 15px; height: 15px; z-index: -8; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); animotion: square 25s infinite; -webkit-animation: square 25s infinite; } .wrap ul li:nth-child(1) { left: 0; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 15s; -moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 11s; } .wrap ul li:nth-child(3) { left: 20%; width: 25px; height: 25px; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(4) { width: 50px; height: 50px; left: 30%; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(5) { width: 60px; height: 60px; left: 40%; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(6) { width: 75px; height: 75px; left: 50%; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } .wrap ul li:nth-child(7) { left: 60%; width: 30px; height: 30px; animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; -webkit-animation-duration: 8s; } .wrap ul li:nth-child(8) { width: 90px; height: 90px; left: 70%; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .wrap ul li:nth-child(9) { width: 50px; height: 50px; left: 80%; animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; -webkit-animation-duration: 20s; } .wrap ul li:nth-child(10) { width: 75px; height: 75px; left: 90%; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; animation-duration: 30s; -moz-animation-duration: 30s; -o-animation-duration: 30s; -webkit-animation-duration: 30s; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } .tab { margin: 10px; } .tab { width: 770px; } .tab>.th { display: flex; justify-content: space-around; color: antiquewhite; line-height: 55px; } .tab>.row { display: flex; justify-content: space-around; margin-top: 20px; margin-right: 20px; } .col { width: 100%; font-size: 20px; } .yangshi { text-decoration: none; } </style> </head> <body> <div class="wrap"> <div class="container"> <h1 style="color: white; margin: 0; text-align: center">图书管理系统</h1> <form action="./doRegedit" method="post" id="regedit"> <div> <label> <div class="tab"> <div class="th"> <div class="col"> 图书编号 </div> <div class="col"> 图书名称 </div> <div class="col"> 图书出版社 </div> <div class="col"> 作者 </div> <div class="col"> 操作 </div> </div> <c:forEach items="${sessionScope.get('bookList')}" var="book"> <div class="row"> <div class="col">${book.bookID}</div> <div class="col">${book.bookName}</div> <div class="col">${book.bookPublishing}</div> <div class="col">${book.bookAuthor}</div> <div class="col"> <span> <a onclick='location.href="./delBook?bookID=${book.bookID}"' class="yangshi" style="color: antiquewhite">删除</a> </span> </div> </div> </c:forEach> </div> </label> </div> <div> <label> </label> </div> <p class="change_link" style="text-align: center"> <span><a href="AddBook.jsp" style="color: antiquewhite" class="yangshi">添加</a></span> <span><a href="UpdateBook.jsp" class="yangshi" style="size:20px;color: antiquewhite ">修改</a></span> <span class="text"><a href="./HomePage.jsp">返回主页</a></span> </p> </form> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> -
添加页面（AddBook.jsp）
<%-- Created by IntelliJ IDEA. User: Admin Date: 2023/2/12 Time: 14:03 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加图书</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; padding: 0; font: 16px/20px microsft yahei; } .wrap { width: 100%; height: 100%; padding: 10% 0; position: fixed; opacity: 0.8; background: linear-gradient(to bottom right,#000000, #656565); background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6); } .container { width: 60%; margin: 0 auto; } .container h1 { text-align: center; color: #FFFFFF; font-weight: 500; } .container input { width: 320px; display: block; height: 36px; border: 0; outline: 0; padding: 6px 10px; line-height: 24px; margin: 32px auto; -webkit-transition: all 0s ease-in 0.1ms; -moz-transition: all 0s ease-in 0.1ms; transition: all 0s ease-in 0.1ms; } .container input[type="text"] , .container input[type="password"] { background-color: #FFFFFF; font-size: 16px; color: #50a3a2; } .container input[type='submit'] { font-size: 16px; letter-spacing: 2px; color: #666666; background-color: #FFFFFF; } .container input:focus { width: 400px; } .container input[type='submit']:hover { cursor: pointer; width: 400px; } .to_login{ color: #a7c4c9; } .text{ color: #e2dfe4; } .wrap ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -20; background-color:cadetblue; } .wrap ul li { list-style-type: none; display: block; position: absolute; bottom: -120px; width: 15px; height: 15px; z-index: -8; border-radius: 50%; background-color:rgba(255, 255, 255, 0.15); animotion: square 25s infinite; -webkit-animation: square 25s infinite; } .wrap ul li:nth-child(1) { left: 0; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 15s; -moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 11s; } .wrap ul li:nth-child(3) { left: 20%; width: 25px; height: 25px; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(4) { width: 50px; height: 50px; left: 30%; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(5) { width: 60px; height: 60px; left: 40%; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(6) { width: 75px; height: 75px; left: 50%; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } .wrap ul li:nth-child(7) { left: 60%; width: 30px; height: 30px; animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; -webkit-animation-duration: 8s; } .wrap ul li:nth-child(8) { width: 90px; height: 90px; left: 70%; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .wrap ul li:nth-child(9) { width: 50px; height: 50px; left: 80%; animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; -webkit-animation-duration: 20s; } .wrap ul li:nth-child(10) { width: 75px; height: 75px; left: 90%; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; animation-duration: 30s; -moz-animation-duration: 30s; -o-animation-duration: 30s; -webkit-animation-duration: 30s; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } </style> </head> <body> <div class="wrap"> <div class="container"> <h1 style="color: white; margin: 0; text-align: center">添加图书</h1> <form action="./addBook" method="post" id="regedit"> <label><input type="text" placeholder="图书名称" name="bookName"/></label> <label><input type="text" placeholder="图书出版社" name="bookPublishing"/></label> <label><input type="text" placeholder="作者" name="bookAuthor"/></label> <input type="submit" value="添加"/> <p class="change_link" style="text-align: center"> <span class="text"><a href="./HomePage.jsp">返回主页面</a></span> </p> </form> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> </body> </html> -
修改页面（UpdateBook.jsp）
<%@ page import="com.lyh.pojo.Book" %><%-- Created by IntelliJ IDEA. User: Admin Date: 2023/2/12 Time: 14:05 To change this template use File | Settings | File Templates. --%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改页面</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; padding: 0; font: 16px/20px microsft yahei; } .wrap { width: 100%; height: 100%; padding: 10% 0; position: fixed; opacity: 0.8; background: linear-gradient(to bottom right,#000000, #656565); background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6); } .container { width: 60%; margin: 0 auto; } .container h1 { text-align: center; color: #FFFFFF; font-weight: 500; } .container input { width: 320px; display: block; height: 36px; border: 0; outline: 0; padding: 6px 10px; line-height: 24px; margin: 32px auto; -webkit-transition: all 0s ease-in 0.1ms; -moz-transition: all 0s ease-in 0.1ms; transition: all 0s ease-in 0.1ms; } .container input[type="text"] , .container input[type="password"] { background-color: #FFFFFF; font-size: 16px; color: #50a3a2; } .container input[type='submit'] { font-size: 16px; letter-spacing: 2px; color: #666666; background-color: #FFFFFF; } .container input:focus { width: 400px; } .container input[type='submit']:hover { cursor: pointer; width: 400px; } .to_login{ color: #a7c4c9; } .text{ color: #e2dfe4; } .wrap ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -20; background-color:cadetblue; } .wrap ul li { list-style-type: none; display: block; position: absolute; bottom: -120px; width: 15px; height: 15px; z-index: -8; border-radius: 50%; background-color:rgba(255, 255, 255, 0.15); animotion: square 25s infinite; -webkit-animation: square 25s infinite; } .wrap ul li:nth-child(1) { left: 0; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 15s; -moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 11s; } .wrap ul li:nth-child(3) { left: 20%; width: 25px; height: 25px; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(4) { width: 50px; height: 50px; left: 30%; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(5) { width: 60px; height: 60px; left: 40%; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(6) { width: 75px; height: 75px; left: 50%; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } .wrap ul li:nth-child(7) { left: 60%; width: 30px; height: 30px; animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; -webkit-animation-duration: 8s; } .wrap ul li:nth-child(8) { width: 90px; height: 90px; left: 70%; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .wrap ul li:nth-child(9) { width: 50px; height: 50px; left: 80%; animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; -webkit-animation-duration: 20s; } .wrap ul li:nth-child(10) { width: 75px; height: 75px; left: 90%; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; animation-duration: 30s; -moz-animation-duration: 30s; -o-animation-duration: 30s; -webkit-animation-duration: 30s; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; -webkit-transform: translateY(-500); transform: translateY(-500) } } </style> </head> <body> <div class="wrap"> <div class="container"> <h1 style="color: white; margin: 0; text-align: center">修改图书信息</h1> <form action="./UpdateBook" method="post" id="regedit"> <label><input type="text" placeholder="图书编号" name="bookID"/></label> <label><input type="text" placeholder="图书名称" name="bookName"/></label> <label><input type="text" placeholder="图书出版社" name="bookPublishing"/></label> <label><input type="text" placeholder="作者" name="bookAuthor"/></label> <input type="submit" value="修改"/> <p class="change_link" style="text-align: center"> <span class="text"><a href="./HomePage.jsp">返回主页面</a></span> </p> </form> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
