《基于微信小程序的网上购物系统设计与实现》6200字

PAGE29基于微信小程序的网上购物系统设计与实现摘要 随着社会的进步，微信的优势和覆盖面使得开发网上购物系统成为必要。网上购物系统主要利用微信小程序实现用户查看商品列表、、按分类、筛选商品、查看商品详情、将商品添加到购物车、下单和管理订单等功能，并为管理员提供管理商品信息、商品类别、订单、关键字、促销和用户信息等功能。本项目采用java语言、wxss语言、mysql数据库，基于c/s架构，采用自上而下的结构化系统分析方法，展示了一个全功能网上购物系统的设计和运行中的开发过程、操作步骤及其核心技术。首先，简要介绍了研究现状、研究工作的使用价值和理论意义以及需要解决的问题。接下来是系统需求分析功能概述、系统流程、数据库设计、系统功能实现和测试。关键词：网购系统；WXSS语言；MYSQL数据库；C/S架构。摘要 I1概述 41.1课题背景及意义 41.2网上购物系统的研究 42系统开发技术 52.1小程序介绍 52.2MySQL数据库 52.3JAVA简介 62.4三层框架简介 63系统分析 73.1可行性分析 73.1.1技术可行性 73.1.2操作可行性 73.1.3经济可行性 73.1.4法律可行性 83.2系统流程设计 83.2.1系统开发流程 83.3概念设计 93.4系统功能设计 93.4.1功能概述 93.4.2系统功能结构 94数据库设计 104.1ER图 104.2数据库表设计 115系统实现 135.1首页界面 135.2分类页面 145.3购物车界面 145.4个人中心界面 155.5首页界面 175.6用户管理界面 175.7商场管理界面 185.8商品管理界面 195.9推广管理界面 205.10系统管理界面 215.11统计界面 22结论 22参考文献 251概述1.1项目背景和意义近年来，随着网络技术的不断进步，微信的规模逐渐扩大，用户数量逐年增加，微信计划应运而生。网上购物系统可以方便用户查找商品信息，查看商品详情，收集商品，购买商品，查看订单信息，发布订单评价，给用户带来方便。本系统的研究意义如下：(1)跨平台，独立于安卓苹果、小米、华为手机，独立于硬件，独立于手机操作系统，只要能运行微信就可以使用。(2)解决社会的实际需要。目前很多人需要购买商品，但是实体店一般都比较远。如果微信销售可以进行，这种情况是可以避免的。从以上特点可以得出结论，我们需要充分了解微信小程序的特点，以微信小程序为平台，充分利用其api设计一个依托微信小程序的网上购物系统，并利用技术手段来实现，以满足在微信上购物的需求。1.2网购系统研究随着社会信息化的深入，有效的信息管理是管理科学与信息科学交叉融合理论的最新成果之一。并且随着移动互联网的不断发展，国内移动互联网用户的不断提高，以及微信小程序的不断完善，在人们指尖的微信小程序上购买商品变得更加容易。各大电商平台如淘宝、京东、亚马逊等陆续推出微信小程序商城，微信小程序网上购物系统相对于传统商城app存在大量优势。方便快捷，不需要下载安装，点击即可使用，且不占用手机内存。入口众多，用户渗透率高。微信社交圈赋能，基于微信运行的微信小程序商城依靠微信生态坐拥的数十亿活跃用户，可以轻松获得大量优势流量。小程序商城运营成本地可以获得更大的利润空间。具备很强的兼容性，不需要为不同的操作系统开发多套app。2系统开发技术2.1小程序介绍 微信小程序代码由四个部分组成：WXSS样式、WXML模板、JS逻辑交互、JSON。WXSS

可以理解为CSS语言在微信小程序上的变种，微信小程序在

