学院

计算机学院

专业

网络工程技术

姓名

班级

21级网络工程本1班

学号

题目名称

基于HTML5的“购物商城”的设计与实现

选题来源（在对应条目打“√”）

1.学生实践自拟 □    2.学院（导师）推荐 □

3.校企合作 □        4.其他  ☑

选题形式（在对应条目打“√”）

1. 毕业设计 ☑    2.毕业论文 □    3.调研报告 □

4.作品展示 □     5.案例分析 □

研究内容及意义

（三）研究背景：

传统购物方式大部分是出门到达实体店进行购物，它们在时间和空间上存在很大的局限性。相较于传统购物方式，由于互联网技术的飞速发展，如今的网络、通信和信息技术获得了突破性进展，网上购物商城因为打破了时间与空间存在的局限性，使得用户购物更加便捷和高效，所以在全球范围内爆炸性增长并迅速普及。购物商城是一个新的商业模式，它将商家与供应商更紧密地联系起来，更快地满足客户需求，也可以让商家在全球范围内选择最佳供应商，在全球市场上销售产品。

（四）研究内容：

根据实际的调查和文献结果发现影响人们使用上网购物的因素有以下三点:

第一，用户们的习惯会直接对持续网络购物意愿产生影响，流体验直接对持续网络购物意愿产生影响，并通过影响满意度间接地对持续网络购物意愿产生影响，所以根据用户习惯加入AI推荐功能能较大提升用户的购买意愿，并使用CDN对网站进行优化，它可以加速网站内容的传输和响应速读，提升用户的流体验。

第二，网络自我效能感是指个体对自己使用网络来完成某项网络任务的能力的判断，用户网购的行为就是在做判断。根据前人的研究,网络购物自我效能直接对持续网络购物意愿产生影响，并通过影响感知有用性间接的对持续网络购物意愿产生影响。可以提升网站的商品种类让用户拥有更多的选择，用户能在本网站中购买的任何想要的商品。最后达到延长用户持续网络购物时间的目的。

第三，满意度是持续网络购物意愿的第一影响因子。在色彩方面，根据《用户在浏览页面时，对页面色彩的满意程度》的调查中得出：用户更喜欢暖色调为主的页面，所以本网站主要使用暖色调的配色搭配在浏览，个人管理，支付，购物车等页面以提升客户的满意度。

（五）研究技术：

3.1系统架构设计

(1) 前端设计：使用HTML5、CSS3和JavaScript等技术，设计美观、易用的用户界面。页面布局包括主页、商品列表页、商品详情页、购物车等，同时考虑响应式设计，以适应不同屏幕尺寸的设备。

(2) 后端开发：采用合适的后台开发技术，实现商城后台逻辑，包括用户注册、商品管理、订单处理等功能。

3.2核心功能设计与实现

(1) 用户管理：为用户提供用户注册、登录、个人信息管理、浏览商品、下订单、支付等基本功能等功能，同时保护用户隐私和提供个性化服务，对用户进行普通和VIP等级的分类，分类标准为用户在购物网站进行的购物次数和购买额度，VIP用户享有商品价格优惠服务。

(2) 商家管理：实现商家后台管理功能和售后服务功能，包括商品分类管理、商品信息管理、订单处理等功能，构建合理的商品分类体系，提高商品搜索和推荐的准确性。

(3) 订单管理：实现订单生成、支付、物流跟踪等功能，确保交易的安全性和便捷性。

(4) 支付与结算：整合支付接口，实现用户购物车的结算功能，并确保支付信息的安全传输。

3.3用户体验优化

(1)搜索功能：根据ai智能推荐，结合用户的搜索习惯，为用户提供高效的商品搜索功能，帮助用户快速找到所需商品。

(2)商品分类：按照品牌、种类、尺码、风格等标准进行分类，合理的商品分类体系有助于用户快速浏览和筛选商品。

(3)用户评价：允许用户对购买过的商品进行评价和打分，为其他用户提供购物参考。

3.4安全与隐私保护

(1)数据加密：使用需要设置密码的方式对用户个人信息和交易数据进行加密处理，确保数据安全。

(2)支付安全：网站可以联合可信的或者官方的第三方支付平台，确保支付信息的安全传输。

3.5系统测试与优化

(1)单元测试：对各个功能模块进行单元测试，确保功能正确无误。

(2)集成测试：进行系统集成测试，确保各模块之间能够协同工作。

(3)性能测试：对系统进行性能测试，评估系统的响应速度和稳定性。

(4)用户反馈：收集用户反馈意见，对系统进行持续优化和改进。

研究意义：

现代购物商城是基于互联网、以交易双方为主体、以银行电子支付和结算为手段、以客户数据为依托的购物平台，它一方面可以利用互联网的广泛覆盖率，扩大商品销售渠道，增加商家的销售额，促进商业交易；同时，在平台上与用户交流能更好地满足客户要求，最大程度地为用户提供更加丰富和友好的交互体验。另一方面，它可以为用户提供一种便捷、高效、安全的购物方式，满足人们对购物的基本需求；同时还可以提供更多的商品信息和评价，方便用户进行购物决策，提高购物的满意度。

因此，开发基于HTML5的“购物商城”网站具有重要的现实意义和商业价值。

研究方法与路径

（一）研究方法

1.1文献调研：

查阅HTML5、Web前端开发、电子商务、用户体验设计等相关领域的文献，了解最新的技术动态和设计理念。根据《移动电子商务发展趋势探讨》文献中提出的：在未来移动电子商务的发展中，传统电子商务提供商若想走得更远，只有利用自己的运营经验、渠道及物流实力。

