毕业设计-使用WEX5移动开发工具制作仿淘宝APP

系统设计的意义

本课题来源于对日常逛超市、购物的生活体验和指导老师的提示。本系统是基于 WeX5的仿淘宝App系统，它商家们提供了一个更广阔的商品推广渠道 ，使商家们通过网站实现商品的在线交易， 进一步扩大市场份额。 通过仿淘宝APP系统的网上交易，不仅给商家带来成本低廉的宣传，推广，销售等好处，还可以帮顾客节约时间，减去出门的烦恼，使顾客可以随时随地了解和掌握商品情况，感受全新的购物体验。

WeX5 简介

WeX5是一款开源免费的快速H5 App开发工具。前端采用H5 + CSS3 + JS标准，使用AMD规范的RequireJS、Bootstrap、jQuery等技术；基于PhoneGap（Cordova）采用混合应用（Hybrid App）开发模式，可以轻松调用手机设备和硬件能力，如相机、地图、LBS定位、指南针、通话录、文件、语音、电池等等；支持多种类型的后端，包括Java、PHP和.NET等，同时也支持云API；提供一键部署，用于将开发的App部署到云服务器CloudX5上。
WeX5的IDE基于Eclipse，提供了一个完全可视化、组件化、拖拽式开发环境，完全所见即所得；向导化和模板化等工具，快速生成常见应用场景界面；代码提示、真机调试，为开发者提供最大方便。

WeX5 的特点

HTML5作为HTML的第五个新版本，符合现代媒介的需要，能支持多设备、跨平台，比如iPad为代表的平板电脑，还有手机，自适应网页设计，充分的照顾到各种浏览媒介的兼容性。
CSS3是CSS的“进阶”，它的定义更为严谨，同时也扩充了一些新的标签和功能，使得网页在视觉的呈现方面更加优良，其主要是增加了视觉的渲染，有些图片效果的视觉，CSS3呈现的与其相差无几。
JavaScript (简称“JS”)是一种轻量级的编程语言和脚本语言，是可插入 HTML 页面的编程代码，可由所有的现代浏览器执行，可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备，在世界上广泛流行。
WeX5开发框架，只要会HTML、JS、CSS、Java或PHP或.NET就可以使用来开发App。WeX5遵循Apache开源协议，完全开源免费，上百个组件框架，全部开放，WeX5一直坚持采用H5+CSS3+JS标准技术，一次开发，多端任意部署，确保开发者成果始终通用、不受限制。同时开发出的应用具有良好的用户体验。WeX5的可视化开发，坚持为开发者提供良好开发体验，拖拽式页面设计，易学易用。提供CloudX5一键自动化云部署，简化复杂部署过程，轻松部署到互联网。

WeX5的下载与安装

下载

从官网http://www.wex5.com/downloads/下载WeX5，因为WeX5分为Windows版本和Mac版本，用于安装在Windows系统上和Mac OS系统上。Windows版本可以生成安卓App，Mac版本可以生成安卓App和IOS App。所以这要看使用者的需求，一般都是Windows系统，选择下载最新的WeX5_V3.8.zip压缩包。

安装

WeX5是绿色免安装的，解压即可直接使用。注意：不能解压到含中文、空格和特殊字符的目录下，例如：Program Files，是不可以的，因为包含空格。(解压后的目录如下图2-2所示)
启动
由于WeX5自带MySQL 数据库和Tomcat，所以不需要自己安装。安装后根目录下有以下几个批处理：

1. 启动Chrome浏览器.bat；
   平台版本内置Chrome浏览器，且已经将开发过程中经常用的调试访问链接进行收藏，便于开发者直接使用。
2. 启动MySQL数据库.bat；
   平台版本内置MySQL数据库，版本是5.6.26，默认端口号3306。如果你本机有安装MySQL，需要修改MySQL数据库的端口，否则就会冲突。
3. 启动MySQL管理工具.bat；
   启动版本中MySQL的管理工具。
4. 启动WeX5开发工具.bat
   运行进入开发环境。
5. 启动WeX5运行平台（调试模式）.bat；
   以调试模式启动X5自带的Tomcat服务，适用与开发阶段。
6. 启动WeX5运行平台.bat；
7. 启动X5自带的Tomcat服务（结束服务按Ctrl+C键）。
   第一次运行开发工具，会弹出“CloudX5 登录”对话框，成为CloudX5 云用户，可以进行一键云部署。可以先关闭这个对话框，以后再注册。开发工具运行效果如图 2-3 所示。
   

需求分析

仿淘宝App系统的业务流程图如图3-1 所示。

数据流程分析

在分析完业务流程后，就要进行分析系统的数据流，为后面的设计系统数据库打下坚实的基础。这里主要用数据流图来说明数据加工过程。数据流图是从数据传递和加工角度，以图形的方式来表达系统的逻辑功能、数据在系统内部的逻辑流向和逻辑变换过程。它描述的是系统的逻辑模型，以直观的形式描述系统的数据的流动与数据的变化，因此被广泛使用在软件工程的实践中。

