基于web的购物商城的开发与实现

1、基于web的购物商城的开发与实现 外文题目:Development and implementation of shopping mall based on Web内容摘要网上购物的人员越来越多大,各种网上购物系统的浮现,使人们能够足不出户的进行购物.这种现象对于各单位而言,无论是企业与客户之间的交易,还是企业之间的交易,可以通过网上交易的方式,使交易速度得到大幅度提高,并达到节约成本的目的.现阶段,随着信息产业和计算机网络数据库技术的不断发展,网上购物的形式越来越多样.文章主要对基于Web的网上购物系统进行分析,使其能够为人们的日常生活提供更多方便。关键词：网上购物系统 WEB vue-cl

2、i thinkphp JavaScriptAbstractThere are more and more people shopping online. With the emergence of various online shopping systems, people can shop at home. This phenomenon, for all units, whether it is transactions between enterprises and customers, or transactions between enterprises, can greatly

3、improve the transaction speed through online transactions, and achieve the purpose of cost saving, With the continuous development of information industry and computer network database technology, the forms of online shopping are more and more diverse. This paper mainly analyzes the online shopping

4、system based on Web, so that it can provide more convenience for peoples daily lifeKey words：shopping-online WEB ThinkPHP JavaScript目 录1 引言11.1购物商场的设计思想11.2 商城开发工具的选用和介绍12 购物商城的概要设计12.1 项目背景介绍12.1.1 网上商城的背景12.2 模块设计22.2.1 前端模块22.2.2 后端模块33 详细设计43.1 前端模块设计43.1.1 前端的搭建43.1.2 前端中各页面的设计43.1.3 前端中各页面中的小图

5、标的获取43.1.4 前端中导航栏组件的封装与使用53.1.5 前端中首页的开发53.1.6 前端中BetterScroll的使用63.1.7 前端中的详情页63.1.8 前端中的购物车73.1.9 前端中的分类83.1.10 前端中的个人83.1.11 前端中的支付和支付成功83.2 后端模块设计93.2.1 后端的搭建93.2.2 后端的数据收集93.2.3 后端数据库和表的创建93.2.4 后端中的管理页面设计93.2.5 后端系统中的主要功能93.2.6 后端系统中功能的实现10感谢语11参考文献12广东东软学院本科毕业设计（论文）1 引言1.1购物商场的设计思想本人基于目前手机对应大

6、家来说几乎是形影不离的情况下，设计一个便捷的移动端网上购物商城系统，让它也有机会与大家息息相关。该购物系统使用前后端分离的设计思想，先设计好前端的每个页面结构，在开始画页面，结合前端代码与前端框架进行开发，代码与图片的相结合完成前端的结构。后端先收集好各种数据，再把后端管理系统的界面设计好，把各类功能整理出来，根据需要的功能做出对应的功能实现模块，在开始做数据的处理。1.2 商城开发工具的选用和介绍在当今人人手机不离身的时代下，我将写一个基于移动端的一个购物系统，它的开发主要包括后端数据库的建立，后端管理以及前端页面的Web设计。系统采用了我比较熟悉的VScode,Editplus,Apach

7、e services,pyCharm,photoshop等开发工具，做出详细的结构分析，前端页面的划分，前端页面的功能，提供给用户的信息做出详细的整合，使用Vue3.0框架对前端做开发；数据的收集使用python进行爬取,大量收集json数据;后端系统使用PHP语言,采用thinnkphp5.0框架对后端数据做主要的处理，通过apache提供服务器接口，完成主要的基本功能。改购物系统主要包括用户管理功能，商品信息，店家信息展示，购物车管理，订单管理4大主要模块。用户管理实现了用户的注册，登陆，退出等主要功能；商品信息展示主要实现了显示商品，商品的详细信息，店家详细信息，商品选购等主要功能；购物

