1、0西安邮电大学电子商务网站设计上机报告书系部名称 : 电子商务系学生姓名 : 李鹏专业名称 : 电子商务班 级 : 商务 1001时间 : 2012/9/6西安邮电大学教学实习报告书 网站设计实践者: 李鹏11.系统规划电子商务网站越来越普遍,电子商务具有众多优势,1、市场全球化。2、交易的快捷化。3、交易虚拟化。4、成本低廉化。5、交易透明化。6、交易标准化。7、交易连续化。为了能提高企业利润率,降低企业成本,通过采用建立电子商务网站的方式,实现该目的。2.系统分析与设计内容要求:本次课程中要求掌握 javascript 相关内容,主要掌握通过 javascript 技术开发电子商务网站。网
2、站页面要求包括:导航栏。网站主要内容包括,用户注册、商品添加、商品结算。请按照上述要求,写出网站功能列表。 、3.系统实施1. 工作计划及时间安排8 月 27 日:对 EditPlus 3 进行安装,初步了解 javascript 语言。8 月 28 日 8 月 31 日:观看后盾网 javascript 视频,并根据视频讲解进行编程练习,根据老师的要求,结合 css 样式制作一个导航条,并能够产生二级导航条。9 月 1 日 9 月 3 日:根据老师的要求,制作一个注册页面,要求验证方面要做到用户名输入时不能为空,输入密码长度要有限制,另外要有验证码。9 月 4 日 9 月 5 日:制作一个商
3、品添加表单,要求能够添加删除商品信息,并且能够根据单价和商品数量得知总价的金额。9 月 6 日:制作一个商品结算表单,要求能够实现全选和全不选的勾选框的功能以及对选中的值能够获取。9 月 7 日:完成上机实习报告。西安邮电大学教学实习报告书 网站设计实践者: 李鹏22. 具体实施过程1)导航条绘制主窗体界面,实现导航条,要求导航条中有用户管理、商品管理,用户管理包括用户注册,商品管理包括:商品添加和商品查询。(1)对于导航条的制作,先定义好布局框架,代码:(2)二级下拉菜单就依葫芦画瓢,在一级的里面嵌套两个标签,利用 css 样式修饰,效果如下:西安邮电大学教学实习报告书 网站设计实践者: 李
4、鹏3具体过程描述:第一步:先建立菜单的结构如上。第二步:隐藏 li 的默认样式。因为看起来不好看,菜单通常都不需要 li 默认的原点,我给 ul 定义了一个样式来消除这些圆点,为了便于更好的控制整个菜单,把菜单放在了一个 div 标签里。第三步:设置基本的链接效果,通过 css 来设置链接的样式,分别定义: link :visited :hover 的状态。第四步:将链接以块级元素显示为了让菜单链接的背景色填满整个 li 的宽度,在样式定义中增加了display:block,使链接以块级元素显示。西安邮电大学教学实习报告书 网站设计实践者: 李鹏42)用户注册页面绘制用户注册页面,要求用户注册
5、页面中的各个字段用 javascript 进行校验。西安邮电大学教学实习报告书 网站设计实践者: 李鹏5对于注册页面:第一步:先设计好数据表。第二步:做好注册页面 register.html,可以让用户输入注册信息的表单文件。第三步:通过 javascript 校验用户输入的数据。如用户名输入时不能为空,以邮箱的地址格式输入用户名,密码在 712 位之间。代码如下: 页面效果如下:代码:西安邮电大学教学实习报告书 网站设计实践者: 李鹏6页面效果:代码:页面效果:3)商品添加页面西安邮电大学教学实习报告书 网站设计实践者: 李鹏7完成商品添加页面,在商品添加页面中能实现商品的动态增加与删除。商
6、品添加页面的制作过程:第一步:进行框架的构建。代码:页面效果:第二步:对添加删除操作功能进行编写:代码如下:西安邮电大学教学实习报告书 网站设计实践者: 李鹏84)商品结算页面西安邮电大学教学实习报告书 网站设计实践者: 李鹏9完成商品结算页面,实现在商品结算页面中能实现商品的全选与全不选,同时,页面要求美观大方。首先是框架设计:代码:框架效果如下:西安邮电大学教学实习报告书 网站设计实践者: 李鹏10西安邮电大学教学实习报告书 网站设计实践者: 李鹏11功能展示:(1) 按钮代码:效果展示:全选按钮的功能展示全选状态下获取选中值按钮功能展示:全选状态下结算按钮功能展示:西安邮电大学教学实习报
7、告书 网站设计实践者: 李鹏125. 实验总结1)运行及测试结果分析。运行和测试在实施过程中已经描述,以下为分析阶段:在这次的网页设计实习之中,我们总共完成了四个页面,第一个是制作一个导航条,第二个是一个用于用户注册信息的页面,第三个是一个进行商品添加和删除,并能根据单价和数量得知总价格的页面,第四个是一个商品结算的页面。经过两周的实习,我明白了老师的意图,贯穿所做的四个页面,整合到一块就是一个简易的购物系统。用户根据导航条选择要进行的操作,选择注册并完成注册后登录进入商品添加页面,然后,添加所需商品,提交后,系统后把用户所提交的商品信息提交到商品结算页面,根据结算结果付账完成购物。为了能让我
8、们能够少走弯路,老师没有给我直接布置任务,而是给我们布置一个个的任务,在不知不觉中做成了一个简易的系统,唯一需要完善的是后台的数据库,因为我们的实习重点放在网站前台页面制作上,就没有做后台数据库部分,所以做成的也只能算是半个系统。实习中所编写的每一个页面都有各自的重点,比如说导航条就需要通过 css 来设置链接的样式,分别定义:link : visited :hover 的状态;用户注册页面重点在于用户输入信息的验证上,需要编写验证的相关代码来约束信息内容;商品添加页面重点在于添加和删除的操作以及对于单价和数量输入框里输入的内容的抓取并运算,然后再在总价框里面显示;商品结算页面的重点一个是勾选
9、框的勾选内容需要按钮来操控,这个页面大量用到了id 用来取所需要的内容,方便操作。在编写结算功能的时候我遇到了一个问题,只能对于全选的内容获取总金额,对于任意选取其中几个却没法获取,总是提示 NaN,最后经过大量的检验,发现问题在于没有给所定义的变量赋初始值,我们都知道在 java 中,如果没有给变量赋初始值,那么程序就会报错或给予提示,而这次的实习我们学的是用 javascript 编写网页脚本,在变量没有赋初值时,没有说明到底是哪里的问题(出现 NaN 的情况有很多种) ,经过最终的努力结算完美完成,以下为任意选取商品的展示效果:西安邮电大学教学实习报告书 网站设计实践者: 李鹏132)
10、此次实验的心得体会、不足之处和提高方向。心得体会:经过为期两周网站设计的实习,使我对网站前端开发有了整体性的认识,通过利用 javascript 语言对网页脚本进行编写和利用 css 样式对网页布局的规划和美化,让我了解到了如今的大型网站对于 javascript 的运用和对 css 的依赖,同时我们也学会了如何去分析一个网站建设流程以及通过代码制作部分网页模块。总体来说这次的实习收获还可以,虽然还谈不上熟练的对网页进行开发,但是学会了 javascript 语言在网页开发中的应用,为以后将要学到的程序开发打下了一定的基础,我相信通过不断的练习,我们会慢慢熟练掌握 javascript 语言。
11、不足之处:虽然老师进行了一定的讲解,也看了相关视频,但是由于编程的底子太薄,实习当中走了不少弯路,不过吃一堑长一智,通过不断的练习,慢慢的走上正轨,熟悉了 javascript 语言的运行机理,编写起代码也慢慢熟络起来。通过这次实战性的实习,发现自己要学的东西还很多,必须进行不断的知识补充才能对这门语言予以掌握并加以灵活运用。提高方向:1.学会思考通过这次的实习,我发现要编写一个模块,不能急于动手敲,思路是最重要的,没思路,敲半天也不知道个所以然,还得重新开始。老师是有好多年的编程经验,在整理思路方面比我们强太多了,我们在学习编程中要学会先思考后编程。2.熟能生巧在实习之初,我们以看视频为主,
12、卫老师不停地教导说要边看视频边敲代码,不能一味的只看视频,看会不等于学会,只有多敲代码,才能真正熟练应用。我们要学的还很多,在学习新知识的同时要学会巩固旧知识。3.学会综合运用在学习 javascript 语言的时候,要学很多东西,例如 new 关键字的使用、方法的创建、循环语句 for while 的嵌套使用等等,学会一种多种并不是真正的学会,只有学会如何将这所有的东西能够结合起来,在编程之中让它们发挥自己最大的作用才是最棒的,要综合的应用, 不是使用这个语句就对那个语句弃之不顾,要综合它们在程序中的优点,加以利用才行,我们要慢慢学会综合的对它们进行运用。西安邮电大学教学实习报告书 网站设计
13、实践者: 李鹏14西安邮电大学管工院电子商务网站设计过程考核表学生姓名 李鹏 班级/学号 1001/02102026承担任务实验室(单位)邮政网络实验室 所在部门 管理工程学院实施时间 2012 年 8 月 27 日 2012 年 9 月 7 日第一周第二周具体内容指导教师(师傅)姓名 职务或职称 教师学习态度 认真 一般 不认真学习纪律 全勤 偶尔缺勤 经常缺勤指导教师(师傅)对学生的评价实践能力 很强 一般 较差指导教师(师傅)对学生专业知识或社会实践能力等情况的意见 指导教师(师傅)签字 年 月 日 西安邮电大学管工院电子商务网站设计成绩鉴定表学生姓名 李鹏 班级/ 学号 1001/02102026进行时间 2012 年 8 月 27 日 2012 年 9 月 07 日与教学任务计划结合程度(10 分)与专业培养结合程度(6 分)学习内容(20 分)其它(4 分)实践能力(10 分)学习态度(6 分)接受单位评价(20 分) 学习纪律(4 分)报告内容与实践过程紧密结合(15 分)报告内容与教学计划内容紧密结合(15 分)成绩鉴定报告鉴定(60 分) 报告质量(主题、结构、观点、逻辑、资料、字数 30 分)评阅教师姓名 职称 教师 成绩评语评阅教师签字 年 月 日