WXSS语言上相比CSS也做了一些修改和扩充。新增了一种尺寸单位rpx可以适配不同尺寸的手机屏幕。通过全局样式和局部样式可以完成不同页面样式的设置。WXML在微信小程序中扮演了网页中的HTML一样的角色，是一套用于小程序前端设计的标签语言。结合事件系统和基本组件，可以构建小程序页面的结构。JSON是一种数据格式，但不是编程语言，对小程序的文件进行静态配置。JS脚本可以与用户做交互：响应用户的点击、获取用户的位置等等。2.2MySQL数据库MySQL是一个关系数据库管理系统。MySQL有其独特的特点，使其成为目前最流行的RDBMS之一。与ORACLE、DB2等其他数据库相比，MySQL是一个小的、数据库，速度很快。重点是符合这个毕业设计的真实环境，具有低成本、开源的特点，这也是选择它的主要原因。从90年代到MySQL的很多系列，经过多年的发展，中小企业都可以持续使用。MYSQL数据库具有以下特征：1、可以在各种编程语言中使用和测试，无需使用专门为MySQL改编的编译器。2、支持多种操作系统，如AIX、FreeBSD、HP-UX、Linux和MacOS、Novell的Netware、OpenBSD系统、OS/2、Solaris、Windows等。3、为很多语言提供了全面的API，比如C，C，Python，java。4、支持多线程。5、优化了查询SQL算法，搜索速度明显提高。6、可应用于TCP/IP、ODBC和JDBC数据库，并提供连接。本系统使用MySQL数据库，建立了几个数据库表来存储商品、商品类别、订单、关键字、用户和网购系统相关数据。在系统中，查询、更新、删除、插入主要用来实现系统功能。2.3JAVA介绍Java擅长开发互联网应用和企业应用，已经成为互联网上最有影响力的编程语言之一。Java语言是面向对象的编程语言，可以用函数封装。封装就是尽量隐藏对象的属性和方法，让外界不知道如何实现，外界可以通过接口访问。继承是指每个类都会有一个父类，子类会有一个父类的方法。继承实现了多代码复用，可以提高软件开发效率，减少相同功能代码的重复编写，也是多态的前提。JAVA语言主要用于编写程序的后台。系统中的实体类、服务类、接口都是用JAVA语言编写的，通过配置文件连接到数据库。最后，可以从数据库中查询和管理系统相关信息。2.4三层框架简介为了更好的降低系统各层之间的耦合度，出现了三层架构的编程模式，以更好的解耦为目标，采用抽象编程的思想[14]。也就是说，上一层和下一层之间的传递是通过接口实现的。下层作为上层真正的服务提供者，成为下层接口的实现类。整个过程的接口都是一样的，只是实现类可以随意交换。这样就实现了层间的解耦。3系统分析3.1可行性分析网购系统的主要目标是实现对微信小程序网购系统及其相关信息的管理。确定目标后，我们计划从以下四个方面分析实现系统任务的可行性。3.1.1技术可行性网上购物系统主要采用java技术，基于C/S结构、MYSQL数据库和SpringBoot框架，主要包括前端应用的开发。对于应用程序的开发，要求功能保持不变，应易于使用。对于数据库的创建和后续维护，需要创建一个数据完整性强的，数据安全性好的，数据稳定性高的数据库。1、基于C/S模式的系统开发日趋成熟。2、众所周知，java是一种面向对象的开发语言。程序开发完成后，一些已知的解决方案可以很容易地在平台上使用。

