安卓开发-网上购物商城开发实战

网上购物商城开发实战
本章将利用Vue框架开发一个网上购物商城系统。该商城主要售卖
的商品为电器，并提供用户的注册和登录功能。商城的商品页包括对
商品的介绍、特色、适用人群的说明，用户可以根据商品的介绍选择
适合自己的商品，进行下单购买、支付操作。该系统设计简洁、易于
操作、代码可读性强。
1 系统功能结构
在设计系统的时候，根据系统的需求添加所需要的功能。因此本
节介绍的数据流图是一种图形化的设计技术，通过数据流图可以清晰
地看到设计的软件中所描绘的信息流和数据流之间的相互转换的过
程。数据流图只需要考虑系统必须完成的基本逻辑功能，完全不用考
虑怎样具体地实现这些功能。
网上购物商城系统的业务流程如图1所示。
图1 网上购物商城系统的业务流程图
系统结构分析
根据系统的业务流程图，在程序的构造过程中，形成了如图2
所示的整体结构。
图2 整体结构图
针对文件中的配置进行如下解释：
（1）build文件是webpack的打包编译配置文件。
（2）config文件夹存放的是一些配置项，比如服务器访问的端口
配置等。
（3）node_modules是安装Node后，用来存放包管理工具的下载安
装包的文件夹。比如webpack、gulp、grunt这些工具。package.json
是项目配置文件。
（4）src为项目主目录。
（5）static为vue项目的静态资源。
（6）index.html整个项目的入口文件，将会引用根组件。
3 系统运行效果
打开“DOS系统”窗口，使用cd命令进入购物商城的系统文件夹
shopping，然后执行“npm run serve”命令，如图3所示。
图3 执行“npm run serve”命令
接着会跳转出如图4所示的页面。
图4 系统成功运行
把网址复制到浏览器地址栏中打开，就能访问到本章开发的网上
购物系统。
4 系统功能模块设计与实现
根据系统需求，本节将对系统中的各个模块进行详细说明，并对
模块的构成和模块中的代码进行分析。
4.1 首页模块
下面展示了在网上商品售卖系统中首页所显示的各种商品的信
息，关于系统的产品说明、最新发布的消息、销售商品的展示。在系
统的左上角有返回首页的标志、右上角有关于新用户的注册和登录，
以及“关于”网站的介绍。左上角的“小房子”是返回首页的按钮，
如图5所示。
图5 系统首页图
程序中登录、注册和“关于”的相关操作的文件是App.vue，核心
代码如下：
具体请看App.vue代码
4.2 首页信息展示模块
下面主要针对首页信息展示模块进行介绍，首页内容主要包括
“全部产品”模块、“热销产品”模块以及产品分类信息展示模块
等，如图6所示。
图6 系统首页信息图
首页信息展示的文件为mock.js，其核心代码如下所示：
4.3 用户登录模块
当用户使用商品购物平台时，首先需要注册、登录，拥有账号之
后进行购买。登录模块如图7所示，单击首页右上角的登录，打开
登录页面，输入已经注册的用户名和密码。输入错误则提示重新进行
输入。
实现登录页面所用到的代码如下所示：
regForm.vue
4.4 商品模块
在首页的信息展示区，可以看到有四类商品的介绍所对应的代码
包，如图8所示，下面选择其中显示器商品的analysis.vue模块进
行说明。
图8 商品模块代码文件图
在首页单击进行购买的按钮后，进入到商品的介绍界面（本节针
对显示器商品模块进行介绍），针对商品给出分类、价格、说明、视
频讲解等多方面的介绍。当用户选择好购买的商品时，可以针对自己
的需求，确定相应的商品类型、产品颜色、售后时间、产品尺寸等信
息后进行购买，如图9所示。
图9 商品介绍图
显示器商品模块的实现文件是analysis.vue，其核心代码如下：
4.5 购买模块
当用户浏览网站选择好自己所要购买的商品并单击“立即购买”
之后，会出现如图10所示的窗口。
购买模块中银行卡支付的代码如下所示：
bankChooser.vue
4.6 支付模块
可以选择多种银行卡的支付方法，单击确认购买之后，会出现
11所示的窗口。提示用户查看自己的支付状态，以确认是否支付成功
还是支付失败。
图11 支付状态图
用户是否支付成功模块的代码，如下所示：
checkOrder.vue
至此，完成了网上购物商城系统的前端开发工作。