基于HTML(品优购)电商项目项目的设计与实现（html前端源码和论文设计）

XXXX职业学院

毕 业 论 文

题 目： 基于HTML品优购项目的设计与实现
所属系部： 信息工程学院
专业班级：
学生姓名：
指导教师：

2020 年 11 月 29 日
摘 要
品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。
品优购网上商城主要分为网站前台、运营商后台、商家管理后台三个子系统
网站前台：主要包括网站首页、商家首页、商品详细页、搜索页、会员中心、订单与支付相关页面、秒杀频道等
运营商后台：是运营商的运营人员的管理后台。 主要包括商家审核、品牌管理、规格管理、模板管理、商品分类管理、商品审核、广告类型管理、广告管理、订单查询、商家结算等。
商家管理后台：入驻的商家进行管理的后台，主要功能是对商品的管理以及订单查询统计、资金结算等功能。

关键词：HTML5；CSS3；iconfont

目 录
摘要·······································································Ⅰ
1 绪论····································································3
1.1 项目开发背景·····················································3
1.2 开发的研究目的和意义············································4
1.2.1 开发的研究目的············································4
1.2.2 开发的研究意义············································4
2 项目介绍·······························································5
2.1 web前端开发······················································1
2.1.1 web前端开发简介···········································1
2.1.2 项目介绍····················································1
2.1.3 项目特点····················································1
3 项目开始································································2
3.1 页面分析···························································2
3.1.1 公共样式分析···············································2
3.1.2 首页分析····················································3
3.2 字体引入···························································2
3.2.1 iconfont字体下载··········································2
3.3 页面制作···························································2
3.3.1 首页·························································2
3.3.2 列表页······················································3
3.3.3 商品详情页··················································3
3.3.4 购物车页面··················································3
结 论··································································3
参考文献··································································4