1.2案例分析：

选择一些成功的购物商城案例进行深入分析，例如：

（1）华为商城：整体布局合理，用户体验良好，展示了HTML5技术在电商领域的应用实力。

（2）小米商城：具有简洁明了的界面设计，功能布局合理，交互方式流畅，为用户提供了优质的购物体验。

（3）淘宝：作为电商行业的巨头，淘宝的HTML5购物商城在商品搜索、推荐、结算等方面表现出色，是行业内的标杆案例。

（4）京东：京东的HTML5购物商城在商品分类管理、信息管理、订单管理等方面具有高效性和稳定性，为用户提供了便捷的购物体验。

研究这些商城的界面设计、功能布局、交互方式等，找出其成功的关键因素。

1.3用户需求分析：

通过问卷调查、访谈、查找资料和数据等方式收集目标用户的信息，了解他们的购物习惯、需求偏好等。

对用户需求进行整理和分析，为商城设计提供有针对性的指导。

1.4技术可行性分析：

(1)以HTML5技术为主，编写网站前端和后端页面的代码，然后与JavaScript结合实现用户交互功能，以及其他相关技术在实现购物商城中的可行性和优势。

(2)技术实现的难点在于以下方面：

用户体验优化：商城系统需要提供良好的用户体验，包括页面加载速度、交互设计、购物流程等方面，需通过前端优化、异步加载、Ajax等技术手段来提升用户体验。

多平台适配：随着移动设备的普及，商城系统需要在各种屏幕尺寸和操作系统上提供一致的用户体验，需要进行良好的移动端适配。

支付系统集成：支付系统的集成也是一大难点，需考虑多种支付方式和安全性，选择合适的支付网关，并优化支付流程。

综上所述，基于HTML5的“购物商城”的设计与实现涉及多个技术难点，需要开发人员具备丰富的经验和技能，以确保系统的稳定性、安全性和用户体验。

（二）调查路径

2.1明确项目目标和需求：

确定购物商城的定位、目标用户群体、主要功能等。

制定详细的项目计划和时间表。

2.2进行市场调研：

线下走访各个服装商城，记录女装商城的分类和细节。然后登录现在已上线的购物商城体验用户采购步骤，记录采购顺序，完成市场调研和技术研究工作。最后上知网查找课题的相关文献，结合市场调研解结果进行需求分析和细化，完成任务书撰写。

2.3系统架构设计：

设计商城的前端界面和后端逻辑架构。前端技术：HTML5作为前端技术的核心，以其丰富的API和跨平台兼容性，为购物商城系统提供了强大的支持。同时，结合CSS3进行页面样式设计，使用JavaScript实现用户交互功能，共同构建出美观且实用的前端界面。

后端技术：为了处理复杂的业务逻辑和数据存储需求，可以选择Node.js作为后端技术栈，并结合Koa等轻量级框架构建服务器端架构。Node.js的异步I/O和事件驱动特性，能够确保系统的高性能和快速响应。

数据库技术：为了存储和管理商城中的商品信息、用户数据等，可以采用MySQL等关系型数据库。MySQL具有高效、稳定、易于维护等优点，能够满足商城系统的数据存储需求。

2.4核心功能开发：

对于用户方面要能实现用户注册、登录、个人信息管理等功能。

商家方面则是开发商品分类管理、商品信息管理、订单管理等功能模块。

最后集成支付接口，实现用户购物车的结算功能。

（1）用户体验优化：

优化商城的界面设计和交互方式，提高用户满意度。

实现高效的商品搜索和推荐功能，提升用户体验。

（2）安全与隐私保护：

加强商城的安全防护措施，如数据加密、防火墙等。

确保用户个人信息和交易数据的安全传输和存储。

（3）系统测试与评估：

对商城进行单元测试、集成测试、性能测试等，确保系统的稳定性和可靠性。

收集用户反馈意见，对商城进行持续优化和改进。

主要参考文献

[1] 段跃润. 基于HTML5的移动电商系统前端的设计与实现[D].南京大学,2018.

[2] 矫静怡. 基于HTML5的多平台采购系统的设计与实现[D].大连理工大学,2015.

[3] 吕孝双. 购物网站个性化推荐系统对消费者购买意愿的影响研究[D].浙江财经大

学,2015.

[4] 张犀. 消费者持续网络购物意愿影响因素研究[D].武汉科技大学,2019.

[5] 王梅. 基于社会网络分析的社会化分享购物网站信息传播研究[D].内蒙古大学,20

14.

[6] 李庆艳,金铎,张文安,等.移动电子商务发展趋势探讨[J].电信科学,2011,27(06):6-

13.

[7] 李兰君. 城市女性居民网络购物行为研究[D].福建师范大学,2015.

[8] 李双双,陈毅文,李江予.消费者网上购物决策模型分析[J].心理科学进展,2006,(02)

:294-299.

[9] 秦学京.信息化采购是现代企业采购的必然方向[J].中国市场,2007,(28):114-115.

[10] 张华泉.生鲜农产品电子商务消费者满意度影响因素研究[D].华南农业大学,201

9.DOI:10.27152/d.cnki.ghanu.2019.001032.

指导教师意见

同意

指导教师签名：                          年     月     日

教研室意见

教研室主任签名：                          年     月     日

学院

意见

院长签名：                          年     月     日