本次实验以课本第十章的智多星手机销售网为基础设计后台管理工程,实现将页面分为左右两个框。左边显示菜单,右边根据菜单选择显示相应的或页面,实现对用户,产品和订单的后台管理。
一、前端
将课本第十章源代码导入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); //设置标签显示文字—
}