这周做了简单的图书管理系统，就是简单的增删改查。
工程目录见下图
因为我也是刚学习javaweb，第一次做html，还不会用html遍历mysql数据库，就在html中穿插了两个jsp。
com.Bean层中：
BookInformation.java 是图书的类
package com.Bean; public class BookInformation { private String number; private String bookname; private String writer; private String quantity; public String getNumber() { return number; } public void setNumber(String number) { this.number = number; } public String getBookname() { return bookname; } public void setBookname(String bookname) { this.bookname = bookname; } public String getWriter() { return writer; } public void setWriter(String writer) { this.writer = writer; } public String getQuantity() { return quantity; } public void setQuantity(String quantity) { this.quantity = quantity; } }
User.java是登陆用户的一个类
package com.Bean; public class User { private String username; private String password; 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; } }
com.Servlet主要是跟前台页面进行交互的。
login1.java （登陆）
//Login1 登录servlet类 package com.Servlet; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; 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 com.Util.Utils; @WebServlet("/login1") public class login1 extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); Utils to=new Utils(); String username=request.getParameter("username"); String password=request.getParameter("password"); if(username==null||password==null){ //重新登录 System.out.println("账号或密码错误！"); response.sendRedirect("login1.html"); }else{ String sql="select * from user where username=? and password=?"; Object[] objs={username,password}; ResultSet rs= to.query(sql, objs); try { if(rs.next()){ //登陆成功，跳转到success页面 System.out.println("登陆成功！！"); response.getWriter().append("登陆成功!"); response.sendRedirect("home.html"); }else{ System.out.println("账号或密码错误！"); response.getWriter().append("登陆失败!"); } } catch (SQLException e) { e.printStackTrace(); } } } }
zhuce.java(注册)
package com.Servlet; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; 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 com.Util.Utils; import com.Bean.User; @WebServlet("/register1") public class zhuce extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求的字符集 request.setCharacterEncoding("utf-8"); //设置相应的文本类型 response.setContentType("text/html;charset=utf-8");//设置响应类型,并防止中文乱码 //数据库工具类 Utils to=new Utils(); String username=request.getParameter("username"); String password=request.getParameter("password"); System.out.println(username+"\t"+password); if(username==null||password==null){ response.sendRedirect("home.html"); }else{ System.out.println(username+"\t"+password); String sql1="select username from user where username=?"; Object[] objs1={username}; ResultSet rs=to.query(sql1, objs1); try { if(rs.next()){ response.sendRedirect("register1.html"); }else{ String sql2="insert into user(username,password)values(?,?)"; Object[] objs2={username,password}; int a=to.update(sql2,objs2); if(a>0){ response.getWriter().append("注册成功！"); }else{ response.getWriter().append("注册失败！"); } } } catch (SQLException e) { e.printStackTrace(); } } } }
addbook.java(添加书籍)
package com.Servlet; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; 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.util.Date; import java.util.concurrent.TimeUnit; import com.Util.Utils; import com.Bean.BookInformation; @WebServlet("/addbook") public class addbook extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); //设置相应的文本类型 response.setContentType("text/html;charset=utf-8");//设置响应类型,并防止中文乱码 //数据库工具类 Utils to1=new Utils(); String number=request.getParameter("number"); String bookname=request.getParameter("bookname"); String writer=request.getParameter("writer"); String quantity=request.getParameter("quantity"); String sql1="select number from tushu where number=?"; Object[] objs1={number}; System.out.println(number); ResultSet rs=to1.query(sql1, objs1); try { if(rs.next()){ System.out.println("已经有该图书了"); response.getWriter().append("已经有该图书了"); response.sendRedirect("addbook.html"); }else{ String sql2="insert into tushu(number,bookname,writer,quantity)values(?,?,?,?)"; System.out.println(number+"\t"+bookname+"\t"+writer+"\t"+quantity); Object[] objs2={number,bookname,writer,quantity}; int a=to1.update(sql2,objs2); if(a>0){ System.out.println("添加成功！！！"); response.getWriter().append("添加成功!"); }else{ System.out.println("添加失败！！！"); response.getWriter().append("添加失败!"); } } } catch (SQLException e) { e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求的字符集 this.doGet(request, response); } }
delite.java(删除书籍)
package com.Servlet; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; 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 com.Util.Utils; import com.Bean.BookInformation; @WebServlet("/delitebook") public class delitebook extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求的字符集 request.setCharacterEncoding("utf-8"); //设置相应的文本类型 response.setContentType("text/html;charset=utf-8");//设置响应类型,并防止中文乱码 //数据库工具类 Utils to=new Utils(); String number=request.getParameter("number"); String bookname=request.getParameter("bookname"); if(number==null||bookname==null){ response.getWriter().append("不能输入为空"); }else{ String sql2="delete from tushu where number=? and bookname=?"; Object[] objs2={number,bookname}; int a=to.delite(sql2,objs2); if(a>0) { response.getWriter().append("删除成功！"); } else { response.getWriter().append("删除失败！"); } } } }
updatebook.java(修改书籍)
package com.Servlet; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; 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 com.Util.Utils; import com.Bean.BookInformation; @WebServlet("/updatebook") public class updatebook extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求的字符集 request.setCharacterEncoding("utf-8"); //设置相应的文本类型 response.setContentType("text/html;charset=utf-8");//设置响应类型,并防止中文乱码 //数据库工具类 Utils to=new Utils(); String number0=request.getParameter("number0"); String number=request.getParameter("number"); String bookname=request.getParameter("bookname"); String writer=request.getParameter("writer"); String quantity=request.getParameter("quantity"); if(number==null){ response.getWriter().append("不能输入为空"); }else{ String sql2="UPDATE tushu SET number = ?, `bookname` = ?, writer = ? , quantity = ? WHERE number =?"; Object[] objs2={number,bookname,writer,quantity,number0}; int a=to.update(sql2,objs2); if(a>0) { response.getWriter().append("修改成功！"); } else { response.getWriter().append("修改失败！"); } } } }
select.java(查找书籍)
package com.Servlet; import java.io.IOException; import java.util.ArrayList; 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 com.Util.Utils; import com.Bean.BookInformation; /** * Servlet implementation class showall */ @WebServlet("/selectbook") public class selectbook extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public selectbook() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); //设置相应的文本类型 response.setContentType("text/html;charset=utf-8");//设置响应类型,并防止中文乱码 ArrayList <BookInformation> booklist = new ArrayList<BookInformation>(); //数据库工具类 Utils to=new Utils(); String number=request.getParameter("number"); if(number==null) { response.getWriter().append("输入内容为空"); }else { String sql1 ="select * from tushu where number=?"; String number1 =number; to.select(sql1, booklist,number1); request.setAttribute("booklist",booklist); request.getRequestDispatcher("selectbook1.jsp").forward(request, response); } } }
com.Util
Utils.java 是连接数据库的工具类，我这个没有dao层，增删改查的方法全部封装在工具类里
package com.Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import com.Bean.BookInformation; public class Utils { //定义数据库参数 private static String URL="jdbc:mysql://localhost:3306/db3"; private static String USER="root"; private static String PASSWORD="1767737316."; //创建连接对象，载体，结果集对象 private static Connection conn=null; private static PreparedStatement ps=null; private static ResultSet rs=null; //创建连接对象，可以直接在实例化前加载，使用静态方法 static{ try { Class.forName("com.mysql.cj.jdbc.Driver"); conn=DriverManager.getConnection(URL,USER,PASSWORD); System.out.println(conn.isClosed()==false? "数据库连接成功...":"数据库连接失败..."); } catch (SQLException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } } /** * 增删改方法update * @param sql 需要执行的sql语句 * @param objects 封装了数据的数组，需要和sql语句中的占位符一一对应 * @return 返回影响条数，反之为0 */ public int update(String sql,Object[] objects){ int a=0; try { //创建sql载体 ps=conn.prepareStatement(sql); //给占位符赋值 for(int i=0;i<objects.length;i++){ ps.setObject(i+1, objects[i]); } //操作SQL语句 a=ps.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } return a; } public int delite(String sql,Object[] objects){ int a=0; try { //创建sql载体 ps=conn.prepareStatement(sql); //给占位符赋值 for(int i=0;i<objects.length;i++){ ps.setObject(i+1, objects[i]); } //操作SQL语句 a=ps.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } return a; } public void select(String sql,ArrayList<BookInformation> booklist,String x){ try { //创建sql载体 ps=conn.prepareStatement(sql); ps.setString(1,x); ResultSet rs = ps.executeQuery(); while(rs.next()) { //ArrayList <BookInformation> A = new ArrayList<BookInformation>(); BookInformation B = new BookInformation(); B.setBookname(rs.getString(2)); B.setNumber(rs.getString(1)); B.setWriter(rs.getString(3)); B.setQuantity(rs.getString(4)); booklist.add(B); } } catch (SQLException e) { e.printStackTrace(); } } public void showall(String sql,ArrayList<BookInformation> booklist){ try { //创建sql载体 ps=conn.prepareStatement(sql); ResultSet rs = ps.executeQuery(); while(rs.next()) { //ArrayList <BookInformation> A = new ArrayList<BookInformation>(); BookInformation B = new BookInformation(); B.setBookname(rs.getString(2)); B.setNumber(rs.getString(1)); B.setWriter(rs.getString(3)); B.setQuantity(rs.getString(4)); booklist.add(B); } } catch (SQLException e) { e.printStackTrace(); } } /** * * @param sql 需要执行的sql语句 * @param objects 封装了数据的数组，需要和sql语句中的占位符一一对应 * @return 封装了数据的结果集，失败返回null */ public ResultSet query(String sql,Object[] objects){ try { ps=conn.prepareStatement(sql); //给占位符赋值 for(int i=0;i<objects.length;i++){ ps.setObject(i+1, objects[i]); } rs=ps.executeQuery(); } catch (SQLException e) { e.printStackTrace(); } return rs; } public void close(){ //关闭数据库 try { if(rs!=null){ rs.close(); } if(ps!=null){ ps.close(); } if(conn!=null) { conn.close(); System.out.println("数据库已关闭...."); } } catch (SQLException e) { e.printStackTrace(); } } }
下面是页面：
login1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .login-wrap { width: 400px; height: 600px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } /* 给最上面的Login这个标题设置样式 */ .login-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .login-form .login-input{ display: block; /* input 标签是行内元素 */ width: 100%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .login-form .login-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .login-form .login-submit { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> </head> <body> <div class="wrap"> <div class="login-wrap"> <div class="login-title"> 图书管理系统 </div> <form action="login1" method="post"> <div class="login-form"> <input type="text" name="username" placeholder="username" class="login-input"> <input type="password" name="password" placeholder="password" class="login-input"> <input type="submit" name="login" value="Login" class="login-submit"/> </div> <div class="tip"> Don\'t have account? <a href="register1.html">Sign up</a> </div> </form> </div> </div> </body> </html>
register1.html(注册页面)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .chuze-wrap { width: 400px; height: 600px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } /* 给最上面的chuze这个标题设置样式 */ .chuze-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .chuze-form .chuze-input{ display: block; /* input 标签是行内元素 */ width: 100%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .chuze-form .chuze-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .chuze-form .chuze-submit { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> </head> <body> <div class="wrap"> <div class="chuze-wrap"> <div class="chuze-title"> Sign up </div> <form action="register1" method="post"> <div class="chuze-form"> <input type="text" name="username" placeholder="username" class="chuze-input"> <input type="password" name="password" placeholder="password" class="chuze-input"> <input type="submit" name="chuze" value="Confirm" class="chuze-submit"/> </div> <div class="tip"> Click here to jump back to the homepage <a href="login1.html">Home</a> </div> </form> </div> </div> </body> </html>
home.html(主页面)
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .chuze-wrap { width: 400px; height: 600px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } .button6{ background: plum; color: greenyellow; border: 1px solid dodgerblue; transition-duration: 1s;/*过渡时间*/ border-radius: 12px; padding: 13px 18px; margin-top: 20px; outline-style: none;/*去除点击时外部框线*/ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } .button6:hover{ background: #aa00ff; color: #aa00ff; transition-duration: 1s; /* 给最上面的chuze这个标题设置样式 */ .chuze-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .chuze-form .chuze-input{ display: block; /* input 标签是行内元素 */ width: 100%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .chuze-form .chuze-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .chuze-form .chuze-button { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> <body> <div class="wrap"> <div class="chuze-wrap"> <class class="chuze-title"> <br> <br> <div> 欢迎使用图书管理系统 </div> <div> </div> <div> <br> <br> <a href="Show.jsp" ><button class="button6">浏览图书信息</button></a><br> <a href="addbook.html " ><button class="button6">添加图书信息</button></a><br> <a href="updatebook.html "><button class="button6">修改图书信息</button></a><br> <a href="selectbook.html "><button class="button6">查询图书信息</button></a><br> <a href="delitebook.html "><button class="button6">删除图书信息</button></tr></a></div> <div class="tip"> <br> Click here to jump back to the loginpage <a href="login1.html">return</a> </div> </div> </div> </body> </html>
addbook.html(添加书籍)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .login-wrap { width: 400px; height: 600px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } /* 给最上面的Login这个标题设置样式 */ .login-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } .login-title1 { font-size: 18px; text-align: left; line-height: 80px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .login-form .login-input{ float: right; display: block; /* input 标签是行内元素 */ width: 68%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .login-form .login-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .login-form .login-submit { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> </head> <body> <div class="wrap"> <div class="login-wrap"> <div class="login-title"> 添加图书信息 </div> <div class="login-form"> <form action="addbook" method="POST"> <div class="login-title1"> 书 籍 编 号 : <input type="text" name="number" placeholder="booknumber" class="login-input"> 书 籍 名 称 : <input type="text" name="bookname" placeholder="bookname" class="login-input"> 作 者 名 称 : <input type="text" name="writer" placeholder="writername" class="login-input"> 可借阅数量 : <input type="text" name="quantity" placeholder="quantity" class="login-input"> <input type="submit" name="提交" value="提交" class="login-submit"/> </div> </form></div> <div class="tip"> return Home ? <a href="home.html">home</a> </div> </div> </div> </body> </html>
delitebook.html(删除书籍)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .login-wrap { width: 400px; height: 600px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } /* 给最上面的Login这个标题设置样式 */ .login-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } .login-title1 { font-size: 18px; text-align: left; line-height: 80px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .login-form .login-input{ float: right; display: block; /* input 标签是行内元素 */ width: 68%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .login-form .login-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .login-form .login-submit { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> </head> <body> <div class="wrap"> <div class="login-wrap"> <div class="login-title"> 删除图书信息 </div> <div class="login-form"> <form action="delitebook" method="post"> <div class="login-title1"> 书 籍 编 号 : <input type="text" name="number" placeholder="number" class="login-input"> 书 籍 名 称 : <input type="text" name="bookname" placeholder="bookname" class="login-input"> <input type="submit" name="login" value="提交" class="login-submit"/> </div> </form></div> <div class="tip"> return Home ? <a href="home.html">home</a> </div> </div> </div> </body> </html>
selectbook.html(输入页面)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .login-wrap { width: 400px; height: 500px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } /* 给最上面的Login这个标题设置样式 */ .login-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } .login-title1 { font-size: 18px; text-align: left; line-height: 80px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .login-form .login-input{ float: right; display: block; /* input 标签是行内元素 */ width: 68%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .login-form .login-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .login-form .login-submit { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> </head> <body> <div class="wrap"> <div class="login-wrap"> <div class="login-title"> 查询图书信息 </div> <div class="login-form"> <form action="selectbook" method="post"> <div class="login-title1"> 书 籍 编 号 : <input type="text" name="number" placeholder="number" class="login-input"> <input type="submit" name="login" value="提交" class="login-submit"/> </div> </form></div> <div class="tip"> return Home ? <a href="home.html">home</a> </div> </div> </div> </body> </html>
selectbook1.jsp(显示查询结果)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="com.Util.Utils"%> <%@page import="com.Servlet.selectbook"%> <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%> <%@page import="com.Bean.BookInformation"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="css/bootstrap.css" type="text/css" rel="stylesheet" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/bootstrap.js"></script> </head> <style type="text/css"> .a-radio{ display: inline-block; border:1px solid #ccc; width:16px; height: 16px; border-radius:2px; vertical-align: middle; margin-right: 5px; position: relative; } .logtip { padding-top: 5px; padding-left: 0px; /* padding-bottom: 5px; */ border-bottom: 2px solid #009688; text-align: left; } label { color: #2E8B57; font-size:120%; float: left; width: 150px; margin-top: 2px; margin-right: 3px; } .form-group { margin-left: 40px; margin-top: 20px; } .form-control { width: 200px; flex: 4; height: 30px; outline: none; border-radius: 5px; border: 1px solid #999999; /* box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2 */ padding-left: 10px; } .btnbag{ margin-top: 20px; margin-bottom: 20px; /* text-align: center; */ } .button { width: 100px; height: 40px; background-color: #009688; color: white; border: none; border-radius: 5px; font-size: 22px; } .option{ /*用div的样式代替select的样式*/ width: 140px; height: 40px; /*border-radius: 5px;*/ /*盒子阴影修饰作用,自己随意*/ /* box-shadow: 0 0 5px #ccc;*/ border: 1px solid #cccccc; position: relative; font-size: 18px; border-radius: 5px; }, </style> <body> <table class="table table-striped"> <h1 align="center">图书信息</h1> <table class="table table-striped"> <tr> </tr> <thead> <!-- <tr> <td colspan=9><button class="button" type="button" onclick="add()">添加信息</button></td> </tr> --> <tr> <th scope="col">图书编号</th> <th scope="col">图书名称</th> <th scope="col">作者</th> <th scope="col">可借阅数量</th> </tr> </thead> <tbody> <% //先把数据取出来，通过request对象（内置对象，不需要我们去创建，其实是httpservletRequest对象的实例） ArrayList <BookInformation> booklist = (ArrayList<BookInformation>) request.getAttribute("booklist"); for (int i = 0; i < booklist.size(); i++) { BookInformation book = booklist.get(i);//user是个变量 %> <tr> <td><%=book.getNumber()%></td> <td><%=book.getBookname()%></td> <td><%=book.getWriter()%></td> <td><%=book.getQuantity()%></td> </tr> <% } %> </table> </body> </html>
updatebook.html(修改页面)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 清除默认样式 同时给所有元素设置样式 */ * { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } /* 因为下面想设置body、wrap区域的宽高为整个窗口高度 所以得先设置html也得这样设置 这里得注意 body 和 html 的区别 1.如果body及其子元素想设置高度为窗口高度 那么得设置h向下面这样设置html 2.在body里面设置background-color时，发现整个窗口都会变了颜色 这容易产生错觉： body == 窗口 */ html { height: 100%; } body { height: 100%; } /* 继承窗口高度 设置一个渐变色向右渐变 渐变色推荐网站：https://www.sj520.cn/tools/jianbian/ 应该有你喜欢的吧 */ .wrap { height: 100%; background-image: linear-gradient(to right, #30cfd0, #330867); } /* 这个是登录区域 */ .login-wrap { width: 400px; height: 700px; background-color: rgba(170, 170, 255, 0.3); /* 居中开始 */ position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 居中结束 */ border-radius: 10px; padding: 0 50px; /* 左右留出空余 */ } /* 给最上面的Login这个标题设置样式 */ .login-title { font-size: 25px; text-align: center; line-height: 100px; color: #fff; font-weight: bold; } .login-title1 { font-size: 18px; text-align: left; line-height: 80px; color: #fff; font-weight: bold; } /* 输入设置样式 */ .login-form .login-input{ float: right; display: block; /* input 标签是行内元素 */ width: 68%; border: 0; border-bottom: 1px solid #ccc; padding: 10px 0 10px 10px; margin-bottom: 20px; outline: none; /* 输入框边框去掉 */ background-color: transparent; /* 透明色 */ } .login-form .login-input::placeholder { text-transform: uppercase; /* 设置placeholder内容的大小写 */ color: #bdbdbd; } /* 给登录提交按钮设置样式 */ .login-form .login-submit { width: 100%; line-height: 30px; border: 0; border-radius: 3px; margin-top: 20px; background-image: linear-gradient(to right, #5ee7df, #b490ca); font-size: 16px; text-align: center; cursor: pointer; color: #aa00ff; font-weight: bold; } /* tip 区域样式 */ .tip { margin-top: 15px; } .tip a { padding-left: 110px; text-decoration: none; color: #7d3ebc; } </style> </head> <body> <div class="wrap"> <div class="login-wrap"> <div class="login-title"> 修改图书信息 </div> <div class="login-form"> <form action="updatebook" method="post"> <div class="login-title1"> 原 有 编 号 : <input type="text" name="number0" placeholder="number" class="login-input"> 书 籍 编 号 : <input type="text" name="number" placeholder="number" class="login-input"> 书 籍 名 称 : <input type="text" name="bookname" placeholder="bookname" class="login-input"> 作 者 名 称 : <input type="text" name="writer" placeholder="writername" class="login-input"> 可借阅数量 : <input type="text" name="quantity" placeholder="quantity" class="login-input"> <input type="submit" name="login" value="提交" class="login-submit"/> </div> </form> </div> <div class="tip"> return Home ? <a href="home.html">home</a> </div> </div> </div> </body> </html>
Show.jsp(遍历全部图书)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="com.Util.Utils"%> <%@page import="java.util.ArrayList"%> <%@page import="com.Bean.BookInformation"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="css/bootstrap.css" type="text/css" rel="stylesheet" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/bootstrap.js"></script> </head> <style type="text/css"> .a-radio{ display: inline-block; border:1px solid #ccc; width:16px; height: 16px; border-radius:2px; vertical-align: middle; margin-right: 5px; position: relative; } .logtip { { margin: 0; padding: 0; font-family: "Open Sans Light"; letter-spacing: .07em; /* 字母间隔大小 */ } padding-top: 5px; padding-left: 0px; /* padding-bottom: 5px; */ border-bottom: 2px solid #009688; text-align: left; } label { color: #2E8B57; font-size:120%; float: left; width: 150px; margin-top: 2px; margin-right: 3px; } .form-group { margin-left: 40px; margin-top: 20px; } .form-control { width: 200px; flex: 4; height: 30px; outline: none; border-radius: 5px; border: 1px solid #999999; /* box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2 */ padding-left: 10px; } .btnbag{ margin-top: 20px; margin-bottom: 20px; /* text-align: center; */ } .button { width: 100px; height: 40px; background-color: #009688; color: white; border: none; border-radius: 5px; font-size: 22px; } .option{ /*用div的样式代替select的样式*/ width: 140px; height: 40px; /*border-radius: 5px;*/ /*盒子阴影修饰作用,自己随意*/ /* box-shadow: 0 0 5px #ccc;*/ border: 1px solid #cccccc; position: relative; font-size: 18px; border-radius: 5px; }, </style> <body> <table class="table table-striped"> <h1 align="center">图书信息</h1> <table class="table table-striped"> <tr> </tr> <thead> <!-- <tr> <td colspan=9><button class="button" type="button" onclick="add()">添加信息</button></td> </tr> --> <tr> <th scope="col">图书编号</th> <th scope="col">图书名称</th> <th scope="col">作者</th> <th scope="col">可借阅数量</th> </tr> </thead> <tbody> <% ArrayList <BookInformation> booklist = new ArrayList<BookInformation>(); Utils to=new Utils(); String sql1="select * from tushu"; to.showall(sql1,booklist); //先把数据取出来，通过request对象（内置对象，不需要我们去创建，其实是httpservletRequest对象的实例） //ArrayList <BookInformation> booklist = (ArrayList<BookInformation>) request.getAttribute("booklist"); for (int i = 0; i < booklist.size(); i++) { BookInformation book = booklist.get(i);//user是个变量 %> <tr> <td><%=book.getNumber()%></td> <td><%=book.getBookname()%></td> <td><%=book.getWriter()%></td> <td><%=book.getQuantity()%></td> </tr> <%} %></tbody> </table> </table> </body> </html>
运行截图：
这里就暂时只发一下大概的界面和运行截图，第一次写的不太好，希望以后能把结构写的更清晰一点，界面做的更好看一点，功能更完善一点，继续加油！！！
最后在这里感谢小陈的指导。