8、车管理实现查看商品，修改数量，删除商品等主要功能；订单管理包括改订单的详细信息，地址的填写等主要功能。该系统简介有效，处于移动端使用，符合当代人生活习惯。2 购物商城的概要设计2.1 项目背景介绍2.1.1 网上商城的背景近年来，随着网络时代的迅速崛起，互联网已经成为了收集和提供信息的重要渠道并已经深入到了传统的流通领域。所谓时势造英雄。各种时代化的流行领域迅速发展起来，尤为大家熟知的电子商务更是如日中天，在很短的时间内就遍布全国，小到5岁，大到65，基本都熟知网购，然后消费者主要接触的就是电子商务的前端商务平台，在其整个流程中有着举足轻重的作用。而购物商场的腾空出现，为新一代的购物方式提供了

9、一种全新的购物平台。我要为大家详细介绍的就是如何建设一个全新的网上购物系统。网上购物是一种具有交互功能的商业信息系统。它向用户展示了大量的信息，包括各种各样的商品信息，买家卖家信息等等等等，这些主要是一些静态信息；当然还有些较为重要的动态信息，商品报价的实时更新，各种节日活动折扣信息等等等等；除此之外还有较为完善的交互功能，能让商家客服和用户做出详细的交流，客服为用户对改商家的商品答疑解问，进一步促进了商品成交的成交率。让网购实现更人性化接近化的感觉。随着网络经济时代的高速发展，互联网已逐步深入人心，大家都热衷与网上购物，网上购物已经基本在12-60岁的人都熟悉的使用，基本实现了人人会网购的情

10、况出现。信息技术的快速发展，让很多的人都开始采用了网上销售和管理等方式。网上购物极大的方便了人们的生活状态，现在很多的工作党常年的工作，基本抽不出时间到外面花大量的时间逛实体店寻找自己要的东西来购买，而网上购物则可以轻松解决这种问题，只要一部手机，正常上网则可以百里挑一，轻松便捷的找到合适自己的东西，而且类型齐全，价格方面甚至都比实体店占据了很大的优势。网上购物对社会的发展有着无比重大的意义，它完全颠覆了以前传统的购物行为与方式，它引领了一个跨时代的进步。2.2 模块设计2.2.1 前端模块前端模块的设计主要分为页面结构，页面样式，页面功能3大结构。页面结构主要分为首页，分类，购物车，个人首页

11、4大部分；首页有各种商品展示，又分为流行，新款，精选类商品，选中该商品点击即可进入商品详情页面，在商品详情页，可以点击该商品加入购物车；也可以直接进行购买，可以与客服进行交流，可以进店看看，也可以对该商品进行收藏。分类页面主要用于展现更为详细的物品分类，包括全身的帽子，衣服，鞋子等等等等，在每一类中还细分为3大类，包括综合，新品和销量，每一样都类型多多；购物车页面则可以看到加入购物车的物品，也可以在这里把该物品移除购物车，或者添加数量，在购物车页面内也可以取消选中某类商品，在下面有一个全选功能，该全选功能在本来已经全部选中的状态下是全部不选中的作用，其他情况均为全部选中，同行内，还有一个合计价

12、格，右侧还有一个取计算的按钮等功能；个人首页则主要用来展示该用户登陆后的个人信息，有未登陆前的页面本身的信息，有登陆成功后该用户的信息，其中包括他的个人余额，优惠劵，积分等信息，还设计了一些小功能，包括一些积分商城，积分可兑换商品，和会员卡等小功能，这些是主要前端模块的设计思想。2.2.2 后端模块后端模块的设计主要分为三大部分，首先第一部分是收集数据；第二部分则是对后端模块的结构页面的设计；第三部分则是对数据的处理，即主要是对数据的增删改查。数据的来源主要是使用python爬取蘑菇街的大量信息，把大量信息存入数据库，利用thinkphp5.0对数据做对应方法的增删改查。收集数据主要采用pyt

13、hon对蘑菇街的信息进行爬取，以json的格式进行保存下拉；后端数据库的设计主要是通过下载phpMyadmin，利用它创建数据库，创建对应的数据表做整体数据的存储和管理；数据的处理则是使用TP5框架，利用Sql语句，封装好对应的增删改查方法，对后端数据做出处理。后端中有管理员身份的功能模块，也有数据处理模块，比如有更改商品价格的功能，有更改对商品信息描述的功能等等，这是设计后端模块的思想。3 详细设计3.1 前端模块设计3.1.1 前端的搭建前端采用vue cli3.0创建项目: 首先全局下载node.js,node版本大于8.9,然后开始下载全局的npm依赖，可以在dos里使用命令: npm

