本科生毕业论文（设计） 1
基于HTML5 CSS3和JQuery的VR商城网站研究与实现 1
1 绪论 7
1.1 本课题研究的背景与目的 7
1.2 国内外前端VR商城建设的状况和发展 7
1.3 本章总结 7
2 前端开发及相关技术 7
2.1 HTML5前端开发的环境 7
2.2 HTML5前端开发工具 7
2.3 HTML5 的前端开发相关技术 7
jquery是什么软件2.3.1  JavaScript简介 7
2.3.2  HTML5简介 7
2.3.3  CSS3简介 7
2.3.4  JQuery简介 7
3 ECSHOP模板 7
4 VR商城的总体框架 7
5 VR商城分块研究和设计 7
5.1 VR产品页面 7
5.2 VR社区页面 7
5.3 新闻页面 7
5.4 拍卖页面 8
5.5 积分页面 8
6 主要功能的实现 8
6.1 登录 注册 8
6.2 购买 支付 8
6.3 评论和回复 8
6.4 后台管理 8
7 网站的测试和优化 8
8 结语 8
参考文献 8
致  谢 8
1 绪  论 8
1 绪  论
随着HTML5的迅速发展，HTML5在HTML4的基础上增加了很多不一样的特性，表单特性，音视频特性，画布特性，地理定位，本地存储，多行程等特性，使前端开发有了质的飞跃，前端开发已经逐渐越来越受欢迎，近年来VR的发展也十分迅速，VR产品可以让人进入虚拟现实，具有立体感，3D效果，交互响应，达到人与VR互动的功能，所以VR商城将很受用户需求，所以本课题也采用前端技术进行VR商城的开发。本次商城开发分为前后端，前端界面的技术主要采用html5,css3,JavaScript和jquery等进行开发，使页面的交互以及动态效果更加美观，而后端主要用ecshop模板进行二次开发，在保留ecchop已有的后端功能外，再利用php,mysql等后端技术对部分页面进行增加新的功能，最后将前后端整合成VR商城，该VR商城不仅仅局限于购买产品上，还增加一些新的扩展服务，并且利用css框架bootstrap将部分页面进行响应式，从而实现手机和PC端的结合应用多设备展示。
本课题主要是基于html5,css3,jquery等前端技术进行对VR商城的开发，采用由总及分的设计方式进行开发，本课题综合性、可普及性较强，具有一定实际意义。
1.1本课题研究的背景与目的
互联网现在已经涉及到我们现代社会生活的每一个方面，对网站的要求更加多，不仅仅是内容呈现就行，还需要增加好看的样式，具体交互的功能，便于阅读和维护的代码，良好的用户体验，所以用户和开发者对前端的技术要求也大大增加，因此各种前端技术也应运而生，HTML5，CSS3就是其中的代表。
HTML5近几年的发展推广，前端技术已经逐渐成为互联网的大热，而前端技术也涉及到各个领域，如PC端，移动端，人工智能，近年来VR的发展也十分迅速，VR产品可以让人进入虚拟现实，具有立体感，3D效果，交互响应，达到人与VR互动的功能，所以VR商城将很受用户需求，所以本课题也采用前端技术进行VR商城的开发。
1.2国内外
前端VR商城网站建设的状况与发展
    1 .在线上电商平台的销售数据
    如今网上购物渠道有很多，有淘宝，京东，天猫，唯品会，还有一部分自发的销售平台，所以VR产品的线上出售方向主要来源于这些。了解这些销售数据对我们的数据参考有大大的帮助。
我们参考天猫商城的VR销量统计，从2015年1月1日到2016年9月7日这段时间内，VR产品出售量在天猫商城为126.68w，cardboard并不算在这个数据统计内，主要以低端的VR产品为主。
2.web前端技术的发展
web前端发展速度及其迅速，其速度令人瞠目结舌，每几年就便是一次变革，所以前端的发展将是涉及到各个领域，除了PC端，移动设备，游戏端甚至是人工智能。
09年，基础类库完善，需求突破
10年，看齐标准，关注web性能
11年，HTML5抗大旗,Flash堪忧
12年，响应式开发，工程化推进
13年，爆发式增长，百花齐发
14年，移动端的崛起，HTNL6和ES6落地
15年，观念的转变，步入前端工业化的生产
web前端技术的不断发展和完善，基于此现况，所以本课题采用前端技术进行开发。
  1.3本章总结
  本章阐述了用前端技术开发VR商城的研究背景和意义，介绍了VR产品以及web前端技术的现状，说明了用前端技术开发VR商城的重要性。
  2前端开发及相关技术