根据用户的业务流程分析，用户浏览所用到的数据归纳为商品信息，如商品信息、用户信息等，而用户提交订单作为系统的订单数据使数据库的内容进行添加、更新、删除等操作。系统数据流的总体图如图3-2所示。

图3-2 系统数据流的总体图
进一步分析数据流程之后，得到如图3-3所示。

图3-3 系统数据流图

数据库的设计首先要选择一个已有的数据库管理系统，一般常见的有 MYSQL，SQL Server, Oracle 等。因为WeX5自带MYSQL 数据库管理系统，所以为了方便，不用再次下载安装，我采用了MYSQL 数据库， 建立的数据库名为 lldb01。
3.4 设计目标
设计的目标是实现一个功能较为强大的仿淘宝App系统，该系统能够实现用户简便的商品寻找和查看， 购物篮式的商品选购，收银台统一结算，用户签到送积分等功能。
仿淘宝App主要实现如下目标:
（1） 采用跨端移动开发框架，实现了一次开发，多端（iOS、安卓、微信和浏览器）运行；
（2） 系统页面设计充分考虑到用户使用的方便,界面友好，十分人性化；
（3） 信息发布,方式多样；
（4） 实现商品分品牌、分类型查询以及商品按照价格进行升降排序；
（5） 为用户提供签到送积分活动。
（6） 用户可随时查询自己的个人信息和修改。
（7） 会员可随时查询自己的订购记录。
系统页面结构图如下图 3-4 所示。

从系统功能结构图中可以知道，仿淘宝App系统主要包括商品展示首页，签到页、分类页、搜索页、商品列表页、商品详细页、订单详细页 这7个页面。
功能模块设计
功能模块结构就是把一个很复杂的系统分解为若干个子系统，再划过为多个功能较单一的模块。这种模块化的设计思想，一方面，各个模块具有相对独立性，可以分别加以设计实现，提高了开发工作的效率。另一方面，模块之间的相互关系 (如信息交换、调用关系等)，则通过其他的方式予以实现。各模块在这些关系的约束作用下共同构成了统一的整体，完成系统的各项功能，增大了系统的可维护性。
仿淘宝App系统的功能结构如图4-1 所示。

图 4-1仿淘宝App系统的功能结构
系统模块主要为使用此系统的用户提供商品和服务信息，选择商品下单，填写用户信息后提交订单的服务。因此我们将系统分成首页管理模块，购物车管理模块，订单管理模块，个人资料管理模块，签到管理模块。下面详细说明这五个模块的具体功能设计：

1. 首页管理模块：门户入口，实现用户浏览、搜索商品信息和进入搜索页、分类页等其他的页面功能。
2. 购物车管理模块: 在实际生活中，我们在超市购物，可以将自己的需要物品放进购物车(篮) 中。而在网上虚拟的世界中购物商品，一般会模拟现实生活场景而采用一种被称做“购物车”的功能。 它不仅可以实现随时添加商品，查看商品信息，修改商品数量，清空购物车中的商品，还可以随时进行付款结账下单。
3. 订单管理模块: 登陆用户可以查询出所有已完成的订单并查看详细内容和进行再次购买。
4. 个人资料管理模块:用户第一次登陆时需填写基本资料进行保存后也可对个人的注册信息进行修改。
5. 签到管理模块: 用户可以参加每日签到送积分活动，增加了用户使用系统的次数。
   因此，各个子模块的内容设计好后，设计好如何将各个模块进行连接就构成了一个结构合理的系统了。除了在首页中建立面向其他模块的连接外，
   其他模块也应该建立返回首页的连接，另外各个模块也应该相互连接。

数据库的设计

在进行完功能模块的设计后，就开始进行数据库设计。数据库作为数据库应用的重要组成部分，设计一个结构合理的数据库是非常有必要的。
数据库的设计是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统，使之能够有效地存储数据。[5]数据库设计的基本步骤：

1.需求分析阶段：根据客户的要求，进行需求分析（业务和数据处理），这是整个设计中最基础的部分，同时也是最困难、最耗费时间的一个阶段；
2.概念结构设计阶段：对用户需求进行归纳与抽象，设计出数据库的E-R模型图；
3.逻辑结构设计阶段：将E-R图转换为数据库中的表进行逻辑设计,并应用数据库设计的三大范式进行审核；
4.数据库物理设计阶段：为逻辑数据模型选取一个最适合应用环境的物理结构(包括存储结构和存取方法)；
5.数据库实施阶段：运用DBMS提供的数据语言、工具及宿主语言，根据逻辑设计和物理设计的结果建立数据库，编制与调试应用程序，组织数据入库，并进行试运行；
6.数据库运行和维护阶段：数据库应用系统经过试运行后即可投入正式运行并在数据库系统运行过程中必须不断地对其进行调整与修改。[6]
4.3.1 E-R图
E-R（Entity-Relationship Approach）方法是“实体-联系方法”的简写。它是描述现实世界概念结构模型的有效方法，是表示概念模型的一种方式。这种数据模型主要是用在信息系统设计的第一阶段，比如它们在需求分析阶段用来描述信息需求或者要存储在数据库中的信息的类型。但是数据建模技术可以用来描述特定论域(就是感兴趣的区域)的任何本体(就是对使用的术语和它们的联系的概述和分类)。在基于数据库的信息系统设计的情况下，在后面的阶段(通常叫做逻辑设计)，概念模型要映射到逻辑模型如关系模型上；它依次要在物理设计期间映射到物理模型上。[7]