14、 install -g vue/cli,默认下载最新版本, 或者在VScode里面的终端里面安装,同样安装完之后可以使用vue -V检测当前安装的版本。有了这些前提条件之后，我们可以在新建文件下开始创建项目，同样在VScode的终端下使用命令:vue create my-project -save -dev,包含开发时依赖，测试依赖；创建项目的过程有各种选项选择，各个选项可以使用空格选择，typescript支持使用typescript书写源码，router支持vue-router,vuex支持vuex;还有各种个人信息可以填写到项目里面,包括作者，邮箱等个人信息，当我们选择好各类选项之后，开

15、始安装直到项目下载完成。于是我们的vue-cli3.0就已经安装完成，我们还可以补充许多开发时经常用到的文件信息，例如，创建一个assests文件，里面存放一些公共css文件和一些图片img，各种小图标logo，包括封装一些常用的js方法，例如时间的格式化等一些常用的方法；在该文件下通常也会封装该项目所需的大部分组件，有依赖该项目的文件可以放到components/content下,若不存在较强的依赖性，可以独立封装到components/common文件下，该文件夹中的组件均可以直接使用到其他项目中去；我们继续可以创建一个network文件用于发送网络请求的文件，里面封装好发送网络请求的方法

16、，便于我们请求接口的数据；可以创建一个store文件用于对要使用到vuex的功能进行封装；创建一个view用于对各个主页进行统一的存放；可以创建一个vue.config.js文件，在该文件内全局导出一个个文件夹目录的别名，方便项目开发的时候剑神对路径的依赖；到此可以进行前端的开发。3.1.2 前端中各页面的设计每个页面都使用photoshop把每个页面大致外观描绘出来，通过各种小格局的不断调试，最终完善每个页面的设计。第一步首先做好PSD，根据自己所画的页面，确定哪些位置将有图片来完成，哪些位置是代码能够完成的，一些动态效果需要用到javascript来实现，这样步步为营，先把准备工作完成，在

17、开始前端的开发。3.1.3 前端中各页面中的小图标的获取前端页面中涉及很多的小图标，比如首页，分类购物车，分类，我的，和返回按钮等，其中还包括该选项是否处于活跃状态的时候的图标。而我对这些图标的选择则在阿里巴巴矢量官网库里面选择合适的图标采用svg格式下载到本地使用。3.1.4 前端中导航栏组件的封装与使用前端的单页面中主要使用组件化的开发思想，为了方便维护，使用地内聚，高耦合的组件化封装，基本实现一个功能一个组件，类似功能则直接导出封装好的组件使用即可。而其中的导航栏则封装为一个MainTabBar的一个独立组件，其中使用了四个插槽为了分别显示首页，分类，购物车，我的，四个主要页面，其中每个

18、页面都有自己对应的小图标，并且小图标都分别有两种不同的颜色，红色代表处于活跃状态的时候，黑色代表处于非活跃状态的时候。在这里先配置好路由，在router文件下的index.js文件中，每一个页面跳转都使用路由懒加载的方式，减轻服务器的压力，用于在这4个页面中跳转，其中每一个跳转对应了其中的子组件，其中包括首页-Home.vue;购物车-Cart.vue;分类-Category.vue;我的-Profile.vue,在配置路由时候，每当点击哪里即可跳转至哪里，其路径的方式为history，在此还定义一个redirect重定向主要作用于默认在首页.。到此为止，主要的4大部分内容即可分好。3.1.5

19、 前端中首页的开发首页开始首先是顶部的开发，顶部中间显示的是购物车，也是该项目的主要作用，它是一个组件为NavBar.vue，该组件在头部还分为左中右三部分，三部分均用插槽作用，这里使用插槽的主要原因是为头部封装一个独立的组件，该项目封装的组件均设计有默认的样式，可能在其他页面也会被使用到，到时候在直接调用该组件即可；下面则是轮播图，该轮播图也封装成一个独立的组件，其轮播中的图片在调用接口后返回数据，接收到图片使用封装好的组件Scroll.vue开始轮播，其设计原理主要是采用了定时器，每张图的播放时间为2.5秒，点击到图片时，定时器清除，图片停止播放，放开即继续播放，当把其中的图片向左或向右滚

