电子商务网站设计实验报告书.doc

.

西安邮电大学

电子商务网站设计上机报告书

系部名称
：
电子商务系
学生姓名
：
李鹏
专业名称
：
电子商务
班 级
：
商务1001
时间
：
2012/9/6

精品word文档
.
1.系统规划
电子商务网站越来越普遍，电子商务具有众多优势，1、市场全球化。2、交易的快捷化。3、交易虚拟化。4、成本低廉化。5、交易透明化。6、交易标准化。7、交易连续化。为了能提高企业利润率，降低企业成本，通过采用建立电子商务网站的方式，实现该目的。
2.系统分析与设计
内容要求：
本次课程中要求掌握javascript相关内容，主要掌握通过javascript技术开发电子商务网站。网站页面要求包括：导航栏。网站主要内容包括，用户注册、商品添加、商品结算。
请按照上述要求，写出网站功能列表。、

3.系统实施
1. 工作计划及时间安排

8月27日：对EditPlus 3进行安装，初步了解javascript语言。
8月28日——8月31日：
观看后盾网javascript视频，并根据视频讲解进行编程练习，根据老师的要求，结合css样式制作一个导航条，并能够产生二级导航条。
9月1日——9月3日：
根据老师的要求，制作一个注册页面，要求验证方面要做到用户名输入时不能为空，输入密码长度要有限制，另外要有验证码。
9月4日——9月5日：
制作一个商品添加表单，要求能够添加删除商品信息，并且能够根据单价和商品数量得知总价的金额。
9月6日：
制作一个商品结算表单，要求能够实现全选和全不选的勾选框的功能以及对选中的值能够获取。
9月7日：
完成上机实习报告。

精品word文档
.
2. 具体实施过程
1）导航条
绘制主窗体界面，实现导航条，要求导航条中有用户管理、商品管理，用户管理包括用户注册，商品管理包括：商品添加和商品查询。

(1)对于导航条的制作，先定义好布局框架，代码：

(2)二级下拉菜单就依葫芦画瓢，在一级的里面嵌套两个标签，利用css样式修饰，效果如下：

精品word文档
.

具体过程描述：
第一步：先建立菜单的结构如上。
第二步：隐藏li的默认样式。因为看起来不好看，菜单通常都不需要li默认的原点，我给ul定义了一个样式来消除这些圆点，为了便于更好的控制整个菜单，把菜单放在了一个div标签里。
第三步：设置基本的链接效果，通过css来设置链接的样式，分别定义：link
：visited ：hover的状态。

第四步：将链接以块级元素显示
为了让菜单链接的背景色填满整个li的宽度，在样式定义中增加了display：block
，使链接以块级元素显示。

精品word文档
.

2）用户注册页面
绘制用户注册页面，要求用户注册页面中的各个字段用javascript进行校验。

精品word文档
.
对于注册页面：
第一步：先设计好数据表。
第二步：做好注册页面register.html，可以让用户输入注册信息的表单文件。
第三步：通过javascript校验用户输入的数据。如用户名输入时不能为空，以邮箱的地址格式输入用户名，密码在7~12位之间。代码如下：

页面效果如下：

代码：

精品word文档
.

页面效果：

代码：

页面效果：

3）商品添加页面

精品word文档
.
完成商品添加页面，在商品添加页面中能实现商品的动态增加与删除。
商品添加页面的制作过程：
第一步：进行框架的构建。
代码：

页面效果：

第二步：对添加删除操作功能进行编写：
代码如下：

精品word文档
.

4）商品结算页面

精品word文档
.
完成商品结算页面，实现在商品结算页面中能实现商品的全选与全不选，同时，页面要求美观大方。
首先是框架设计：
代码：

框架效果如下：

精品word文档
.

精品word文档
.
功能展示：
（1） 按钮
代码：

全选按钮的功能展示

效果展示：

全选状态下获取选中值按钮功能展示：

全选状态下结算按钮功能展示：

精品word文档
.

5. 实验总结
1）运行及测试结果分析。
运行和测试在实施过程中已经描述，以下为分析阶段：
在这次的网页设计实习之中，我们总共完成了四个页面，第一个是制作一个导航条，第二个是一个用于用户注册信息的页面，第三个是一个进行商品添加和删除，并能根据单价和数量得知总价格的页面，第四个是一个商品结算的页面。
经过两周的实习，我明白了老师的意图，贯穿所做的四个页面，整合到一块就是一个简易的购物系统。用户根据导航条选择要进行的操作，选择注册并完成注册后登录进入商品添加页面，然后，添加所需商品，提交后，系统后把用户所提交的商品信息提交到商品结算页面，根据结算结果付账完成购物。为了能让我们能够少走弯路，老师没有给我直接布置任务，而是给我们布置一个个的任务，在不知不觉中做成了一个简易的系统，唯一需要完善的是后台的数据库，因为我们的实习重点放在网站前台页面制作上，就没有做后台数据库部分，所以做成的也只能算是半个系统。
实习中所编写的每一个页面都有各自的重点，比如说导航条就需要通过css来设置链接的样式，分别定义：link ：visited ：hover的状态；用户注册页面重点在于用户输入信息的验证上，需要编写验证的相关代码来约束信息内容；商品添加页面重点在于添加和删除的操作以及对于单价和数量输入框里输入的内容的抓取并运算，然后再在总价框里面显示；商品结算页面的重点一个是勾选框的勾选内容需要按钮来操控，这个页面大量用到了id用来取所需要的内容，方便操作。在编写结算功能的时候我遇到了一个问题，只能对于全选的内容获取总金额，对于任意选取其中几个却没法获取，总是提示NaN，最后经过大量的检验，发现问题在于没有给所定义的变量赋初始值，我们都知道在java中，如果没有给变量赋初始值，那么程序就会报错或给予提示，而这次的实习我们学的是用javascript编写网页脚本，在变量没有赋初值时，没有说明到底是哪里的问题（出现NaN的情况有很多种），经过最终的努力结算完美完成，以下为任意选取商品的展示效果：