1. t_productdata (商品基本信息表) 的实体图
   
   图 4-2 t_productdata (商品基本信息表) 的实体图

2. t_user(用户信息表) 的实体图
   
   图 4-3 t_user(用户信息表) 的实体图

3. t_shoppingcart（购物车表）的实体图
   
   图 4-4 t_shoppingcart（购物车表）的实体图

4. t_orders (订单表) 的实体图
   
   图 4-5 t_orders (订单表) 的实体图

5. oa_carousel_picture(图片表) 的实体图
   

图 4-6 oa_carousel_picture(图片表) 的实体图

1. oa_sign(每日积分表) 的实体图
   
   图 4-7 oa_sign(每日积分表) 的实体图

2. oa_sign_sum(总积分表) 的实体图
   
   图 4-8 oa_sign_sum(总积分表) 的实体图

3. 总体E-R图
   
   图 4-9 总体E-R图
   4.3.2 基本表设计
   上面的一切分析的最终目的就是表的设计，根据用户的功能模块分析和E-R图分析，系统中有商品信息、用户信息、购物车信息、订单信息、图片信息、每日积分信息、总积分信息，下面为表进行数据库设计：

4. t_productdata (商品基本信息表)
   主要用于储存商品的一些基本信息，如名称、类型、品牌、价格。该表的结构如表 4-10 所示。
   列 名 说 明 类 型 ( 长 度 ) 备 注
   ProId key Varchar (10) 不允许空,主键
   ProCode 物品 id Varchar (20) 允许为空
   ProName 商品名称 Varchar (50) 允许为空
   Type 类型 Varchar (50) 允许为空
   ProKind 品牌 Varchar (50) 允许为空
   Price 价格 Double 允许为空
   OnSale 是否推荐 Tinyint（4） 允许为空
   ProRemark 商品介绍 Varchar (255) 允许为空
   ProLink 图片路径 Varchar (255) 允许为空
   表 4-10 t_productdata (商品基本信息表)

5. t_user(用户信息表)
   主要用于储存用户信息，该表的结构如表 4-11所示。
   字 段 说 明 类型(长度) 备注
   fID Key Int(11) 不允许空,主键
   fOpenID 用户id Varchar(50) 不允许为空
   fNickName 用户昵称 Varchar(50) 允许为空
   fPhoneNumber 联系电话 Varchar(20) 允许为空
   fContact 联系人 Varchar(50) 允许为空
   fPartnerName 客户名称 Varchar(50) 允许为空
   fHeadImgURL 图片路径 Varchar(200) 允许为空
   fPartnerCode 客户代号 Varchar(50) 允许为空
   fAddress 送货地址 Varchar(200) 允许为空
   fPartnerLevel 客户级别 Varchar(100) 允许为空

表 4-11 t_user(用户信息表)
3. t_shoppingcart（购物车表）
主要用于储存用户购物车中的信息，该表的结构如表 4-12所示。
字 段 说 明 类型(长度) 备注
fID Key Int(11) 不允许空,主键
fUserID 用户id Int(11) 不允许为空
ProId 商品id Varchar(50) 允许为空
ProName 商品名称 Varchar(50) 允许为空
fPrice 价格 Float 允许为空
fCount 数量 Int（11） 允许为空
UnitName 单位 Varchar(50) 允许为空

表 4-12 t_shoppingcart（购物车表）
4. t_orders (订单表)
主要用于储存用户购买的记录，该表的结构如表 4-13 所示。
字 段 说 明 类型(长度) 备注
fOrderID Key Int(11) 主键，不允许空
fAppOrderID 订单编号 Varchar(50) 允许为空
fCreateTime 下单时间 Datetime 允许为空
fSum 订单金额 decimal 允许为空
fUserID 用户id Varchar(50) 允许为空
fUserName 用户名称 Varchar(50) 允许为空
fPhoneNumber 电话 Varchar(20) 允许为空
fAddress 地址 Varchar(200) 允许为空
fState 订单状态 Varchar(50) 允许为空

表 4-13 t_orders (订单表)
5. oa_carousel_picture(图片表)
主要用于储存首页图片信息，该表的结构如表 4-14 所示。
字 段 说 明 类型(长度) 备注
id Key Int(11) 主键，不允许空
fImgUrl 图片名称 Varchar(500) 允许为空
fUrl 跳转页面 Varchar(500) 允许为空
Key 分类 Varchar(500) 允许为空
Type 关键字 Varchar(500) 允许为空

表 4-14 oa_carousel_picture(图片表)

1. oa_sign(每日积分表)
   主要用于储存用户每日签到获得的积分信息，该表的结构如表 4-15 所示。
   字 段 说 明 类型(长度) 备注
   fID Key Varchar(100) 主键，不允许空
   fPersonID 用户id
   Varchar(100) 允许为空
   fPersonName 用户名称
   Varchar(500) 允许为空
   fSignTime 签到时间
   Datetime 允许为空
   fScore 每日积分
   Int(20) 允许为空