20、动至1/3位置时，即可滑到下一张图片，当我们直接点击其中的轮播图后，则会跳转至该轮播图所在的详情页信息，对应该轮播图携带的主要信息测展示；接下来是一个图片的组件HomeSwiper.vue，该组件内部的图片展示是调用Swiper.vue组件与他的子组件SwiperItem.vue为该组件做一个展示的结果，在整体图片外面包裹一个标签；接下来同样是接口返回的一张图片，作为一个本周流行内容，调用了RecommendVie.vue组件，在点击这张整体图片后会跳转至一个本周流行的商品展示页面，展示的是本周流行的商品详细信息；下面到了三个小分类数据，这里封装了一个TabControl.vue组件，包括其中

21、的流行，新款，精选三种数据的展示，当点击新款则展示新款数据，其他两类也是如此，其中点击其中的一种展示的样式也是不一样的，展示的样式为红色和下划线，而展示的内容包括图片，标题，价格和收藏量，它们用一个GoodsList.vue组件和其子组件GoodsListItem.vue进行展示，它们均为接口返回数据，当用户一直往下来的时候则，流行，新款，精选，三个选项会有一个吸顶效果，持续下拉该三项会停留在购物街的下面位置，而上拉回来的时候又回消失在该位置，当下拉到一定程度时候，右下角会出现一个回到顶部的小箭头按钮，该小按钮也是一个封装好的BackTop.vue的组件，当点击该按钮时则会在200毫秒的时间回

22、到顶部，其中当用户持续下拉找寻更多商品的时候会触发上拉加载更多的时间，继续回调接口返回更多的数据展示，可谓是任君挑选，这样的流程下来后，首页开发完成。3.1.6 前端中BetterScroll的使用首页中的滚动采用的是BetterScroll作为滚动效果，没有采取JavaScript中的原生的滚动，这是一个开发者已经持续开发和维护中的一个比较好用的插件，该插件的使用方法较为简单便捷，直接在终端输入下载命令即可，然后把BetterScroll组件直接引用进来，在Components里面注册，把需要滚动的部分放到该组件内即可，选择该组件还有一个重要的原因，是因为该组件在下拉或上拉到顶的时候有一个回

23、弹的效果，在移动端中比较适用；betterScroll在使用的过程中存在不少的bug，我们在使用这个组件的时候必须给定滚动内容一个指定高度，不能像原生滚动一样，以文本内容支撑高度，而better-scroll在计算可滚动高度时时在该组件挂载完之后，所以在内容较长，图片较多的页面往往会产生一个滚动滚到一定位置不能继续往下滚的bug，为了解决这个bug，我们必须在之前监听该首页的图片加载完成事件，而在我们监听完这个事件后，我们在开启调用该方法，才能保证该滚动效果没出现类似的bug。3.1.7 前端中的详情页当点击首页中的某一个商品的时候，它会携带其中的一个iid来到详情页面，根据携带过来的iid显

24、示该商品的详情部分信息在此页面做展示。该页面头部有5个小部分，由一个封装好的DetailNavBar.vue组件，从左到右依次是一个返回按钮，商品，参数，评论，推荐，这5大选项，其中每一个都对应其相对的信息；其中商品详情数据包括大量的穿着效果图片、标题、价格、优惠价格、销量、折扣信息、运险，退货，包邮等等信息；参数信息则包括，胸围、腰围、裤长、衣长、肩宽、腰围、图案、颜色、季节、材质、领型、袖长、风格、尺码、版型等具体参数信息的展示；而评论信息则可以展示买家的评论信息内容，包括该用户的id、图像、评论内容和评论时间、评论图片等内容，同行内还有可以点击显示更多评论内容；而最后的推荐内容展示风格和

