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

资源描述

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

《基于web的购物商城的开发与实现.docx》由会员分享，可在线阅读，更多相关《基于web的购物商城的开发与实现.docx（11页珍藏版）》请在冰豆网上搜索。

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

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

内容摘要

网上购物的人员越来越多大,各种网上购物系统的浮现,使人们能够足不出户的进行购物.这种现象对于各单位而言,无论是企业与客户之间的交易,还是企业之间的交易,可以通过网上交易的方式,使交易速度得到大幅度提高,并达到节约成本的目的.现阶段,随着信息产业和计算机网络数据库技术的不断发展,网上购物的形式越来越多样.文章主要对基于Web的网上购物系统进行分析,使其能够为人们的日常生活提供更多方便。

关键词：

网上购物系统WEBvue-clithinkphpJavaScript

1引言

1.1购物商场的设计思想

本人基于目前手机对应大家来说几乎是形影不离的情况下，设计一个便捷的移动端网上购物商城系统，让它也有机会与大家息息相关。

该购物系统使用前后端分离的设计思想，先设计好前端的每个页面结构，在开始画页面，结合前端代码与前端框架进行开发，代码与图片的相结合完成前端的结构。

后端先收集好各种数据，再把后端管理系统的界面设计好，把各类功能整理出来，根据需要的功能做出对应的功能实现模块，在开始做数据的处理。

1.2商城开发工具的选用和介绍

在当今人人手机不离身的时代下，我将写一个基于移动端的一个购物系统，它的开发主要包括后端数据库的建立，后端管理以及前端页面的Web设计。

系统采用了我比较熟悉的VScode,Editplus,Apacheservices,pyCharm,photoshop等开发工具，做出详细的结构分析，前端页面的划分，前端页面的功能，提供给用户的信息做出详细的整合，使用Vue3.0框架对前端做开发；数据的收集使用python进行爬取,大量收集json数据;后端系统使用PHP语言,采用thinnkphp5.0框架对后端数据做主要的处理，通过apache提供服务器接口，完成主要的基本功能。

改购物系统主要包括用户管理功能，商品信息，店家信息展示，购物车管理，订单管理4大主要模块。

用户管理实现了用户的注册，登陆，退出等主要功能；商品信息展示主要实现了显示商品，商品的详细信息，店家详细信息，商品选购等主要功能；购物车管理实现查看商品，修改数量，删除商品等主要功能；订单管理包括改订单的详细信息，地址的填写等主要功能。

该系统简介有效，处于移动端使用，符合当代人生活习惯。

2购物商城的概要设计

2.1项目背景介绍

2.1.1网上商城的背景

近年来，随着网络时代的迅速崛起，互联网已经成为了收集和提供信息的重要渠道并已经深入到了传统的流通领域。

所谓时势造英雄。

各种时代化的流行领域迅速发展起来，尤为大家熟知的电子商务更是如日中天，在很短的时间内就遍布全国，小到5岁，大到65，基本都熟知网购，然后消费者主要接触的就是电子商务的前端商务平台，在其整个流程中有着举足轻重的作用。

而购物商场的腾空出现，为新一代的购物方式提供了一种全新的购物平台。

我要为大家详细介绍的就是如何建设一个全新的网上购物系统。

网上购物是一种具有交互功能的商业信息系统。

它向用户展示了大量的信息，包括各种各样的商品信息，买家卖家信息等等等等，这些主要是一些静态信息；当然还有些较为重要的动态信息，商品报价的实时更新，各种节日活动折扣信息等等等等；除此之外还有较为完善的交互功能，能让商家客服和用户做出详细的交流，客服为用户对改商家的商品答疑解问，进一步促进了商品成交的成交率。

让网购实现更人性化接近化的感觉。

随着网络经济时代的高速发展，互联网已逐步深入人心，大家都热衷与网上购物，网上购物已经基本在12-60岁的人都熟悉的使用，基本实现了人人会网购的情况出现。

信息技术的快速发展，让很多的人都开始采用了网上销售和管理等方式。

网上购物极大的方便了人们的生活状态，现在很多的工作党常年的工作，基本抽不出时间到外面花大量的时间逛实体店寻找自己要的东西来购买，而网上购物则可以轻松解决这种问题，只要一部手机，正常上网则可以百里挑一，轻松便捷的找到合适自己的东西，而且类型齐全，价格方面甚至都比实体店占据了很大的优势。

网上购物对社会的发展有着无比重大的意义，它完全颠覆了以前传统的购物行为与方式，它引领了一个跨时代的进步。

2.2模块设计

2.2.1前端模块

前端模块的设计主要分为页面结构，页面样式，页面功能3大结构。

页面结构主要分为首页，分类，购物车，个人首页4大部分；首页有各种商品展示，又分为流行，新款，精选类商品，选中该商品点击即可进入商品详情页面，在商品详情页，可以点击该商品加入购物车；也可以直接进行购买，可以与客服进行交流，可以进店看看，也可以对该商品进行收藏。