图 4-15 oa_sign(每日积分表)

1. oa_sign_sum(总积分表)
   主要用于储存用户签到获得的总积分信息，该表的结构如表 4-16所示。

字 段 说 明 类型(长度) 备注
personId 用户id
Varchar(50) 不允许空
personName 用户名称
Varchar(50) 允许为空
sumScore 用户id
Int(50) 允许为空

图 4-16 oa_sign_sum(总积分表)
4.4 数据库的连接
在本系统中，自带MYSQL数据库，所以不需要再次安装，只要启动软件，右上角的导航栏默认有Studio和“数据库”，单击Studio切换到“模型资源”透视图，单击“数据库”切换到“数据库视图”，就能了解所创建的数据库。
连接数据库操作步骤为：“窗口-首选项——stdio配置——数据源”，打开如图4-6 所示，点击“增加”按钮添加数据源，填写“数据源类型”“数据源名称”“数据库类型”“驱动类名”“用户名”“密码”“数据库名称”等信息后，点击“测试连接”，显示“测试连接成功”表示已经连接好数据库。

图 4-6 连接数据库配置

因此，在本系统后端Bass文件中对数据库连接的步骤为：
打开“Baas\ylsoft\db.config.m”文件，如图4-7所示，勾选所需要的数据源，保存文件，数据库连接就完成了；

图 4-7 添加数据源

系统实现

在上一章重点分析了系统的各个模块功能的设计，并详细分析了每个模块的功能。本章将具体讨论如何实现功能模块并最终实现整个系统。经过这个阶段的设计，对目标系统的描述翻译成H5+CSS3+JS网页语言程序。

5.1 总体框架
本仿淘宝App系统的功能模块构架如图 5-1 所示。

图 5-1 功能模块构架
5.1.1 首页模块
当用户进入网站时，首先出现的是本系统的操作门户即“首页”，包括系统前台用户的基本功能菜单，界面美观。首页主要有以下几个部分：

1. 图片轮换：显示商家的活动图片；

2. 用户注册：用户第一次登陆需填写基本资料进行保存后也可对个人的注册信息进行修改；

3. 商品搜索：用户通过关键字进行搜索商品然后显示在页面中；

4. 页面入口：进行分类页、签到页、订单页、用户信息页；

5. 热门推荐：显示热门商品；
   仿淘宝App系统首页的运行效果如图 5-2 所示。
   
   图 5-2 仿淘宝App系统首页
   5.1.1.1 搜索过滤商品功能
   快速过滤商品，点击首页标题部分，进入搜索页面，页面运行效果如图 5-3
   所示。
   
   图 5-3 搜索页
   用户通过在搜索页面标题部分输入关键字和通过点击显示历史记录的list获取想要商品的关键字进行搜索，用户搜索商品流程图如图5-4 所示。
   i. 通过在搜索页面标题部分输入关键字，关键代码如下:
   a. 前端js代码：
   Model.prototype.keyInputFocus = function(event){
   /1、搜索框获取焦点事件2、显示词库列表/
   this.comp(“keyInput”).val("");
   };
   ii. 通过点击显示历史记录的list获取关键字搜索，关键代码如下:
   b. 前端js代码：
   //打开列表页
   Model.prototype.liClick = function(event){
   /1、列表点击事件2、打开列表页并传参数/
   var searchKeyData=this.comp(“searchKeyData”);
   justep.Shell.showPage(“class”,{
   “keyValue” : searchKeyData.getValue(“key”),
   “personid” : this.params.personid,

    "fPartnerCode":this.params.fPartnerCode,"PriceKindName":this.params.PriceKindName,
   });
   

   };
   
   图5-4用户搜索商品流程图
   （1） 商品列表
   从搜索页或分类页传递过来的关键字过滤出用户想要的商品信息，将关键字在商品列表页的标题部分显示，商品信息以“卡片”的风格在商品列表页的中部显示。商品列表页面运行效果如图 5-5所示。
   
   图 5-5 商品列表页

i. 价格排序功能
点击“价格升序”按钮商品按照价格从小到大排列，点击“价格降序”按钮商品按照价格从大到小排列，关键代码如下:
a. 前端js代码：
//价格升序
Model.prototype.sortingBtnClick = function(event) {
justep.Baas.sendRequest({
“url” : “/ylsoft/logistics”,
“action” : “getPro”,
“async” : false,
“params” : {
“dbsource” : dbset,
“prokey” : prokey,
“bandkey” : bandkey,
“keyValue” : valuekey,
“fPartnerCode” : fPartnerCode,
“PriceKindName” : PriceKindName,
“arg” : “true”,
“price1” : val1,
“price2” : val2,
“spect” : sfter
},
“success” : function(data) {
foodData.loadData(data);
}
});
};
//价格降序
Model.prototype.descClick = function(event) {
justep.Baas.sendRequest({
“url” : “/ylsoft/logistics”,
“action” : “getPro”,
“async” : false,
“params” : {
“dbsource” : dbset,
“prokey” : prokey,
“bandkey” : bandkey,
“keyValue” : valuekey,
“fPartnerCode” : fPartnerCode,
“PriceKindName” : PriceKindName,
“arg” : “false”,
“price1” : val1,
“price2” : val2,
“spect” : sfter
},
“success” : function(data) {
foodData.loadData(data);
}
});
};

