电子商务网站设计报告书

时间：2024.4.7

实验目的：上机指导说明书

1、掌握电子商务网站的基本设计方法；

2、初步了解J2EE架构用于电子商务网站的设计技术；

3、掌握开发所需的数据库服务器、中间服务器和相应环境的配置。

实验步骤：

一、环境配置

1、下载安装JavaSDK 下载jdk1.6.0_05（下载地址：/javase/downloads/index.jsp）。下载好的JDK是一个可执行安装程序，双击安装。假设安装路径为：C:\Program Files\Java\jdk1.6.0_05（当然其他路径也可以）。

JDK安装完成之后要设置系统环境变量：我的电脑点右键，选择“属性”，选择“高级”标签，进入环境变量设置。环境变量设置，分别设置环境变量：JAVA_HOME。

在系统环境变量那一栏中点->新建JAVA_HOME （JAVA_HOME指向的是JDK的安装路径）。变量名： JAVA_HOME；变量值： C:\Program Files\Java\jdk1.6.0_05

设置JAVA_HOME量的目的：为了方便引用，比如，JDK安装C:\Program Files\Java\jdk1.6.0_05目录里，则设置JAVA_HOME为该

电子商务网站设计报告书

目录路径, 那么以后要使用这个路径的时候, 只需输入%JAVA_HOME%即可, 避免每次引用都输入很长的路径串等。

图1 环境变量JAVA_HOME的配置

2、下载web服务器

下载apache-tomcat-6.0.20.exe文件（下载地址：

/source/1611296）。双击安装。安装目录为如D:\apache-tomcat-6.0.20。

电子商务网站设计报告书

图2 web服务器安装目录

二、建立数据库

本实验使用access数据库。在access中建立名为demo的数据库。建立表名为goods的数据库表。该表包括5个字段。编号、名称、价格、数量及删除标志。如下图所示。

电子商务网站设计报告书

图3 建立access数据库

三、程序设计

1、建立主页面。利用Dreamwave或Frontpage建立页面名为default.jsp的主页面。对应代码如下：

<%@ page contentType="text/html; charset=GBK"%>

<html>

<head>

type="text/css">

<title>SSH系统操作演示</title>

if (top.frames.length > 0) {

top.location = window.location;

}

</script>

</head>

<body>

<tr>

<td valign="top" width="150"><iframe name="left"

scrolling="no" marginwidth=0 framespacing=0 marginheight=0 frameborder=2 width='100%' height='100%'

src='/include/left.jsp'></iframe></td>

</tr>

</table>

</body>

</html>

相应的现实为：

电子商务网站设计报告书

图4 主页面

2、建立录入和编辑页面

建立单击“添加”后的录入页面goods.jsp。对应代码如下：

<%@ taglib uri="/struts/tags-logic" prefix="logic"%>

<%@ taglib uri="/struts/tags-bean" prefix="bean"%>

<%@ taglib uri="/struts/tags-html" prefix="html"%>

<%@ page contentType="text/html; charset=GBK" %>

<html>

<head>

type="text/css">

language="javascript"></script>

language="javascript"></script>

<!--

textarea{overflow:auto;width:"100%";height:"100"}

-->

</style>

<SCRIPT LANGUAGE="javascript"> //取消

function myReset(){

document.forms[0].reset(); }

//添加

function mySubmit(){ if(!check()){

return false;

}

document.forms[0].submit(); }

//返回

function myBack(){

}

//提交验证

function check(){

if(isAllBlank(document.all("info.name").value)){ window.navigate("/goods/goodsPageAction.do");

alert("名称不能为空！");

document.all("info.name").focus();

return false;

}

if(isAllBlank(document.all("info.prices").value)){ alert("价格不能为空！");

document.all("info.prices").focus();

return false;

}

if(!isPlusNumeric(document.all("info.prices").value)){ alert("价格格式不对，请输入正数！");

document.all("info.prices").focus();

return false;

}

if(isAllBlank(document.all("info.number").value)){ alert("数量不能为空！");

document.all("info.number").focus();

return false;

}

if(!isPlusNumeric(document.all("info.number").value)){ alert("数量格式不对，请输入正整数！");

document.all("info.number").focus();

return false;

}

return true;

}

</SCRIPT>

</head>

<html:form action="/goods/goodsAction.do" method="post"> <input type="hidden" name="method"

value="<%="inputInit".equals(request.getParameter("method"))?"input":"input".equals(request.getParameter("method"))?"input":"update"%>"/>

<html:hidden property="info.id"/> <html:hidden property="info.deleteFlag"/> <table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

<tr>

<td class="text03">商品管理 → 商品信息

<%="inputInit".equals(request.getParameter("method"))?"添加":"input".equals(request.getParameter("method"))?"添加":"修改"%></td>

</tr>

</table></td>

</tr>

