实验报告

课程名称     电子商务网站设计        

实验项目名称      巧克力购物系统       

实验室名称（或课室）  实验大楼     

巧克力购物系统开发

一、实验目的

掌握网站制作的技巧。具体如下：掌握HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标签及属性，能设计出多窗口网页、动态网页；CSS与DIV设计与应用，能熟练运用Dreamweaver 进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；掌握JSP脚本语言的基本语法规则，能维护、管理和设计WEB应用程序；能独立设计WEB站点。

二、实验原理

使用JSP+JavaBean+Servlet技术构建巧克力购物系统，用mysql数据库建立与网站的连接，JSP仅负责页面显示部分，JavaBean整合了内部业务逻辑，而Servlet则负责控制用户的请求与响应。

三、实验设备

在开发此巧克力购物系统的时候，需要具备下面的软件环境

● 操作系统：Windows 7。

● Web服务器：Tomcat 7.0。

● Java开发包：JDK 1.7。

● 数据库：masql。

● 开发工具：MyEclipse 8。

四、小组名称与成员

 

五、网站的概要设计

   1.ER图

 

2.功能流程图

3.网站结构图

4.角色与用例之间关系图

 

六、网站的详细设计

Ⅰ.系统功能模块

    从功能模块上看，站内巧克力购物系统主要包括用户管理、管理员管理和商品管理3大部分。从系统的使用角度来看，又可以分为前台用户模块和后台管理员模块。下面从前台和后台两个部分来介绍站内网上巧克力店系统的功能模块。

l  用户模块（前台）：主要包括用户的个人管理包括用户登录、查看和修改个人信息等，如表1所示是前台用户模块中的功能列表。

表1 前台用户模块

l  管理员模块（后台）：主要包括管理员用户的个人管理、管理员管理、普通用户管理和商品管理，其中个人管理包括管理员登录与密码修改，管理员管理包括添加、删除和查看管理员等功能，普通用户管理包括添加、查看和修改用户等，商品管理包括查看、删除和查找商品等。如表2所示是后台管理员模块中的功能列表。

表2 后台管理员模块

七、WEB服务器的配置

开始-程序-管理工具-Internet信息服务（IIS）。

八、站点的测试、上传与发布

站点测试，如下图

上传与发布，如下图

接下来的任务各有分工，选其中比较重视的部分在个人贡献中展示。

九、个人贡献

在这次的实验中，我主要负责两个java类的编写工作：UserManager.java以及Goods.java。这样就可以避免在设计页面的时候重复地打代码，把需要多次用到的代码段整理封装在一个类里面，可以简化代码设计工作，需要实现某个功能的时候只要传参数、调用方法即可，使得设计页面代码看起来更加简洁易懂。

1、Goods.java;package org.work;

public class Goods {

   private String name;

   private int price;

   private int count;

   private int allprice;

      public Goods()

   {count=1;}

      public String getName() {

      return name;}

   public void setName(String name) {

      this.name = name;}

   public void setPrice(int price) {

      this.price = price;

      allprice = price;}

   public int getPrice()

   {return this.price;}

   public int getCount() {

      return count;}

   public void setCount( int count){

      this.count = count ;}

   public int getAllprice()

   {return this.allprice;}

      public void add(){

      count++;

      allprice += price;

}

}

在这个商品类中，定义了一个构造方法和几个方法，用于返回参数值、计算商品价格总和以及一些设置初始值的工作。

2、UserManager.java;package org.work;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

public class UserManager

     public void add(String username, String password)

   {

      try

      {  Class.forName("com.mysql.jdbc.Driver");

Connection conn=DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/work", "root", "123");

      PreparedStatement pstmt = conn.prepareStatement("insert into t_user values (?, ?)");

        pstmt.setString(1, username);

        pstmt.setString(2, password);

        pstmt.execute();

        pstmt.close();

        conn.close();

      }catch(Exception e)

      {     }

   }

      public boolean login(String username, String password)

   {  boolean login = false;

      Connection conn = null;

      PreparedStatement pstmt = null;

      ResultSet rs = null;

      try

      {  Class.forName("com.mysql.jdbc.Driver");

        conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/work", "root", "123");

        pstmt = conn.prepareStatement("select * from t_user");

        rs = pstmt.executeQuery();

        while(rs.next())

        {  String cusername = rs.getString(1);

           String cpassword = rs.getString(2);

   if(cusername.equals(username)&&cpassword.equals(password))

           {  login = true;

              break;

           }

        }

      }catch(Exception e)

      { e.printStackTrace();

      }

      finally

      {  try

        {  rs.close();

           pstmt.close();

           conn.close();

        }

        catch(Exception e)

        {       }

      }

      return login;

   }}

在这段代码中，里面封装了一个连接数据库、检测用户名与密码是否符合的方法，并且用try{}、catch{}来捕抓异常，加载了Sql类。这些都是为了使得登陆页面可以实现。此外，为了让注册页面可以实现，于是设计了add{}方法，方法里面同样有驱动数据库的代码，每次注册便会在数据库中的表增加一条记录。

十、实验分析和结论

以下是我们这次网站设计实施后的一些截图：

  图1登录界面

图2登录成功页面

图3注册界面

图4购物车界面