分类页面主要用于展现更为详细的物品分类，包括全身的帽子，衣服，鞋子等等等等，在每一类中还细分为3大类，包括综合，新品和销量，每一样都类型多多；购物车页面则可以看到加入购物车的物品，也可以在这里把该物品移除购物车，或者添加数量，在购物车页面内也可以取消选中某类商品，在下面有一个全选功能，该全选功能在本来已经全部选中的状态下是全部不选中的作用，其他情况均为全部选中，同行内，还有一个合计价格，右侧还有一个取计算的按钮等功能；个人首页则主要用来展示该用户登陆后的个人信息，有未登陆前的页面本身的信息，有登陆成功后该用户的信息，其中包括他的个人余额，优惠劵，积分等信息，还设计了一些小功能，包括一些积分商城，积分可兑换商品，和会员卡等小功能，这些是主要前端模块的设计思想。

2.2.2后端模块

后端模块的设计主要分为三大部分，首先第一部分是收集数据；第二部分则是对后端模块的结构页面的设计；第三部分则是对数据的处理，即主要是对数据的增删改查。

数据的来源主要是使用python爬取蘑菇街的大量信息，把大量信息存入数据库，利用thinkphp5.0对数据做对应方法的增删改查。

收集数据主要采用python对蘑菇街的信息进行爬取，以json的格式进行保存下拉；后端数据库的设计主要是通过下载phpMyadmin，利用它创建数据库，创建对应的数据表做整体数据的存储和管理；数据的处理则是使用TP5框架，利用Sql语句，封装好对应的增删改查方法，对后端数据做出处理。

后端中有管理员身份的功能模块，也有数据处理模块，比如有更改商品价格的功能，有更改对商品信息描述的功能等等，这是设计后端模块的思想。

3详细设计

3.1前端模块设计

3.1.1前端的搭建

前端采用vuecli3.0创建项目:

首先全局下载node.js,node版本大于8.9,然后开始下载全局的npm依赖，可以在dos里使用命令:

npminstall-g@vue/cli,默认下载最新版本,或者在VScode里面的终端里面安装,同样安装完之后可以使用vue-V检测当前安装的版本。

有了这些前提条件之后，我们可以在新建文件下开始创建项目，同样在VScode的终端下使用命令:

vuecreatemy-project-save-dev,包含开发时依赖，测试依赖；创建项目的过程有各种选项选择，各个选项可以使用空格选择，typescript支持使用typescript书写源码，router支持vue-router,

vuex支持vuex;还有各种个人信息可以填写到项目里面,包括作者，邮箱等个人信息，当我们选择好各类选项之后，开始安装直到项目下载完成。

于是我们的vue-cli3.0就已经安装完成，我们还可以补充许多开发时经常用到的文件信息，例如，创建一个assests文件，里面存放一些公共css文件和一些图片img，各种小图标logo，包括封装一些常用的js方法，例如时间的格式化等一些常用的方法；在该文件下通常也会封装该项目所需的大部分组件，有依赖该项目的文件可以放到components/content下,若不存在较强的依赖性，可以独立封装到components/common文件下，该文件夹中的组件均可以直接使用到其他项目中去；我们继续可以创建一个network文件用于发送网络请求的文件，里面封装好发送网络请求的方法，便于我们请求接口的数据；可以创建一个store文件用于对要使用到vuex的功能进行封装；创建一个view用于对各个主页进行统一的存放；可以创建一个vue.config.js文件，在该文件内全局导出一个个文件夹目录的别名，方便项目开发的时候剑神对路径的依赖；到此可以进行前端的开发。

3.1.2前端中各页面的设计

每个页面都使用photoshop把每个页面大致外观描绘出来，通过各种小格局的不断调试，最终完善每个页面的设计。

第一步首先做好PSD，根据自己所画的页面，确定哪些位置将有图片来完成，哪些位置是代码能够完成的，一些动态效果需要用到javascript来实现，这样步步为营，先把准备工作完成，在开始前端的开发。

3.1.3前端中各页面中的小图标的获取

前端页面中涉及很多的小图标，比如首页，分类购物车，分类，我的，和返回按钮等，其中还包括该选项是否处于活跃状态的时候的图标。

而我对这些图标的选择则在阿里巴巴矢量官网库里面选择合适的图标采用svg格式下载到本地使用。

3.1.4前端中导航栏组件的封装与使用

前端的单页面中主要使用组件化的开发思想，为了方便维护，使用地内聚，高耦合的组件化封装，基本实现一个功能一个组件，类似功能则直接导出封装好的组件使用即可。

而其中的导航栏则封装为一个MainTabBar的一个独立组件，其中使用了四个插槽为了分别显示首页，分类，购物车，我的，四个主要页面，其中每个页面都有自己对应的小图标，并且小图标都分别有两种不同的颜色，红色代表处于活跃状态的时候，黑色代表处于非活跃状态的时候。

