1、功能设计
后台系统作为管理人员控制web后台的重要手段之一,最主要的功能(相对于较简陋的后台管理系统而言)即是实现与数据库的交互。作为模板的手机商城有一库四表,其中比较重要的是user(用户表)、mobileForm(商品表)和outForm(订单表)这三个表,如下:
用户管理:增删查。
商品管理:增删查。
订单管理:增删查。
2、功能实现(注意:代码中与数据库连接语句中的用户名,密码要根据个人情况进行修改)
2.1、首先建立一个后台管理主界面manager.html,主页面使用框架分成三个部分(头部标题、左部目录,右部操作)
manager.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<frameset rows="100,*">
<frame src="manager_title.html">
<frameset cols="200,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</frameset>
</html>
树形目录部分使用操作简单的dtree实现,在d.add()的第六个参数部分给定节点链接所打开的目标framename指定右部实现页面跳转。
树形目录实现:left.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<div class="dtree">
<p><a href="javascript: d.openAll();">打开全部</a> | <a href="javascript: d.closeAll();">关闭全部</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'后台管理系统');
d.add(1,0,'用户管理','','','');
d.add(11,1,'查看','check.jsp','','right');
d.add(12,1,'添加','input_user.jsp','','right');
d.add(13,1,'删除','delete_user.jsp','','right');
d.add(2,0,'产品管理','','','');
d.add(21,2,'查看','check_mobile.jsp','','right');
d.add(22,2,'添加','input_mobile.jsp','','right');
d.add(23,2,'删除','delete_mobile.jsp','','right');
d.add(3,0,'订单管理','','','');
d.add(31,3,'查看','check_order.jsp','','right');
d.add(32,3,'添加','input_order.jsp','','right');
d.add(33,3,'删除','delete_order.jsp','','right');
document.write(d);
//-->
</script>
</div>
</body>
</html>
其余框架html文件
right.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>right.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h1><center>welcome</center></h1>
</body>
</html>
manager_title.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>manager_title.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<center>后台管理系统</center>
</body>
</html>
效果如下:
2.2、用户管理有三个功能:查看功能,添加功能,删除功能。
2.2.1、用户管理的查看功能
check.jsp
<%@ page contentType="text/html;charset=GB2312" %>
<%@ page import="java.sql.*" %>
<HTML>
<body>
<% Connection con;
Statement sql;
ResultSet rs;
try{ Class.forName("com.mysql.jdbc.Driver");
}
catch(Exception e){}
try{ String user="root";
String password="199373";
String uri="jdbc:mysql://127.0.0.1/"+"mobileshop";
con=DriverManager.getConnection(uri,user,password);
sql=con.createStatement();
rs=sql.executeQuery("SELECT * FROM user ");
out.print("<table border=2>");
out.print("<tr>");
out.print("<th width=100>"+"logname");
out.print("<th width=100>