综上所述：网购系统的开发技术是完整的，开发者对开发技术有一定的交代，所以系统的开发是可行的。3.1.2操作可行性网购系统界面简单，易于操作。通用界面窗口用于界面，微信小程序用于访问系统。用户只要平时用过微信小程序就可以访问系统。本系统的开发采用java语言和小程序语言。这些开发环境基于C/S结构，使得系统更加完善。该系统具有操作简单、和交互功能强的特点，操作非常简单。所以这个系统是可以开发的。3.1.3经济可行性网上购物系统基于C/S模式，使用MYSQL数据库存储数据。所需的硬件和软件环境可以在没有太多成本的情况下构建。程序开发主要是管理系统的开发和维护。所以方案对资源要求不高，系统也不是很复杂，开发周期短，经济上可行。3.1.4法律可行性这个网购系统是自己设计开发的微信小程序系统，具有很大的现实意义。所使用的开发环境软件和数据库均为开源代码，因此本系统的开发不存在侵权问题，在法律上完全可行。综上所述，网购系统在技术、经济、运营、法律四个方面都具有很高的可行性，所以有必要开发这个程序。3.2系统流程设计3.2.1系统开发流程 网上购物系统开发中时，首先进行需求分析，进而对系统进行总体的设计规划，设计系统功能模块，数据库的选择等，本系统的开发流程如图3-1所示图3-1系统开发流程图3.3概念设计 这个设计方案是为了完成一个网上购物系统。既然叫购物系统，主题就是浏览和卖货。一是要保证用户得到所有的产品信息；第二，要实现购买产品和发布评论的功能。这两个功能分为两个主要部分。前端的主要任务是保证页面足够美观，信息位置分布均匀。因为一个页面的美观，可以明显的吸引用户的注意力。所有页面都在一个列表中显示文本和图片的效果，使页面更加饱满，不那么死气沉沉。而且这种自由式适合当代大学生和白领。页面上的所有样式都由wxsswxmljs控制。编写后台时，服务层和控制层的代码都是用java语言编写的。为了展示更好的效果，我们计划以相同的风格展示每个页面，这样网站的风格就更令人愉快。页面之间的跳转在设计时通过A标签实现，在后期集成时通过java代码控制。登录注册时，前端页面由表单通过预先准备好的配置文件传输，前端还定义了变量，接受后台返回值并显示在前台页面上。形成需要传递值的窗体，在里面写一个隐藏按钮，里面定义的方法会告诉执行哪个方法，然后跳转到页面，读取页面上的数据和图。3.4系统功能设计3.4.1功能概述网购系统主要实现、分类、购物车、个人中心等功能模块。管理员用户主要管理商品、商品类别、订单、关键字、推广和用户信息。用户从微信平台登录网购系统。登录后，他们可以查看产品的推荐信息，并根据关键词搜索产品。列表显示了产品的图片、名称、介绍和价格信息。点击列表查看相应产品的详细信息。用户可以查看分类模块下商品的分类信息，点击不同的分类可以查看该分类对应的商品信息，进行快速搜索；购物车模块显示用户添加到购物车的商品信息，可以通过改变数量进行结算，结算后生成订单信息。个人中心包括用户信息、，我的订单，我的服务等功能。3.4.2系统功能结构根据以上分析，绘制网购系统的功能结构图，如图3-3所示：图3-3系统功能结构图4数据库设计4.1ER图（1）品牌信息实体的E-R图，如图4-1所示：图4-1品牌信息实体图（2）订单信息实体的E-R图，如图4-2所示：图4-2订单信息实体图（3）商品信息实体的E-R图，如图4-3所示：图4-3商品信息实体图4.2数据库表设计网购系统需要存储数据库。本系统使用MYSQL数据库存储数据。数据库中表格的细节介绍如下。表4-1品牌信息表列名数据类型长度是否可空注释idbigint20否品牌idnamevarchar50是品牌名称pirctvarchar255是品牌图片markvarchar255是简介pricevarchar255是底价表4-2订单信息表列名数据类型长度是否可空注释idbigint20否订单号yhidvarchar50是用户idtypevarchar50是订单状态pricevarchar50是订单金额moneyvarchar50是付款金额timedate255是付款时间dhvarchar50是物流编号wlvarchar50是物流渠道表4-3商品信息表列名数据类型长度是否可空注释idbigint20否商品编号namevarchar50是商品名称pirtvarchar255是商品图片pirtuvarchar255是商品分享图markvarchar255是商品详情zpricevarchar255是折前价格pricevarchar255是当前价格sfxpvarchar255是是否新品sfrpvarchar255是是否热品sfzsvarchar255是是否在售5系统实现5.1首页界面系统主要实现了首页、分类、购物车以及个人中心等功能模块。用户从微信平台登录进入网上购物系统，登录后可以查看到商品推荐信息，可以根据关键字进行搜索，列表展示商品的图片，名称，介绍以及价格信息，点击列表可以查看商品的详细信息。其界面如图5-1所示。图5-1小程序商城首页界面if

(options.grouponId)

{

wx.navigateTo({

url:

'../goods/goods?grouponId='

+

options.grouponId

});

}

if

(options.goodId)

{

wx.navigateTo({

url:

'../goods/goods?id='

+

options.goodId

});

}

if

(options.orderId)

{

wx.navigateTo({

url:

'../ucenter/orderDetail/orderDetail?id='

+

options.orderId

});

}5.2分类页面用户可以在分类模块中查看商品的分类信息，点击不同的分类可以查看该分类对应的商品信息，以便快速搜索。界面如图5-2所示。图5-2小程序商城分类界面switchCate:

function(event)

