B/S结构用户界面设计
【实验编号】
10003809548j Web界面设计
【实验学时】
8学时
【实验环境】
l 所需硬件环境为微机；
l 所需软件环境为dreamweaver
【实验内容】
1、登录界面
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>图书馆首页</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script src="js/js.cookie.js"></script>
<style>
#login{
height: 50%;
width: 28%;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
display: block;
position: center;
}
.form-group {
margin-bottom: 0;
}
* {
padding:0;
margin:0;
}
</style>
</head>
<body background="img/timg.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<c:if test="${!empty error}">
<script>
alert("${error}");
window.location.href="login.html";
</script>
</c:if>
<h2 style="text-align: center; color: white; font-family: '华文行楷'; font-size: 500%">图 书 馆</h2>
<div class="panel panel-default" id="login">
<div class="panel-heading" style="
<h3 class="panel-title">请登录</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="id">账号</label>
<input type="text" class="form-control" id="id" placeholder="请输入账号">
</div>
<div class="form-group">
<label for="passwd">密码</label>
<input type="password" class="form-control" id="passwd" placeholder="请输入密码">
</div>
<div class="checkbox text-left">
<label>
<input type="checkbox" id="remember">记住密码
</label>
</div>
<p style="text-align: right;color: red;position: absolute" id="info"></p><br/>
<button id="loginButton" class="btn btn-primary btn-block">登陆
</button>
</div>
</div>
<script>
$("#id").keyup(
function () {
if(isNaN($("#id").val())){
$("#info").text("提示:账号只能为数字");
}
else {
$("#info").text("");
}
}
)
// 记住登录信息
function rememberLogin(username, password, checked) {
Cookies.set('loginStatus', {
username: username,
password: password,
remember: checked
}, {expires: 30, path: ''})
}
// 若选择记住登录信息，则进入页面时设置登录信息
function setLoginStatus() {
var loginStatusText = Cookies.get('loginStatus')
if (loginStatusText) {
var loginStatus
try {
loginStatus = JSON.parse(loginStatusText);
$('#id').val(loginStatus.username);
$('#passwd').val(loginStatus.password);
$("#remember").prop('checked',true);
} catch (__) {}
}
}
// 设置登录信息
setLoginStatus();
$("#loginButton").click(function () {
var id =$("#id").val();
var passwd=$("#passwd").val();
var remember=$("#remember").prop('checked');
if (id == '') {
$("#info").text("提示:账号不能为空");
}
else if( passwd ==''){
$("#info").text("提示:密码不能为空");
}
else if(isNaN( id )){
$("#info").text("提示:账号必须为数字");
}
else {
$.ajax({
type: "POST",
url: "api/loginCheck",
data: {
id:id ,
passwd: passwd
},
dataType: "json",
success: function(data) {
if (data.stateCode.trim() === "0") {
$("#info").text("提示:账号或密码错误！");
} else if (data.stateCode.trim() === "1") {
$("#info").text("提示:登陆成功，跳转中...");
window.location.href="admin_main.html";
} else if (data.stateCode.trim() === "2") {
if(remember){
rememberLogin(id,passwd,remember);
}else {
Cookies.remove('loginStatus');
}
$("#info").text("提示:登陆成功，跳转中...");
window.location.href="reader_main.html";
}
}
});
}
})
</script>
</div>
</body>
</html>
2、主界面：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>管理主页</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/book2.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
温馨提示
</h4>
</div>
<div class="modal-body">
使用结束后请安全退出。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">知道了
</button>
</div>
</div>
</div>
</div>
<c:if test="${!empty login}">
<script>
$(function () {
$("#myModal").modal({
show: true
})
})
</script>
</c:if>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<nav style="position:fixed;z-index: 999;width: 100%;
<div class="container-fluid">
<div class="navbar-header" style="margin-left: 8%;margin-right: 1%">
<a class="navbar-brand" href="admin_main.html" style="font-family: 华文行楷; font-size: 250%; color: white">图书管理系统</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">
图书管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="admin_books.html">全部图书</a></li>
<li class="divider"></li>
<li><a href="book_add.html">增加图书</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">
读者管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="allreaders.html">全部读者</a></li>
<li class="divider"></li>
<li><a href="reader_add.html">增加读者</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">
借还管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="lendlist.html">借还日志</a></li>
</ul>
</li>
<li >
<a href="admin_repasswd.html" style="color: white">
密码修改
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html" style="color: white">${admin.username}, 已登录</a>
</li>
<li><a href="logout.html" style="color: white">退出</a></li>
</ul>
</div>
</div>
</nav>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<nav style="position:fixed;z-index: 999;width: 100%;
<div class="container-fluid">
<div class="navbar-header" style="margin-left: 8%;margin-right: 1%">
<a class="navbar-brand" href="admin_main.html" style="font-family: 华文行楷; font-size: 250%; color: white">图书管理系统</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">
图书管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="admin_books.html">全部图书</a></li>
<li class="divider"></li>
<li><a href="book_add.html">增加图书</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">
读者管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="allreaders.html">全部读者</a></li>
<li class="divider"></li>
<li><a href="reader_add.html">增加读者</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white">
借还管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="lendlist.html">借还日志</a></li>
</ul>
</li>
<li >
<a href="admin_repasswd.html" style="color: white">
密码修改
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html" style="color: white">${admin.username}, 已登录</a>
</li>
<li><a href="logout.html" style="color: white">退出</a></li>
</ul>
</div>
</div>
</nav>
3、图书管理界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>全部图书信息</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/book1.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div style="padding: 70px 550px 10px">
<form method="post" action="querybook.html" class="form-inline" id="searchform">
<div class="input-group">
<input type="text" placeholder="输入图书名" class="form-control" id="search" name="searchWord" class="form-control">
<span class="input-group-btn">
<input type="submit" value="搜索" class="btn btn-default">
</span>
</div>
</form>
<script>
$("#searchform").submit(function () {
var val=$("#search").val();
if(val==''){
alert("请输入关键字");
return false;
}
})
</script>
</div>
<div style="position: relative;top: 10%">
<c:if test="${!empty succ}">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${succ}
</div>
</c:if>
<c:if test="${!empty error}">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${error}
</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 90%;margin-left: 5%">
<div class="panel-heading" style="
<h3 class="panel-title">
全部图书
</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>ISBN</th>
<th>价格</th>
<th>剩余数量</th>
<th>详情</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<c:forEach items="${books}" var="book">
<tr>
<td><c:out value="${book.name}"></c:out></td>
<td><c:out value="${book.author}"></c:out></td>
<td><c:out value="${book.publish}"></c:out></td>
<td><c:out value="${book.isbn}"></c:out></td>
<td><c:out value="${book.price}"></c:out></td>
<td><c:out value="${book.number}"></c:out></td>
<td><a href="admin_book_detail.html?bookId=<c:out value="${book.bookId}"></c:out>">
<button type="button" class="btn btn-success btn-xs">详情</button>
</a></td>
<td><a href="updatebook.html?bookId=<c:out value="${book.bookId}"></c:out>"><button type="button" class="btn btn-info btn-xs">编辑</button></a></td>
<td><a href="deletebook.html?bookId=<c:out value="${book.bookId}"></c:out>"><button type="button" class="btn btn-danger btn-xs">删除</button></a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图书信息添加</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.form-group {
margin-bottom: 0;
}
</style>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/sky.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div style="position: relative;padding-top: 60px; width: 80%;margin-left: 10%">
<form action="book_add_do.html" method="post" id="addbook">
<div class="form-group">
<label for="name">图书名</label>
<input type="text" class="form-control" name="name" id="name" placeholder="请输入书名">
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" name="author" id="author" placeholder="请输入作者名">
</div>
<div class="form-group">
<label for="publish">出版社</label>
<input type="text" class="form-control" name="publish" id="publish" placeholder="请输入出版社">
</div>
<div class="form-group">
<label for="isbn">ISBN</label>
<input type="text" class="form-control" name="isbn" id="isbn" placeholder="请输入ISBN">
</div>
<div class="form-group">
<label for="introduction">简介</label>
<textarea class="form-control" rows="3" name="introduction" id="introduction"
placeholder="请输入简介"></textarea>
</div>
<div class="form-group">
<label for="language">语言</label>
<input type="text" class="form-control" name="language" id="language" placeholder="请输入语言">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="text" class="form-control" name="price" id="price" placeholder="请输入价格">
</div>
<div class="form-group">
<label for="pubstr">出版日期</label>
<input type="date" class="form-control" name="pubstr" id="pubstr" placeholder="请输入出版日期">
</div>
<div class="form-group">
<label for="classId">分类号</label>
<input type="text" class="form-control" name="classId" id="classId" placeholder="请输入分类号">
</div>
<div class="form-group">
<label for="number">数量</label>
<input type="text" class="form-control" name="number" id="number" placeholder="请输入图书数量">
</div>
<input type="submit" value="添加" class="btn btn-success btn-sm" class="text-left">
<script>
$("#addbook").submit(function () {
if ($("#name").val() == '' || $("#author").val() == '' || $("#publish").val() == '' || $("#isbn").val() == '' || $("#introduction").val() == '' || $("#language").val() == '' || $("#price").val() == '' || $("#pubstr").val() == '' || $("#classId").val() == '' || $("#pressmark").val() == '' || $("#number").val() == '') {
alert("请填入完整图书信息！");
return false;
}
})
</script>
</form>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>编辑《 ${detail.name}》</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="../../static/img/book2.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header" style="padding-bottom: 80px"></div>
<div class="col-xs-6 col-md-offset-3" style="position: relative;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">编辑《 ${detail.name}》</h3>
</div>
<div class="panel-body">
<form action="book_edit_do.html?bookId=${detail.bookId}" method="post" id="addbook" >
<div class="input-group">
<span class="input-group-addon">书名</span>
<input type="text" class="form-control" name="name" id="name" value="${detail.name}">
</div>
<div class="input-group">
<span class="input-group-addon">作者</span>
<input type="text" class="form-control" name="author" id="author" value="${detail.author}" >
</div>
<div class="input-group">
<span class="input-group-addon">出版社</span>
<input type="text" class="form-control" name="publish" id="publish" value="${detail.publish}" >
</div>
<div class="input-group">
<span class="input-group-addon">ISBN</span>
<input type="text" class="form-control" name="isbn" id="isbn" value="${detail.isbn}" >
</div>
<div class="input-group">
<span class="input-group-addon">简介</span>
<input type="text" class="form-control" name="introduction" id="introduction" value="${detail.introduction}" >
</div>
<div class="input-group">
<span class="input-group-addon">语言</span>
<input type="text" class="form-control" name="language" id="language" value="${detail.language}" >
</div>
<div class="input-group">
<span class="input-group-addon">价格</span>
<input type="text" class="form-control" name="price" id="price" value="${detail.price}">
</div>
<div class="input-group">
<span class="input-group-addon">出版日期</span>
<input type="date" class="form-control" name="pubstr" id="pubstr" value="${detail.pubdate}">
</div>
<div class="input-group">
<span class="input-group-addon">分类号</span>
<input type="text" class="form-control" name="classId" id="classId" value="${detail.classId}">
</div>
<div class="input-group">
<span class="input-group-addon">数量</span>
<input type="text" class="form-control" name="number" id="number" value="${detail.number}">
</div>
<input type="submit" value="确定" class="btn btn-success btn-sm" class="text-left">
<script>
$("#addbook").submit(function () {
if($("#name").val()==''||$("#author").val()==''||$("#publish").val()==''||$("#isbn").val()==''||$("#introduction").val()==''||$("#language").val()==''||$("#price").val()==''||$("#pubstr").val()==''||$("#classId").val()==''||$("#number").val()==''){
alert("请填入完整图书信息！");
return false;
}
})
</script>
</form>
</div>
</div>
</div>
</body>
</html>
4、图书添加操作
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<title>全部图书信息</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#header').load('reader_header.html');
})
</script>
</head>
<body background="img/lizhi.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div style="padding: 20px 550px 10px">
<form method="post" action="reader_querybook_do.html" class="form-inline" id="searchform">
<div class="input-group">
<input type="text" placeholder="输入图书名" class="form-control" id="search" name="searchWord"
class="form-control">
<span class="input-group-btn">
<input type="submit" value="搜索" class="btn btn-default">
</span>
</div>
</form>
<script>
$("#searchform").submit(function () {
var val = $("#search").val();
if (val == '') {
alert("请输入关键字");
return false;
}
})
</script>
</div>
<div style="position: relative;top: 10%">
<c:if test="${!empty succ}">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${succ}
</div>
</c:if>
<c:if test="${!empty error}">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${error}
</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 90%;margin-left: 5%">
<div class="panel-heading" style="
<h3 class="panel-title">
全部图书
</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>ISBN</th>
<th>价格</th>
<th>剩余数量</th>
<th>借还</th>
<th>详情</th>
</tr>
</thead>
<tbody>
<c:forEach items="${books}" var="book">
<tr>
<td><c:out value="${book.name}"></c:out></td>
<td><c:out value="${book.author}"></c:out></td>
<td><c:out value="${book.publish}"></c:out></td>
<td><c:out value="${book.isbn}"></c:out></td>
<td><c:out value="${book.price}"></c:out></td>
<td><c:out value="${book.number}"></c:out></td>
<c:set var="flag" value="false"/>
<c:forEach var="lend" items="${myLendList}">
<c:if test="${lend eq book.bookId}">
<c:set var="flag" value="true"/>
</c:if>
</c:forEach>
<c:if test="${flag}">
<td><a href="returnbook.html?bookId=<c:out value="${book.bookId}"></c:out>">
<button type="button" class="btn btn-danger btn-xs">归还</button>
</a></td>
</c:if>
<c:if test="${not flag}">
<c:if test="${book.number>0}">
<td><a href="lendbook.html?bookId=<c:out value="${book.bookId}"></c:out>">
<button type="button" class="btn btn-primary btn-xs">借阅</button>
</a></td>
</c:if>
<c:if test="${book.number==0}">
<td>
<button type="button" class="btn btn-defalut btn-xs" disabled="disabled">已空</button>
</td>
</c:if>
</c:if>
<td><a href="reader_book_detail.html?bookId=<c:out value="${book.bookId}"></c:out>">
<button type="button" class="btn btn-success btn-xs">详情</button>
</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>《 ${detail.name}》</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('reader_header.html');
})
</script>
</head>
<body background="img/lizhi.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div class="col-xs-6 col-md-offset-3" style="position: relative;top: 3%">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">《 ${detail.name}》</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<tr>
<th width="15%">书名</th>
<td>${detail.name}</td>
</tr>
<tr>
<th>作者</th>
<td>${detail.author}</td>
</tr>
<tr>
<th>出版社</th>
<td>${detail.publish}</td>
</tr>
<tr>
<th>ISBN</th>
<td>${detail.isbn}</td>
</tr>
<tr>
<th>简介</th>
<td>${detail.introduction}</td>
</tr>
<tr>
<th>语言</th>
<td>${detail.language}</td>
</tr>
<tr>
<th>价格</th>
<td>${detail.price}</td>
</tr>
<tr>
<th>出版日期</th>
<td>${detail.pubdate}</td>
</tr>
<tr>
<th>分类号</th>
<td>${detail.classId}</td>
</tr>
<tr>
<th>状态</th>
<c:if test="${detail.number>1}">
<td>在馆</td>
</c:if>
<c:if test="${detail.number==0}">
<td>借出</td>
</c:if>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
5、读者管理
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>编辑读者信息《 ${readerInfo.readerId}》</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/book2.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header" style="padding-bottom: 80px"></div>
<div class="col-xs-6 col-md-offset-3" style="position: relative;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">编辑读者信息《 ${readerInfo.readerId}》</h3>
</div>
<div class="panel-body">
<form action="reader_edit_do.html?readerId=${readerInfo.readerId}" method="post" id="readeredit" >
<div class="input-group">
<span class="input-group-addon">姓名</span>
<input type="text" class="form-control" name="name" id="name" value="${readerInfo.name}" >
</div>
<div class="input-group">
<span class="input-group-addon">性别</span>
<input type="text" class="form-control" name="sex" id="sex" value="${readerInfo.sex}" >
</div>
<div class="input-group">
<span class="input-group-addon">生日</span>
<input type="text" class="form-control" name="birth" id="birth" value="${readerInfo.birth}" >
</div>
<div class="input-group">
<span class="input-group-addon">地址</span>
<input type="text" class="form-control" name="address" id="address" value="${readerInfo.address}" >
</div>
<div class="input-group">
<span class="input-group-addon">电话</span>
<input type="text" class="form-control" name="phone" id="phone" value="${readerInfo.phone}" >
</div>
<input type="submit" value="确定" class="btn btn-success btn-sm" class="text-left">
<script>
$("#readeredit").submit(function () {
if($("#name").val()==''||$("#sex").val()==''||$("#birth").val()==''||$("#address").val()==''||$("#phone").val()==''){
alert("请填入完整读者信息！");
return false;
}
})
</script>
</form>
</div>
</div>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>全部读者</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/u1.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<c:if test="${!empty info}">
<script>alert("${info}");window.location.href="allreaders.html"</script>
</c:if>
<div style="position: relative;top: 15%">
<c:if test="${!empty succ}">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${succ}
</div>
</c:if>
<c:if test="${!empty error}">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${error}
</div>
</c:if>
</div>
<div class="panel panel-default" style="position:relative;top: 80px;width: 90%;margin-left: 5%">
<div class="panel-heading">
<h3 class="panel-title">
全部读者
</h3>
</div>
<div class="panel-body">
<table class="table table-hover" >
<thead>
<tr>
<th>读者号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>地址</th>
<th>电话</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<c:forEach items="${readers}" var="reader">
<tr>
<td><c:out value="${reader.readerId}"></c:out></td>
<td><c:out value="${reader.name}"></c:out></td>
<td><c:out value="${reader.sex}"></c:out></td>
<td><c:out value="${reader.birth}"></c:out></td>
<td><c:out value="${reader.address}"></c:out></td>
<td><c:out value="${reader.phone}"></c:out></td>
<td><a href="reader_edit.html?readerId=<c:out value="${reader.readerId}"></c:out>"><button type="button" class="btn btn-info btn-xs">编辑</button></a></td>
<td><a href="reader_delete.html?readerId=<c:out value="${reader.readerId}"></c:out>"><button type="button" class="btn btn-danger btn-xs">删除</button></a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加读者</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/school.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div class="col-xs-6 col-md-offset-3" style="padding-top: 100px;position: relative">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加读者</h3>
</div>
<div class="panel-body">
<form action="reader_add_do.html" method="post" id="readeredit" >
<div class="input-group" style="padding-top: 20px;">
<span class="input-group-addon">密码</span>
<input type="password" class="form-control" name="password" id="password" >
</div>
<div class="input-group" style="padding-top: 20px;">
<span class="input-group-addon">姓名</span>
<input type="text" class="form-control" name="name" id="name" >
</div>
<div class="input-group" style="padding-top: 20px;">
<span class="input-group-addon">性别</span>
<input type="text" class="form-control" name="sex" id="sex" >
</div>
<div class="input-group" style="padding-top: 20px;">
<span class="input-group-addon">生日</span>
<input type="date" class="form-control" name="birth" id="birth" >
</div>
<div class="input-group" style="padding-top: 20px;">
<span class="input-group-addon">地址</span>
<input type="text" class="form-control" name="address" id="address" >
</div>
<div class="input-group" style="padding-top: 20px;">
<span class="input-group-addon">电话</span>
<input type="text" class="form-control" name="phone" id="phone" >
</div>
<input style="align-items: center" type="submit" value="添加" class="btn btn-success btn-sm"
class="text-left">
<script>
function mySubmit(flag){
return flag;
}
$("#readeredit").submit(function () {
if($("#password").val()==''||$("#name").val()==''||$("#sex").val()==''||$("#birth").val()==''||$("#address").val()==''||$("#phone").val()==''){
alert("请填入完整读者信息！");
return mySubmit(false);
}
})
</script>
</form>
</div>
</div>
</div>
</body>
</html>
6、图书借还日志
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>借还日志</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#header').load('admin_header.html');
})
</script>
</head>
<body background="img/u5.jpeg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div style="position: relative;padding-top: 100px">
<c:if test="${!empty succ}">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${succ}
</div>
</c:if>
<c:if test="${!empty error}">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${error}
</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 90%;margin-left: 5%">
<div class="panel-heading">
<h3 class="panel-title">
借还日志
</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>流水号</th>
<th>图书号</th>
<th>读者证号</th>
<th>借出日期</th>
<th>归还日期</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="alog">
<tr>
<td><c:out value="${alog.ser_num}"></c:out></td>
<td><c:out value="${alog.bookId}"></c:out></td>
<td><c:out value="${alog.readerId}"></c:out></td>
<td><c:out value="${alog.lendDate}"></c:out></td>
<td><c:out value="${alog.backDate}"></c:out></td>
<td>
<a href="deletelend.html?serNum=<c:out value='${alog.ser_num}'></c:out>">
<c:if test="${!empty alog.backDate}">
<button type="button" class="btn btn-danger btn-xs">删除</button>
</c:if>
<c:if test="${empty alog.backDate}">
<button type="button" class="btn btn-default btn-xs" disabled="disabled">删除</button>
</c:if>
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>我的借还</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
<script>
$(function () {
$('#header').load('reader_header.html');
})
</script>
</head>
<body background="img/lizhi.jpg" style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="header"></div>
<div style="position: relative;top: 10%">
<c:if test="${!empty succ}">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${succ}
</div>
</c:if>
<c:if test="${!empty error}">
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
${error}
</div>
</c:if>
</div>
<div class="panel panel-default" style="width: 90%;margin-left: 5%;margin-top: 5%">
<div class="panel-heading">
<h3 class="panel-title">
我的借还日志
</h3>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>图书号</th>
<th>借出日期</th>
<th>归还日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="alog">
<tr>
<td><c:out value="${alog.bookId}"></c:out></td>
<td><c:out value="${alog.lendDate}"></c:out></td>
<td><c:out value="${alog.backDate}"></c:out></td>
<c:if test="${empty alog.backDate}">
<td>未还</td>
</c:if>
<c:if test="${!empty alog.backDate}">
<td>已还</td>
</c:if>
<c:if test="">
<td>超期</td>
</c:if>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
【关键步骤】
1. 登录界面
操作步骤：
输入用户名和密码：用户需在相应的输入框中输入注册时用的用户名和密码。
记住我的登录信息：可选择此选项以在下次访问时自动填充用户名。
登录按钮：点击此按钮提交登录信息。
找回密码：提供“忘记密码？”链接，以便用户重设密码。
注册新账户：提供“注册”链接，指向注册新账户的页面。
界面设计要点：
简洁明了，让用户容易找到输入框和按钮。
提供用户反馈，如登录成功或失败提示。
2. 主界面
操作步骤：
浏览商品：用户可以在主界面上查看商品分类、热销商品、新品推荐等。
搜索功能：提供搜索框，用户可以输入关键词查找特定商品。
商品筛选：根据价格、品牌、评分等条件筛选商品。
查看商品详情：点击某个商品，弹出商品详情页面，包括图片、描述、价格、库存等信息。
添加到购物车：在商品详情页面上，用户可以选择数量并点击“加入购物车”按钮。
界面设计要点：
美观且易于导航，分类清晰，吸引用户点击。
商品展示要清晰，包括足够的图片和信息。
3. 购物操作
操作步骤：
选择商品：在主界面或分类页面中选择一个或多个商品。
查看购物车：在浏览商品后，用户可以点击页面上方的“购物车”图标查看选中的商品。
修改商品数量：在购物车页面中，用户可以修改商品的数量或删除不需要的商品。
结算按钮：点击“结算”按钮，进入订单确认页面。
填充收货信息：输入或选择收货地址、联系电话等信息。
选择支付方式：选择支付方式（如信用卡、支付宝、微信支付等）。
确认订单：核对订单信息，点击“确认支付”完成购物。
界面设计要点：
清晰的操作指引，避免用户迷失。
结算流程简洁，减少用户操作步骤，提高转化率。
4. 购物车界面
操作步骤：
查看已选择的商品：展示所有已添加到购物车的商品，包括名称、图片、数量和价格。
修改数量：用户可以在数量框内直接输入新的数量或点击加减按钮。
删除商品：提供删除按钮，以便用户移除不想购买的商品。
显示总价：在购物车底部显示选中商品的总价，包括运费和其他费用。
继续购物按钮：返回主界面，继续浏览其他商品。
前往结算按钮：进入结算页面，完成购买流程。
界面设计要点：
整洁的布局，确保用户能够方便地查看和操作购物车内的商品。
突出显示收费明细，让用户清楚了解消费情况。
1. 登录界面
操作步骤：
输入用户名和密码：用户在相应的输入框中输入用户名和密码。
记住我：提供“记住我”选项，用户可以选择在下次登录时自动填充信息。
登录按钮：点击此按钮提交登录信息。
找回密码：提供“忘记密码？”链接，用户可以通过此链接重置密码。
注册新账户：提供“注册”链接，指向新用户注册页面（如适用）。
界面设计要点：
界面简洁明了，突出输入框和按钮。
提供登录反馈信息，如登录成功或失败的提示。
2. 主界面
操作步骤：
导航菜单：提供图书管理、读者管理、借还日志等功能的导航链接。
快速搜索：提供搜索框，用户可以快速查找特定图书或读者。
统计信息：显示图书总数、借出图书数、读者总数等统计信息。
快捷操作：提供常用功能的快捷入口，如添加图书、添加读者等。
界面设计要点：
直观的布局，确保用户能快速找到所需功能。
友好的用户体验，提升操作的流畅性。
3. 图书管理界面
操作步骤：
查看图书列表：展示所有图书的列表，包含书名、作者、ISBN、库存数量等信息。
搜索和筛选功能：用户可以通过书名、作者等条件进行搜索和筛选。
编辑图书信息：提供编辑按钮，用户可以修改图书的详细信息。
删除图书：提供删除按钮，用户可以移除不再管理的图书。
借出和归还操作：提供借出和归还按钮，以便快速处理图书借还。
界面设计要点：
清晰的表格布局，方便用户查看和管理图书信息。
提供直观的操作按钮，简化管理流程。
4. 图书添加操作
操作步骤：
点击添加图书按钮：在图书管理界面中点击“添加图书”按钮。
填写图书信息：在弹出的表单中输入书名、作者、ISBN、出版社、出版日期、库存数量等信息。
上传封面图片（可选）：提供上传封面图片的功能。
保存按钮：点击“保存”按钮提交图书信息。
返回图书列表：操作完成后，用户可以选择返回图书管理界面。
界面设计要点：
表单设计要简洁，输入框标注清晰。
提供必要的输入验证，确保信息完整性。
5. 读者管理
操作步骤：
查看读者列表：展示所有注册读者的列表，包括姓名、学号/ID、联系方式等信息。
搜索和筛选功能：用户可以通过姓名、学号等条件进行搜索和筛选。
添加读者：提供“添加读者”按钮，用户可以输入新读者的相关信息。
编辑和删除读者信息：提供编辑和删除按钮，以便管理读者信息。
界面设计要点：
读者信息以表格形式展示，便于查阅和管理。
直观的操作按钮，提升用户管理效率。
6. 图书借还日志
操作步骤：
查看借还日志：展示所有借还记录，包括书名、读者姓名、借出日期、归还日期、状态等信息。
搜索和筛选功能：用户可以通过书名、读者姓名等条件进行搜索和筛选。
导出日志（可选）：提供导出功能，用户可以将借还日志导出为Excel或PDF格式。
查看详细记录：点击某条记录，查看借还的详细信息（如借书时的状态、逾期情况等）。
界面设计要点：
日志信息以表格形式展示，清晰易读。
提供必要的过滤和导出功能，方便用户使用。
标签：function,用户界面,val,100%,header,background,设计,图书,结构 From： https://www.cnblogs.com/drz1145141919810/p/18620893