数码商城静态网站设计与开发.docx
《数码商城静态网站设计与开发.docx》由会员分享，可在线阅读，更多相关《数码商城静态网站设计与开发.docx（24页珍藏版）》请在冰点文库上搜索。
数码商城静态网站设计与开发
技术学院
信息系计算机应用技术专业级
毕业设计（论文）
题目:
数码商城静态网站设计与开发
姓名2021学号2021
指导教师（签名）_____________
二〇年月日
职业技术学院毕业设计（论文）
诚信承诺书
本人慎重承诺：
我所撰写的设计（论文）《数码商城静态网站设计与开发》是在老师的指导下自主完成，没有剽窃或抄袭他人的论文或成果。
如有剽窃、抄袭，本人愿意为由此引起的后果承担相应责任。
毕业论文（设计）的研究成果归属学校所有。
学生（签名）
年月日
数码商城静态网站设计与开发
姓名
[摘要]
随着二十一世纪新兴科技的飞速发展，互联网已日益成为收集并提供信息的最佳渠道，且逐步进入传统的流通领域。
信息传播方式发生变革其资源共享功能促进了互联网化。
该网站通过展示各种数码商品及配件、笔记本及游戏娱乐、智能家居等内容向用户传递了智能信息和互联网文化。
本论文着重对布局与样式还有各种动态效果进行了说明，具体实现了首页、数码商品介绍、简单的游戏娱乐、用户注册与登录等功能。
网站制作工具主要为Eclipse、MySQL，还进行简单登陆注册页面的设计,后台数据库选用MySQL数据库。
论文还包含网站制作过程中的源码及图片的截图，详细设计并图文并茂的解释说明。
关键词：
数码商城、Hbuilder、Eclipse、JavaScript、Canvas动画
第一章绪论
1.1研究背景及目的
新兴科技的发展，计算机技术和网络技术迅猛发展，互联网技术和电子政务技术也得到很大提高，世界已经进入了信息社。
传统的网站维护方式是由网站的管理员来完成管理的任务，他制作所有的页面，并检查其中的连接，然后使用FTP工具上传到服务器上。
但是随着网页数量的增加，情况发生了变化，传统的网站维护方式带来了许多问题。
随着个人上网用户和企业单位用户上网的增加，并且近年来电子商务的流行，使得人们越来越依赖网络。
网页设计伴随着网络的快速发展，作为上网的主要依托。
网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。
上网就需要访问网站，由此刺激了网站的大量增加。
面对日益加快的生活节奏和信息社会日新月异的变化，企业极需要一种快捷，便利的平台来对外宣传企业形象，介绍最新产品和及售后服务网站。
畅通无阻的大桥已成为企业中研究的重要课题之一，本网站正是为这一目标设计制作的。
1.2网站设计思想
（1）理解用户需求
网站刚开始的时候是围绕搜索引擎做设计的，现在要满足用户查看信息的需要,还要满足用户的体验需要,也许用户很难用语言形象的描述出来他们究竟需要什么,不过在他们的想象中,肯定有现实的因素和思想的因素,或者访问某个网站，或者希望在网站加入一个新的功能,对于用户这种看似模棱两可的要求,千万不要忽略或者假装不知道，也许，正是这份认真，让自己超越以前设计想象，同时也赢得了胜利。
（2）站在用户思维思考
一个不起眼的提议,好像是不可能的。
《哪吒之魔童降世》的大热，充分的发挥了大脑的想象空间，原著和电影之间的差距还是比较大的，但主题没有发生太大的变化,而作为电影，正能量需要更多一些。
同样，用户的思维是有一定局限的，而网站设计的思维也是有一定局限的，对方的局限性和网站设计的局限性，并不一定非得是涵盖的关系，而是两个思维模式的融合，或者站在用户的思维去思考一些问题，那么，对于网站设计而言，正在打破固有的极限，探求新的方法，这个过程是创新,也是在进步。
（3）网站维护
因为我们不像那些大的网站有许许多多的资源，我们只能说靠着大树混饭吃，于是采集系统大肆利用，采集对PR值来讲是头号杀手，其实你想我们每天对自己的网站进行内容的添加、修改、删除，不仅提高了PR值，而且能够稳步的快速提高各项指数，每天坚持修改5条具体内容，一年下来就已经不少了，所以网站维护没有什么，简单来说就是两个字——坚持。
（4）网站推广
这个问题我在这里不多说了网络上有很多的资料可以查询,但是要记住一点就是绝对不要去作弊，要不然后悔都来不及，有句话叫“质量是企业的生命”，网站同样的道理，只有网站有实质性的内容或者说能让用户体验到作用，这才是硬道理。
任何流量都是要时间去积累的，不做事情，靠几个小手段，我想不会有太大的作用。
1.3研究内容
本文的研究内容包括登陆注册、数据库的基本增删查改、各个软件的基本用法、JavaScript、Canvas、Bootstrap特效等功能模块的设计。
本论文主要介绍了网站自主设计开发的全部过程，通过对网页功能的分析和对网站设计过程进行详细的说明。
本课题所研发的网站，采用网站设计的基本思想，基于多层次网站结构进行开发。
数据层设计包括数据库的建立增加删除等。
本网站主要包括：
（1）需求分析：
需求分析主要是针对网站的开发过程及开发过程中遇到的重难点展开分的。
（2）功能模块：
特效和各种信息。
通过向用户展示具有很多特效的内容来获得用户的信任。
还有登录注册功能的信息写入后台数据库，登陆的时候还有从数据库中调出来进行简单的登录判断，以确定是不是用户等
1.4预期目标
网站的前期预备是基础，“万事预则立，不预则废”，有必要强调前期的预备作业。
依照可发现的用户需求、潜在的用户需求、用户喜欢的各种需求三项来严密预备。
前期准备过程中必要留意细节的预备，无论是小图片的放置、窗口的缩放和文字的大小，都要从细从严地进行要求。
开始用户先进行登录，然后开始浏览和各种查看，以及浏览各种设备的详细介绍，还有就是本网站实行会员制，不登陆是不能进行浏览的。
虽然这种想法不太好，但是为了用户的各项权益，还是这样进行设计的。
网站前期预备得充沛，比如说预先找好大量的图片素材和可能用到的炫酷特效还有各种文字内容，也会让咱们在网站制作过程中应对一些突发事件时能够少费一些时间跟力气，毕竟bug都是无法预测的，那么前期预备作业的充沛将会为设计过程中带来很大的便利。
还有就是制作每个页面或者功能特效都需有一定的时间，要掌握好时间。
前期准备虽然很重要，但是后期执行起来更复杂的，执行远远要比做好准备要重要的多。
第二章网站开发环境
2.1Eclipse和Hbuilder介绍
虽然大多数用户很乐于将Eclipse当作Java集成开发环境（IDE）来使用，但Eclipse的目标却不仅限于此。
Eclipse还包括插件开发环境（Plug-inDevelopmentEnvironment，PDE），这个组件主要针对希望扩展Eclipse的软件开发人员，因为它允许他们构建与Eclipse环境无缝集成的工具。
由于Eclipse中的每样东西都是插件，对于给Eclipse提供插件，以及给用户提供一致和统一的集成开发环境而言，所有工具开发人员都具有同等的发挥场所。
这种平等和一致性并不仅限于Java开发工具。
尽管Eclipse是使用Java语言开发的，但它的用途并不限于Java语言；例如，支持诸如C/C++、COBOL、PHP、Android等编程语言的插件已经可用，或预计将会推出。
Eclipse框架还可用来作为与软件开发无关的其他应用程序类型的基础，比如内容管理系统。
基于Eclipse的应用程序的一个突出例子是IBMRationalSoftwareArchitect，它构成了IBMJava开发工具系列的基础。
HBuilder是一个极客工具，追求无鼠标的极速操作。
不管是敲代码的快捷设定，还是操作功能的快捷设定，都融入了效率第一的设计思想。
查看、编辑代码块可以在工具-自定义代码块中，选择相应的代码块进行查看和编辑。
也可以在激活代码块的代码助手中，点击详细信息右下角的修改图标进行修改和查看。
HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库，并且这些框架语法一样可以享受到HBuilder的全时提示机制，提示图片、颜色、id、class...
HBuilder的语法库包括W3C的HTML、JAVASCRIPT、CSS的正式标准和推荐标准...，ECMAScript中浏览器支持的部分，还有各大浏览器的扩展语法，webkit、moz、ms，均实时更新到各浏览器的最新版本。
信息栏中的浏览器品牌图标，全亮表示无障碍支持该语法，全灰表示不支持，而半亮则表示该浏览器部分支持该语法。
半亮时会下图标下方显示出来详细的支持情况，比如video标签，从IE9才开始支持。
HTML5一大用途就是App开发。
HBuilder良好的支持手机App开发。
包括新建移动App项目、runindevice真机调试、本地及云端打包。
HBuilder开发的HTML5+App，比普通的webApp功能更强、性能更高。
2.2JavaScript技术
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。
因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。
为了统一规格，JavaScript兼容于ECMA标准，因此也称为ECMAScript。
ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
2.3Canvas动画
在网页中实时生成图像，并操作图像内容（通俗就是在网页中画画）。
Canvas可以制作在线绘图工具、动态数据图纸常用于网站后台的数据统计功能、制作HTML游戏、制作APP应用等。
一个画布在网页中是一个矩形框，通过
注意:
默认情况下
注意:
标签通常需要指定一个id属性（脚本中经常引用）,width和height属性定义的画布的大小。
canvas是一个二维网格。
canvas的左上角坐标为（0,0）。
2.4CSS样式
CSS指层叠样式表（Cascading Style Sheets），样式通常存储在样式表中，把样式添加到HTML4.0中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在CSS文件中。
样式表定义如何显示HTML元素，就像HTML3.2的字体标签和颜色属性所起的作用那样。
样式通常保存在外部的.css文件中。
通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。
作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。
如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个样式表允许以多种方式规定样式信息。
样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。
甚至可以在同一个HTML文档内部引用多个外部样式表。
层叠次序：
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数4拥有最高的优先权。
内部样式表（位于
标签内部）内联样式（在HTML元素内部）。
因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明。
2.4Bootstarp
HTML5文档类型：
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。
在你项目中的每个页面都要参照下面的格式进行设置。
DOCTYPEhtml>...
在Bootstrap2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。
而在Bootstrap3中，我们重写了整个框架，使其一开始就是对移动设备友好的。
这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
也就是说，Bootstrap是移动设备优先的。
针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在
之中添加viewport元数据标签。
在移动设备浏览器上，通过为视口（viewport）设置meta属性为userscalable=no可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
Bootstrap排版、链接样式设置了基本的全局样式。
分别是：
为body元素设置background-color:
#fff;使用@font-family-base、@font-size-base和@line-height-base变量作为排版的基本参数，为所有链接设置了基本颜色@link-color，并且当链接处于:
hover状态时才添加下划线这些样式都能在scaffolding.less文件中找到对应的源码。
为了增强跨浏览器表现的一致性，我们使用了Normalize.css，这是NicolasGallagher和Jonathan Neal维护的一个CSS重置样式库。
布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器。
我们提供了两个作此用处的类。
注意，由于padding等属性的原因，这两种容器类不能互相嵌套。
第三章系统数据库设计与需求分析
3.1概念结构设计
这一设计阶段旨在需求分析的基础上设计出能够满足用户需求的实体。
根据网站要处理的信息，可有用户一个实体。
采用的数据库是开源的SQLServer数据库。
账号表（只存储账号）、密码表（只存储密码）用例结构如图3-1、逆向表模型如图3-2
图3-1普通用户用例
图3-2逆向表模型
3.2逻辑结构设计
网站模型的逻辑结构设计的任务是把概念结构设计好的基本的图转换为支持关系模型的DBMS相符合的逻辑结构。
用户管理网站数据库各表具体定义如图3-3、3-4
图3-3pwd表
图3-4user表
3.3技术可行性
技术可行性研究的任务，是从总体上鉴别和选择技术系统，是研究现有的技术条件。
能否顺利完成开发工作，硬、软件配置能否满足开发的需求等等。
本网站的开发使用Eclipse和MySQL作为网站开发的开发环境，它作为一种现代化的编程工具，提供完善的指令控制语句、类与对象的支持及丰富的数据类型，给开发高性能网站提供了保障，为开发满足客户要求的系统保证了代码的模块化要求，而代码模块化的提高，非常有利于以后对新系统的扩展与修改。
综上所述，本网站为一个小型的数码商城，所耗费的资源非常的小，现行的电脑无论是硬件还是软件都能够满足条件，因此，本网站在技术上是可行的。
3.4经济可行性
进行网站开发项目成本的估算以及了解取得效益的评估，确定要开发的项目是否值得投资开发，这些即为经济可行性。
数码商城网站廉价的开发成本,却能够为居民带来相当大的实惠和方便。
主要表现在:
（1）本网站是一个拥有浏览的信息网站，具有较强的实用性和方便性。
（2）本网站的运行可以大大提高信息的重要性，减少不必要的人力和物力。
（3）本网站的运行可以大大的提高用户的工作效率，并可以使敏感文档更加安全。
由此可以得出，本网站在经济上是具有可行性的。
3.5操作可行性
本网站采用基于Windows的图形用户界面，而该网站是大家熟悉的操作网站，对于那些有一般的计算机知识的人员就可以轻松上手。
而整个网站采用最友好的交互界面，简介明了，不需要对数据库进行深入的了解。
由此，该网站的操作是可行的，有必要开发该网站。
综合以上三方面，该网站具有很高的开发可行性，无论是从技术上或者经济上还是操作上都是可行的。
3.6开发的风险分析
本网站开发过程中，可能会遇到如下几方面问题:
1.需求变更风险:
用户会对自身的需求提出多次更改，进而影响网站开发进程；
2.进度风险:
网站如果不能如期完成，会给开发者与用户双方带来不必要的麻烦；
3.技术风险:
开发过程中，有可能遇到开发上的技术问题；
4.质量风险:
开发完成后，网站的质量不一定会让用户满意；
5.工具风险:
开发过程中，开发的工具一定保证正版，否则会受到法律的制裁;；
6.人力资源风险:
开发过程中，有可能会遇到人员不够充足的问题。
第四章网站设计详情
4.1登录注册的实现
4.1.1登录
用户进入登录页面以后，按照文本框题提示输入相应的账号跟密码，然后点击登录按钮即可实现登录功能。
登录成功或失败都将进入相应的页面。
登陆界面如图4-1
图4-1登陆界面
4.1.2注册
进入注册页面以后，输入想要注册的账号跟密码，点击注册，注册成功或失败都将进入相应的页面，然后返回登录页面即可进行登录。
注册成功或失败都将进入相应的页面。
注册页面和登录页面一样就如上图一样。
4.2首页的实现
主页面主要由上部导航栏和左侧栏右侧轮播图和中部的简单物品图片展示还有下边的各种信息组成。
用户在这个主页面也就是以及页面可以点击上部的导航栏或者其他的文字进入到相应的页面也就是二级页面。
这个主页面的效果主要有轮播图效果和图片阴影效果。
4.3Canvas特效
4.3.1粒子背景
基于canvas绘制密集的点和线连接，鼠标经过打乱点线连接动效，如图4-2。
把这个动画作为背景添加到网页中，这就起到了锦上添花的作用，粒子效果用到了canvas样式和JavaScript，这个需要把样式写到一个单独的文件，canvas样式与JavaScript的结合使用就是现在的粒子效果。
本来想把这个粒子背景放在内容的上面，这就会影响内容的查看，所以把这个粒子效果作为背景才是最好的。
这个粒子效果还有一个小问题，就是这个页面运行的时间越长占用的内存就越高。
然后引入外部样式，然后再把canvas布局添加到body的最上面，最后进行的位置设置就好了。
图4-2粒子背景
4.3.2时钟
时钟效果的实现，一件简单时钟如图4-3，凡是个东西总有它的个性特点，我的这个钟表的特点就是实时显示当前操作系统显示的时间。
时间一直很重要，但人们现在开始淡淡的遗忘它了，我加入这个时钟的初衷就是提醒时间。
代码请看如下。
在这个钟表的后边我加了一个背景，提醒时间的重要性和24小时服务的职业精神。
图4-3时钟
clock.clearRect（0,0,400,400）;
/*外圈*/
clock.beginPath（）;
clock.strokeStyle="SandyBrown";
clock.lineWidth=10;
clock.arc（250,250,240,0,Math.PI*2,true）;
clock.stroke（）;
clock.font="18pxarial";
clock.fillText（timeString（）,170,160）;
clock.closePath（）;
4.3.3雪花飘落
这个特效简单来说就是让许多个小白球从上面落下来，小白球在上面的位置事随机的。
在下落过程中可以跟随鼠标的方向飘动，这里就用到了鼠标跟随。
这个效果使用JavaScript实现的，看似简单的一个效果，其实本来就不难。
下面的三行代码就搞定。
snowStorm.snowColor="#ffffff";//雪花的颜色
snowStorm.flakesMaxActive=100;//雪花的数量
snowStorm.excludeMobile=false;//ture让iPhone等支持js的手机也能看到雪花
4.4JavaScript特效
4.4.1轮播图
所谓轮播图就是在一个模块或者说窗口，可以自动更换图片。
此项目中的轮播图设置为自动切换，时间间隔为三秒,每三秒切换一张图片。
接受当前显示图片的数据，返回一个值，然后通过定时切换到下一张图片。
显示完成后，让当前显示的图片加一。
代码下。
functiontest（）{
alert（"测试"）;
}
varnowshow=1;//当前显示图片
varsid;//声明sid用来接收setTimeOut返回值
functionshowImg（index）{
//alert（index）;
if（Number（index））{
clearTimeout（sid）;//清除定时调度
nowshow=index;
}
for（vari=1;i<3;i++）{
if（i==nowshow）{
document.getElementById（"img"+nowshow）.style.display="block";
}else{
document.getElementById（"img"+i）.style.display="none";
}
}
//显示完成后，让当前显示的图片序号+1
if（nowshow>=2）{
nowshow=1;
}else{
nowshow++;
}
setTimeout（"showImg（）",4000）;//setTimeout（）方法用于在指定的毫秒数后调用函数或计算表达式,这里无参调用showImg（）
}
4.4.2导航
导航就是网页大目录，当把鼠标放上去的话会出现上、下边框。
点击也是可以跳转的。
比如说这个导航就简单明了的说出了其他的大纲信息，起到一种引领作用。
效果如图4-4
图4-4导航
4.4.3内容随滚动条缓慢弹出
简单说一下，就是往下滑动滚动条，下面的内容（文字内容或图片内容）会很缓慢的弹出来，给人一种循序递进的感觉，鼠标往上滑动，效果是一样的。
主要代码如下。
$（function（）{
$（"body"）.flowUp（"spanp",{transalteY:
350,duration:
1}）;
}）;
4.4.4图片覆盖阴影
当把鼠标放在图上时，会从鼠标右边缓慢弹出谈谈的阴影，一直到把图片完全覆盖，然后在弹出相应的文字介绍，鼠标拿开时，文字先消失，阴影在缓慢从左边缓慢消失。
4.4.5内容缓慢移出
这个效果跟上面的缓慢弹出随人很像但还是不同之处的，上面的缓慢弹出是当滚动条到一定的位置要显示的内容很慢但是一下就弹出来了，而这个移出文字就是文字内容一行一行的出现，当然也是随着滚动条的位置。
4.4.6锚点下文
当户点击图4-5、4-6这样的类似于按钮的地方时，整个主页面就会自动的向下移动设定好的数值，在缓慢的移动
升级会员 