web前端技术课程报告

武汉华夏理工学院课程报告课程名称：Web前端技术题目：光谷网上书城网站的设计与实现专业软件工程班级软件1162学号10212816203姓名冷宗阳成绩_________________指导教师苏永红2018年3月5日至2018年5月11日目录1可行性分析..............................................................................12开发环境..................................................................................23需求分析..................................................................................34概要设计..................................................................................45详细设计与实现......................................................................56总结..........................................................................................67参考文献..................................................................................7Web前端技术考核要求和评分标准2017-2018学年下学期软件1161-4班的《Web前端技术》课程讲解了JavaScript+jQuery程序开发技术。该课程采用的教材是清华大学出版社出版的李雨亭主编的《JavaScript+jQuery程序开发实用教程》，课程要求的考查方式是考核。由于这门课程是理论与实践相结合且实践性很强的课程，该课程的学习目标是培养学生Web前端网页设计与制作的基本能力。本课程在教学计划中定为考查课，在第10周结束，考核方式拟采用学生独立制作网站作品的方式，以设计文档及设计资料的形式提交。考核内容要求如下：运用HTML、CSS、JavaScript、jQuery等相关技术和DreamweaverCS6工具设计一个光谷网上书城网站，要求用户登录验证、进行网站布局设计，主页有文字特效、图片特效、时间和日期特效、窗体特效、菜单特效、显示与隐藏特效、滑动效果、淡入淡出效果、自定义动画，采用JavaScript、jQuery和DOM技术编程，具有图书分类浏览、翻页效果、具有将商品放入购物车并统计商品总价功能，具有删除购物车商品功能，具有用户留言功能，包含10个以上自己设计的超链接页面。具体要求为：(1)网站主题为光谷网上书城网站，网站标志语、界面主色调与网站主题相匹配，界面布局设计美观、大方、合理，要求用到HTML、表格、表单、框架、导航条、CSS、APDIV布局对象、插入多媒体对象、JavaScript网页特效、采用JavaScript、jQuery和DOM技术编程。(2)主页要求有用户登录验证功能，实现网上书城网站信息分类浏览、文字特效、图片特效、时间和日期特效、窗体特效、菜单特效、显示与隐藏特效、滑动效果、淡入淡出效果、自定义动画、翻页效果、购物车、用户留言等基本功能，10个以上自己设计的超链接页面。(3)网站内容不能雷同，雷同者全部以0分记载。每个人需要检查设计的网站，设计报告文档，并提交纸质版的课程报告和电子版的网站设计资料，包括：源程序，网站运行效果截图，电子版的资料以班为单位刻成光盘后和纸质版课程报告一起交给学习委员统一提交。成绩评定：平时成绩30%+考核成绩70%作品具体评分标准如下：《Web前端技术》评分考核表编号评分标准分数得分1网站设计界面美观，布局合理102网站具有用户登录验证、网页特效、书籍分类浏览、购物车、留言板功能303网站运行结果正确，用户界面友好304课程报告规范，论文书写能表述出自己完成的设计内容155论文结构基本合理、语句通顺、书写整齐15综合得分1可行性分析随着网络时代的发展，作为一家大型图书书城，要做到像亚马逊书城一样庞大。⒈经济可行性图书发行量不断增大，书籍的售卖应该更加广泛更应该面向全国各地，而不是区区光谷这一个地方。顺应时代发展，很有必要性建立网上图书商城。⒉技术可行性在网络技术方面，早期用于电子商务的网络多为较封闭的，现在的网络使用Internet技术来构建，为电子商务的发展提供了一个统一的平台。况且现在网购发展活跃，很有迫切性建立一个属于自己书城的在线销售网站。该网站的建立，可以带来巨大的经济输入，在某些方面可以减少人工的费用，从而减少成本支出。2开发环境Dreamweaver，Photoshop和运用DIV+CSS+AJAX+JavaScrip技术3需求分析电子商务和信息技术的蓬勃发展改变了人们的消费观念和消费模式，利用Internet发布信息，售卖或购买商品和服务，进行各种各样的商务活动，逐步成为现代企业的经营方式，成为个人生活的一部分。图书因其商品信息易于识别，选择和判断，适合于网上交易。网上书店的广泛开发使人们的购书活动变得方便和快捷，人们可以在家中通过网上书店浏览新出版的图书信息，选择并订购图书，而不需要花时间和精力到传统的书店中去查看有何种新的书籍出版。.4概要设计⒈网上书店整体设计要求⑴系统设计采用模块化结构，将系统划分为多个功能模块，各个模块间尽量独立，便于设计和调试。⑵系统代码设计要统一规范，传递语言要尽量一致，并使一次输入充分利用，尽量避免冗余。2.网上书店系统的总体设计⑴数据库设计数据库是长期存储在计算机内的，有组织的，可共享的相关数据集合。数据库设计步骤如下：①需求分析。进行数据库设计首先必须准确了解与分析用户需求。网上书店需要为用户提供书籍的各项信息，还应使用户能够注册为书店会员，购买图书，因而，图书信息，用户信息，订单信息等均应在数据库中有所体现。②概念结构设计数据库的概念结构是现实世界与机器世界的中介，它一方面要充分反映现实世界，同时又要易于向各种数据模型转换。③逻辑结构设计逻辑结构设计将抽象的概念结构，转换为所选用的数据库管理系统支持的数据模型，并对其进行优化。⑵功能模块设计①新书发布按照图书的添加时间将图书降序排列，向用户发布新书的详细信息。②畅销图书发布统计图书的订购量，按照销量降序排列图书。③推荐图书发布由网站管理员标记图书为“推荐”，在网站上发布被推荐图书的详细信息。④用户注册新用户通过注册，成为网上书店的会员后才可以订购图书。是否登录首页注册查看注册条款是否正确弹出msgbox错误提示弹出msgbox注册成功提示进入个人账户否是是否同意填写注册信息结束开始图4用户注册流程图⑤用户登录书店会员访问网站时，登录到个人账户，进行图书选购和交易。⑥管理功能书店管理员登录管理中心，对图书信息，客户信息等进行修改，删除，添加等管理工作。⑦购物车用户登录后，将选购的图书放入购物车内，可以查看，添加或者更改，确定后，提交订单，结账整体程序框图如下弹出msgbox错误提示登录首页用户登录填写用户名及密码进入个人账户信息是否正确否是开始结束整体的程序框图5详细设计与实现1.网站首页设计右边的图片是一个动态的flash小动画，还有向上的箭头特效，文字闪动特效。添加新书删除图书客户管理删除用户图书管理网上书店推荐图书畅销图书用户注册新品图书购物车管理中心图5-1网站首页2.网站登陆单击验证登陆按钮，跳转到登陆界面。由于个人技术原因，没有后台，只能显示界面，无法登陆，后期会完善的。弹出msgbox错误提示登录首页用户登录填写用户名及密码进入个人账户信息是否正确否是开始结束图5-2网页登陆界面3.书城分区框架部分应用到div技术，分为网站首页，计算机网络，成功励志，管理，经济金融，留言，购物车和验证登陆这几个部分。点击都能跳转到相应的部分。部分代码如下；tdwidth=733align=leftvalign=middlebackground=Templates/images/dh_bg.gifdivalign=centerfontcolor=#FFFFFFahref=index.htmlname=link3class=whiteid=link3strong网站首页/strong/astrong|/strongahref=net.htmlclass=whitestrong计算机网络/strong/astrong|/strongahref=lizhi.htmlname=link2class=whiteid=link1strong成功励志/strong/astrong|/strongahref=guanli.htmlclass=whitestrong管理/strong/astrong|/strongahref=jingji.htmlclass=whitestrong经济金融/strong/a/fontfontcolor=#FFFFFFstrong|/strongahref=bbs.htmlclass=whitestrong给我留言/strong/astrong|/strongahref=购物车.htmlclass=whitestrong购物车/strongstrong|/strongahref=验证登录.htmlclass=whitestrong验证登录/strong/a/font/div/td图5-3书城各个分区4。留言界面用户可以填写相关留言图5-4用户留言界面5.购物车用户可以添加任意书籍，任意数量，也可以清空购物车。因为技术原因，无法完成支付付款。图5-5购物车界面6总结此次网页设计的完成过程，对我来说，也是学习新知识，和使用旧知识的过程。软件工程里学到的结构化生命周期开发方法，管理信息系统课上的数据流程图，以及绘图软件，都得到了应用。开发这个小型网上书店还促使我接触了其它的技术，并对它有了切身的实践体会，但是关于它，我仍有许多东西需要在以后的时间里继续学习。由于这是我第一次独立完成系统开发，其中有很多不足之处，还有些功能模块有待实现，但是我仍感到从中获益匪浅。当然，其中也留下了一些问题，但出于自己的水平，作为一个书城系统，该项目上有一些不完善和待改进的问题，特别是网站信息安全方面和需要进一步改善，再次忠心感谢老师的悉心指导，在总体把握和细节工作上都给予我很大的帮助，帮助我顺利完成了此次设计。7参考文献[1]李雨亭，吕婕等.JavaScript+jQuery程序开发实用教程.清华大学出版社，2016年1月