25、首页的上拉加载更多展示的风格一致，而在推荐列表中则没有做图片的上拉加载更多，只有固定数量图片的展示。详情页中的滚动同样是采用BetterScroll作为滚动效果，在这里也直接调用回到顶部的组件BackTop.vue，在下拉到一定距离后则会显示一个回到顶部按钮，回到顶部后该按钮消失；其中这里详情页的设计还有一个重点就是顶部四大项的点击，同样点击其中的一项会有红色的样式作为标志，未选中的则为黑色，而当你点击其中的一项时候，该详情页会在200毫秒跳到相应的位置，其中的BackTop.vue组件也会在点击对应选项时滚动到的位置做一个显示；然后我们并未选择点击顶部选项的方式来浏览详情页的相应内容，选择下

26、拉浏览的时候，当你下拉到相应的位置时，上面的选项也会根据你下拉到的位置显示相应位置的红色样式。该详情页的导航栏部分则有5大部分，分别是客服、店铺、收藏、加入购物车、购买功能。其中的客服功能，主要的是卖家于买家的简要沟通，两者可以在此做一些简单的商品方面的询问信息等，该功能由一个Cheap.vue组件完成；店铺信息，就是在同一家店中，找寻该店的其他商品，包括一些类似的商品，这里有GoodsList.vue和其子组件GoodsListItem.vue组件共同完成该功能。这里的收藏功能的话，在你点击收藏按钮的时候，会把该商品收藏到你的收藏夹里面，在收藏夹中展示的信息与购物车展示的方式一样，同样采用C

27、artList.vue和其子组件CartListItem.vue做一个收藏夹的展示。3.1.8 前端中的购物车购物车页面的顶部和首页中的顶部使用同一个组件NavBar.vue，购物车页面顶部展示的是购物车和数量，展示购物车的的组件为CartList.vue和其子组件CartListItem.vue，该数量为所有购物车内的种类数量，包括选中和未选中的商品；该页面滚动部分也是使用BetterScroll作为滚动；其中购物车页面展示的是一个图片和部分说明信息，价格和数量，在每一项的左边还有一个选择按钮，当你加在详情页加入购物车后，详情页在中间位置会有一个吐司效果，该效果是一个Toast.vue的组件

28、，如果选择一个新商品添加到购物车，则显示添加购物车成功，如果同一种商品多选，则会显示选择该商品数量+1，均在1.5秒后消失该提示信息；购物车页面在贴住底部导航栏中还有一个全选按钮和一个合计信息和一个去计算的数量信息，由一个CartBottomBar.vue的组件完成，全选则用于对购物车中的商品做一个全部选择作用，如果购物车中的所有商品已经是全部选择状态，则该按钮为全部不选择的作用；合计信息主要是总价格的计算，用每个商品的单价乘与数量产生总价格；去计算按钮则是选中的数量，与顶部的数量不是同一个作用。3.1.9 前端中的分类分类页面中的顶部依然是调用和首页顶部相同的组件NavBar.vue，展示的

29、信息是商品分类。而下面开始则分为左右结构，左边显示商品的类别，右侧则显示你选中的类别的商品部分信息的展示。左侧商品的选项为竖着方向的日常的穿着用品名称，包括第一项统一性的正在流行，然后依次是上衣，裤子，裙子，内衣，女鞋，男友，包包，运动，配饰，美妆，个护，家居，百货，母婴，食品等等，其中主要的是女性衣饰品，由一个TabMenu.vue组件展示，当点击其中的任意一项时，该项的样式则发生改变，该选项左侧有左划线，字体颜色为红色，字体大小也有明显的变大；来到右边部分，展示的则是你在左侧选中的选项的对应信息，右侧展示对应的信息时还细分为三大类，包括综合数据，新品数据和销量数据，这些数据的展示则是用Ta

30、bControl.vue组件，这是前面也已经封装好的组件，而这里和首页传过去的参数不一样，这里传的是综合，新品和销量，这里也体现了复用组件的便捷性，而我们在左侧选择自己想要的类型的时候来到右侧又有三大类型挑选，可谓是内容多多，用户则可以在所需的对应的商品中选择合适自己的进行购买，而在我们点击了心仪的商品之后，会跳转至商品的详情页，该详情页的设计思想与在首页中选中的商品点击跳转的详情页一致都是使用DetailShopInfo.vue等组件一起做一个展示，同样来到了详情页之后可以选择添加至购物车或者直接购买。3.1.10 前端中的个人我的商城页面中的顶部信息依然是首页顶部的组件NavBar.vue

