《jsp程序设计》智多星手机销售网后台设计
本次实验以课本第十章的智多星手机销售网为基础设计后台管理工程,实现将页面分为左右两个框。左边显示菜单,右边根据菜单选择显示相应的或页面,实现对用户,产品和订单的后台管理。
一、前端
将课本第十章源代码导入myeclipse,在head.txt添加后台管理菜单连接。现在主页包括之前的注册,登录,浏览手机,查询手机,查看购物车,查看订单,退出,主页以及后台菜单。
二、后台菜单
后台菜单iframe框架实现由用户管理,产品管理,订单管理,返回主页和查询表单构成。用户管理,产品管理和订单管理实现用户,产品,订单的增加,查询和管理功能。返回主页则返回前台主页面,查询表单实现对数据库中表单的查询,显示出表单内容。
源代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.man{ list-style:none; display: none;}
.man li a{ text-decoration:none;list-style:none; color:black;}
body{font-size:12px;}
ul,li,h2{margin:0;padding:0;}
ul{list-style:none;}
#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}
#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}
#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left}
#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}
#main{width:900px;height:600px;margin:0 auto;background-color:#F5F7E6;}
#leftMenu{width:150px;height:600px;background-color:#009900;float:left}
#leftMenu ul{margin:10px;}
#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}
#leftMenu ul li a{color:#000000;text-decoration:none;display:block;height:100%;
#content{width:750px;height:600px;float:left}
.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}
.content iframe{width:100%;height:100%}
#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;}
.content1{width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}
</style>
<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none';//触动的层如果处于显示状态,即隐藏
}
else{
document.getElementById(d1).style.display='block';//触动的层如果处于隐藏状态,即显示
}
}
window.onload = function () {
function $(id) { return document.getElementById(id) }
var menu = $("topTags").getElementsByTagName("ul")[0]; //顶部菜单
var tags = menu.getElementsByTagName("li"); //顶部菜单•
var ck = $("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");
var j;
//点击左侧菜单增加新标签
for (i = 0; i < ck.length; i++) {
ck[i].onclick = function () {
$("welcome").style.display = "none"////欢迎内容隐藏—
//循环取得当前索引•
for (j = 0; j < 8; j++) {
if (this == ck[j]) {
if ($("p"+ j) == null) {
openNew(j, this.innerHTML); //设置标签显示文字—
}
clearStyle();
$("p"+ j).style.backgroundColor = "grave";
clearContent();
$("c"+ j).style.display = "block";
}
}
// return false;
}
}
//增加或删除标签
function openNew(id, name) {
var tagMenu = document.createElement("li");
tagMenu.id = "p"+ id;
tagMenu.innerHTML = name + " "+ "<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick = function (evt) {
clearStyle();
tagMenu.style.backgroundColor = "yellow";
clearContent();
$("c"+ id).style.display = "block";
}
//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].onclick = function (evt) {
evt = (evt) ? evt : ((window.event) ? window.event : null);
if (evt.stopPropagation) { evt.stopPropagation() } ///取消opera和Safari冒泡行为;
this.parentNode.parentNode.removeChild(tagMenu); ///删除当前标签
var color = tagMenu.style.backgroundColor;
//设置如果关闭一个标签时,让最后一个标签得到焦点
if (color == "#ffff00"|| color == "pink") {//区别浏览器对颜色解释‡Š
if (tags.length - 1 >= 0) {
clearStyle();
tags[tags.length - 1].style.backgroundColor = "yellow";
clearContent();
var cc = tags[tags.length - 1].id.split("p");
$("c"+ cc[1]).style.display = "block";
}
else {
clearContent();
$("welcome").style.display = "block"
}
}
}
menu.appendChild(tagMenu);
}
//清除标签样式
function clearStyle() {
for (i = 0; i < tags.length; i++) {
menu.getElementsByTagName("li")[i].style.backgroundColor = "#FFCC00";
}
}
//清除内容
function clearContent() {
for (i = 0; i < 7; i++) {
$("c"+ i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="top">
<h2>后台管理</h2>
<div id="topTags">
<ul>
</ul>
</div>
</div>
<divid="main">
<div id="leftMenu">
<ul>
<li><a href="">***用户管理***</a></li>
<li><a href="adduser.jsp">增加用户</a></li>
<li><a href="searchuser.jsp" >查询用户</a></li>
<li><a href="deleteuser.jsp">删除用户</a></li>
</ul>
<ul>
<li><a href="">***产品管理***</a></li>
<li><a href="modifyphone.jsp">增加手机</a></li>
<li><a href="searchphone.jsp">查询手机</a></li>
<li><a href="deletemobile.jsp">删除手机</a></li>
</ul>
<ul>
<li><a href=>***订单管理***</a></li>
<li><a href="modifyorder.jsp">增加订单</a></li>
<li><a href="searchorder.jsp">查询订单</a></li>
<li><a href="deleteorder.jsp">删除订单</a></li>
</ul>
<ul>
<li><a href="index.jsp">***返回主页***</a></li>
</ul>
<ul>
<li><a href="inquirebiao.jsp">***查询表单***</a></li>
</ul>
</div>
<div id="content">
<div id="welcome" class="content" style="display:block;">
<div align="center">
<p> </p>
<p><strong>欢迎光临“智多星”智能手机后台管理</strong></p>
<img src="image/welcome.jpg" width=500 height=400 ></img>
<p> </p>
</div>
</div>
</div>
<div id="footer">
made by cwt </div>
</body>
</html>
(一)用户管理
增加用户
增加用户使用的是adduser.jsp页面,使用前端的servlet控制器registerServlet将注册用户提交给数据库的user表中,并负责显示注册是否成功。
源代码:源代码框架跟后台管理菜单一致,只是增加了添加用户的代码,所以只贴了改动的代码。
adduser.jsp:
<div id="content">
<div id="welcome" class="content" style="display:block;">
<div align="center">
<p> </p>
<h2>添加用户</h2>
<FORMaction="registerServlet"method="post"name=form>
<table border=1>
<tr><td>输入新的用户名:</td><td><Inputtype=textname="logname"></td>
<td>输入新的密码</td><td><Inputtype=passwordname="password">
</td></tr>
<tr><td>重复密码:</td><td>
<Inputtype=passwordname="again_password"></td>
<td>输入新的联系方式:</td><td><Inputtype=textname="phone"></td></tr>
<tr><td>输入新的邮寄地址:</td><td><Inputtype=textname="address"></td>
<td>输入新的真实姓名:</td><td><Inputtype=textname="realname"></td>
</table>
<BR><Inputtype="submit"name="b"value="提交";
<p> </p>
</div>
</div>
</div>
<div id="footer">
made by cwt </div>
</body>
</html>
2.查询用户
查询用户使用的是searchuser.jsp页面,将查询条件提交给byname.jsp页面,使用tag文件Namecondition.tag根据名字进行查询。
部分源代码:searchuser.jsp:
<div id="content">
<div id="welcome" class="content" style="display:block;">
<div align="center">
<p> </p>
<h2>查询用户</h2>
<%@ page contentType="text/html;charset=utf-8" %>
<HTML><Bodybgcolor=yellow><Fontsize=2>
<FORMaction="byname.jsp"Method="post">
<BR>输入用户名:<Inputtype=textname="na">
<Inputtype=submitname="g"value="提交">
</Form>
</Font></BODY></HTML>
<p> </p>
</div>
</div>
</div>
byname.jsp:
<%@ page contentType="text/html;charset=GB2312" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="inquire"%>
<HTML><BODY><Font size=2>
<% String name=request.getParameter("na");
if(name==null)
name ="";
byte [] bb =name.getBytes("iso-8859-1");
name=new String(bb);
%>
<inquire:NameConditon name="<%=name%>" />
根据用户名<%=name%>查询到的记录:
<BR><%=queryResultByName%> <%--queryResultByName是Tag文件返回的对象--%>
</Font></BODY></HTML>
3.删除用户
删除用户使用的是deleuser.jsp页面,输入用户名进行删除记录,调用Query.tag文件负责查询user表中记录,然后提交给delete1.jsp页面显示,再次调用Querytag文件更改后显示user表记录。
部分源码:deleteuser.jsp:
<%@ page contentType="text/html;charset=GB2312" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="inquire"%>
<HTML><BODYbgcolor=pink><FONTsize=2>
<FORMaction="delete1.jsp"method=post>
删除记录:<BR>输入被删除的记录的用户名:
<Inputtype="text"name="version"size=8>
<BR><Inputtype="submit"name="b"value="提交">
<BR>user表删除前的记录是:
<inquire:QueryTag dataBaseName="mobileshop"
tableName="user"
user="root" password=""/>
<BR> <%=queryResult %> <%--queryResult是QueryTag.tag返回的对象--%>
</Font></BODY></HTML>
delete1.jsp:
<%@ page contentType="text/html;charset=GB2312" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="inquire"%>
<HTML><BODY ><Font size=2>
<%String na=request.getParameter("version");
if(na==null)
na ="";
byte[] bb=na.getBytes("iso-8859-1");
na = newString(bb);
%>
<inquire:DelRecord name="<%=na%>" />
<BR>user表删除记录后的记录是:
<inquire:QueryTag dataBaseName="mobileshop"
tableName="user"
user="root" password=""/>
<BR> <%=queryResult %> <%--queryResult是QueryTag.tag返回的对象--%>
</Font></BODY></HTML>
Querytag.tag:
<%@ tag pageEncoding="GB2312" %>
<%@ tag import="java.sql.*" %>
<%@ attribute name="dataBaseName" required="true" %>
<%@ attribute name="tableName" required="true" %>
<%@ attribute name="user" required="true" %>
<%@ attribute name="password" required="false" %>
<%@ variable name-given="biao" scope="AT_END" %>
<%@ variable name-given="queryResult" scope="AT_END" %>
<%StringBuffer result;
result=newStringBuffer();
try{ Class.forName("com.mysql.jdbc.Driver");
}
catch(Exception e){}
Connection con;
Statement sql;
ResultSet rs;
try{ result.append("<table border=1>");
String uri="jdbc:mysql://127.0.0.1/"+dataBaseName;
con=DriverManager.getConnection(uri,user,password);
DatabaseMetaData metadata=con.getMetaData();
ResultSet rs1=metadata.getColumns(null,null,tableName,null);
int字段个数=0;
result.append("<tr>");
while(rs1.next()){
字段个数++;
String clumnName=rs1.getString(4);
result.append("<td>"+clumnName+"</td>");
}
result.append("</tr>");
sql=con.createStatement();
rs=sql.executeQuery("SELECT * FROM "+tableName);
while(rs.next()){
result.append("<tr>");
for(intk=1;k<=字段个数;k++)
result.append("<td>"+rs.getString(k)+"</td>");
result.append("</tr>");
}
result.append("</table>");
con.close();
}
catch(SQLException e){
result.append("请输入正确的用户名和密码");
}
//返回对象queryResult:
jspContext.setAttribute("queryResult",newString(result));
jspContext.setAttribute("biao",tableName);//返回biao对象
%>
(二)产品管理
- 增加手机:使用页面modifyphone.jsp提交newdatabse.jsp调用Querytag文件显示出更新后的moblieform表单。
部分代码:
modifyphone.jsp:
<%@ taglib tagdir="/WEB-INF/tags" prefix="inquire"%>
<FORMaction="newdatabase.jsp"method=post>
<table border=1>
<tr><td>手机产品号:</td><td><Inputtype="text"name="mobile_version"></td></tr>
<tr><td>手机名称:</td><td><Inputtype="text"name="mobile_name"></td></tr>
<tr><td>手机制造商:</td><td><Inputtype="text"name="mobile_made"></td></tr>
<tr><td>手机价格:</td><td><Inputtype="text"name="mobile_price"></td></tr>
<tr><td>手机产品介绍:</td><td><Inputtype="text"name="mobile_mess"></td></tr>
<tr><td>手机产品图像:</td><td><Inputtype="text"name="mobile_pic"></td></tr>
<tr><td>手机分类号号:</td><td><Inputtype="text"name="id"></td></tr>
</table>
<BR><Inputtype="submit"name="b"value="提交">
newdatabase.jsp页面跟增加用户的adduser.jsp相似,不再贴出,Querytag也在上面有。
- 查询手机:查询手机使用searchphone.jsp页面实现条件查询,可根据产品号也可根据价格区间进行查询。查询产品号提交给bynumber.jsp再调用Numbertag.tag文件显示结果;查询价格区间则提交给byprice.jsp页面再调用Pricetag.tag文件显示结果。
根据价格区间查询:根据产品号查询:
根据价格区间查询:
部分代码:searchphone.jsp:
<%@ page contentType="text/html;charset=utf-8" %>
<HTML><Bodybgcolor=yellow><Fontsize=2>
<FORMaction="bynumber.jsp"Method="post">
根据产品号查询
<BR>输入产品号:<Inputtype=textname="number">
<Inputtype=submitname="g"value="提交">
</Form>
<FORMaction="byprice.jsp"Method="post">
根据价格查询
<BR>价格在<Inputtype=textname="priceMin"size=5>至
<Inputtype=textname="priceMax"size=5>之间
<Inputtype=submitvalue="提交">
</Form>
</Font></BODY></HTML>
其他代码跟查询用户代码相似,不再贴出。
3.删除手机:删除手机提交给delemobile.jsp页面再提交给delete.jsp页面,并通过Querytag文件显示更改后的moblieform表单。
代码跟删除用户相似,不再贴。
(三)订单管理
- 增加订单:增加订单提交给modifyorder.jsp页面再提交给newdatabase1.jsp页面,并通过Querytag文件显示更改后orderform表单。
-
部分代码:modifyorder.jsp:
<FORM action="newdatabase1.jsp" method=post>
<table border=1>
<tr><td> 订单序号:</td><td><Input type="text" name="id"></td></tr>
<tr><td>用户名:</td><td><Input type="text" name="logname"></td></tr>
<tr><td>订单信息:</td><td><Input type="text" name="mess"></td></tr>
<tr><td>所订价格总共和:</td><td><Input type="text" name="sum"></td></tr>
</table>
<BR><Input type="submit" name="b" value="提交">
Newdatabase1.jsp,Querytag文件跟上面相似,不再贴出。
- 查询订单
查询订单由searchorder.jsp页面实现,可以用用户名或者订单号进行查询。用户名查询提交给byname1.jsp页面使用nameconditiontag文件显示查询内容,订单序号查询则提交给bynum.jsp页面再使用numberdonditiontag文件显示查询内容。
根据用户名查询:
根据订单号查询:
部分源代码:其他代码跟用户管理功能相似不再贴出。
modifyorder.jsp:
<FORM action="newdatabase1.jsp" method=post>
<table border=1>
<tr><td>订单序号:</td><td><Input type="text" name="id"></td></tr>
<tr><td>用户名:</td><td><Input type="text" name="logname"></td></tr>
<tr><td>订单信息:</td><td><Input type="text" name="mess"></td></tr>
<tr><td>所订价格总共和:</td><td><Input type="text" name="sum"></td></tr>
</table>
<BR><Input type="submit" name="b" value="提交"
3.删除订单
删除订单提交给deleteorder.jsp页面,提交给delete2.jsp页面,并通过Querytag文件显示出删除后数据表。
三、返回主页
返回主页调用前段的index.jsp页面,返回智多星手机销售页面。
四、查询表单:
查询表单用inquirebiao.jsp页面,提交到inquire.jsp页面调用Querytag文件实现对数据库中表的查询。
部分源代码:inquirebiao.jsp:
<%@ page contentType="text/html;charset=GB2312" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="inquire"%>
<HTML><Body bgcolor=cyan><Font size=2>
<FORM action="inquire.jsp" Method="post" >
输入数据库名: <Input type=text name="dataBaseName" size=8>
输入表的名字: <Input type=text name="tableName" size=8>
<br>输入用户名:<Input type=text name="user" size=6>(默认是root)
输入密码: <Input type="password" name="password" size=6>(默认是空)
<br><Input type=submit name="g" value="提交">
</Form>
</Font></Body></HTML>
inquire.jsp:
<%@ page contentType="text/html;charset=GB2312" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="inquire"%>
<HTML><Body bgcolor=cyan><Font size=2>
<% String database=request.getParameter("dataBaseName");
String tName=request.getParameter("tableName");
String id=request.getParameter("user");
String secret=request.getParameter("password");
%>
<inquire:QueryTag dataBaseName="<%=database%>"
tableName="<%=tName%>"
user="<%=id%>"/>
在<%=biao%>表查询到记录: <%--biao是Tag文件返回的对象--%>
<BR> <%=queryResult %> <%--queryResult是Tag文件返回的对象--%>
</Font></Body></HTML>
五、个人总结
真的!!打程序就应该细心!!之前前端的浏览手机页面因为把数据库表名输错,导致一直把时间浪费在找出错误,没想到就只是一个字母写错了,浪费了很多时间,导致后台管理时间很紧。自我感觉这个系统做的没有很好,还有很多很多需要继续改进的地方,代码很多都是重复性的。而且也没有做出树形菜单,一拿到任务上网就百度到了iframe框架,后来发现要用detree,可是已经做了一些了,所以就没有改了!页面做的也还不够好看,查询显示页面本来打算跟页面一致,但是调试不出来就放弃了。革命尚未成功,同志仍需努力啊!!
《jsp程序设计》智多星手机销售网后台设计相关推荐
- 《JSP程序设计》手机销售网后台设计
一.实验要求 系统后台开发具体要求(课本第10章的项目基础上): 1.在导航条中添加一个后台管理菜单. 2.后台页面分成左右两个框,左边显示一个树形菜单,右边根据菜单选择显示相应的交互界面. 3.实现 ...
- 《JSP程序设计》手机销售网后台设计方案1
<JSP程序设计>手机销售网后台设计 本次实验设计以<JSP程序设计>课本第十章的例子项目为基础进行设计添加后台功能,后台页面分成左右两个框,左边显示一个树形菜单,右边根据菜单 ...
- JSP程序设计——手机销售网后台设计
信管1172 高颖 201711671206 一.实验要求 系统后台开发具体要求(课本第10章的项目基础上): 1.在导航条中添加一个后台管理菜单. 2.后台页面分成左右两个框,左边显示一个树形菜单, ...
- 信管1172-201711671226-WWY —JSP智能手机销售网后台设计
JSP智能手机销售网后台设计 1.手机主页面截图如上 1. ...
- “智多星”智能手机销售网后台管理系统设计
一.系统设计 系统页面的总体设计为左右框,如图. 左边使用Dtree建立目录,右边进行展示和操作,系统总体性的操作流程为 展示信息 -> 修改信息 -> 展示信息 ...
- “智多星”手机销售网
相对前天提交的用frame搭建的页面,我用了Ajax重新改了一下后台管理页面. 主页和其他界面和其他同学的都差不多.. 这里是后台管理页面 实现了用户,订单,手机信息的增删改查这些,不过没有后台登陆. ...
- 智能手机销售网后台管理系统手机销售网程序设计
智能手机销售网后台管理系统手机销售网程序设计 信管117136钟晓威 数据库设计 功能实现 后台设计 dtree实现树形菜单 数据库设计 数据库连接 try { String uri= "j ...
- 智多星手机销售系统.
1.首页面(压缩包自行下载) 压缩包: https://download.csdn.net/download/OrdnAry/12615049 <%@ page language="j ...
- MVC 网上手机销售系统设计与实现java jsp 程序设计 课程设计 毕业设计-附源码02138
因上传问题 只上传了文案 图片未上传 摘要 本文所讲述的是网上手机销售系统的设计与实现. 本系统实现了会员注册.登录.资料修改,浏览和检索商品.发布留言.看公告,管理员具有修改个人密码.添加手机品牌 ...
最新文章
- echart饼图标签重叠_Echarts 解决饼图文字过长重叠的问题
- Tensorflow从入门到精通之:Tensorflow基本操作
- Mac安装与配置idea及tomcat
- vue 大概流程(未完)
- 解题报告:LeetCode Basic Calculator(简单计算器)
- python 复杂数据相似度计算_Opencv python图像处理-图像相似度计算
- python自动化交易通达信_通达信实现自动交易系统
- DEA博弈交叉效率matlab,基于博弈交叉效率DEA模型的服务模块化创新绩效测量—以江西省文化创意产业为例...
- Excel表格中的删除操作,看看你会几种?
- foxmail收取服务器邮件次数,迁移邮件服务器,导致foxmail等客户端重新将邮件都收一遍...
- 断网重启路由器就好_为什么总是断网重启路由器就好了
- 10个物联网应用的案例
- 剑指 Offer(C++版本)系列:剑指 Offer 10- I 斐波那契数列
- 人脸识别技术及其各种用例
- python谷歌小恐龙,这还是你断网时的样子嘛~
- 布道微服务_18服务配置中心设计方案
- Open Inventor 10.9.3 for Java Crack
- 帝国CMS7.5全新后台 仿搜外问答模板 整站带演示数据源码
- 微信小程序简单实现获取用户授权、用户头像并保存到本地
- 云原生丨手把手教你使用zabbix监控postgresql数据库(超详细讲解)
热门文章
- 禅与摩托车维修艺术(2)
- rep()函数的学习
- 使用jedis连接redis,关闭连接问题
- SIMPLIS仿真软件3-暂态分析(Transient Analysis)详解
- 目前计算机无法显示的四叠字,四叠字列表(共19个),还能用的四叠字大全,带拼音,部分注释!...
- 计算机打字失灵,window_Win10键盘失灵无法打字提示错误代码19该怎么办?,我电脑的键盘无法打字了,显 - phpStudy...
- 爱创课堂每日一题-你做的页面在哪些流览器测试过?
- LVIS Challenge 2021长尾分布实例分割冠军解决方案
- 判断三角形 java_java中判断是否三角形的方法
- nginx服务器404错误页面设置完整版