1 绪论
1.1 项目开发背景
随着一、二线城市消费能力日趋饱和，三到六线城市，乡、县及农村市场成为电商争夺的新焦点。目前中国乡村人口超过六亿，过去传统商业对这些地区的渗透还不足，消费潜力还没有被充分挖掘，随着互联网普及率的提高，特别是移动互联网的普及，这些地区的消费潜力将被逐渐释放。农村地区除了有旺盛的购物需求外，还有大量的外销需求，在这方面，互联网的信息传递优势得以充分体现，基于为农村生产者和消费者服务的农村电商成为新的增长点，因为地域、收入、消费习惯、生产商品的不同，农村市场表现出和城市市场截然不同的需求，这方面，电商企业还需要积极适应，为农村消费者提供适应当地具体情况的服务。
商B2B平台在优化整个产业链的上下游、建立以区域特色为主的电商产业带中发挥着重要的作用。首先，电商B2B平台能够帮助产业带的客户减少购买程序，优化采购渠道，降低采购直接成本，其次，平台能够运用本身优势资源，为卖方做好网络营销，拓宽销路。同时，由于电商产业带一般都与当地政府展开多方合作，电商产业带的模式对于孵化具有地方特色的电子商务生态圈也是积极的探索。，在国家政策的引导之下，全国各地都在围绕重点行业、重点区域，深化电子商务的拓展和应用，更好的发挥区域电商的积聚和辐射效应。各区域未来将依托区域产业集群优势，加强区域内产业资源、企业资源的集聚，同时带动电商企业和电商相关配套企业入住，以区域特色为主的电商产业带的发展将带动周边地区发展特色电子商务，提升区域整体的电子商务水平，更好的促进区域经济的发展。
近年来，移动互联网保持高速发展态势，并加速向经济社会各领域渗透，带动电子商务由传统PC端加速向移动端迁移，移动电子商务正成为当前电子商务发展的新力量，同时也开启了电子商务发展的新空间。相较于PC端，移动购物受时间、空间限制更小，与线下消费场景的交互方式更具情景化，未来移动端市场潜力无限，移动互联网加速渗透带动各领域O2O应用竞相发展。
跨境电商预计将为在线总消费量贡献更高的份额，预计将实现30%的复合年增长率，有望在2020年达到1万亿总量。其中，食品和母婴用品将引领增长，到2020年的复合增长率将超过30%。鉴于中国特殊的消费环境，使得那些强调安全性的品类，如食品和母婴用品，以及国内外价差较大的品类，如服装和消费电子的商品成为在线跨境购买的主力。但跨境电商的崛起也是双刃剑，随着中国的网购人群越来越懂得货比三家，如何制定全球的价格体系对于国际品牌将是一个挑战。
1.2 论文的研究目的和意义
1.2.1 开发的研究目的
节约购物时间、免除购物疲劳。在网络上查找你想要的东西，在商城中稍加搜索就能直接找到，不用到大街去东奔西走，大包邻小包，累得鞋子都不想穿的回来。从累断双腿的逛街发展到鼠标操控的网络购物，免除了舟车劳顿的痛苦，而且只要你有确定的购买目标，真是省时又省力啊。
节省购物成本。由于网上店铺简化了由生产商至零售商的中间环节，节省了实体销售场所需要支付的租金、人工成本、工商水电费、库存费及其他杂费，因而使得销售商品的附加费用很少甚至没有，价位一般都不同程度地低于市场零售价。
尤其像淘宝这样的购物网站，目前个人在它的网站上开店是免费的（商城的大卖家自愿选择缴纳增值服务费），而易趣要收取一定的开店费用，这样在网络上开店的人买的物品就自然的相对于现实购物要便宜的多了。
相对安全。总体上网上购物的支付系统还是很安全的，现在的网上银行比以前要复杂了点，程序的增加就是安全力的增加，更何况一大堆如支付宝的第三方交易平台，大大保证了你付出的钱绝对有迹可循，即使你购买的产品不满意要退货，你的钱也照样能够回到我们的腰包里。
商品种类齐全。有时候想买件东西，在各大商城里找了半天，几乎快要累死了也没有找到，或者需要东奔西跑，挑挑拣拣地比较，可是网上商城就用一个页面直观清晰地描述出这种产品的基本参数和数据。
让你清晰地了解它的特性，并且网上商城里包括了几乎所有你能想到的东西，甚至零售业也在网上异军突起迅猛地发展，兴许你本无意的却找到了一件自己中意很久的东西。
商品比较更直观，免得发生争执 有道是“货比三家，择优选购”，我们在网上购物可以同时打开多个页面，浏览多个店铺中同一件商品的价格、功能介绍及配送方式等进行多方面比较。不容易导致双方不合而发生争执。
便捷赠送方式，付款方便 通过电子商务网站提供的一站式服务直接送到对方手上，十分方便，付款，直接转帐，一步到位。
订单不受时间的限制。你想什么时候买就什么时候买，总的来说网上购物的优点还是很多的，比较懒惰或者说不喜欢现实中讨价还价的朋友可以试试网上购物哦！上面的东西还是很便宜的，而且大一点的BTC网购商城上都是正品行货。
第一时间购买，服务范围更广 网络的速度之快，商品只要在他们的网店刊登代售货品，几千里外的人打开网络马上就可以看到，效率快，地域差距少，可以买到很远距离的物品，网友不论身在何处，都可以购买到来自各地的商品。
商品查找更容易。在现实的商场中大都将不同类别的商品分置于不同楼层销售，若商场面积较大，逛完一圈往往得半天时间。而我们在网上店铺中可以直接搜索所需的商品名称，也可以根据导航栏中的商品分类选购商品，节省了寻找时间。
购物环境很“安静” 一边听着音乐哼着小曲，完全不用理会别人的感受，而且没有别人打扰，想怎么看怎么挑怎么买都可以。
1.2.2 开发的研究意义
中国电子商务百位首席执行官调查报告中将网络购物定义为“是指消费者通过购物网站获取商品信息,在发生购买意向后通过电子订购单发出购物请求,然后填写详细地址与联系方式,通过货到付款、第三方支付等形式支付当前消费额,之后厂商以快递形式发货至消费者的交易过程。”
简单而言，网络购物就是使用网络在购物交易平台上购买商品,是现下最流行的消费方式。买家在购物平台上直接搜索自己想要购买的商品，选中商品后并提交购物订单，填上自己的相关信息，如姓名、电话、收货地址等。经营者就会通过快递公司运输送货。消费者采用网银付款方式。
目前，我国网络购物发展迅速，2015年淘宝发行的天猫双十一活动，仅仅一天的时间交易额达到了912.17亿元，参与交易国家和地区达到232个。我们可以很清楚的看到网络购物的快速发展,它以自身的优越特殊性,在市场站稳脚步,并呈上升的状态。
网络购物具有虚拟性。购买商品时，买家不能直接光顾卖家的店铺实体店，不能通过当面的交流来询问商品细节，不能亲眼看到所要购买的物品的真实情况。要选购所需产品时消费者只能向店家询问商品的详细情况。但在网络交易中，从咨询经营者问题，到提交订单，再到最后的收到商品，这段过程中消费者与经营者不会有任何的直接接触，消费者只是通过网络交易平台发行的聊天软件进行文字交流，消费者想要详细认识产品也只能根据网店商家传的网页宣传、信誉评价等内容来了解。这些与传统交易方式有着显著不同。
网络购物价格低廉。网络店铺经营与传统店铺经营有着完全不同的经营形式,虚拟化、技术性是网络店铺独有的特殊性。网络开店成本很低，与传统店铺不同，网络店铺不用租用店铺，不需要缴纳电费。店铺经营者只需要在批发地就可以直接发货，把商品送到消费者手中，节省了运输费，经手的人少了，商品价格自然就低了。
网络购物不受时间拘束。网络店铺可以提供24小时服务，只要选中要买的商品，任何时间都可以下单购买。网络店铺也不受空间的限制，只要能上网，提交订单付款后就由快递公司送货上门，消费者在家就可以买到自己需要的商品。
2 项目介绍
2.1 web前端开发
2.1.1 web前端开发简介
2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括百度、腾讯、淘宝、新浪、搜狐、网易等在内的各种规模的IT企业都对自己的网站进行了重构。
前端开发的入门门槛其实相对较低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。
也正因为如此，前端开发领域有很多自学的同行，但是后面的学习曲线越来越陡峭，每前进一步都很难。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如HTML5、CSS3、JavaScript、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。
2.1.2 项目介绍
品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。
品优购网上商城主要分为网站前台、运营商后台、商家管理后台三个子系统
网站前台：主要包括网站首页、商家首页、商品详细页、搜索页、会员中心、订单与支付相关页面、秒杀频道等
运营商后台：是运营商的运营人员的管理后台。 主要包括商家审核、品牌管理、规格管理、模板管理、商品分类管理、商品审核、广告类型管理、广告管理、订单查询、商家结算等。
商家管理后台：入驻的商家进行管理的后台，主要功能是对商品的管理以及订单查询统计、资金结算等功能。
2.1.3 项目特点
一、传统企业项目特点：用户量固定、数据量有限、并发量不高。比如OA办公软件还有一些内部人员使用的软件这些都可认为是传统企业项目。
二、互联网企业项目特点：用户不限、用户角色不限。比如，电商便是互联网行业中的一个体现。
互联网：互联网又称“国际网络”，这些网络按照通用的协议相互连接、资源共享，就好比一张蜘蛛网将彼此相互关联只不过这张网是个圆形。而之后所提出的“互联网+”的概念便是在此基础上不断的加入这张网络。比如：互联网金融、医疗等。
电商：电商的这种模式只是互联网中的一种，但电商的概念却不仅如此。电商又称“互联网电子商务”，所以凡是经由网络构成销售和传播的我都将其称之为电商。
根据互联网项目的特点，所以互联网项目主要需要解决的问题是：高并发、大数据量、高可用。
三、电商行业的技术特点：技术新、范围广、分布式、高并发、集群、负载均衡、高可用、海量数据、业务复杂、系统安全等。
3 项目开始
3.1 页面分析
3.1.1 公共样式分析
首先我们需要一个初始化的css文件。再由页面的顶部导航栏，头部和底部为公共内容，我们需要把顶部导航栏，头部和底部的css写成公共的css文件，方便后期的引入。然后单独写中间内容部分。
公共样式头部采用了顶部导航栏nav，使用列表浮动的效果实现。