在这里先配置好路由，在router文件下的index.js文件中，每一个页面跳转都使用路由懒加载的方式，减轻服务器的压力，用于在这4个页面中跳转，其中每一个跳转对应了其中的子组件，其中包括首页-Home.vue;购物车-Cart.vue;分类-Category.vue;我的-Profile.vue,在配置路由时候，每当点击哪里即可跳转至哪里，其路径的方式为history，在此还定义一个redirect重定向主要作用于默认在首页.。

到此为止，主要的4大部分内容即可分好。

3.1.5前端中首页的开发

首页开始首先是顶部的开发，顶部中间显示的是购物车，也是该项目的主要作用，它是一个组件为NavBar.vue，该组件在头部还分为左中右三部分，三部分均用插槽作用，这里使用插槽的主要原因是为头部封装一个独立的组件，该项目封装的组件均设计有默认的样式，可能在其他页面也会被使用到，到时候在直接调用该组件即可；下面则是轮播图，该轮播图也封装成一个独立的组件，其轮播中的图片在调用接口后返回数据，接收到图片使用封装好的组件Scroll.vue开始轮播，其设计原理主要是采用了定时器，每张图的播放时间为2.5秒，点击到图片时，定时器清除，图片停止播放，放开即继续播放，当把其中的图片向左或向右滚动至1/3位置时，即可滑到下一张图片，当我们直接点击其中的轮播图后，则会跳转至该轮播图所在的详情页信息，对应该轮播图携带的主要信息测展示；接下来是一个图片的组件HomeSwiper.vue，该组件内部的图片展示是调用Swiper.vue组件与他的子组件SwiperItem.vue为该组件做一个展示的结果，在整体图片外面包裹一个标签；接下来同样是接口返回的一张图片，作为一个本周流行内容，调用了RecommendVie.vue组件，在点击这张整体图片后会跳转至一个本周流行的商品展示页面，展示的是本周流行的商品详细信息；下面到了三个小分类数据，这里封装了一个TabControl.vue组件，包括其中的流行，新款，精选三种数据的展示，当点击新款则展示新款数据，其他两类也是如此，其中点击其中的一种展示的样式也是不一样的，展示的样式为红色和下划线，而展示的内容包括图片，标题，价格和收藏量，它们用一个GoodsList.vue组件和其子组件GoodsListItem.vue进行展示，它们均为接口返回数据，当用户一直往下来的时候则，流行，新款，精选，三个选项会有一个吸顶效果，持续下拉该三项会停留在购物街的下面位置，而上拉回来的时候又回消失在该位置，当下拉到一定程度时候，右下角会出现一个回到顶部的小箭头按钮，该小按钮也是一个封装好的BackTop.vue的组件，当点击该按钮时则会在200毫秒的时间回到顶部，其中当用户持续下拉找寻更多商品的时候会触发上拉加载更多的时间，继续回调接口返回更多的数据展示，可谓是任君挑选，这样的流程下来后，首页开发完成。

3.1.6前端中BetterScroll的使用

首页中的滚动采用的是BetterScroll作为滚动效果，没有采取JavaScript中的原生的滚动，这是一个开发者已经持续开发和维护中的一个比较好用的插件，该插件的使用方法较为简单便捷，直接在终端输入下载命令即可，然后把BetterScroll组件直接引用进来，在Components里面注册，把需要滚动的部分放到该组件内即可，选择该组件还有一个重要的原因，是因为该组件在下拉或上拉到顶的时候有一个回弹的效果，在移动端中比较适用；betterScroll在使用的过程中存在不少的bug，我们在使用这个组件的时候必须给定滚动内容一个指定高度，不能像原生滚动一样，以文本内容支撑高度，而better-scroll在计算可滚动高度时时在该组件挂载完之后，所以在内容较长，图片较多的页面往往会产生一个滚动滚到一定位置不能继续往下滚的bug，为了解决这个bug，我们必须在之前监听该首页的图片加载完成事件，而在我们监听完这个事件后，我们在开启调用该方法，才能保证该滚动效果没出现类似的bug。

3.1.7前端中的详情页

当点击首页中的某一个商品的时候，它会携带其中的一个iid来到详情页面，根据携带过来的iid显示该商品的详情部分信息在此页面做展示。

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

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

该详情页的导航栏部分则有5大部分，分别是客服、店铺、收藏、加入购物车、购买功能。

其中的客服功能，主要的是卖家于买家的简要沟通，两者可以在此做一些简单的商品方面的询问信息等，该功能由一个Cheap.vue组件完成；店铺信息，就是在同一家店中，找寻该店的其他商品，包括一些类似的商品，这里有GoodsList.vue和其子组件GoodsListItem.vue组件共同完成该功能。

这里的收藏功能的话，在你点击收藏按钮的时候，会把该商品收藏到你的收藏夹里面，在收藏夹中展示的信息与购物车展示的方式一样，同样采用CartList.vue和其子组件CartListItem.vue做一个收藏夹的展示。