精品word文档
.
2) 此次实验的心得体会、不足之处和提高方向。
心得体会：
经过为期两周网站设计的实习，使我对网站前端开发有了整体性的认识，通过利用javascript语言对网页脚本进行编写和利用css样式对网页布局的规划和美化，让我了解到了如今的大型网站对于javascript的运用和对css的依赖，同时我们也学会了如何去分析一个网站建设流程以及通过代码制作部分网页模块。总体来说这次的实习收获还可以，虽然还谈不上熟练的对网页进行开发，但是学会了javascript语言在网页开发中的应用，为以后将要学到的程序开发打下了一定的基础，我相信通过不断的练习，我们会慢慢熟练掌握javascript语言。
不足之处：
虽然老师进行了一定的讲解，也看了相关视频，但是由于编程的底子太薄，实习当中走了不少弯路，不过吃一堑长一智，通过不断的练习，慢慢的走上正轨，熟悉了javascript语言的运行机理，编写起代码也慢慢熟络起来。通过这次实战性的实习，发现自己要学的东西还很多，必须进行不断的知识补充才能对这门语言予以掌握并加以灵活运用。
提高方向：
1.学会思考
通过这次的实习，我发现要编写一个模块，不能急于动手敲，思路是最重要的，没思路，敲半天也不知道个所以然，还得重新开始。老师是有好多年的编程经验，在整理思路方面比我们强太多了，我们在学习编程中要学会先思考后编程。
2.熟能生巧
在实习之初，我们以看视频为主，卫老师不停地教导说要边看视频边敲代码，不能一味的只看视频，看会不等于学会，只有多敲代码，才能真正熟练应用。我们要学的还很多，在学习新知识的同时要学会巩固旧知识。
3.学会综合运用
在学习javascript语言的时候，要学很多东西，例如new关键字的使用、方法的创建、循环语句for while的嵌套使用等等，学会一种多种并不是真正的学会，只有学会如何将这所有的东西能够结合起来，在编程之中让它们发挥自己最大的作用才是最棒的，要综合的应用， 不是使用这个语句就对那个语句弃之不顾，要综合它们在程序中的优点，加以利用才行，我们要慢慢学会综合的对它们进行运用。

精品word文档
.

精品word文档
.

西安邮电大学管工院电子商务网站设计过程考核表
学生姓名
李鹏
班级/学号
1001/02102026
承担任务实验室（单位）
邮政网络实验室
所在部门
管理工程学院
实施时间
2012 年 8 月 27 日 — 2012 年 9 月7日
具体内容
第一周

第二周

……

指导教师（师傅）姓名

职务或职称
教师
指导教师（师傅）
对学生的评价
学习态度
□ 认真 □ 一般 □ 不认真
学习纪律
□ 全勤 □ 偶尔缺勤 □ 经常缺勤
实践能力
□ 很强 □ 一般 □ 较差
指导教师（师傅）对学生专业知识或社会实践能力等情况的意见

指导教师（师傅）签字

年 月 日

精品word文档
.

西安邮电大学管工院电子商务网站设计成绩鉴定表
学生姓名
李鹏
班级/学号
1001/02102026
进行时间
2012 年 8 月 27 日 — 2012 年 9 月 07 日
成绩鉴定
学习内容（20分）
与教学任务计划结合程度（10分）

与专业培养结合程度（6分）

其它（4分）

接受单位评价
（20分）
实践能力（10分）

学习态度（6分）

学习纪律（4分）

报告鉴定
（60分）
报告内容与实践过程紧密结合（15分）

报告内容与教学计划内容紧密结合（15分）

报告质量(主题、结构、观点、逻辑、资料、字数 30分)

评阅教师姓名

职称
教师
成绩

评语

评阅教师签字

年 月 日

精品word文档
.

【本文档内容可以自由复制内容或自由编辑修改内容期待你的好评和关注，我们将会做得更好】

感谢您的支持与配合，我们会努力把内容做得更好！

精品word文档