底部也是使用了列表和浮动完成，其中帮助部门，采用了自定义列表。

整体的公共样式图，如下。

3.1.2 首页分析
除去顶部导航栏，头部和底部内容为公共样式。则其他内容为当前页面的独有内容。

使用浮动效果，使商品分类，静态轮播图和商品快报三个板块进行布局。商品分类为无序列表，更改背景颜色，字体颜色，和鼠标悬停状态。
内容导航栏为无序列表浮动，给li设置宽度，行高，并居中，和鼠标悬停状态。中间部分为轮播图，图片顶满。
右侧分为两块，第一行内容为标题，右侧更多设为浮动，设行高。快报内容仍然是无序列表，使用css3让溢出内容隐藏并显示…。下面为浮动的列表项，里面内容为字体图标，设置大小的。
下面的电器列表，仍然是采用列表项和浮动完成。
3.2 字体引入
3.2.1 iconfont字体下载
网址：https://www.iconfont.cn/。

在主页中间部分的搜索框输入关键字，进行搜索自己想要的图标。

然后把鼠标悬停在你想要的图标上，点击添加入库，可选择多个，一起加库。

加入的图标会在头部的购物车图标上显示你加入图标库的数量。选好之后点击购物车。

会出现上面有你选入的图标列表，进行浏览选择（截图忽略）。在下面会有三个选择项，这里我们选择添加至项目。