自定义筛选功能
用户点击“筛选”按钮弹出一个遮罩popover就可以将页面的局部或全部遮盖起来并可以设置遮罩显示的位置、设置遮罩的透明度、设置在遮罩上显示的内容，运行效果如图5-6所示。

图 5-6 自定义筛选运行效果

用户可以根据价格范围、单位、类别来进一步过滤出满意的商品，在遮罩的非显示区任意点击就可以关闭遮罩，关键代码如下:
a. 前端js代码：
Model.prototype.screeningBtnClick = function(event) {
val1 = classData.val(“price1”);
val2 = classData.val(“price2”);
sfter = “”;
specData.each(function(options) {
var row = options.row;
if (row.val(‘fstate’) === “1”) {
if (sfter.length === 0) {
sfter = “’” + row.val(“spec”) + “’”;
} else {
sfter = sfter + “,” + “’” + row.val(“spec”) + “’”;
}
}
});
if ((this.comp("screeningPopOver").(this.comp("screeningPopOver").(this.comp("screeningPopOver").domNode).css(“display”) == “block”) {
justep.Baas.sendRequest({
“url” : “/ylsoft/logistics”,
“action” : “getPro”,
“async” : false,
“params” : {
“dbsource” : dbset,
“prokey” : prokey,
“bandkey” : bandkey,
“keyValue” : valuekey,
“fPartnerCode” : fPartnerCode,
“PriceKindName” : PriceKindName,
“price1” : val1,
“price2” : val2,
“spect” : sfter
},
“success” : function(data) {
foodData.loadData(data);
}
});
//实现遮罩的显隐
this.comp(“screeningPopOver”).hide();
} else {
this.comp(“screeningPopOver”).show();
}
if ((this.comp("sortingPopOver").(this.comp("sortingPopOver").(this.comp("sortingPopOver").domNode).css(“display”) == “block”) {
this.comp(“sortingPopOver”).hide();
} else {
this.comp(“sortingPopOver”).show();
}
};
列表切换功能
在商品列表页中以两种方式展现商品列表，一种是单列列表，一种是双列列表。单列列表中的商品图片比双列列表中的图片小，但是一屏显示的商品数量比双列列表显示的商品数量多。单击图标实现单列列表还是双列列表的切换，这样处理使用户体验更好。双列列表显示效果如图 5-7 所示。

图 5-7 双列列表运行效果
进入商品详细页功能
想查看哪个商品的详细就点击商品卡片区域就能进入该商品的详细页。
（2） 商品详细页
显示商品图片、规格、价格、简单介绍等信息，运行效果如图5-8所示；

图 5-8 商品详细页
选择单位功能
用户点击“选择单位”按钮会在页面下方弹出一个遮罩popover，可以选择商品的单位，运行效果如图5-9所示。

图 5-9 选择单位运行效果

（3）进入商品分类页功能
点击“分类”图标进入分类页，运行效果如图5-10所示：

图 5-10 商品分类页

分类页可以按照商品品牌和商品类型两种方式进行商品的过滤，增加了用户的选择性。

热门推荐 显示的是热门商品列表

单击商品卡片进入商品详细页，同商品列表页的进入商品详细页功能。

图片轮换

不断播放商家活动图片，吸引用户进入，购买商品。实现方法是先预置一张图片，用于快速显示，再从服务端获取新的图片，动态增加到carousel中。关键代码为：
a. 前端js代码：
Model.prototype.addCarousel = function() {
var carousel = this.comp(“carousel1”);
this.comp(“imgData”).each(function(obj) {
var fImgUrl = require.toUrl(obj.row.val(“fImgUrl”));
var fUrl = require.toUrl(obj.row.val(“fUrl”));
key = obj.row.val(“Key”);
type = obj.row.val(“Type”);
if (obj.index === 0) {
localStorage.setItem(“index_BannerImg_src”, fImgUrl);
localStorage.setItem(“index_BannerImg_url”, fUrl);
localStorage.setItem(“index_BannerImg_bind-click”, “openPageClick”);
$(carousel.domNode).find(“img”).eq(obj.index).attr({
“src” : fImgUrl,
“pagename” : fUrl,
“bind-click” : “openPageClick”,
“Key” : key,
“Type” : type
});
} else {
carousel.add(’’);
}
});
};

用户通过点击图片进入商品列表页，它通过oa_carousel_picture表获取过滤条件，将符合条件的商品显示在商品列表页。

用户管理模块

(1) 用户注册
当用户首次登录时系统会要求用户填写基本信息,对用户进行注册。当用户再次打开软件时会判断是否已注册，否则会跳转到“我的”页面，进行信息完善，如图 5-11 所示 。

图 5-11 用户注册页面
在 “我的”页面用户可以输入客户代号，获取到客户名称和客户级别，不同的客户级别所对应的商品价格不同。在提交表单后需要对数据表中的数据进行查询，如果没有找到，则在t_user数据表中新增一条数据，否则就更新该用户的信息。用户信息保存流程图如图5-12 所示。

图5-12用户信息模块流程图

5.1.3 购物车模块
购物车模块中包含查看购物车页面、加入购物车、清空购物车、下单生成订单这四个功能。

1. 查看购物车页面
   为了使用户能随时了解购物情况，可以在首页点击购物车图标，可以将用户所选择放入购物车的商品信息显示出来。 查看购物车页面运行效果如下图 5-13所示。
   
   图 5-13 购物车页
   在系统中使用的是output组件来显示用户购买的商品数量，所以用户不可以通过修改文本框中的值来改变想要购买的数量，只能通过单击“-”“+”按钮来修改；如果要删除某样物品，可以使数量文本框中的值为“0”来实现。
2. 加入购物车功能
   加入购物车就是把用户选中的商品添加到购物车页面中。当用户在商品展示页或商品详细页中单击“加入购物车”按钮时，系统会将该商品的一些重要信息在购物车页中显示，关键代码如下:
   a. 前端js代码：
   Model.prototype.addCartBtnClick = function(event) {
   var row = event.bindingContext.$object;
   justep.Baas.sendRequest({
   “url” : “/ylsoft/logistics”,
   “action” : “savePro”,
   “async” : false,
   “params” : {
   “dbsource” : dbset,
   “personid” : personId,
   “ProId” : row.val(“ProId”),
   “ProName” : row.val(“ProName”),
   “UnitName” : row.val(“UnitName”),
   “fPrice” : row.val(“fPrice”),
   “fCount” : 1,
   },
   “success” : function(data) {
   if (data.result == “True”) {
   justep.Util.hint(“已成功加入购物车！”);
   }
   }
   });
   };
   b. 后端java代码：
   public static JSONObject savePro(JSONObject params, ActionContext context) throws SQLException, NamingException {
   String DATASOURCE = params.getString(“dbsource”);
   Connection conn = context.getConnection(DATASOURCE);
   String fPersonID = params.getString(“personid”);
   String fProId = params.getString(“ProId”);
   String fpersonName = params.getString(“ProName”);
   String fUnitName = params.getString(“UnitName”);
   String fPrice = params.getString(“fPrice”);
   JSONObject ret = new JSONObject();
   String sql = “select COUNT(fCount) from t_shoppingcart where fUserID = '” + fPersonID + “’” + " and ProId = ‘" + fProId + "’"+ " and UnitName = ‘" + fUnitName + "’";
   java.sql.PreparedStatement pstmt = null;
   int count = Integer.parseInt(DataUtils.getValueBySQL(conn, sql, null).toString());
   if (count == 0) {
   pstmt = conn.prepareStatement(“INSERT INTO t_shoppingcart (fID,fUserID,ProId,ProName,UnitName,fPrice,fCount) VALUES(NULL,?,?,?,?,?,‘1’)”);
   pstmt.setString(1, fPersonID);
   pstmt.setString(2, fProId);
   pstmt.setString(3, fpersonName);
   pstmt.setString(4, fUnitName);
   pstmt.setString(5, fPrice);
   } else {
   pstmt = conn.prepareStatement(“UPDATE t_shoppingcart set fCount=fCount+1 WHERE fUserID = '” + fPersonID + “’” + " and ProId = ‘" + fProId + "’");
   }
   if (pstmt.execute()) {
   ret.put(“result”, “False”);
   } else {
   ret.put(“result”, “True”);
   }
   return ret;
   }

3） 清空购物车功能
清空购物车是指当用户不需要购物车中的商品时，点击“清空购物车” 按钮就可以继续购物。清空购物车的方法只需要将cartdata（因为WeX5是使用data组件来存储数据的）中存储的数据清空即可.
4） 付款生成订单功能
仿淘宝App的最终目的下单付款生成订单，其他的功能的实现都是为了最后生成一个让用户满意的订单服务。当用户确认不再改变对购物车中的商品修改后，就可以在下方填写联系人、联系电话、送货地址信息后，点击“下单”按钮完成付款生成订单。生成订单的流程是: 从判断联系人、联系电话、送货地址信息信息是否填写，然后生成一个唯一的订单号，最后把购物车中所保存的商品id，商品名称，数量，价格，写入数据库中形成一个完整的订单信息。此时购物车会清空，用户可以继续购物而不用担心会重复购物。
购物车模块流程图如图5-14所示。

图 5-14 购物车模块流程图

5.1.4 订单模块
用户完成下单付款后，会跳转进入订单页面，查看到已完成的订单信息。订单页面运行效果如图 5-15 所示。

图 5-15 订单页

1. 查看订单详细功能
   订单详细每笔订单具体购买的商品名称、单位、数量、价格等信息，相当于还原了之前生成这笔订单的购物车页。在订单页面中单击“详细”按钮，就能进入订单详细页，查看订单的详细信息，订单详细页面运行效果如下图 5-16 所示。
   
   图 5-16 订单详细页

它的实现方法非常简单，只需要通过订单编号在t_orders_dtl表中过滤出对应的记录即可。
2) 再次购买功能
再次购买是为了方便用户想再次购买以前同样的商品的快捷方式，点击“再次购买”按钮后，该订单数据就会重新添加到cartdata数据中。
订单模块流程图如图5-17所示。

图5-17订单模块流程图

5.1.5 签到模块
签到是为了增进用户进入App的次数而增加的一个功能。用户通过每日签到来抽取积分，当用户的积分累积到一定数量时就可以兑换礼品(目前兑换礼品活动没有开始)。用户通过首页点击签到图标进入签到页面，签到页面运行效果如下图 5-18 所示。

图 5-18 签到页
签到模块流程图如图5-19所示。

图5-19签到模块流程图

第6章 系统调试与测试
6.1 程序调试与测试的意义
不管我们前期的需求分析多充分，模块设计多完美，功能的实现方法多清楚，在系统正式开发的过程中，必然会产生一些错误。有可能是简单的语句的语法错误，这种会在开发平台中程序自动提示，及时纠正就好。所以，这类错误就是比较容易被发现和纠正；还有另一类错误是在程序执行时由于一些逻辑错误或者不正确的操作导致的错误，这类错误一般隐蔽性比较强，不能马上看出是哪里出错，有时甚至是要在特定的条件下才会出现，这就需要我们一步步地对程序进行调试，慢慢排查找到出错的地方。
如何来判断一款已经完成的软件的质量的重要手段，就是通过不断反复的测试来实现的。目前，软件工程界提出了一个新的观点，就是软件的生命周期的每个阶段都应该包含测试。测试的目的就是尽可能早的发现错误并加以修正或者检验本阶段是否完成了预期的目标，如何不在开始就进行测试，有可能导致最后软件完成工作功亏一篑。

6.1.1 测试的重要性及目的

（1）测试的重要性
其实，对于软件开发来说，不管使用多么先进的技术和多么优良的算法，它任然会有错误，就像你不可能在世界上找到一个从来没有犯错的人。采用先进的开发方式、新的开发语言、完善的开发过程，是可以减少错误的发生，但是不可能杜绝软件中的错误的发生，因此，这些错误需要测试来找出并且需要估计软件中的错误密度。软件测试在软件开发中占据重要的地位，自有程序设计的那天起测试就一直陪伴着它。数据表明，在典型的软件开发项目过程中，软件测试工作量往往是软件开发总工作量的40％以上，而用在测试上的开销要占软件开发总成本的30％-50％，如果将维护阶段的成本也考虑在内的话，测试的成本占整个软件生存期的比例也许会降低，但实际上软件的维护工作就相当于对软件的二次开发，乃至多次开发，这其中必定还有许多测试工作需要完成。
（2）测试的目的
如果你认为软件测试的唯一目的就是发现错误，查找不出错误的测试就是没有价值的话，那么测试就应该直接针对软件比较复杂的部分或是以前出错比较多
的位置。其实事实并非如此，进行软件测试并不仅仅是为了要找出错误，而是通过分析错误产生的原因和错误的分布的特征，发现当前所设计的软件开发过程的缺陷，方便项目的管理者进行改进。同时，这种分析也能帮助我们设计出更具有针对性地测试方法，来改善测试的效率。最后，没有发现问题的测试也是有意义的，因为完整的测试也是评定测试质量的一种方法。[8]
6.2 程序的测试
6.2.1 测试的步骤

为了使测试更有效、快速、全面，软件测试是按照一定的步骤来进行，从逻辑上来说前一个步骤是为后面打下坚实的基础。因此，测试一般都拥有以下几个步骤：

1. 进行程序测试 ，排除代码的语法错误，使程序能够运行起来；
2. 对相应的模块进行功能测试，与预先的设想比较，是否达到开发要求、设计所描述的功能和用户的需求；
3. 使用实际数据测试数据库操作包括数据的输入输出、查询、修改、删除是否满足要求，来验证数据库是否合理；
   软件经过以上测试步骤后，基本可以满足开发的要求，就可以宣告结束测试了。

6.2.2 测试实例

1. 界面测试实例：

1. 打开页面后，页面的布局是否合理，显示是否完整；
   测试结果：经过多次在不同的浏览器，手机，微信等平台的反复测试，页面的组件全部显示完整，布局合理。
2. 打开页面后，页面的数据显示是否正常；
   测试结果：页面打开1-3秒后，数据加载完成，能正常显示；
3. 首页上的图片是否会轮换；
   测试结果：图片轮换正常；

1. 功能测试：

1. 所有页面链接功能正常，可以点击到正确页面；

2. 从商品信息页面添加的商品能显示在购物车中；

3. 若未登录，点击购物车，则跳转到用户信息页；

4. 购物车页面中，可以对添加的商品数量的修改，并自动保存成功；

5. 订单页可以显示出所有已完成的订单，查看具体的商品信息并再次购买；

6. 用户信息页能查找和修改用户信息；
   测试结果：以上功能都以完全实现；

1. 性能测试：
   从首页跳转到其他页面要多久；
2. 兼容测试：
   不同浏览器上的测试功能是否正常；

总结

经过测试运行实践证明，仿淘宝App系统的界面友好、操作简单、功能齐全、支持多端访问方式，已基本具备了成熟的技术理论，但是 由于本次设计由我个人完成所以我参考了很多网上购物系统的例子，吸取了一些别的本系统的长处，对设计进行了完善。

不足之处

我设计的图形界面比较简单，也只是对基本功能进行了开发；数据库的设计稍微复杂了一些，页面存取数据不单单关联一张表，也有多表关联或通过方法计算数据；另外支付功能没有开通。

使用WEX5移动开发工具制作仿淘宝APP相关推荐

1. 手机移动开发大作业 -- 仿淘宝app

   前言 :   本次大作业因为时间不充裕,所以只做了一部分功能. PS : 购物车因为没有用数据库存商品,所以有bug.                     项目代码: 有空再上传吧...

2. html网页制作——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业C71

   HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人. ...

3. vue2移动端仿淘宝APP省市区街道四级地区选择器

   前言 : 这个选择器的的界面有使用到vant作为样式的编写,之后有时间会写一个完全无任何依赖的出来,作为以后组件库的使用. 最近写一个商城项目时,地区选择器上设计图上是这样的 总觉得好眼熟,但是又想不 ...

4. 淘宝APP数据如何获取

   随着中国互联网的快速发展,淘宝APP已成为了人们购物必备的应用程序之一.作为中国最大的在线购物平台之一,淘宝APP每天都会生成海量的交易数据,这些数据对分析消费者行为.预测市场趋势和优化商家运营都非常 ...

5. 仿淘宝商品放大展示效果制作（放大镜效果）

   如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...

6. 订单系统开发(仿淘宝和美团网) 之 项目总结(降低数据库并发量)

   原文:订单系统开发(仿淘宝和美团网) 之 项目总结(降低数据库并发量) 继上一篇"订单系统开发(仿淘宝和美团网) 之 项目总结(一)",这篇博客重点想说下订单系统开发的设计和有待优 ...

7. wex5分享之----仿淘宝楼层展示(灵活布局)

   在我研究仿淘宝过程中,发现panel是死的,无法根据接口传入的字段改变布局样式,而我却需要制作这样的功能.根据后台传入的数据,改变布局.当时首先想的是引入w文件,但是不行啊,引入的文件还是无法迭代出不 ...

8. HTML5期末大作业：仿淘宝电商网站设计——仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业

   HTML5期末大作业:仿淘宝电商网站设计--仿淘宝电商管理系统(21页)含论文 HTML+CSS+JavaScript 学生DW网页设计作业成品 大学生网页制作期末作业 常见网页设计作业题材有 个人. ...

9. [转] JavaScript仿淘宝智能浮动

   转载自: http://www.williamlong.info/archives/2864.html 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动 ...

最新文章

1. 在.NET中实现彩色光标，动画光标和自定义光标
2. Windows Batch [精华]
3. 速卖通现在好做吗?深耕产品供应，优化售后发货才能走的更远
4. 上海oracle办公地址_筑梦之星上海共享办公基地为什么受到市场追捧？
5. RestQL：现代化的 API 开发方式
6. 开源社交系统java_JAVA 开源 SNS 社交系统 JEESNS V0.8 发布
7. android module 加载.so,关于Android Studio主Module与依赖Module同时引入so库的问题
8. MySQL在其版本迭代后Online DDL功能发生了哪些变化？
9. python元组的定义方式_学习Python元组，有哪些必须要掌握的内容
10. linux 显示套接字统计信息,Linux 命令 - ss: 查看套接字统计信息
11. 记一次使用eclemma的蛋疼的测试经历
12. sql查询前50条_您必须知道的前50条SQL查询
13. php公众号失物招领系统,【服务】微信公众平台『失物招领』功能上线
14. C语言里程序编译无误但运行会弹出程序已停止运行是为什么？
15. u12无线网卡linux驱动装不上,ubutu16.04 安装Tenda u12无线网卡驱动
16. 网络安全——流量分析
17. 万王之王手游服务器维护,万王之王手游-KOK-官方网站-腾讯游戏-一个世界的重新开启...
18. 杭电 1242 Rescue
19. java版怎么上hypixel,来场速建吧!Hypixel入驻《我的世界》中国版
20. windows10系统还原

热门文章

1. mysql performance tuning_Performance Tuning MySQL
2. office使用技巧大全
3. 利用Python根据模板生成Word文档
4. jQuery快速掌握（看这一篇就够了）
5. 怎样把d盘改成c盘!如何把收藏夹和桌面的路径设成D盘
6. 网友评价 iPhone 8：大爱玻璃后壳、True Tone 屏幕
7. html5 arc 椭圆,html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
8. 【2020年高被引学者】 梅宏 北京大学
9. 认知计算机系统和应用实验报告,计算机认知实习课实验报告.doc
10. 如何在电脑中安装虚拟机？