</table>

<table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

</tr>

</table>

<tr>

<td width="100" align="center"><a href="#"

class="button1" onClick="mySubmit();return false;">保 

存</a></td>

<td width="100" align="center"><a href="#"

class="button1" onClick="myReset();return false;">重 置</a></td>

</table>

<table width="100%" border="0" cellspacing="0"

cellpadding="0">

<tr>

</tr>

</table>

<td width="120" height="30" align="center"

class="TdTitle">名    称</td>

<td align="left"><html:text property="info.name" styleClass="textfield" style="width:150"/><span

class="mustfillstar"> *</span></td>

</tr>

<tr>

<tr>

</table>

<tr>

</tr>

</table>

</html:form>

</body>

</html>

相应结果如下：

电子商务网站设计报告书

图5 商品信息录入界面

3、建立列表页面

建立名为goodsList.jsp的列表页面，供主页面调用。代码为： <%@

uri="/struts/tags-logic" prefix="logic"%>

<%@

uri="/struts/tags-bean" prefix="bean"%> taglib taglib

<%@

uri="/struts/tags-html" prefix="html"%>

<%@ page contentType="text/html; charset=GBK" %> <html>

<head>

<script

language="javascript"></script>

//删除

function myDel(spanID){

var infoIDs = getNewInfoIDs(spanID);

if(infoIDs == ""){

alert("请选择所要删除的信息！");

return false;

}

if (confirm("你确认要删除指定信息吗？")) { src="../js/checkbox.js"

window.navigate("../goods/goodsListAction.do?method=delete&ids="+infoIDs);

}

//单个删除

function myDeleteForAlone(infoId){

if (confirm("你确认要删除指定信息吗？")) {

window.navigate("../goods/goodsListAction.do?method=delete&ids='"+infoId+"'");

}

//添加

function myCreate(){

window.navigate("../goods/goodsAction.do?method=inputInit");

}

//编辑

function myEdit(id){

window.navigate("../goods/goodsAction.do?method=updateInit&id="+id);

}

//查看

function myShow(id){

window.navigate("../goods/goodsAction.do?method=show&id="+id);

}

//页面提示信息

String method = request.getParameter("method"); %>

var method = "<%=method%>";

if(method=="delete"){

alert("删除成功！");

}else if(method=="input"){

alert("添加成功！");

}else if(method=="update"){

}

</script>

</head> alert("修改成功！");

<tr>

<tr>

<td class="text03">商品管理 → 商品信息列表</td>

</tr>

</table></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<table width="95%" border="1" align="center"

cellpadding="2" cellspacing="1" bordercolor="cccccc" class="text01" id="tt">

<td width="30" height="25"

width="100%" align="center" border="0" valign="middle"><table

cellpadding="0" cellspacing="0">

<tr>

<td

valign="middle"><input height="22" align="center" type="checkbox" onClick="checkMyChildren('spanID',this.checked,'infoID')" name="allCheckbox"></td>

</tr>

</table></td>

<tr>

</tr>

</table></td>

<td align="center" valign="middle"><table

width="100%" border="0" cellpadding="0" cellspacing="0" class="text002">

<tr>

</tr>

</table></td>

<tr>

</tr>

</table></td>

<tr>

</tr>

</table></td>

</tr>

<logic:iterate id="info" name="pageManager" int i=0; property="listForCurrentPage" scope="session">

<td align="center"><a href=""

name='info' onClick="myShow('<bean:write

property='id'/>');return false;" class="t01"><bean:write name="info" property="name"/></a></td>

<td align="center"><a href=""

name='info' onClick="myEdit('<bean:write

property='id'/>');return false;" class="t01">编辑</a>/<a href="" onClick="myDeleteForAlone('<bean:write name='info' property='id'/>');return false;" class="t01">删除</a></td>

</tr>

<%i++; %>

</logic:iterate>

</table>

<tr>

</tr>

</table>

<tr>

<td height="26" align="center" valign="middle"

class="TdTitle">

<jsp:include

page="/include/page_b.jsp">

<jsp:param

value="goodsPageAction" />

<jsp:param name="otherCondition" value="" />

</jsp:include>

</td>

</tr>

</table>

</body>

</html>

实现结果如主页面。

4、建立查看商品信息页面

建立名为goodsView.jsp的页面。当点击商品名称时弹出商品详细信息。

<%@ taglib uri="/struts/tags-logic" prefix="logic"%>

<%@ taglib uri="/struts/tags-bean" name="pageNum" flush="true"

prefix="bean"%>

<%@ taglib uri="/struts/tags-html" prefix="html"%>

<%@ page contentType="text/html; charset=GBK" %>

<html:html>

<head>

//返回

function myBack(){

}

</SCRIPT>

</head>

<html:form action="/goods/goodsAction.do" method="post"> window.navigate("/goods/goodsPageAction.do");

<tr>

<tr>

<td class="text03">商品管理 → 商品信息查看</td> </tr>

</table></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</table>

<tr>

</tr>

</table>

</tr>

<tr>

<tr>

</table>

</html:form>

</body>

</html:html>

实现结果如下：

电子商务网站设计报告书

图6 查看页面

四、其它配置

设tomcat安装在D盘。

1、修改tomcat下\conf\Catalina\localhost\ROOT.xml中项目存放地址；改为docBase="D:\demo\WebRoot"

2、项目下demo\WebRoot\db\demo.mdb为数据库文件，修改demo\src\config\jdbc.properties中数据库文件存放地址；

3、将上述源文件保存到D:\demo\WebRoot\goods下。

五、启动设计结果

1、启动tomcat。双击D:\apache-tomcat-6.0.20\bin下的startup文件。运行结果如下：

关闭则双击shutdown

电子商务网站设计报告书

文件。

图7 tomcat启动界面

2、启动ie。在地址一栏输入http://localhost/default.jsp。并检测各项结果。

更多相关推荐：

电子商务网站设计报告: 实验报告课程名称电子商务与信息安全技术实验项目电子商务网站设计专业班级软件XXXX班姓名XXXXXX学号XXXXX实验室号综合楼411实验组号实验时间20xx610批阅时间20xx616指导教师XXXXX成绩沈...
电子商务网站建设实验报告: 电子商务网站建设期末设计报告班级3170802第一作者杨秋旋08690238姓名学号第二作者杨庆08690204姓名学号指导教师代宇20xx年5月一网站介绍这是一个小论坛本论坛包含几大功能包含发帖回复邮件编辑删...
电子商务网站设计实验报告: 大连海事大学电子商务网站设计实验报告分数：分专业班号电子商务2011级姓名XXX试验日期20XX/7/03指导教师XX第实验实验名称电子商务网站设计一、实验目的与要求目的：熟练掌握超文本标记语言HTML，用HT…
电子商务网站策划设计报告: 脐橙的诱惑电子商务网站策划设计报告学生姓名黄东梅陈雪莹学号20xx44353220xx444770专业班级市场营销1103指导老师廖娅老师小组分工策划设计陈雪莹网站设计黄东梅1目录一项目立项2二网上销售奉节脐橙...
电子商务网站设计需求分析报告: 电子商务网站需求分析报告电子商务就是指以电子方式在互联网上完成产品或服务的一种销售或购买和电子支付等业务交易的过程叫电子商务电子商务的通常缩写为ECElectronicCommerce是一种全新的商务活动模式它...
电子商务网站设计实验报告书: 西安邮电大学电子商务网站设计上机报告书系部名称学生姓名专业名称班级时间电子商务系李鹏电子商务商务100120xx960西安邮电大学教学实习报告书网站设计实践者李鹏1西安邮电大学教学实习报告书网站设计实践者李鹏2...
电子商务网站设计小组报告: 小组网站设计与开发报告一网站的简介和实习内容1网站名称我是玩家comwoshiwanjiacom2运行环境WindowsXPWindowsvista3网站简介我是玩家com基于一个实用的网站设计模板在模板的基础...

电子商务购物网站毕业设计报告书: 课程设计报告学院数学与计算机科学学院班级13级数字媒体技术学号130705010049姓名苏梅页第1Ajax目录引言2内容摘要3一系统使用描述41选课背景42技术支持5二整体规划61系统功能分析62网络结构63...
电子商务网站规划报告: 电子商务网站规划报告11网站背景21世纪是网络时代随着互联网网络技术的飞速发展极大地影响了商业交易中传统的交易方式和流通方式企业随着业务的不断扩大企业的规模也不断扩大迫切需要建立相应的电子商务网络利用电子商务的...
电子商务系统设计报告: 盐城工学院经济与管理学院电子商务系统设计实验报告专业名称电子商务所在班级班级学号学生姓名指导教师20xx年9月实验1电子商务系统案例分析一实验目的使学生了解电子商务系统的主要作用及其与一般管理信息系统的差异要求...
小型电子商务网站数据管理设计报告: 数据库系统概论课程设计1读书笔记本例的任务是创建一个网络书店在设计网络书店时需要考虑如下内容1如何选用数据库数据库怎样设计我们选择SQLSERVER作为网络书店的后台数据库在实际开发应用程序时选用何种数据库主要...
asp课程设计电子商务网站报告: 电子商务网站学生姓名陈文武学号1021111433班级10211114指导教师杨勇老师20xx年3月17日目录1绪论111开发的意义412主要实现的功能413开发工具简介4131Access数据库介绍4132A...

热门关注

大学电子商务课程设计~电子商务网站调研报告 (带网站截屏图片) (9)

电子商务网站建设实验报告一