{

var

that

=

this;

var

currentTarget

=

event.currentTarget;

if

(this.data.currentCategory.id

==

event.currentTarget.dataset.id)

{

return

false;

}

this.getCurrentCategory(event.currentTarget.dataset.id);

}})5.3购物车界面购物车模块展示用户加入购物车的商品信息，可以更改数量进行结算，结算后产生订单信息。其界面如图5-3所示。图5-3小程序商城商品详情界面isCheckedAll:

function()

{

let

that

=

this;

if

(that.data.isMultiOrderModel

===

1){

return

that.data.brandCartgoods.every(function

(element,

index,

array)

{

if

(that.isChildCheckedAll(element.cartList)){

return

true;

}

else

{

return

false;

}

});

}

else

{

return

that.data.cartGoods.every(function

(element,

index,

array)

{

if

(element.checked

==

true)

{

return

true;

}

else

{

return

false;

}

});

}

},5.4小程序商城个人中心界面个人中心包括用户信息，我的订单，我的服务等功能。界面如图5-4所示。图5-4小程序商城个人中心界面if

(app.globalData.hasLogin)

{

let

userInfo

=

wx.getStorageSync('userInfo');

this.setData({

userInfo:

userInfo,

hasLogin:

true

});

let

that

=

this;

util.request(api.UserIndex).then(function

(res)

{

if

(res.errno

===

0)

{

that.setData({

order:

res.data.order,

totalAmount:

res.data.totalAmount,

remainAmount:

res.data.remainAmount,

couponCount:

res.data.couponCount

});

}

});

}5.5后台管理首页界面管理员登录后可以查看后台管理首页界面图5-5后台管理首页界面if

(StringUtils.isEmpty(username)

||

StringUtils.isEmpty(password))

{

return

ResponseUtil.badArgument();

}

Subject

currentUser

=

SecurityUtils.getSubject();

try

{

currentUser.login(new

UsernamePasswordToken(username,

password));

}

catch

(UnknownAccountException

uae)

{

logger.error("系统管理->用户登录

错误:{}",

AdminResponseCode.ADMIN_INVALID_ACCOUNT_OR_PASSWORD.desc());

return

AdminResponseUtil.fail(AdminResponseCode.ADMIN_INVALID_ACCOUNT_OR_PASSWORD);

}

catch

(LockedAccountException

lae)

{

logger.error("系统管理->用户登录

错误:{}",

AdminResponseCode.ADMIN_LOCK_ACCOUNT.desc());

return

AdminResponseUtil.fail(AdminResponseCode.ADMIN_LOCK_ACCOUNT);

}

catch

(AuthenticationException

ae)

{

logger.error("系统管理->用户登录

错误:{}",

AdminResponseCode.ADMIN_LOCK_ACCOUNT.desc());

return

AdminResponseUtil.fail(AdminResponseCode.ADMIN_INVALID_AUTH);

}

("【请求结束】系统管理->用户登录,响应结果:{}",

JSONObject.toJSONString(currentUser.getSession().getId()));

return

ResponseUtil.ok(currentUser.getSession().getId());5.6用户管理界面管理员可以根据上述条件管理用户信息，搜索用户内容。界面如图5-6所示。图5-6用户管理界面public

Object

list(String

username,

String

mobile,

@RequestParam(defaultValue

=

"1")

Integer

page,

@RequestParam(defaultValue

=

"10")

Integer

limit,

@Sort

@RequestParam(defaultValue

=

"add_time")

String

sort,

@Order

@RequestParam(defaultValue

=

"desc")

String

order)

{

("【请求开始】用户管理->会员管理->查询,请求参数,username:{},code:{},page:{}",

username,

mobile,

page);

List<DtsUser>

userList

=

userService.querySelective(username,

mobile,

page,

limit,

sort,

order);

long

total

=

PageInfo.of(userList).getTotal();

Map<String,

Object>

data

=

new

HashMap<>();

data.put("total",

total);

data.put("items",

userList);

("【请求结束】用户管理->会员管理->查询:响应结果:{}",

JSONObject.toJSONString(data));

return

ResponseUtil.ok(data);

}5.7商场管理界面管理员可以查看用户购买商品生成的订单信息，也可以查看商品、用户、地址等信息。界面如图5-7所示。图5-7商场管理界面@RequiresPermissions("admin:order:list")

