這周做了簡單的圖書管理系統，就是簡單的增刪改查。
工程目錄見下圖
因為我也是剛學習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>
運行截圖：
這里就暫時只發一下大概的界面和運行截圖，第一次寫的不太好，希望以后能把結構寫的更清晰一點，界面做的更好看一點，功能更完善一點，繼續加油！！！
最后在這里感謝小陳的指導。