JSP程序设计——手机销售网后台设计

信管1172 高颖 201711671206

一、实验要求

系统后台开发具体要求(课本第10章的项目基础上)：
1.在导航条中添加一个后台管理菜单。
2.后台页面分成左右两个框，左边显示一个树形菜单，右边根据菜单选择显示相应的交互界面。
3.实现对用户，产品分类，产品，订单等的后台管理。
4.具体界面自行设计。

二、功能说明

（1）用户

1.主页

2.登录

3.注册

4.登录

5.浏览手机

6.查询手机

7.查看购物车

（2）后台

1.主页

源码：

tree.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="treebox col-sm-2 col-md-2 col-lg-2" >
<ul class="menu">
<li class="level1">
<a href="#none"><em class="ico ico1"></em>用户管理<i class="down"></i></a>
<ul class="level2">
<li><a href="${pageContext.request.contextPath }/user?method=list">用户列表</a></li>
<li><a href="javascript:;">用户增加</a></li>
</ul>
</li>
<li class="level1">
<a href="#none"><em class="ico ico2"></em>商品管理<i></i></a>
<ul class="level2">
<li><a href="${pageContext.request.contextPath }/good?method=list">商品列表</a></li>
<li><a href="javascript:;">商品类型</a></li>
<li><a href="javascript:;">商品库存</a></li>
</ul>
</li>
<li class="level1">
<a href="#none"><em class="ico ico3"></em>订单管理<i></i></a>
<ul class="level2">
<li><a href="${pageContext.request.contextPath }/order?method=list">订单一览</a></li>
<li><a href="javascript:;">订单处理</a></li>
</ul>
</li>
</ul>
</div>

welcome.jsp

<%--
Created by IntelliJ IDEA.
User: Lusty
Date: 2019-05-19
Time: 13:58
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="">
<title>Title</title>

<link href="${pageContext.request.contextPath }/assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/assets/css/style.css" rel="stylesheet">
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/easing.js"></script>
<script src="${pageContext.request.contextPath }/assets/bootstrap/js/bootstrap.min.js"></script>
</head>
<style>
@media (min-width: 1200px){
.container {
width: 20%;
}
}
.container {
margin-top: 10%;
}
</style>
<body>
<div class="container">

<form class="form-signin">
<h2 class="form-signin-heading">请登录后台系统</h2>
<label for="inputEmail" class="sr-only">用户名</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

</div>
</body>
</html>

2.用户注册

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户列表</title>
<style>
*{ margin: 0; padding: 0; }
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}
.treebox{ width: 200px; background-color:#1a6cb9;height:95vh; }
.menu{ overflow: hidden; border-color: #ddd; border-style: solid ; border-width: 0 1px 1px ;
float: left;}
.menu li.level1>a{
display:block;
height: 45px;
line-height: 45px;
color: #fff;
padding-left: 50px;
border-bottom: 1px solid #000;
font-size: 16px;
position: relative;
}
.menu li.level1 a:hover{ text-decoration: none;background-color:#326ea5; }
.menu li.level1 a.current{ background: #0f4679; }
.ico{ width: 20px; height: 20px; display:block; position: absolute; left: 20px; top: 10px; background-repeat: no-repeat; background-image: url(${pageContext.request.contextPath }/image/ico1.png); }
.level1 i{ width: 20px; height: 10px; background-image:url(${pageContext.request.contextPath }/image/arrow.png); background-repeat: no-repeat; display: block; position: absolute; right: 20px; top: 20px; }
.level1 i.down{ background-position: 0 -10px; }

.ico1{ background-position: 0 0; }
.ico2{ background-position: 0 -20px; }
.ico3{ background-position: 0 -40px; }
.ico4{ background-position: 0 -60px; }
.ico5{ background-position: 0 -80px; }
.menu li ul{ overflow: hidden; }
.menu li ul.level2{ display: none;background: #0f4679; }
.menu li ul.level2 li a{
display: block;
height: 45px;
line-height: 45px;
color: #fff;
text-indent: 60px;
/*border-bottom: 1px solid #ddd; */
font-size: 14px;
}

</style>

<link href="${pageContext.request.contextPath }/assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/assets/css/style.css" rel="stylesheet">
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/easing.js"></script>
<script src="${pageContext.request.contextPath }/assets/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<%--顶部条栏--%>
<div style="height: 5vh">

<ol class="breadcrumb breadcrumb_nav">
<li>首页</li>
<li>用户管理</li>
<li class="active">用户列表</li>
</ol>
</div>
<div class="row">
<div class="treebox col-sm-2 col-md-2 col-lg-2" style="height: 100vh">
<ul class="menu">
<li class="level1">
<a href="#none"><em class="ico ico1"></em>用户管理<i class="down"></i></a>
<ul class="level2">
<li><a href="${pageContext.request.contextPath }/user?method=list">用户列表</a></li>
<li><a href="javascript:;">用户增加</a></li>
</ul>
</li>
<li class="level1">
<a href="#none"><em class="ico ico2"></em>商品管理<i></i></a>
<ul class="level2">
<li><a href="${pageContext.request.contextPath }/good?method=list">商品列表</a></li>
<li><a href="javascript:;">商品类型</a></li>
<li><a href="${pageContext.request.contextPath }/user?method=editUI">商品增加</a></li>
</ul>
</li>
<li class="level1">
<a href="#none"><em class="ico ico3"></em>订单管理<i></i></a>
<ul class="level2">
<li><a href="${pageContext.request.contextPath }/order?method=list">订单一览</a></li>
<li><a href="javascript:;">订单处理</a></li>
</ul>
</li>
</ul>
</div>
<div class="page-content col-sm-10 col-md-10 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">用户列表</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="3%">
<input class="check_all" type="checkbox">
</th>
<th width="5%">登录名</th>
<th width="5%">手机号</th>
<th width="5%">地址</th>
<th width="5%">真名</th>
<%--<th width="5%">操作</th>--%>
</tr>
</thead>
<tbody>
<c:forEach items="${pageResult.list}" var="item">
<tr>
<td>
<input class="check_all" type="checkbox" name="ids[]" value="8">
</td>
<td>${item.loginName }</td>
<td>${item.phone}</td>
<td>${item.address}</td>
<%--<td>--%>
<%--<c:if test="${item.gender==1}">男</c:if>--%>
<%--<c:if test="${item.gender==2}">女</c:if>--%>
<%--<c:if test="${item.gender==3}">保密</c:if>--%>
<%--</td>--%>
<td>${item.realname}</td>
<%--<td>--%>
<%--<a href="${pageContext.request.contextPath }/user?method=editUI&id=${item.id}" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-edit"></span>编辑</a>--%>
<%--<a href="${pageContext.request.contextPath }/user?method=delete&id=${item.id}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-eye-open"></span>删除</a>--%>
<%--</td>--%>
</tr>
</c:forEach>
</tbody>
</table>

<div class="panel-footer clearfix">
<div class="pull-left">
<div class="form-group">
<label>总记录数：${pageResult.totalRecord}</label>
<label>每页显示：</label>
<select class="form-control" id="pageSize" οnchange="queryByPages()">
<option value="5" <c:if test="${pageResult.pageSize eq 5}">selected="selected"</c:if> >5</option>
<option value="10" <c:if test="${pageResult.pageSize eq 10}">selected="selected"</c:if> >10</option>
<option value="15" <c:if test="${pageResult.pageSize eq 15}">selected="selected"</c:if> >15</option>
</select>
</div>
</div>
<nav class="pull-right">