@RequiresPermissionsDesc(menu

=

{

"商场管理",

"订单管理"

},

button

=

"查询")

@GetMapping("/list")

public

Object

list(Integer

userId,

String

orderSn,

@RequestParam(required

=

false)

List<Short>

orderStatusArray,

@RequestParam(defaultValue

=

"1")

Integer

page,

@RequestParam(defaultValue

=

"10")

Integer

limit,

@Sort

@RequestParam(defaultValue

=

"add_time")

String

sort,

@Order

@RequestParam(defaultValue

=

"desc")

String

order)

{

("【请求开始】商场管理->订单管理->查询,请求参数:userId:{},orderSn:{},page:{}",

userId,

orderSn,

page);

return

adminOrderService.list(userId,

orderSn,

orderStatusArray,

page,

limit,

sort,

order);

}5.8商品管理界面管理员可以管理系统中的商品信息，并可以根据商品名称搜索信息。其界面如图5-9所示。图5-8商品管理界面@RequiresPermissions("admin:goods:list")

@RequiresPermissionsDesc(menu

=

{

"商品管理",

"商品管理"

},

button

=

"查询")

@GetMapping("/list")

public

Object

list(String

goodsSn,

String

name,

@RequestParam(defaultValue

=

"1")

Integer

page,

@RequestParam(defaultValue

=

"10")

Integer

limit,

@Sort

@RequestParam(defaultValue

=

"add_time")

String

sort,

@Order

@RequestParam(defaultValue

=

"desc")

String

order)

{

("【请求开始】商品管理->商品管理->查询,请求参数:goodsSn:{},name:{},page:{}",

goodsSn,

name,

page);

return

adminGoodsService.list(goodsSn,

name,

page,

limit,

sort,

order);

}5.9推广管理界面管理员可以查看首页轮播图，并进行修改。其界面如图5-9所示。图5-9推广管理界面@RequiresPermissions("admin:ad:update")

@RequiresPermissionsDesc(menu

=

{

"推广管理",

"广告管理"

},

button

=

"编辑")

@PostMapping("/update")

public

Object

update(@RequestBody

DtsAd

ad)

{

("【请求开始】推广管理->广告管理->编辑,请求参数:ad:{}",

JSONObject.toJSONString(ad));

Object

error

=

validate(ad);

if

(error

!=

null)

{

return

error;

}

if

(adService.updateById(ad)

==

0)

{

("推广管理->广告管理->编辑,更新广告数据失败!");

return

ResponseUtil.updatedDataFailed();

}

("【请求结束】推广管理->广告管理->编辑,响应结果:{}",

JSONObject.toJSONString(ad));

return

ResponseUtil.ok(ad);

}5.10系统管理界面管理员可以管理用户权限。其界面如图5-10所示。图5-10系统管理界面@RequiresPermissions("admin:role:list")

@RequiresPermissionsDesc(menu

=

{

"系统管理",

"角色管理"

},

button

=

"角色查询")

@GetMapping("/list")

public

Object

list(String

name,

@RequestParam(defaultValue

=

"1")

Integer

page,

@RequestParam(defaultValue

=

"10")

Integer

limit,

@Sort

@RequestParam(defaultValue

=

"add_time")

String

sort,

@Order

@RequestParam(defaultValue

=

"desc")

String

order)

{

("【请求开始】系统管理->角色管理->角色查询,请求参数,name:{},page:{}",

name,

page);

List<DtsRole>

roleList

=

roleService.querySelective(name,

page,

limit,

sort,

order);

long

total

=

PageInfo.of(roleList).getTotal();

Map<String,

Object>

data

=

new

HashMap<>();

data.put("total",

total);

data.put("items",

roleList);

("【请求结束】系统管理->角色管理->角色查询,响应结果:{}",

JSONObject.toJSONString(data));

return

ResponseUtil.ok(data);

}5.11统计界面管理员可以查看用户增长数量。其界面如图5-11所示。图5-11统计界面("【请求开始】统计管理->用户统计->查询");

List<Map>

rows

=

statService.statUser();

String[]

columns

=

new

String[]

{

"day",

"users"

};

StatVo

statVo

=

new

StatVo();

statVo.setColumns(columns);

statVo.setRows(rows);

("【请求结束】统计管理->