后台
后台主页
效果显示：
功能介绍：
~功能按钮及树形菜单都能通过点击跳转到对应的功能页面，其中返回前台功能也包含在该源码中
涉及源代码：
//---manageInterface.jsp
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>管理者界面</title> <link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/dtree.js"></script>
</head>
<body>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0, -1, '系统管理', 'example01.html', '', '', 'img/system.png');
d.add(1, 0, '产品管理', 'example01.html', '', '', 'img/productManagement.png');
d.add(2, 0, '用户管理', 'example01.html', '', '', 'img/userManagement.png');
d.add(3, 1, '产品分类', 'example01.html', '', '', 'img/productList.png');
d.add(4, 0, '订单管理', 'example01.html', '', '', 'img/OrderManagement.png');
d.add(5, 1, '产品', 'example01.html', '', '', 'img/product.png');
d.add(6, 0, '返回主页', 'example01.html', '', '', 'img/product.png');
document.write(d);
//-->
</script>
</div>
<div class="theFunction">
<iframe src="backIndex.jsp" scrolling="auto" class="ifr" id="theIframe"></iframe>
</div>
<script>
function change(id){
if(id===0){ document.getElementById("theIframe").setAttribute("src","backIndex.jsp");}
if(id===1){ document.getElementById("theIframe").setAttribute("src","backIndex.jsp");}
if(id===2){ document.getElementById("theIframe").setAttribute("src","userManagement.jsp");}
if(id===3){ document.getElementById("theIframe").setAttribute("src","mobileClassifyManagement.jsp");}
if(id===4){ document.getElementById("theIframe").setAttribute("src","orderManagement.jsp");}
if(id===5){ document.getElementById("theIframe").setAttribute("src","productManagement.jsp");}
if(id===6){window.location.replace("index.jsp");}
}
</script>
</body>
</html>//---dtree.js
/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landr� |
| |
| This script can be used freely as long as all |
| copyright messages are intact. |
| |
| Updated: 17.04.2003 |
|--------------------------------------------------*/
// Node object
function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
this.id = id;
this.pid = pid;
this.name = name;
this.url = url;
this.title = title;
this.target = target;
this.icon = icon;
this.iconOpen = iconOpen;
this._io = open || false;
this._is = false;
this._ls = false;
this._hc = false;
this._ai = 0;
this._p;
}
// Tree object
function dTree(objName) {
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false
};
this.icon = {
root : 'img/system.png',
folder : 'img/folder.gif',
folderOpen : 'img/productManagement.png',
node : 'img/page.gif',
empty : 'img/empty.gif',
line : 'img/line.gif',
join : 'img/join.gif',
joinBottom : 'img/joinbottom.gif',
plus : 'img/plus.gif',
plusBottom : 'img/plusbottom.gif',
minus : 'img/minus.gif',
minusBottom : 'img/minusbottom.gif',
nlPlus : 'img/nolines_plus.gif',
nlMinus : 'img/nolines_minus.gif'
};
this.obj = objName;
this.aNodes = [];
this.aIndent = [];
this.root = new Node(-1);
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
};
// Adds a new node to the node array
dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
};
// Open/close all nodes
dTree.prototype.openAll = function() {
this.oAll(true);
};
dTree.prototype.closeAll = function() {
this.oAll(false);
};
// Outputs the tree to the page
dTree.prototype.toString = function() {
var str = '<div class="dtree">\n';
if (document.getElementById) {
if (this.config.useCookies) this.selectedNode = this.getSelected();
str += this.addNode(this.root);
} else str += 'Browser not supported.';
str += '</div>';
if (!this.selectedFound) this.selectedNode = null;
this.completed = true;
return str;
};
// Creates the tree structure
dTree.prototype.addNode = function(pNode) {
var str = '';
var n=0;
if (this.config.inOrder) n = pNode._ai;
for (n; n<this.aNodes.length; n++) {
if (this.aNodes[n].pid == pNode.id) {
var cn = this.aNodes[n];
cn._p = pNode;
cn._ai = n;
this.setCS(cn);
if (!cn.target && this.config.target) cn.target = this.config.target;
if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);
if (!this.config.folderLinks && cn._hc) cn.url = null;
if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {
cn._is = true;
this.selectedNode = n;
this.selectedFound = true;
}
str += this.node(cn, n);
if (cn._ls) break;
}
}
return str;
};
// Creates the node icon, url and text
dTree.prototype.node = function(node, nodeId) {
var str = '<div class="dTreeNode">' + this.indent(node, nodeId);
if (this.config.useIcons) {
if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);
if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;
if (this.root.id == node.pid) {
node.icon = this.icon.root;
node.iconOpen = this.icon.root;
}
str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';
}
if (node.url) {
str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="javascript:void(0);"';
if (node.title) str += ' title="' + node.title + '"';
if (node.target) str += ' target="' + node.target + '"';
if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';
if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))
str += 'onclick="change('+nodeId+');"';
str += '>';
}
else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)
str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';
str += node.name;
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
str += '</div>';
if (node._hc) {
str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';
str += this.addNode(node);
str += '</div>';
}
this.aIndent.pop();
return str;
};
// Adds the empty and line icons
dTree.prototype.indent = function(node, nodeId) {
var str = '';
if (this.root.id != node.pid) {
for (var n=0; n<this.aIndent.length; n++)
str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';
(node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);
if (node._hc) {
str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';
if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;
else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );
str += '" alt="" /></a>';
} else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';
}
return str;
};
// Checks if a node has any children and if it is the last sibling
dTree.prototype.setCS = function(node) {
var lastId;
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].pid == node.id) node._hc = true;
if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;
}
if (lastId==node.id) node._ls = true;
};
// Returns the selected node
dTree.prototype.getSelected = function() {
var sn = this.getCookie('cs' + this.obj);
return (sn) ? sn : null;
};
// Highlights the selected node
dTree.prototype.s = function(id) {
if (!this.config.useSelection) return;
var cn = this.aNodes[id];
if (cn._hc && !this.config.folderLinks) return;
if (this.selectedNode != id) {
if (this.selectedNode || this.selectedNode==0) {
eOld = document.getElementById("s" + this.obj + this.selectedNode);
eOld.className = "node";
}
eNew = document.getElementById("s" + this.obj + id);
eNew.className = "nodeSel";
this.selectedNode = id;
if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);
}
};
// Toggle Open or close
dTree.prototype.o = function(id) {
var cn = this.aNodes[id];
this.nodeStatus(!cn._io, id, cn._ls);
cn._io = !cn._io;
if (this.config.closeSameLevel) this.closeLevel(cn);
if (this.config.useCookies) this.updateCookie();
};
// Open or close all nodes
dTree.prototype.oAll = function(status) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {
this.nodeStatus(status, n, this.aNodes[n]._ls)
this.aNodes[n]._io = status;
}
}
if (this.config.useCookies) this.updateCookie();
};
// Opens the tree to a specific node
dTree.prototype.openTo = function(nId, bSelect, bFirst) {
if (!bFirst) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].id == nId) {
nId=n;
break;
}
}
}
var cn=this.aNodes[nId];
if (cn.pid==this.root.id || !cn._p) return;
cn._io = true;
cn._is = bSelect;
if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);
if (this.completed && bSelect) this.s(cn._ai);
else if (bSelect) this._sn=cn._ai;
this.openTo(cn._p._ai, false, true);
};
// Closes all nodes on the same level as certain node
dTree.prototype.closeLevel = function(node) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {
this.nodeStatus(false, n, this.aNodes[n]._ls);
this.aNodes[n]._io = false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
// Closes all children of a node
dTree.prototype.closeAllChildren = function(node) {
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {
if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);
this.aNodes[n]._io = false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
// Change the status of a node(open or closed)
dTree.prototype.nodeStatus = function(status, id, bottom) {
eDiv = document.getElementById('d' + this.obj + id);
eJoin = document.getElementById('j' + this.obj + id);
if (this.config.useIcons) {
eIcon = document.getElementById('i' + this.obj + id);
eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;
}
eJoin.src = (this.config.useLines)?
((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):
((status)?this.icon.nlMinus:this.icon.nlPlus);
eDiv.style.display = (status) ? 'block': 'none';
};
// [Cookie] Clears a cookie
dTree.prototype.clearCookie = function() {
var now = new Date();
var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
this.setCookie('co'+this.obj, 'cookieValue', yesterday);
this.setCookie('cs'+this.obj, 'cookieValue', yesterday);
};
// [Cookie] Sets value in a cookie
dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie =
escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; expires=' + expires.toGMTString() : '')
+ (path ? '; path=' + path : '')
+ (domain ? '; domain=' + domain : '')
+ (secure ? '; secure' : '');
};
// [Cookie] Gets a value from a cookie
dTree.prototype.getCookie = function(cookieName) {
var cookieValue = '';
var posName = document.cookie.indexOf(escape(cookieName) + '=');
if (posName != -1) {
var posValue = posName + (escape(cookieName) + '=').length;
var endPos = document.cookie.indexOf(';', posValue);
if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
else cookieValue = unescape(document.cookie.substring(posValue));
}
return (cookieValue);
};
// [Cookie] Returns ids of open nodes as a string
dTree.prototype.updateCookie = function() {
var str = '';
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {
if (str) str += '.';
str += this.aNodes[n].id;
}
}
this.setCookie('co' + this.obj, str);
};
// [Cookie] Checks if a node id is in a cookie
dTree.prototype.isOpen = function(id) {
var aOpen = this.getCookie('co' + this.obj).split('.');
for (var n=0; n<aOpen.length; n++)
if (aOpen[n] == id) return true;
return false;
};
// If Push and pop is not implemented by the browser
if (!Array.prototype.push) {
Array.prototype.push = function array_push() {
for(var i=0;i<arguments.length;i++)
this[this.length]=arguments[i];
return this.length;
}
};
if (!Array.prototype.pop) {
Array.prototype.pop = function array_pop() {
lastElement = this[this.length-1];
this.length = Math.max(this.length-1,0);
return lastElement;
}
};
//---dtree.css
/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landr� |
|--------------------------------------------------*/
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
}
.theFunction{
height:99%;
width:85%;
float:left;
margin-left:100px;
}
.ifr{
height:100%;
width:100%;
}
.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
white-space: nowrap;
float:left;
margin-left:20px;
}
.dtree img {
border: 0;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}//---backIndex.jsp
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>后台首页</title>
</head>
<body>
<div align="center">
<h1>欢迎来到后台管理系统，请点击左边的树形菜单或下方的按钮调用相应的功能</h1>
<a href="mobileClassifyManagement.jsp"><input type="button" value="产品分类管理"></a>
<a href="productManagement.jsp"><input type="button" value="产品管理"></a>
<a href="userManagement.jsp"><input type="button" value="人员管理"></a>
<a href="orderManagement.jsp"><input type="button" value="订单管理"></a>
<a href="javascript:void(0);"><input type="button" value="返回前台主页" id="btn"></a>
</div>
<script>
document.getElementById("btn").onclick=function(){
window.parent.location.replace("index.jsp");
}</script>
</body>
</html>产品分类管理模块
效果展示：
功能介绍：
~点击删除按钮则删除相应产品种类并且返回新的列表
~点击修改产品种类按钮将在页面中出现一张修改表格，并且能判断内容是否为空，判断是否与表中其他主键重复（自身不会），如重复则取消操作。
---点击修改按钮出现表格
---表格填写不完整出现提示
---点击产品号为9的修改按钮，当新id与表中其他产品号重复时拒绝操作并提示
---点击产品号为9的修改按钮，修改自身值成功
---添加数据按钮与修改类似，故不举例
涉及源代码：
//---mobileClassifyManagement.jsp
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>产品分类管理系统</title>
<style>
#theChangeDiv,#theChangeDiv1{
display:none;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>产品分类管理系统</h2>
<%
int count=2;
StringBuffer result=new StringBuffer();
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
String tablename="mobileclassify";
String condition="select * from "+tablename;
ResultSet rs=sql.executeQuery(condition);
String name="";
result.append("<table border=1 >");
rs=sql.executeQuery(condition);
result.append("<tr>");
result.append("<td>产品号");
result.append("</td>");
result.append("<td>产品种类");
result.append("</td>");
result.append("<td>删除产品种类");
result.append("</td>");
result.append("<td>修改产品种类");
result.append("</td>");
result.append("</tr>");
while(rs.next()){
result.append("<tr>");
for(int k=1;k<=count;k++){
if(k==1) {name=rs.getString(k); }
result.append("<td>"+rs.getString(k)+"</td>");
}
result.append("<form action='MobileClassifyManagementServlet' method=post>");
result.append("<td><input type=hidden name='logname' value='"+name+"'/><input type=hidden name='function' value='delete'/><input type=submit value='删除产品种类'/></td>");
result.append("</form>");
result.append("<td><input type=submit value='修改产品种类' onclick='f1("+name+")'/></td>");
result.append("</tr>");
}
result.append("</table>");
con.close();
}catch(Exception e) {e.printStackTrace();}
%>
<%= result %>
<input type="button" value="+添加数据" id="btn1"/>
<div align="center" id="theChangeDiv">
<table border="1">
<form action="MobileClassifyManagementServlet" method="post" id="theForm" name="theForm">
<tr>
<th>修改产品种类</th>
</tr>
<tr>
<td>新ID：<input type="text" name="theID"/></td>
</tr>
<tr>
<td>新产品种类名：<input type="text" name="theproductclassify"/></td>
</tr>
<tr>
<td align="center">
<input type=hidden name='logname' value="logname" id="logname"/>
<input type=hidden name='function' value='change'/>
<input type="button" onclick="f2('theForm')" value="提交" style="margin-right:50px">
<input type="reset" value="重置"></td>
</tr>
</form>
</table>
</div>
<div align="center" id="theChangeDiv1">
<table border="1">
<form id="theaddForm" action="MobileClassifyManagementServlet" method="post">
<tr>
<th>添加产品种类</th>
</tr>
<tr>
<td>新ID：<input id="newID" name="newID" type="text"/></td>
</tr>
<tr>
<td>新产品种类信息：<input id="newClassify" name="newClassify" type="text"/></td>
</tr>
<tr>
<td align="center">
<input type=hidden name='function' value='add'/>
<input id="go" onclick="f3('theaddForm')" type="button" value="提交" style="margin-right:50px">
<input type="reset" value="重置"></td>
</tr>
</form>
</table>
</div>
<script charset="utf-8" type="text/javascript" src="<%=request.getContextPath() %>/js/mobileClassify.js"></script>
</body>
</html>//---servlets.HandleMobileClassify.java
package servlets;
import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HandleMobileClassify extends HttpServlet{
public void init(ServletConfig config) throws ServletException{
super.init(config);}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
request.setCharacterEncoding("gb2312");
String name=request.getParameter("logname");
String theFunction=request.getParameter("function");
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
//删除数据
if(theFunction.equals("delete")) {
String condition="Delete from mobileclassify where id='"+name+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("mobileClassifyManagement.jsp");}
//修改数据
if(theFunction.equals("change")) {
String theid=request.getParameter("theID");
String productclassify=request.getParameter("theproductclassify");
String condition="select * from mobileclassify";
ResultSet rs=sql.executeQuery(condition);
//遍历数据库判断是否重名
while(rs.next()) {
String judge=rs.getString(1);
//判断新产品号是否与数据库其他产品号重复
if(judge.equals(theid)) {
//如果修改的是自身的产品号则可修改，否则取消该操作
if(!judge.equals(name)) {
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
out.print("<script type='text/javascript'>alert('产品号重复，请尝试其他产品号');document.location.href='mobileClassifyManagement.jsp';</script>");
}
}
}
condition="UPDATE mobileclassify SET id='"+theid+"',name='"+productclassify+"' where id='"+name+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("mobileClassifyManagement.jsp");}
//添加数据
if(theFunction.equals("add")) {
String newID=request.getParameter("newID");
String newClassify=request.getParameter("newClassify");
String condition="select * from mobileclassify";
ResultSet rs=sql.executeQuery(condition);
while(rs.next()) {
String judge=rs.getString(1);
//判断新产品号是否与数据库其他产品号重复
if(judge.equals(newID)) {
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
out.print("<script type='text/javascript'>alert('产品号重复，请尝试其他产品号');document.location.href='mobileClassifyManagement.jsp';</script>");
}
}
condition="Insert into mobileclassify values('"+newID+"','"+newClassify+"')";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("mobileClassifyManagement.jsp");
}
}catch(Exception e) {e.printStackTrace();}
}
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doPost(request,response);
}
}//---mobileClassify.js
/**
*
*/
//插入数据
var count1 = 1;
var count2 = 1;
function f1(logname,idArray) {
if(count2===1){ //判断添加数据的表格是否已出现，如果出现则不显示修改表格
if (count1 === 1) {
document.getElementById("theChangeDiv").style.display = 'block';
document.getElementById("logname").value=logname;
count1 = 0;
return;
}
if (count1 === 0) {
document.getElementById("theChangeDiv").style.display = 'none';
count1 = 1;
}
}
}
function f2(aForm) {
var theForm=document.getElementById(aForm);
var theID=theForm.theID.value;
var theClassify=theForm.theproductclassify.value;
if(theID&&(typeof(theID)!='undefined')&& (theID!=="")&&theClassify&&(typeof(theClassify)!='undefined')&& theClassify!==""){//判断是否为空
if(!isNaN(theID)) //判断是否id为数字类型
{//验证通过，提交表单数据
theForm.submit();}
else{
alert('id不是数值，请输入正确内容');
}
}
else{
alert('id为空或产品信息为空，请输入正确内容');
}
};
//添加数据
document.getElementById("btn1").onclick = function () {
if(count1===1){
if (count2 === 1) {
document.getElementById("theChangeDiv1").style.display = 'block';
count2 = 0;
return;
}
if (count2 === 0) {
document.getElementById("theChangeDiv1").style.display = 'none';
count2 = 1;
}
}
};
function f3(aForm) {
var theForm=document.getElementById(aForm);
var newID=theForm.newID.value;
var newClassify=theForm.newClassify.value;
if(newID&&(typeof(newID)!='undefined')&& (newID!=="")&&newClassify&&(typeof(newClassify)!='undefined')&& newClassify!==""){//判断是否为空
if(!isNaN(newID)) //判断是否id为数字类型
{//验证通过，提交表单数据
theForm.submit();}
else{
alert('id不是数值，请输入正确内容');
}
}
else{
alert('id为空或产品信息为空，请输入正确内容');
}
}产品管理模块
效果展示：
功能介绍：
涉及添加、删除、修改功能，其中修改功能比较复杂，先从添加数据开始演示
---点击添加按钮，页面出现表格
---表格必须填写完整，种类与价格必须为数值型，否则取消操作
---因为数据库中的mobileform表有mobile_version和mobile_pic两个主键，故单一主键重复仍然能添加成功
---若添加的新产品与已有数据的2个主键都重复，则拒绝操作
---点击产品名为1的删除按钮，该产品删除
---点击修改图标按钮，该单元格将出现输入框和取消操作按钮及提交按钮
---一次只能修改一个单元格，在一个单元格修改时点击另一个单元格修改按钮会拒绝操作
---点击取消操作内容仍然不变
---点击上传按钮
---内容为空时，拒绝操作
---当修改的列是价格或者种类时必须为数值
---当修改的列是产品版本或图片地址，即表格的主键时，会判断是否与其他表格的2个主键都重复，重复则拒绝操作
---修改成功示范
涉及源代码：
//---productManagement.jsp
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>产品管理系统</title>
<link rel="StyleSheet" href="css/mobileformcss.css" type="text/css" />
</head>
<body>
<h2>产品管理系统</h2>
<%
int count=7;
StringBuffer result=new StringBuffer();
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
String tablename="mobileform";
String condition="select * from "+tablename;
ResultSet rs=sql.executeQuery(condition);
String UID="";
String url="";
int row=0;
result.append("<table border=1 >");
rs=sql.executeQuery(condition);
result.append("<tr>");
result.append("<th>产品名");
result.append("</th>");
result.append("<th>产品版本");
result.append("</th>");
result.append("<th>制造商");
result.append("</th>");
result.append("<th>价格");
result.append("</th>");
result.append("<th>种类");
result.append("</th>");
result.append("<th>产品详细");
result.append("</th>");
result.append("<th>图片地址");
result.append("</th>");
result.append("<th>图片");
result.append("</th>");
result.append("<th>删除订单");
result.append("</th>");
result.append("</tr>");
while(rs.next()){
row++;
result.append("<tr>");
for(int k=1;k<=count;k++){
if(k==2) UID=rs.getString(k);
if(k==7) url=rs.getString(k);
result.append("<td id='"+row+k+"'>"+rs.getString(k)+"<input type='button' class='change all' id='btn1' onclick='f1("+row+k+")'></td>");
}
result.append("<td><img width=70px height=50px src='image/"+url+"'></td>");
result.append("<form action='productManagementServlet' method=post>");
result.append("<td><input type=hidden name='theFunction' value='delete'/><input type=hidden name='UID' value='"+UID+"'/><input type=submit value='删除产品'/></td>");
result.append("</form>");
result.append("</tr>");
}
result.append("</table>");
con.close();
}catch(Exception e) {e.printStackTrace();}
%>
<%=result %>
<input type="button" value="+添加数据" id="btn1" onclick="addf1()"/>
<div align="center" id="theAddDiv">
<table border="1">
<form id="theAddForm" action="productManagementServlet" method="post">
<tr>
<th>添加产品</th>
</tr>
<tr>
<td>产品名：<input id="newName" name="newName" type="text" /></td>
</tr>
<tr>
<td>产品版本：<input id="newVersion" name="newVersion" type="text"/></td>
</tr>
<tr>
<td>制造商：<input id="newMade" name="newMade" type="text"/></td>
</tr>
<tr>
<td>价格：<input id="newPrice" name="newPrice" type="text"/></td>
</tr>
<tr>
<td>种类：<input id="newClassify" name="newClassify" type="text"/></td>
</tr>
<tr>
<td>产品详细：<input id="newDetail" name="newDetail" type="text"/></td>
</tr>
<tr>
<td>图片地址：<input id="newImageAddress" name="newImageAddress" type="text"/></td>
</tr>
<tr>
<td align="center"><input type=hidden name='theFunction' value='add'/><input onclick="addf2('theAddForm')" type="button" value="提交" style="margin-right:50px"><input type="reset"
value="重置"></td>
</tr>
</form>
</table>
</div>
<script charset="utf-8" type="text/javascript" src="<%=request.getContextPath() %>/js/mobileform.js">
</script>
</body>
</html>//---mobileformcss.css
@charset "UTF-8";
table {
border-collapse: collapse;
}
.all {
background-repeat: no-repeat;
background-position: center center;
width: 22px;
height: 22px;
}
.change {
background-image: url("../img/change2.png");
float:right;
}
.candle {
background-image: url("../img/candle.png");
margin-left: 6px;
}
#theAddDiv {
display: none;
}
#newName,#newMade,#newPrice,#newClassify{
float:right;
}//---servlets.HandleProductManagement.java
package servlets;
import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HandleProductManagement extends HttpServlet{
public void init(ServletConfig config) throws ServletException{
super.init(config);}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
request.setCharacterEncoding("gb2312");
String UID=request.getParameter("UID");
String theFunction=request.getParameter("theFunction");
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql,sql2;
con=DriverManager.getConnection(uri,"root","123456");
String[] columnName= {"mobile_name","mobile_version","mobile_made","mobile_price","id","mobile_mess","mobile_pic"};
sql=con.createStatement();
String condition;
if(theFunction.equals("delete")) {
condition="Delete from mobileform where mobile_version='"+UID+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("productManagement.jsp");
}
if(theFunction.equals("change")) {
String theIndex=request.getParameter("theIndex");
String theChange=request.getParameter("theChange");
int index=Integer.parseInt(theIndex);
int row=0,column=0,currentrow=1;
row=index/10;
column=index%10;
String theColumnName=columnName[column-1];
sql2=con.createStatement();
ResultSet rs1=sql.executeQuery("select * from mobileform");
ResultSet rs3=sql2.executeQuery("select * from mobileform");
while(rs1.next()) {
if(currentrow==row) {
String theKey1=rs1.getString(2);
String theKey2=rs1.getString(7);
while(rs3.next()) { //遍历数据库判断是否有相同产品，有则取消操作
String currentVersion=rs3.getString(2);
String currentImageAddress=rs3.getString(7);
if(column==2) {
if(currentVersion.equals(theChange)&¤tImageAddress.equals(theKey2)) {
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
out.print("<script type='text/javascript'>alert('产品重复，请填写其他产品');document.location.href='productManagement.jsp';</script>");
}
}
else if(column==7) {
if(currentVersion.equals(theKey1)&¤tImageAddress.equals(theChange)) {
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
out.print("<script type='text/javascript'>alert('产品重复，请填写其他产品');document.location.href='productManagement.jsp';</script>");
}
}
}
condition="UPDATE mobileform SET "+theColumnName+"='"+theChange+"' where mobile_version='"+theKey1+"'and mobile_pic='"+theKey2+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("productManagement.jsp");
break;
}else {currentrow++;}
}
}
if(theFunction.equals("add")) {
String newName=request.getParameter("newName");
String newVersion=request.getParameter("newVersion");
String newMade=request.getParameter("newMade");
String newPrice=request.getParameter("newPrice");
String newClassify=request.getParameter("newClassify");
String newDetail=request.getParameter("newDetail");
String newImageAddress=request.getParameter("newImageAddress");
ResultSet rs2=sql.executeQuery("select * from mobileform");
String currentVersion="",currentImageAddress="";
while(rs2.next()) {
currentVersion=rs2.getString(2);
currentImageAddress=rs2.getString(7);
if(currentVersion.equals(newVersion)&¤tImageAddress.equals(newImageAddress)) {
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
out.print("<script type='text/javascript'>alert('产品重复，请填写其他产品');document.location.href='productManagement.jsp';</script>");
}
}
condition="Insert into mobileform values('"+newName+"','"+newVersion+"','"+newMade+"','"+newPrice+"','"+newClassify+"','"+newDetail+"','"+newImageAddress+"')";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("productManagement.jsp");
}
}catch(Exception e) {e.printStackTrace();}
}
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doPost(request,response);
}
}//---mobileform.js
/**
*
*/
var mutex=0;
var oldData;
var Obj;
var inner;
function f1(theid) {
if(mutex==0){
mutex=1;
Obj= document.getElementById(theid);
oldData=Obj.firstChild.nodeValue;
inner = '<form action="productManagementServlet" method="post" id="theForm'+theid+'">' +
'<input type="text" name="theChange">' +
'<input type=hidden name="theFunction" value="change"/>' +
'<input type=hidden name="theIndex" value="'+theid+'"/>' +
'<input type="button" id="go" class="change all" onclick="f2('+theid+')">' +
'<input type="button" class="candle all" onclick="f3('+theid+')">' +
'</form>';
Obj.innerHTML = inner;
}else{
alert("你还有修改的内容未上传");
}
}
function f3(theid) {
inner =oldData+'<input type="button" class="change all" id="btn1" onclick="f1('+theid+')">';
Obj.innerHTML = inner;
mutex=0;
}
function f2(theid){
var theForm=document.getElementById("theForm"+theid);
var newVersion=theForm.theChange.value;
var column=(parseInt(theid))%10;
if(column==4||column==5){
if(isNaN(newVersion)) {
alert("请输入数字类型");
theForm.theChange.value="";
return;
}
}
if(newVersion&&(typeof(newVersion)!='undefined')&& (newVersion !=="")){
mutex=0;
theForm.submit();
}
else{
alert("内容为空，请输入信息");
}
}
var count = 1;
function addf1() {
if (count === 1) {
document.getElementById("theAddDiv").style.display = 'block';
count = 0;
return;
}
if (count === 0) {
document.getElementById("theAddDiv").style.display = 'none';
count = 1;
}
}
function addf2(aForm) {
var newForm=document.getElementById(aForm);
var newName=newForm.newName.value; //检验是否为空
var newMade=newForm.newMade.value; //检验是否为空
var newDetail=newForm.newDetail.value; //检验是否为空
var newVersion=newForm.newVersion.value; //检验是否为空
var newClassify=newForm.newClassify.value; //检验是否为空+是否为数值
var newImageAddress=newForm.newImageAddress.value; //检验是否为空
var newPrice=newForm.newPrice.value; //检验是否为空+是否为数值
if( newName&&(typeof(newName)!='undefined')&& (newName!=="")&&
newMade&&(typeof(newMade)!='undefined')&& (newMade!=="")&&
newDetail&&(typeof(newDetail)!='undefined')&& (newDetail!=="")&&
newPrice&&(typeof(newPrice)!='undefined')&& (newPrice!=="")&&
newVersion&&(typeof(newVersion)!='undefined')&& (newVersion!=="")&&
newClassify&&(typeof(newClassify)!='undefined')&& (newClassify!=="")&&
newImageAddress&&(typeof(newImageAddress)!='undefined')&& (newImageAddress!=="")){
if(isNaN(newPrice)){alert("价格必须为数值");}
else if(isNaN(newClassify)){alert("种类必须为数值");}
else{newForm.submit();}
}else{
alert('表格不完整，请填写完整再提交');
}
}
人员管理模块
效果展示：
功能介绍：
删除用户不必多说，修改按钮是让页面出现表格，与产品分类管理的修改按钮大同小异，亦不赘述
涉及源代码：
//---userManagement.jsp
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>人员管理系统</title>
<style>
table {
border-collapse: collapse;
}
#theChangeDiv{
display:none;
}
</style>
</head>
<body>
<h2>人员管理系统</h2>
<%
int count=5;
StringBuffer result=new StringBuffer();
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
String tablename="user";
String condition="select * from "+tablename;
ResultSet rs=sql.executeQuery(condition);
String name="";
result.append("<table border=1 >");
rs=sql.executeQuery(condition);
result.append("<tr>");
result.append("<td>用户名");
result.append("</td>");
result.append("<td>手机号");
result.append("</td>");
result.append("<td>地址");
result.append("</td>");
result.append("<td>真实姓名");
result.append("</td>");
result.append("<td>删除用户");
result.append("</td>");
result.append("<td>修改用户资料");
result.append("</td>");
result.append("</tr>");
while(rs.next()){
result.append("<tr>");
for(int k=1;k<=count;k++){
if(k==1) name=rs.getString(k);
if(k==2) continue;
result.append("<td>"+rs.getString(k)+"</td>");
}
result.append("<form action='userManagementServlet' method=post>");
result.append("<td><input type=hidden name='logname' value='"+name+"'/><input type=hidden name='function' value='delete'/><input type=submit value='删除用户'/></td>");
result.append("</form>");
result.append("<td><input type=submit name='change' value='修改用户资料' onclick='f1("+name+")'/></td>");
result.append("</tr>");
}
result.append("</table>");
con.close();
}catch(Exception e) {e.printStackTrace();}
%>
<%= result %>
<div align="center" id="theChangeDiv">
<table border="1">
<form action="userManagementServlet" method="post">
<tr>
<th>修改用户信息</th>
</tr>
<tr>
<td>新手机号码：<input type="text" name="phone"/></td>
</tr>
<tr>
<td>新地址信息：<input type="text" name="address"/></td>
</tr>
<tr>
<td>新真实姓名：<input type="text" name="realname"/></td>
</tr>
<tr>
<td align="center">
<input type=hidden name='logname' value="logname" id="logname"/>
<input type=hidden name='function' value='change'/>
<input type="submit" value="提交" style="margin-right:50px">
<input type="reset" value="重置"></td>
</tr>
</form>
</table>
</div>
<script>
var count = 1;
function f1(logname) {
if (count === 1) {
document.getElementById("theChangeDiv").style.display = 'block';
document.getElementById("logname").value=logname;
count = 0;
return;
}
if (count === 0) {
document.getElementById("theChangeDiv").style.display = 'none';
document.getElementById("logname").value=logname;
count = 1;
}
}
</script>
</body>
</html>//---servlets.HandleUserManagement.java
package servlets;
import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HandleUserManagement extends HttpServlet{
public void init(ServletConfig config) throws ServletException{
super.init(config);}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
request.setCharacterEncoding("gb2312");
String name=request.getParameter("logname");
String theFunction=request.getParameter("function");
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
if(theFunction.equals("delete")) {
String condition="Delete from user where logname='"+name+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("userManagement.jsp");}
if(theFunction.equals("change")) {
name=request.getParameter("logname");
String phone=request.getParameter("phone");
String address=request.getParameter("address");
String realname=request.getParameter("realname");
String condition="UPDATE user SET phone='"+phone+"',address='"+address+"',realname='"+realname+"' where logname='"+name+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("userManagement.jsp");}
}catch(Exception e) {e.printStackTrace();}
}
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doPost(request,response);
}
}订单管理模块
效果展示：
功能介绍：
订单管理只需要涉及删除操作，删除操作无须多说
涉及源代码：
//---orderManagement.jsp
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>订单管理系统</title>
<style>
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>订单管理系统</h2>
<%
int count=4;
StringBuffer result=new StringBuffer();
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
String tablename="orderform";
String condition="select * from "+tablename;
ResultSet rs=sql.executeQuery(condition);
String name="";
result.append("<table border=1 >");
rs=sql.executeQuery(condition);
result.append("<tr>");
result.append("<td>订单号");
result.append("</td>");
result.append("<td>用户名");
result.append("</td>");
result.append("<td>订单详细");
result.append("</td>");
result.append("<td>价格");
result.append("</td>");
result.append("<td>删除订单");
result.append("</td>");
result.append("</tr>");
while(rs.next()){
result.append("<tr>");
for(int k=1;k<=count;k++){
if(k==2) name=rs.getString(k);
result.append("<td>"+rs.getString(k)+"</td>");
}
result.append("<form action='orderManagementServlet' method=post>");
result.append("<td><input type=hidden name='logname' value='"+name+"'/><input type=submit value='删除订单'/></td>");
result.append("</form>");
result.append("</tr>");
}
result.append("</table>");
con.close();
}catch(Exception e) {e.printStackTrace();}
%>
<%= result %>
</body>
</html>//---servlets.HandleUserManagement.java
package servlets;
import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HandleUserManagement extends HttpServlet{
public void init(ServletConfig config) throws ServletException{
super.init(config);}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
request.setCharacterEncoding("gb2312");
String name=request.getParameter("logname");
String theFunction=request.getParameter("function");
try {Class.forName("com.mysql.cj.jdbc.Driver");}
catch(Exception e) {e.printStackTrace();}
try{
String uri="jdbc:mysql://localhost:3306/li?serverTimezone=GMT%2B8&characterEncoding=gb2312";
Connection con;
Statement sql;
con=DriverManager.getConnection(uri,"root","123456");
sql=con.createStatement();
if(theFunction.equals("delete")) {
String condition="Delete from user where logname='"+name+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("userManagement.jsp");}
if(theFunction.equals("change")) {
name=request.getParameter("logname");
String phone=request.getParameter("phone");
String address=request.getParameter("address");
String realname=request.getParameter("realname");
String condition="UPDATE user SET phone='"+phone+"',address='"+address+"',realname='"+realname+"' where logname='"+name+"'";
sql.executeUpdate(condition);
con.close();
response.sendRedirect("userManagement.jsp");}
}catch(Exception e) {e.printStackTrace();}
}
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doPost(request,response);
}
}
扫一扫
4210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