2.1 HTML5前端开发的环境
HTML是超文本标记语言，其中html5是html4的基础上增加API和新特性，是万维网网页开发的核心语言，符合W3C标准的规范，语言更加语义化，本次项目使用到的开发环境是XAMPP。
XAMPP（Apache+MySQL+PHP+PERL）是一个建站的集成软件包，这个软件主要集合了Apache 服务器和MySQL数据库，该软件可以在Windows、Linux、Solaris、Mac OS X等操作系统下运行使用，同时也支持多国语言：英文、简体中文、意大利语、法文、德文等。这就是使用该软件的优点，功能强大，并且便于使用。相比自己搭建和安装Apache服务器和Mysql数据库是多么麻烦的事，而且容易出现问题和错误。
2.2 HTML5前端开发的工具
1.Webstorm
Webstorm是一款javascript开发工具，开发公司是jetbrains。这个开发工具适合多钟编辑语言，比如java，c++,c语言,php以及最齐全的功能是对web前端开发的编辑，被誉为“web前端开发神器”。并且该工具还提供了各种插件，方便开发者的使用，排版合理，彩分辨丰富，是比较好的可视化开发工具。
2.Photoshop
Adobe Photoshop是一种图像处理软件，是用Adobe公司开发的一款功能强大的软件。
Photoshop是广受大众欢迎，其中有个人对图片的美化，也有企业对于图片的要求和展示，需要对图片进行美化，加工，比如对图片增加背景，需要将几张图片合成一张，加一些炫酷的效果等等，都需
要使用到ps软件，其中ps软件提供了许多工具，比如魔棒工具，多边形工具，字体工具，橡皮擦工具，套索工具等等。
3.IE tester
IETester是WebBrowser的一个控件，功能是对各种个种版本的IE进行界面的美观版本从IE6到IE11。
2.3 HTML5前端开发相关技术
2.3.1 javascript简介
Javascript是一种基于原型的的脚本语言，具有弱类型，动态类型的特点，其中包含函数，方法，属性，对象等语法，包含number,boolean,null,undefine,object等数据类型，主要应用在网页的动态效果，
实现交互作用，以及一些表单验证。目前javascript的框架有很多，比如jquery，node,js,react.js等js框架，其中jquery是封装了js的函数和对象，简化js的操作。
2.3.2 HTML5简介
HTML是超文本标记语言，html5是万维网第5次标准的改版，html5是html4的基础上增加API和新特性，是万维网网页开发的核心语言，符合W3C标准的规范，语言更加语义化。
2.3.3 CSS3简介
css3是基于css2的基础上进一步改版，增加了很多新的特性，比如阴影，圆角，放大，旋转，移动的效果，增加了transition属性，来控制时间，控制动画的变化时间。但是CSS3有些低版的浏览器并不可以兼容，所以需要改进兼容性，最低要求要适应IE,Chrome,firefox,Opera等主流浏览器。
2.3.4 JQuery简介
jQuery是js封装的一个类库，其中封装了许多js的函数和对象，为了简化js的工作，jQuery的宗旨是写得更少，做得更多，JQuery封装了一个工厂函数，放进对应元素的选择器，便可以定位元素。jquery里面也封装了许多DOM的API，比如append,insert,remove,replace，还有html(),text()方法。jquery还封装了ajax的异步请求，正则表达式的表单验证。是一个功能非常强大，使用方便的js类库。
2.4 本章小结
    本章介绍了开发VR商城前端需要用到的开发工具和运行环境，同时讲叙了相关的前端开发语言，比如javascript,jquery,html5等，以便后面的开发对这些技术有深刻的理解。
    3 ECSHOP模板
    1.ECSHOP简介
    ECShop是一款是基于PHP语言以及MYSQL框架整合的网上商店系统，是适合于企业和个人开发的使用。其中，包含了支付，购买，登录，注册等后端功能，该系统是开源免费的和最新版本是3.6.0。
    2.ECSHOP产品
    ECShop的开发商是上海商派网络科技有限公司（ShopEx），ECShop是一款是基于PHP语言以及MYSQL框架整合的网上商店系统，是适合于企业和个人开发的使用。其中，包含了支付，购买，登录，注册等后端功能，该系统是开源免费的和最新版本是3.6.0。
ECShop花费大量的资金和人力物力，不断完善该框架，使得该框架更加具备人性化，更加贴切用户的使用，并且功能越发的齐全。ECShop模板还提供了后台管理这个平台
，可以上传商品，管理商品，审核评论，优化MYsql，会员管理，订单管理等后台功能。
ECShop产品具有稳定性，执行速度快，安全性高和具备二次开发的功能，开发者可以对ECShop进行二次开发，以便于更好地适合和吻合公司的需要，增加功能和添加页面，修改页面，更改页面，让页面更加丰富多彩，不会被ECShop这个框架束缚住。
    3.ECSHOP功能