选择你的项目，然后点击确定。

跳转页面至你的你的项目图标，会显示你这个项目里你所添加的所有图标。

在上面信息一览，有查看在线链接。这里为了性能问题，我们进行下载至本地，不用再来回网络请求。随后把下载好的文件，放到你的项目根目录即可。
在这里fonts代表你的图标文件夹
在你的index.html文件里，在head标签里用link标签引入图标文件里面的两个css文件，随后在图标文件夹里的demo—index.html运行这个页面，会看到自己下载的图标信息。
在这里我们可以在代码里面这样引入，复制图标下面的代码

我们使用i标签，或者其他标签。声明一个类，用来建立和引入的css文件进行连接。然后把图标的代码复制到标签里。
运行效果显示。

3.3 页面制作
3.3.1 首页
引入公共样式效果图如下。

接着为左侧固定导航栏，使用列表标签，浮动效果。

中间和右边的内容装在一个大盒子里，分别为静态轮播图的品优购快报，右边功能仍然使用列表标签和浮动完成。

整体效果显示。

接下来为今日推荐，实现的效果等同。

家用电器也是采用浮动效果，给不同的盒子设置不同的宽高属性，效果如下。

首页整体页面完成。

3.3.2 列表页
同样引入公共样式，使用定位把秒杀定位到头部固定位置，如图。

接着为一个背景图，把手机图片和文字也定位到固定位置。

使用列表标签，外加浮动实现效果，鼠标悬停添加阴影。

下面为静态分页器，采用a标签制作。

列表页完成，效果如下。

3.3.3 商品详情页
引入公共样式，修改nav导航栏为商品导航，采用a标签制作。

下面小导航采用列表制作，左边为无序，右边为有序。

商品图片详情，大图片套在盒子里，小图片使用浮动，和iconfont，下面文本使用margin和浮动。

商品信息采用了p标签，span标签，div。以及下面的商品规格则使用表格得制作方法，外加鼠标悬停效果。

商品详情页完成，如图。

3.3.4 购物车页面
同样引入公共样式，删除nav导航栏，如图。

中间购物信息的导航栏采用列表浮动，下面为表格。

购物车页面完成，如图。

结论
整体页面采用为原生html和css开发。先通过分析页面，分析出页面使用了版心效果，iconfont字体和多种公共样式的使用。采用公共样式开发，使我们提高了开发的效率；iconfont字体和版心的设计的使用更是进一步提高的效果和页面的美观。除去公共样式，大多内容都采用了浮动和定位效果的多次使用，使页面开发更简单快捷。

参 考 文 献
[1] 京东商城.刘强东.江苏: 京东集团董事局主席兼首席执行官,1998.
[2]刘国钧，陈绍业，王凤翥. 图书馆目录[M]. 北京：高等教育出版社，1957.15-18.
[3]辛希孟. 信息技术和信息服务国际研讨会论文集：A集[C]. 北京：中国社会科学出版社，1994.
[4]万锦坤. 中国大学学报论文文摘（1983-1993）.英文版[DB/CD]. 北京：中国大百科全书出版社，1996

模板及论文下载地址：点击下载