首页 > 其他分享 >BooksManagementSystem（图书管理系统）

BooksManagementSystem（图书管理系统）

时间：2023-02-13 14:47:24浏览次数：47  
标签：管理系统 width delay webkit animation duration import BooksManagementSystem 图书

一、数据库

  1. 创建数据库

    -- 添加数据库
create database if not exists bms;

  2. 创建表

    -- 创建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;

  3. 插入数据

    -- 表中添加数据
insert into `book` values(1,'国学的读与做','华夏出版社','潘志坚，江洋 著');
insert into `book` values
(null,'浮生六记（软精装）','江苏人民出版社','[清] 沈复 著，霍振国 译'),
(null,'标准日语临摹字帖','	江苏凤凰科学技术出版社','易人外语编辑部 编');

二、搭建maven环境

  1. 搭建框架：dao、Filter、pojo、service、servlet、utils、app

  2. 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>

  3. 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>

  4. 配置tomcat，并运行

  5. 导入resources配置文件

    driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/bms?useUnicode=true&characterEncoding=utf8&useSSL=true
username=root
password=123456

  6. 编写过滤器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实体类

  1. 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 + '\'' +
                '}';
    }
}

  2. 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层

  1. 编写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("添加成功");
//        }
//    }

}

  2. 编写UserDao接口

    package com.lyh.dao.user;

import com.lyh.pojo.User;

public interface UserDao {
    //添加用户
    boolean addUser(User user);
    //查询用户信息（登录）
    User Login(User user);
}

  3. 编写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;
    }
}

  4. 编写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);

}

  5. 编写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层

  1. 编写UserService接口

    package com.lyh.service;

import com.lyh.pojo.User;

public interface UserService {
    /**
     * 用户注册
     */
    boolean doRegedit(User user);
    /**
     * 用户登录
     */
    User doLogin(User user);
}

  2. 编写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);
    }
}

  3. 编写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);
}

  4. 编写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层

  1. 编写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);
    }
}

  2. 编写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);
    }
}

  3. 编写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);
    }
}

  4. 编写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);
    }
}

  5. 编写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);
    }
}

  6. 编写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() {

    }
}

七、前端页面

  1. 错误页面（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>

  2. 登录页面（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>

  3. 注册页面（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>

  4. 主页面（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>

  5. 添加页面（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>

  6. 修改页面（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>

标签：管理系统,width,delay,webkit,animation,duration,import,BooksManagementSystem,图书
From： https://www.cnblogs.com/lyhidea/p/17116260.html

相关文章

  • 什么是wms仓储管理系统？
    WarehouseManagementSystem简称WMS，也就是我们经常讲到的仓储管理系统。从狭义上来讲它是一个实时的计算机软件系统，它能够按照运作的业务规则和运算法则，对信息、资源、行......
  • 一个成熟的WMS（仓库管理系统）应该具备的那些功能
    一个成熟的WMS（仓库管理系统）应该具备的那些功能WMS仓库管理系统是一款以标准化、智能化过程导向管理的仓库管理软件，它结合了众多知名企业的实际情况和管理经验，按照运作的业务......
  • C/C++图书入库管理系统[2023-02-13]
    C/C++图书入库管理系统[2023-02-13]题目21图书入库管理系统[说明及要求]实现图书信息(书号、书名、作者、定价、数量)的新增、修改、删除和查询功能;实现入库信息(书号......
  • C/C++物业费管理系统[2023-02-13]
    C/C++物业费管理系统[2023-02-13]12物业费管理系统完成小区物业费用管理系统设计。功能要求:(1)新住户信息的添加。(户主姓名、性别、身份证号、联系电话、楼号、单元......
  • 常见数据库管理系统
    常见数据库管理系统 ......
  • C/C++工业数据分析与文件信息管理系统[2023-02-12]
    C/C++工业数据分析与文件信息管理系统[2023-02-12]程序设计基础A课程设计工业数据分析与文件信息管理系统题目背景智能制造是以工业生产数据分析、自动化技术为基础，具......
  • 四家文档管理系统中披露的未修补安全漏洞
    四家供应商LogicalDOC、Mayan、ONLYOFFICE和OpenKM的开源和免费增值文档管理系统(DMS)产品中披露了多个未修补的安全漏洞。佛山市东联科技有限公司网络安全研究人员......
  • python django综合成绩管理系统
    pythondjango综合成绩管理系统 pythondjango成绩管理pythondjango互评系统pythondjango班级管理系统基于pythondjango综合成绩管理系统后端：python2.7+djang......
  • 基于Java+Springmvc vue+element员工信息管理系统详细设计
    基于Java+Springmvc+vue+element员工信息管理系统详细设计前言介绍：系统管理也都将通过计算机进行整体智能化操作，对于企业员工考勤管理系统所牵扯的管理及数据保存都是非常......
  • 2023年国内外十大免费CRM管理系统推荐
    先给一个结论：市场上并不存在完全免费的CRM软件。几乎都是个人使用免费或者限制很少量的数据存储量或者功能极其简单。所以无论是SaaS软件免费版本、开源版还是破解版CRM，......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99