31、，展示的信息为我的商城。我的商城下面则是个人信息，包括个人信息的头像和登陆注册功能和绑定手机号作用，其中主要由一个UserInfo.vue组件组成。在下面则展示的信息是我的余额和我的优惠卷，还有我的消费积分，这里的信息则是在当前组件内用DIV+CSS做一个结构布置和页面样式，把内容展示出来。再来到下面则依次是我的消息，积分商城，会员卡，我的购物车，下载购物App等功能，这里的几大功能都是封装好一个ListView.vue组件组成，由该组件进行内容的展示。3.1.11 前端中的支付和支付成功我们在详情页面选择好自己心仪的商品后，想对该商品进行购买，或者在购物车点击购买所需的物品，则可以来到购买页

32、面，这里由于支付的接口个人申请不到，则统一为购买后直接跳转至支付成功页面，在支付成功后可以看到该商品的下单事件，花费的价钱，商品的描述信息等，类似于购物车页面的商品信息，这里又一个SurePull.vue组件完成该功能。3.2 后端模块设计3.2.1 后端的搭建在windows系统上，后端采用thinkphp5.0作为开发框架。首先下载Apache作为服务器，构建虚拟主机，更改vhost和host配置文件，配置一个自己的端口号，方便预览。开始下载TP5框架，把下载好的框架拉到Editplus进行开发。下载phpMyadmin，在phpMyadmin中创建数据库，创建对应的数据表，准备阶段将完成

33、。后端的搭建基本完成。3.2.2 后端的数据收集后端大量数据的收集主要来源于蘑菇街，采用python在该系统中爬取相关的数据，在爬取的过程中需要选择高网速的网络，否则将会出现错误，爬取的信息不齐，获取爬取失败，包括大量的图片，图片标题，图片的分类，流行的，精选的，新款的，还有详细分类中的上衣，裤子等尺码，评论，时间等各种描述信息，商品价格，销售量等信息，爬取到的JSON数据存入phpMyadmin中相应的数据库中的数据表内，收集好的数据将作用于项目的主要开发来源。3.2.3 后端数据库和表的创建后端采用phpMyadmin创建数据库，创建的数据库库为supermall，在次数据库内创建相对应的

34、表，每一种分类数据对应一张表，在对应的数据表中，创建许多的字段对应相应的内容，比如，前端中的轮播图中的图片使用一个字段，本周流行也对应一个字段，流行，新款，精选等都有相应的字段对应，其中每个图片还有对应的id作为唯一标识，用作于该表的主键。许多的数据表，基于这种结果，在对应的需求中逐渐的添加，逐渐的修改完善。3.2.4 后端中的管理页面设计后端中，打开后端管理系统，则需要管理员登陆，在成功登陆后则进入到后端管理系统中，该管理系统采用左右布局的方式，左侧为管理选项，右侧为管理信息，其中包括管理员管理，包括数据的管理，在右侧的管理列表中也相对应数据表中的各个字段做相应的内容展示，便于管理。后端页面

35、设计较为简介，样式和布局的规划简介明了。3.2.5 后端系统中的主要功能后端系统中，有登陆功能，有修改密码功能，在需要更改登陆密码的时候可以使用修改密码功能，对管理系统的登陆密码进行修改；在成功登陆进系统之后，在左侧的选项栏中可以看到有管理员模块和数据模块，管理员模块中主要有添加管理员，删除管理员，修改管理员信息等功能；而数据模块中则有许多的功能，分别都是对数据的处理功能，包括各种图片的路径，图片的标题信息，描述信息，商品尺码，买家评论，库存，销量，价格等大量的信息，此功能模块即可对这些信息，做相应的更改，例如，更改某商品的价格，添加商品的库存，添加新款上市衣服等对这戏数据信息处理的功能。3.2.6 后端系统中功能的