图书信息管理系统（使用layui）
删改查的代码页面如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.List" %> <%@page import="bean.info" %> <!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; 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; 150px; margin-top: 2px; margin-right: 3px; } .form-group { margin-left: 40px; margin-top: 20px; } .form-control { 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 { 100px; height: 40px; background-color: #009688; color: white; border: none; border-radius: 5px; font-size: 22px; } .option{ /*用div的样式代替select的样式*/ 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"> <thead> <form action="Servlet?method=select" method="post"> <tr> <td colspan=9 align="center"> ISBN号<input type="text" class="form-control" name="ISBN" id="ISBN" ></td> </tr> <tr> <td colspan=9 align="center"><button class="button" type="submit">查询</button></td> </tr> </form> </thead> <% List<info> list=(List<info>)request.getAttribute("list"); if(list==null||list.size()<1){ response.setHeader("refresh", "1000;URL=delete.jsp"); %> <% } else{%> <h1>图书信息</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">ISBN号</th> <th scope="col">出版社</th> <th scope="col">图书类别</th> <th scope="col">图书简介</th> <th scope="col">图书评价</th> <th scope="col">操作</th> </tr> </thead> <tbody> <% for(info school:list){ %> <tr> <td><%=school.getAuthor()%></td> <td><%=school.getISBN() %></td> <td><%=school.getBanname() %></td> <td><%=school.getCategory()%></td> <td><%=school.getIntroduction()%></td> <td><%=school.getEvaluate()%></td> <td><a href="Servlet?method=del&ISBN=<%=school.getISBN() %>"><small>删除</small></td> </tr> <%} %></tbody> </table> <%} %> </table> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.List" %> <%@page import="bean.info" %> <!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"> .button{ 80px; height: 30px; background-color: #009688; color: white; border: none; border-radius: 5px; font-size: 12px; } </style> <% List<info> list=(List<info>)request.getAttribute("list"); if(list==null||list.size()<1){ response.setHeader("refresh", "5;URL=login.jsp"); %> <font color="red" size="5"> 没有该图书<br> 五秒后将跳转到主页面 <br> 如果没有跳转,请点击 <a href="login.jsp">这里</a>!!! <br> </font> <% } else{%> <h1>图书信息</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">ISBN号</th> <th scope="col">出版社</th> <th scope="col">图书类别 </th> <th scope="col">图书简介</th> <th scope="col">图书评价</th> </tr> </thead> <tbody> <% for(info school:list){ %> <tr> <td><%=school.getAuthor()%></td> <td><%=school.getISBN() %></td> <td><%=school.getBanname() %></td> <td><%=school.getCategory()%></td> <td><%=school.getIntroduction()%></td> <td><%=school.getEvaluate()%></td> </tr> <%} %></tbody> </table> <%} %> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page import="java.util.List" %> <%@page import="bean.info" %> <!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; 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; 150px; margin-top: 2px; margin-right: 3px; } .form-group { margin-left: 40px; margin-top: 20px; } .form-control { 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 { 100px; height: 40px; background-color: #009688; color: white; border: none; border-radius: 5px; font-size: 22px; } .option{ /*用div的样式代替select的样式*/ 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"> <thead> <form action="Servlet?method=select1" method="post"> <tr> <td colspan=9 align="center"> ISBN号<input type="text" class="form-control" name="ISBN" id="ISBN" ></td> </tr> <tr> <td colspan=9 align="center"><button class="button" type="submit">查询</button></td> </tr> </form> </thead> <% List<info> list=(List<info>)request.getAttribute("list"); if(list==null||list.size()<1){ response.setHeader("refresh", "1000;URL=delete.jsp"); %> <% } else{%> <h1>图书信息</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">ISBN号</th> <th scope="col">出版社</th> <th scope="col">图书类别</th> <th scope="col">图书简介</th> <th scope="col">图书评价</th> </tr> </thead> <tbody> <% for(info school:list){ %> <tr> <td><%=school.getAuthor()%></td> <td><%=school.getISBN() %></td> <td><%=school.getBanname() %></td> <td><%=school.getCategory()%></td> <td><%=school.getIntroduction()%></td> <td><%=school.getEvaluate()%></td> </tr> <%} %></tbody> </table> <div class="login"> <h2 class="logtip">请输入修改后的信息</h2> <form action="Servlet?method=update" method="post" > <div class="form-group"> <label for="author">作者</label> <input type="text" class="form-control" id="author" name="author" > </div> <div class="form-group"> <label for="ISBN">ISBN号</label> <input type="text" class="form-control" id="ISBN" name="ISBN" >（不允许修改,确保正确） </div> <div class="form-group"> <label for="banname">出版社</label> <input type="text" class="form-control" id="banname" name="banname" > </div> <div class="form-group"> <label for="category">图书分类</label> <select name="category" id="category" class="option"> <option selected="selected" value="">请选择</option> <option value="计算机科学">计算机科学</option> <option value="自然科学">自然科学</option> <option value="人文科学">人文科学</option> <option value="天文地理">天文地理</option> </select> </div> <div class="form-group"> <label for="introduction">图书简介</label> <input type="text" class="form-control" id="introduction" name="introduction" > </div> <div class="form-group"> <label for="evaluate">图书评价</label> <input type="text" class="form-control" id="evaluate" name="evaluate"> </div> <div class="form-group"> <button type="submit" class="button">确认</button> </div> </form> </div> <%} %> </table> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加图书信息</title> <style type="text/css"> .button { 100px; height: 40px; background-color: #009688; color: white; border: none; border-radius: 5px; font-size: 22px; } label { color: #2E8B57; font-size:120%; float: left; 150px; margin-top: 2px; margin-right: 3px; } .form-group { margin-left: 40px; margin-top: 20px; } .form-control { 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; } </style> </head> <script type="text/javascript"> function show() { location.href = "Servlet?method=show"; } </script> <body> <% Object message=request.getAttribute("message"); if(message!=null&&!"".equals(message)){ %> <script type="text/javascript"> </script> <%}%> <div class="form-group"><h2 class="logtip">结果</h2></div> <table> <div class="form-group"> <label for="library"><%=request.getAttribute("message")%></label> </div> <div class="form-group"> <button class="button" type="button" onclick="show()">查看信息</button> </div> </table> </body> </html>
OK，前端页面全部完成了！！！！！！！