ECSHOP提供了前端和后端的页面整合，而本次课题主要是对前端的研究，对后端也会有所涉及，但不深入，所以，本次ECSHOP的作用是保留其后端功能，比如购买，支付，留言，评论等等。在此基础上再添加一些新的后端功能，以及添加新的前端页面，再将其全部整合。
  4 VR商城的总体框架
  本次VR商城网站的设计方法是由总及分，所以先搭好框架是关键一步，再对VR商城进行分块设计与实现。而要搭好框架需要对ECSHOP模板进行重新的整合，去掉一些不想要的页面以及功能，保留自己想要的页面和功能，然后重新开发新的页面，而重新开发的页面主要利用到HTML5,CSS3,JQUER等前端语言，对其页面添加结构，布局，样式，交互效果，再用PHP和MYSQL等后端语言进行页面部分后端功能的添加，使其成为完整的页面，再将其页面添加在ECSHOP框架上，自己添加的页面有如
下VR眼镜页面，VR游戏页面，社区页面，VR影音页面，拍卖页面，积分商城页面等等，下面将对其详细进行设计与实现。
  5 VR商城分块研究和设计
  本次VR商城网站的设计方法是由总及分，搭好框架后，就需要进行分块开发，基于HTML5 CSS3 JQuery等前端技术对VR产品页面，VR游戏页面，社区页面，VR影音页面，拍卖页面，积分商城页面等等进行研究和设计。
  5.1 VR产品页面
  VR产品页面分为4大部分，第一部分是ecshop框架保留的头栏目，头栏目里面包含了搜索框，注册，登录的入口和LOGO。第二部分是导航条和轮播图，这是比较重要的一部分，其中导航条和轮播图的页面布局和结构是用HTML5 CSS3实现的，而轮播里面的交互以及自动切换，则用JQuery实现的。第三部分是分为几个相同的部分，从上向下排列，而每个部分又放一些产品，每个产品将鼠标放在上面时，则会显示对应的信息内容，鼠标移开时，则隐藏产品信息，这是利用CSS3里面的动画效果，每个产品点击进去后就有详情页，详情页是对该产品的介绍以及购买的方式等等，前端开发里面叫做楼梯，而左边需要有个JQ楼梯插件，点击哪个楼层则跳转到哪个楼层，方便用户浏览信息和资源。最后一部分是尾部，一般包含的内容是公司或开发者的信息，其中有新手上路，购物指南，配送
方式，关于我们，售后服务
，地址，通讯信息等等内容。这就是这个页面的整体结构。
  5.2 VR社区页面
  VR社区页面的主要部分是左边是发表评论，留言的信息分块，而右边则是信息列表，罗列出关于VR的新闻，或者VR游戏排行等等内容。
5.3 VR新闻页面
  VR新闻页面分为4大部分，第一部分是ecshop框架保留的头栏目，头栏目里面包含了搜索框，注册，登录的入口和LOGO。第二部分是导航条和轮播图，这是比较重要的一部分，其中导航条和轮播图的页面布局和结构是用HTML5 CSS3实现的，而轮播里面的交互以及自动切换，则用JQuery实现的。第三部分是分为几个相同的部分，从上向下排列，而每个部分又放一些产品，每个产品将鼠标放在上面时，则会显示对应的信息内容，鼠标移开时，则隐藏产品信息，这是利用CSS3里面的动画效果，每个产品点击进去后就有详情页，详情页是对该产品的介绍以及购买的方式等等，前端开发里面叫做楼梯，而左边需要有个JQ楼梯插件，点击哪个楼层则跳转到哪个楼层，方便用户浏览信息和资源。最后一部分是尾部，一般包含的内容是公司或开发者的信息，其中有新手上路，购物指南，配送方式，关于我们，售后服务，地址，通讯信息等等内容。这就是这个页面的整体结构。
5.4 拍卖页面
    拍卖页面分为4大部分，第一部分是ecshop框架保留的头栏目，头栏目里面包含了搜索框，注册，登录的入口和LOGO。第二部分是导航条和轮播图，这是比较重要的一部分，其中导航条和轮播图的页面布局和结构是用HTML5 CSS3实现的，而轮播里面的交互以及自动切换，则用JQuery实现的。第三部分是分为很多专场，每个专场里面有图片，文字介绍，点击拍卖功能，点击后有拍卖图片的详情页。最后一部分是尾部，一般包含的内容是公司或开发者的信息，其中有新手上路，购物指南，配送方式，关于我们，售后服务，地址，通讯信息等等内容。这就是这个页面的整体结构。
5.5 积分页面
积分页面分为4大部分，第一部分是ecshop框架保留的头栏目，头栏目里面包含了搜索框，注册，登录的入口和LOGO。第二部分是导航条和轮播图，这是比较重要的一部分，其中导航条和轮播图的页面布局和结构是用HTML5 CSS3实现的，而轮播里面的交互以及自动切换，则用JQuery实现的。第三部分是分为很多专场，每个专场里面有图片，文字介绍，点击拍卖功能，点击后有拍卖图片的详情页。最后一部分是尾部，一般包含的内容是公司或开发者的信息，其中有新手上路，购物指南，配送方式，关于我们，售后服务，地址，通讯信息等等内容。这就是这个页面的整体结构。
6 主要功能实现
ECSH

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。