这些页面的实现需要调用到UserManager.java以及Goods.java这两个类里面的方法，例如说图4中购物车的页面表格中的商品信息统计那里，在【数量】和【小计】那里就调用了Goods.java里相关方法，这样就不必在这个页面的代码设计中重复地敲代码，只要适当地调用就可以事半功倍。在图1的登陆界面中，只要输入用户名和密码，按登陆，后台就会马上运行相关代码，传递参数，调用login{}方法，成功后便会得到一个跳转页面。

十一、实验总结与心得体会

在本次实验学习中，通过一个简单的巧克力购物系统，经过这一些步骤和方法，学习了解了如何制作简单的JSP页面，体会到页面的逻辑设计顺序对一个动态网页设计的重要性。在小组合作完成本系统的过程中主要遇到了几个困难。首先是数据库的连接，在开始之前，总是遇到数据库连接出现错误的问题。通过借阅图书馆的书籍以及咨询对这方面熟悉的同学，最终得到了问题的解决办法。其次是页面调试问题，有时候代码表面上看起来是正确的，可是每次调试都会出现各种各样的问题，有时候是标点符号的问题，有时候是字母大小写的问题，这些都让我体会到要想成为一名出色的网站设计者，细心谨慎的态度是必不可少的。

经过这次试验，尽管我们做的并不是最好的，但是我自己却由此对网页设计产生了兴趣，如果想学好动态网页设计，我必须在java这方面学习得更多才行。

 

第二篇：网站设计实验报告

春雨润西南，节水在行动

我们借助信息网络技术的强大力量，利用网络宣传公益活动，为灾区人民送去一份关爱与祝福，为绿化我们的网络出一份力，让公益节水走进每个人的心里。并号召大家积极行动起来，以实际行动支援灾区，为夺取抗旱救灾的胜利贡献绵薄之力。我们以互联网为载体和依托，通过建立“春雨润西南，节水在心中”的网络公益网站，利用多种方式共同进行。多种方式具体包括:手机短信、彩铃、彩信,公益购物，节水的金点子，情注云南等。

静态网页具体方案设计：

1. 1元钱的爱心接力（在线捐助）

一元虽少，但是聚少成多汇沙成塔，通过大家的爱心接力，为灾区献上自己的微薄之力。

区别于以往的短信捐款的形式，我们不仅仅提供通过发送短信的形式进行，在主页还提供直接可以输入手机号的进行捐款方式（但需要进行手机回复确认），免去了麻烦的过程。在捐款的过程中，捐款人还可以进行手机或是网页留言，我们将选择后进行展示，表现大家的爱心。

当然除了适合绝大多数人的小额的爱心捐助，我们还通过网上在线直接捐助的方式，捐助金额不限，支付方式主要通过网上银行支付，适合基本都有网银的大学生。

2. 用歌声支援灾区，鼓舞人心

选取能体现抗旱精神的歌曲，制作成铃声和彩铃，利用手机的SP服务，在主页上提供下载通道。每成功下载一次就为灾区的同胞献上1元，同时你的使用将可能会带动更多的人加入到这个行列中。我们也在网页中插入了相关歌曲，让网友阅读的时候聆听。如：

3．抗旱点击，聚焦云南——“概况”

以FLASH形式，在主页上制作一幅云南的全省地图，并将各个省市地区分块呈现，让大家了解云南的具体情况。

4．情注云南，感动瞬间——“相关报道”

主要在网站上展示在抗旱过程中的那些温暖人心或是动人心魄的事迹，利用各种特写和镜头来描绘那些涌现出的感人事迹，以此来体现云南人民的坚强和不屈，以此来激励更多的人为灾区贡献自己的一份力量，参与到抗旱的大军中去。

5. 用节约用水抗旱——“节水妙招”

活动以“节约一滴水 润泽彩云南”为主题，在《节水金点子》页面提供一些生活中常用的节水方法，并且向广大同学征集各式各样的节水的好点子，好方法，根据其实效性和功能性，在该页面不定时公布较好的金点子，并利用网络进行推广。

6.公益购物支援灾区——“爱心义卖”

我们将联络Amazon、当当网、卓越网，淘宝网等B2c或c2c网站，将一部分的商品划为爱心商品（可以是小额实用的如书籍等），每售出这一部分爱心商品，商家就会捐出售价的一定的百分比为云南旱灾灾区捐款。捐助的金额将会定期的在主页上公布，保证公开透明。

动态网页具体方案设计：

我们的动态页面以留言板的形式呈现，浏览该网站的朋友可以在此写下自己对云南灾区的祝福或者有什么好的节水金点子，其他好的想法都可以在留言板区域发表。

动态网页的运行方法：

1：找到E:/ tomcat文件夹。方法与java的差不多，找到系统的环境变量窗口，在系统变量中查找一个 E:\tomcat\文件夹名。其值为E：/Program Files/Apache Software Foundatation/Tomat 6.0

2:打开tomcat目录下的bin文件夹, 运行startup.bat。

3: 打开IE浏览器 输入 http://localhost:8080/，并把名为“hhxn”的文件夹复制到tomcat下的webapps文件夹中，然后再重新启动startup,先关闭再运行。

4：然后再打开 http:localhost:8080/hhxn，开始运行。