《基于Web的电商系统的设计与实现8700字（论文）》

基于Web的电商系统的设计与实现目录TOC\o"1-2"\h\u10359基于Web的电商系统的设计与实现 121332摘要 1111971引论 2200251.1项目背景 2326571.2研究的目的及意义 234091.3国内外研究现状 3312742电商系统的系统需求分析 5161352.1可行性分析 595102.2用户需求分析 540582.3功能分析 617873开发工具及开发语言介绍 842383.1开发工具 8104613.2开发语言 10314943.2.4less语法 11175974JavaShop电商系统的设计与实现 12129864.1具体功能实现 1292915总结与展望 1915835.1总结 1916686参考文献 20摘要各种移动终端设备以及网络基本完成全民普及,移动购物的理念渐渐壮大,越来越多的人开始借助移动终端设备进行网上购物,人们仅享受着大量的互联网购物资源,习惯于利用自己的休闲时间进行购物。但是过去移动购物方式往往忽略了对信息的总结分类,使得购物资源混乱,无法使购物者快速且高效的找到自己需要的信息。针对这些问题,并对相关购物的情况加以分析的基础上,在移动购物的理念之上和Webapp的优势,构建一个整合较为完整的购物响应式网站。首先,该响应式网站是一款Webapp,这就避免了用户去下载软件,也节省了用户的手机空间。其次,购物资源得以进行整合。通过对国内购物资源进行一定的分析与整合,而且对一些我们常用的一些移动购物工具它的开发模式进行分析,能够看出常见移动购物平台的一些优缺点。对其中包含的概念及理论进行界定,为更以后的一些研究和设计提供一些基础与支撑。关键词：vue；HTML5；CSS3；JavaScript；Node.js。1引论1.1项目背景现在已经完全进入互联网全民化的时代了,各种移动智能设备已经完全大众化了,对信息传递与处理的方式也发生了巨大的改变,这种方式每日每刻的影响着人们的工作、学习和生活的各处场所。在互联网普及的时代背景下,如何将信息合理又安全的共享成为了一种研究趋势。目前,微生活技术,联动技术,响应式网站技术等Web的相关技术的发展逐渐趋于完善,也成为了共享的主要平台。其中使用比较广泛的Webapp也成为了信息共享的关键平台。Webapp,它不需要下载任何APP直接通过手机浏览器即可使用的一种响应式网站,像这样的模式也实现了应用"伸手可得"的概念与理念,用户可以直接通过智能移动设备扫一扫或者通过浏览器输入相应地址即可打开对应的响应式网站。响应式网站是一种新的开放能力,开发者也可以通过JavaScript的开发框架Vue,快速地开发出一个响应式网站。同时Webapp的功能得到了全面的优化,比起直接的APP入口也更加简洁,开发成本和人力资源需求也远低于APP开发,而且其触手可及,使用方便,用户不必担心下载太多应用等问题。1.2研究的目的及意义1.2.1研究的目的(1)通过对相关文献的研究调查,了解智能移动购物理论的内容和模式,以及Webapp开发的特点,进行一定量的分析探寻其中的需求,钻研一下使用web技术进行Webapp开发。(2)找到适合本课题的开发工具,阅读和实践Webapp关于响应式网站开发的相关介绍,熟悉并掌握相关的框架,组件及API文档,了解开发流程。(3)通过对系统的需求进行一定的分析,并对该课题进行设计,像比如功能模块设计、node环境的搭建、数据库相关软件的安装及数据库设计等,进而实现该课题的研究。1.2.2研究的意义(1)从用户的角度:基于Web的电商系统,是一种微平台购物方式,可以转化购物方法,来适应新一代的购物者。他们可以通过智能移动设备进行自主购物,随时随地的购物、模式化购物、情景感知购物、个性化购物。这可以适应成年人忙碌的生活习惯,将购物穿插在自己生活的任何时间,从而增加自己其他业余时间,也让购物增加了很多快捷的途径，使我们平时空闲购物的效率增加。(2)从实践研究的角度:JavaShop电商系统,可以进行比如像移动购物、个性化购物和混合购物，这些理念是现在的人们快节奏的生活中所更需求的东西,Vue的相关实现技术也为大家提供了新的研发思路,同时研究的过程,方法和工具也为JavaShop的实践研究和理论提供了参考价值。(3)从开发者的角度:基于Web的电商系统,不仅可以为购物者提供相关的购物选择,相关的商家或者用户也可以通过该平台售卖物品,在购物的同时可以售卖自己闲置的二手物品,商家也多了写平台售卖功能。通过店铺的主要功能积累用户量,有了用户量之后可以售卖物品获得相关利益价值。1.3国内外研究现状1.3.1国外研究现状 欧美发达国家进行了许多的移动购物项目，"实体购物上升至移动购物"和"MobileShop行动",这两个项目一开始是由亚马逊独自进行开发与维护,网络大时代的来临使得gilt,amazon等组织一起进行了承担再至后来的比如"E-Shop"项目它对移动购物进行了一定量的探讨当然还有不可或缺的实践,研究过后提出了什么才是真正的移动购物，还有就是移动购物具体该如何去实现。为日程生活中移动购物提供一种我们能用到的思路，或者可以说是模板。在最近这些年,移动购物以及完全进入我们真实生活中,也就是实际应用,这为我们的正常生活带来非常多的快捷方便。当然名校也有参与,比如名校上海交大、斯坦福等世界排名前列的大学以及亚马逊等购物业务公司也进行了非常多的人们对于线上，既移动购物的想法的研究,这些研究均取到了深度的进展,其中,移动技术如何成为信息分享的主要技术是他们进行研究的主要内容。1.3.2国内研究现状响应式网站与已经完成的APP相比,实现时的需求成本会很低,但是回报率反而会很高。它更加像原始App的体验,响应式网站是Webapp内的一种形态或者说是形式,它不进行本地缓存处理的时候是完全不占用手机内存得,而传统的APP基本是只要下载那么它一定会占用蛮多的空间,如果手机或者平板安装过多APP会导致手机的内存严重不足。响应式网站其实就完全不用考虑各种适配问题,开发完成之后可以进行各种方面的适配,我们可以进行快速场景化的使用。我进行的这个Webapp项目基于VUE框架,它可以通过网络请求即axios调用第三方API接口,并且提供较多的框架,能够更好的进行前端开发。与手机App相比,Webapp的代码不用进行任何下载,我们可以直接用浏览器进行浏览购买。完全没有也不存在原生APP的各种难受的拘束,让更多的人爱上这种模式,减少非常多最初的成本,省去初次安装APP和APP更新需要再次安装的时间。原生JS与Vue框架相比,无论是复用性、可维护性、都只是最原始的状态,没用进行任何封装,还需要直接操纵DOM节点,更别说数据驱动。Vue可以通过自身所带的脚手架,和Vue全家桶使更多的功能需求实现,并且VUE是渐进式框架,他可以如同JS一样兼容所有适配的第三方组件库,而且还是数据驱动。借助于Vue自带的脚手架,和Vue全家桶使项目更加完善更加成熟。2电商系统的系统需求分析2.1可行性分析基于Web的电商系统初创阶段主要面向少量商家以及少量用户,最终目标是推广至全社会。面向少量商家及少量用户是由于,笔者学习相关方面的知识,收集了互联网上大部分的相关数据,对数据及商品信息进行了分析与研究,发现相关数据具有碎片化、重复数据较多、可用资源较少的特点,就对大部分数据进行了收集整理。少量用户及商家对应重复数据会较少,分配到的可用资源会相应变多,基于此,Web电商系统为这些少量的用户以及商家提供了信息较为集中,高效的购物平台。身处互联网高速发展的今天,几乎人人都有智能移动设备,这些智能移动设备的系统大多为Android和IOS。虽然大众的移动设备上都安装了众多的APP,但应用之首当属淘宝,淘宝已逐渐成为人们日常购物中必不可少的APP。Webapp更多的被用在了服务行业,而功能类与服务型相结合的Webapp少之又少。针对这一缺口,笔者认为有必要设计和来发一种利用功能来吸引用户,利用商城来获得盈利的Webapp。响应式网站实现的购物平台与最原始的购物平台相比,移动性和灵活性会更加丰满,无需进行任何安装与下载,搜索或扫码即可进入。与原始购物平台不同的是,Webapp又更加接近原生APP。用户通过购物平台可以随时随地的进行访问购物,也可以即时进行沟通交流。2.2用户需求分析智能手机的普及,需要购物的用户群体庞大。大部分人都会选择智能移动设备,一些购物APP也成为大众日常购物的选择,所以以移动终端设备为基础,并且以一些购物APP为媒介的移动购物有很广泛的应用空间和研究前景,借助Webapp来开展移动购物平台的研究开发可以依托于浏览器广泛的用户群体。大众渴望有一个相对集中且便捷的购物平台,倾向于多元化的知识体系。目前大众获取相关购物信息的途径就是下载特定购物APP,因为互联网以及实现全民化现在人们的信息的共享与开放都产生了大爆炸使得每个人都能够在在互联网上搜索以及存储一些信息,由于没有质量控制和管理机制,有些信息会带给我们很多困扰,使我们对一些商品寻找的不够准备,无法直接搜寻到我们心仪的宝贝。登录与注册功能：在刚开始运行系统时，首先要做的就是登录账号，需要用户输入账号和密码登入商城，如果没有账号，则需要通过注册才能进行首次登陆。同时还需要对用户地账号和密码格式做出适当的限制。如果用户输入的格式错误，那么对他进行相应的提示，用户注册时，输入所需信息后，后台进行验证，如果用户名没有重复即注册成功，用户便可以正常登陆。Web电商管理系统针对这些问题,对网上相关的数据进行了整合,处理,将重点多频的问题及知识点做了整理。可以优化购物时间,电商系统的开发设计要注意购物功能需要完善,应用界面简洁。使用电商系统购买更多的商品以及发布商品是使用者的主要需求,由此来购买更多的商品及相关的商品。2.3功能分析登录与注册功能：在刚开始进入商城时，首先要做的就是登录账号，需要用户输入账号和密码登入商城，如果没有账号，则需要通过注册才能进行首次登陆。同时还需要对用户地账号和密码格式做出适当的限制。如果用户输入的格式错误，那么对他进行相应的提示，用户注册时，输入所需信息后，后台进行验证，如果用户名没有重复即注册成功，用户便可以正常登陆。基础商品展示功能：首先进入到第一个页面也就是首页的时候，可以从首页看到一些推荐物品，还有轮播图内的热门物品。首页搜索基础功能：点击首页的搜索部分，可以动态的进行商品的搜索，通过输入不同的关键字，动态的加载不同的商品分类搜索功能：通过底部导航进入到分类模块，通过点击侧边导航的不同内容，页面会进行相应的刷新显示出不同类型物品。进行购物车添加功能：首先点击商品模板进入到商品详情页，通过点击加入购物车，会弹出相应的弹出层，在弹出层中对规格与个数进行选择，然后再点击添加入购物车立即购买功能：跳过添加购物车环节，对单一商品进行直接购买，需要点击商品详情页的立即购买按钮，即可实现立即购买功能。个人信息修改功能：通过点击TabBar相应部分进入个人部分页面，然后再点击自己的头像这样就可以跳转到相应的修改个人信息的页面，根据自己的想法进行一定的修改，当然会有一定的限制比如手机号的限制，还有姓名不能用危险字等，修改后点击保存即可。笔者在功能分析的基础上，制定了如图2-1的基本功能结构示意图：图2-1功能结构图3开发工具及开发语言介绍3.1开发工具3.1.1VUE框架Vue是一个渐进式的框架,而框架的意思其实他已经是一个半成品了他已经对一些基础的代码进行了一部分的封装了。因为Vue是数据驱动也就是我们常说的MVVM所以他更多的是只关注逻辑层，很少关注视图层，并且还因为它是渐进式框架所以还可以兼容很多的第三方库。另外就是,当与现在的各种不论是类库还是组件库甚至是像JQ这种半框架组件,Vue也完完全全能够为复杂的单页应用提供各种需求的驱动。Vue脚手架，顾名思义脚手架就是它已经帮你搭建好了一个最基础的架子，你剩下的就是往里填充你自己用到的和需要的东西，使开发效率大大的提升，而且整体使用的舒适度也增强了不止一成，上手的难度也低了太多太多，他就真的如同工地上的脚手架一下，清晰明了，结构完成舒适，再搭配Vue全家桶的使用，你会突然发现，开发一个项目要远比想象中轻松很多。 图3-1VUE脚手架3.1.2AdobePhotoshop就是市面中常说的PS,它是一个数字图像处理工具,前端使用它主要是通过它配合PXCook将UI给的设计图内需要切图的部分进行切图处理,它其中还包含很多种类的编修工具和一些绘画工具,可以帮助使用者有效地进行图片处理和编辑工作。我通过该软件对电商系统进行了界面设计、主题图标设计、以及作品切图处理等工作。3.1.3PXCook一般我们拿到设计图后需要对设计图上各个部分的尺寸、字号、字体需要一个软件进行展示以及标注PXCook就是这样一个软件,它可以解析PSD文件对内部的文字,颜色,距离进行一些特定的识别,其优点在于将标注、切图这两项功能集中在一个软件内完成。它可以完全只能切图,对一些尺寸进行只能标注,还有文本样式,元素距离等,都可以使用它来进行标注以及测量方便前端开发人员对设计图的认识。图3-3PKCook3.1.4NavicatPremium15它是各种数据库的一个可视化程序软件,可以让数据库内的表可视化,通过不同的sql语句进行操作,该软件支持单一程序连接到MySQL、SQLServer、Oracle等数据库,他当然也能进行数据库管理的各种功能,比如视图、事件、函数、触发器、存储过程等。同时该软件还可以在两个及以上不同的数据库中进行数据传输。笔者利用此软件进行数据库的设计。3.2开发语言3.2.1模板语法模板语法的话主要是VUE自带的模板语法，它里面包含有比如像插值表达式、还有样式绑定以及分支循环结构，当然还有指令这种常用的模板、事件绑定和属性绑定也是相当常用的模板,它的作用是扩展了普通HTML属性的功能,可以实现比如在HTML中书写JS语法,可以更加方便与快捷的绑定一些属性与事件等。3.2.2JavaScript虽然使用Vue框架不需要直接操纵DOM节点了，但是Vue底层的逻辑交互还是源于原生的JS，所以JS拥有的特点与功能Vue也同样拥有，而它拥有的功能有可以动态将dom节点添加到页面中，还有就是虽然Vue不直接操纵DOM树了但是它还有一个虚拟DOM树，通过虚拟DOM来间接的操纵真实DOM，但是它的底层还是原生JS的一个功能就是操纵DOM树的功能。图3-5JavaScript组成 3.2.3JSONJSON是一种数据格式我们经常在网络请求中遇见它们,以及有些对象或者数组数据我们需要存在本地时也需要用到它,它其实就是JS中对象的一种所谓的标记语法，更好的提升了网络传输的效率。所以JSON具备清晰简洁的特点,可以让阅读变得更加轻松,数据结构也更加明显,当然也可以让机器更好的去识别。3.2.3Node.jsnode是一个运行环境,是基于原生JS的一个运行环境,使用node能让JavaScript在后端进行开发,同时实现了其他后端可以实现的所有功能也就是说无需多学任何后端语言,直接用JS语言搭建后台服务器。具体功能见图3.2-3Node.Js功能图3.2-3Node.Js功能3.2.4less语法Less语法算是css基础语法的一种升级，也就是可以说less语法是css语法内部的一种方法，是一种非常好用的css语法，当用习惯这种语法之后就完全不会再想用原生css，就跟我们习惯使用一个框架之后就会很少使用原生js了一样，因为它内部存在像函数，变量这种功能，所以css的复用变得简单的不止一倍，有一些需要多出使用的css结构我们完全可以生成一个函数，然后通过调用函数来进行css的复用。所以说它的主要特征是:它可以让CSS代码更加有组织的进行书写、我们当然也可以定义样式,它还可以在整个代码中重复使用,可以排除代码冗余的问题。4JavaShop电商系统的设计与实现4.1具体功能实现4.1.1商品展示模块商品展示模块的重点在于向用户展示相关类型商品,以便于用户进行购物。因此该功能模块分为首页推荐商品部分和热门商品部分,点击推荐商品题目方可进入推荐商品详情,用户可以在推荐商品中看到关于该商品的详细信息,包括库存,价格,也可以看到其他商品的推荐,及其他的一些功能,比如领卷、团购等。图4-2具体页面展示

4.1.2搜索模块电商系统的搜索功能主要是为用户提供搜索相关商品的功能,因此对搜索功能进行了一些处理,用户可以根据自己每一个字的输入动态的产生不同的搜索指引,这样可以实时的显示出搜索结果,为用户节约一定的时间,也可以让用户对一些不同的商品产生兴趣,最终来找到自己需要的信息。图4-3具体页面展示

4.1.3商品分类模块该模块主要实现系统的对商品信息进行分类,主要的类别包括数码家电、进口产品、美容化妆等类别,用户可以在该模块有目的的进行不同分类的选择,该模块的实现难点在于将左右两部分分离开来,并且使得两部分进行互相不影响的滚动,基于这个问题Vant组件库为我们提供了sidebar侧边导航组件,该组件可以对指定内容进行分块显示,再将左边栏进行固定定位处理,即可解决左右端分离滚动互不影响的效果。图4-4具体页面

4.1.4商品详情模块该模块主要进行商品详情展示,以便用户可以更加快速且准确的了解商品的详细信息及商品的销量及库存信息等,在用户完全了解商品信息之后可以对商品进行加入购物车操作。该页面的技术点主要包括商品展示时的轮播图效果的实现,该部分笔者主要使用第三方发布的组件-swiper,该组件自带的有轮播图的功能,大大提高了开发效率。再者是选择商品时的折叠面板,该折叠面板使用了vant组件库,该组件库为web开发提供了大量的实用性极强的组件库,可以使开发人员快速地构建出页面结构,并且该组件库较为成熟稳定,API文档书写清晰,初学者也能快速上手使用,大大降低了开发时间,提高了开发效率,同时也精美了页面。该页面中的折叠面板笔者就使用了该组件库,实现了页面的快速构建。图4-5具体页面4.1.5订单管理模块该模块主要是实现用户订单管理,包括订单的详细信息、地址管理、商品金额、结算等模块,用户在进行商品选择购买时即可进入该页面,该页面主要是对用户所购买的商品进行一个汇总,得到用户购买商品的详细信息、总金额等的结算汇总,订单创建成功后可在全部订单中查看订单详细信息及支付状态等信息。电商系统的用户下单支付用例图如图4-6。图4-6用户下单支付用例图对于JavaShop内的支付功能分析:(1)首先需要通过点击TabBar内对应的购物车图标进入到购物车内,在购物车内可以进行加减删除等，每一个加减跟删除其实都是向后端发起一个post请求，使后端改变他数据库内表的数据，然后前端再重新进行购物车列表接口的get请求，将数据重新刷新到购物车页面。(2)点击购物车内结算之后会相应的跳到订单页面，进入页面会给用户一个默认的收货地址，这个收货地址就是用户设定的默认地址，只有用户已经选择过收货地址之后才能进行下一步的操作，当然用户也可以通过textarea文本框输入需要加的备注消息，接着点击进行付款。(3)因为我是个人开发，并没有商家号所以无法直接调用微信支付API只能调用支付宝支付API但是真实的支付宝支付也需要进行审核跟授权，所以我这里直接进行支付宝提供的沙箱支付，通过调用沙箱支付模拟支付宝支付。图4-7具体页面4.1.6购物车模块通过点击进入不同的商品详情中,选择不同的商品,可以把选中的商品通过下方按钮,打开弹出层,选择不同的规格后然后选择需要的数量，然后点击确定就会有相应提示，提示你加入购物车成功，相应的购物车的小图标上的徽标会显示你加入购物车内商品的数量，然后还是通过TabBar点击对应购物车图标进入到购物车页面，可以在这个页面对自己购物车内的商品在进行一些操作，内部有像加减删除全选这种功能，当然通过步进器进行加减的时候会相应的有一个上限跟下限，上限是商品的总库存，下限是1，在步进器为1之后减号按钮会相应变成灰色，这时候如果想要再进行减少数量的话只能进行删除操作。对于删除可以通过复选框选择多个商品然后点击下方删除按钮进行多个商品的删除，也可以通过向左滑动删除会显示出滑动单元格，进行单件商品的删除，当然通过点击购物车内的单个商品也会跳到相应的商品详情中，当选择完全部想要购买的商品之后点击结算按钮会跳到对应的订单页面，因为一些接口限制，所以我所实现的这个项目并没有添加像折扣以及优惠劵这样的功能，所以在订单页的总金额就是购物车内算出的总金额加上邮费，用户确认完价格没有问题之后点击支付，然后会相应的吊起沙箱之后，支付成功后会相应的进行Post请求，将数据库购物车列表这个表中的这一条数据进行相应的删除，当然对应的是订单列表的数据库表中会多增加一条数据。图4-8购物车用例图图4-9具体页面5总结与展望5.1总结在完成整个项目的过程里对一些平时很少接触到的知识都学习到了很多，比如像即使实现即时通讯的WebSocket,还有数据表格Echarts，还有一些很久没用的第三方类库，像iconfont，以及swiper组件库，还有animate.css组件库等，包括Vue内部的全局状态管理VueX的使用，还有像Vue-Router的基础路由还算是比较清晰，但是对子路由的一些搭建与使用在写项目之前还是比较生疏的，经历过这个项目之后对子路由的使用也很熟练了。此外,我接触并使用了一些第三方的数据API接口,学习了VUE全家桶的使用与开发。在整个实现论文的过程里,我也明白了论文写作的知识和技巧,我遇到了诸多的问题,养成了独立思考、解决的习惯。结果各种困难，使用各种第三方SDK以及处理各种逻辑都是对自己的一种锻炼与提升，让我对项目的整体架构，以及一些需要用到的逻辑思考迷宫有了更深的理解与领悟。参考文献[1]刘剑. JSP网站开发与设计[J].电脑知识与技术. 2005.14. 周祖荣，陈荣珍. 基于JSP的招生网站的设计[J]. 科技信息. 2010.01. 陈武，卫