1、微信购物电子商务系统设计与实现 张渊博 北京工业大学计算机学院 摘 要： 基于 B2C 的微信网上购物电子商务系统, 结合 EasyRec 推荐系统提供商品推荐。系统基于微信公众平台开发, 主要分为前端模块和后台管理模块, 前端模块主要通过 HTML5+JavaScript 实现购物流程和微信用户基本管理功能, 并提供推荐位;后台管理系统使用 OpenCustomer 完成系统管理, 并开发前端购物和微信公众号业务功能的支持模块。OpenCustomer 是 Sourceforgenet 可供下载使用的开源电子商务和 CRM (客户关系管理) 系统, 使用 Mysql 数据库和 Java/EJ
2、B技术, 前端实现框架是 SSI。该系统支持多公司 (商户) 、多库存管理、权限管理、订单管理、销售管理、财务结算等功能, 并提供 Web 购物及后台 Web 管理页面, 为用户带来全新购物体验。关键词： 电子商务; 微信公众平台; 推荐系统; Sourceforge; 作者简介：张渊博 (1991-) , 男, 河南郑州人, 北京工业大学计算机学院硕士研究生, 研究方向为大数据、分布式存储。收稿日期：2017-05-18Design and Implementation of WeChat Shopping E-business SystemZHANG Yuan-bo School of C
3、omputing, Beijing University of Technology; Abstract： Online shopping e-commerce system based on B2C WeChat, combine with easyRec providing merchandise recommendation.The System based on WeChat public platform, Wechat users focus on WeChat Official Accounts, then buy goods online.The system is divid
4、ed into front end module and background management module.Front end uses HTML5+JavaScript to implement shopping process and WeChat users management, with recommendation place providing.Background management uses OpenCustomer to manage.OpenCustomer is a open source electronic commerce and CRM system,
5、 using MYSQL and Java/EJB.The front end frame is SSI.The system will support multiple companies, multiple stock, privilege management, orders management, sales management, financial settlement and so on, then will provide shopping page and background web management page.Keyword： E-business; WeChat p
6、ublic platform; recommender system; Sourceforge; Received： 2017-05-180 引言网上购物系统是 B2C1 (企业与消费者的交易) 、B2B (企业与企业的商务交易) 、C2C (消费者与消费者的交易) 等类型电子商务的前端门户, 网上购物系统实现了线下面对面的交易到消费者和卖家交易双方在网络虚拟环境下的交易。当前主流的网上购物系统不仅具有基本的商品浏览、站内查找、购买和商品评价等功能, 还提供商品推荐功能, 系统通过对交易过程中的业务数据进行挖掘, 推荐出用户可能感兴趣度的商品或者热度高的商品。在网络购物规模日益庞大的网络经济时
7、代, 移动端购物系统为更加方便的购物体验提供了新的发展思路。利用微信公众平台2提供的完善接口支持, 本文设计开发了一套微信网购电子商务系统, 并结合推荐引擎 easyRec 的调用实现商品推荐功能。系统后台管理模块具备电子商务功能, 提供 CRM3, 还提供前端购物和微信公众号的业务支持模块。1 相关技术1.1 JavaScriptJavaScript4是一种脚本语言, 它是轻量级的, 无需编译。现实环境下的绝大多数网站都使用 JavaScript 进行解析。JavaScript 常用于为 HTML 页面增加动态内容。1.2 SSI 框架SSI 框架组成构件包括 Struts25、Spring
8、6和 Ibatis7, 该框架使开发者和运营商管理起来更加容易。SSI 的各组件帮助完成各层级之间的信息交换, 一个完整 Web 端的功能实现与信息通信在 SSI 框架的支持下变得更加简便。Struts2 相对简化了配置文件信息, 使页面和 Action 之间的关系与通信更加简捷。1.3 MySQLMySQL8是目前受欢迎程度很高的开源 SQL 系统, 可分配多个用户, 能够充分利用处理器等硬件资源, 同时能为多线程开发提供服务和支持。1.4 JDBCJDBC (Java Data Base Connectivity, Java 数据库连接) 可以为多种关系数据库提供统一访问, 通过 JDBC
9、 驱动更加方便地向各种关系数据库传送 SQL 语句。开发者只需将 Java 和 JDBC 结合起来写一组通用程序就可以支持所有平台上的运行。1.5 easyRec 推荐引擎EasyRec9集成方便、容易扩展且功能丰富, 是一套拥有后台管理系统页面的推荐系统, 其提供了 Rest 和 Javascript 两种访问方式。EasyRec 使用 tenant (appProjectID) 参数确定不同网站的唯一性, 并同时服务于多个网站请求。不同网站应用被称为不同的“Tenant”, 被操作者管理。每一个 Tenant 拥有一个唯一标识符, 供 API 调用所需, 操作者 API 密钥 (32bit
10、APIKEY) 也要同时提供。例如 js 调用:“/easyrec-web/api/version/json/recommendAlgorithm?apikey=32bitAPIKEY操作系统:Windows7;服务器软件:Tomcat6.0, Windows Server 2012;浏览器:Internet Explorer6.0 及以上版本, 或者 Chrome。2 系统分析与设计2.1 系统整体设计该电子商务系统分为前端网上购物模块和后台管理模块。微信用户进行网上购物前需先关注商城微信公众号, 在微信公众号窗口界面, 微信用户触发商城菜单按钮进入相应商城首页9-14, 然后通过各种链接和
11、导航浏览商品、添加购物、下单、提交订单、完成支付等, 从而完成网上购物。网上购物系统为微信用户提供了个人信息维护功能, 用户可查看和管理自己的历史订单。系统后台管理模块 (OpenCustomer) 让平台商 (系统维护方和运营商) 、第三方商户 (以下简称“第三方”) 、供货商这 3 种角色在系统中实现菜单配置、财务结算、商品配置、商品上架、订单处理和客户查看等工作。前端网购模块主要有微信公众号开发模块、购物车、个人中心模块。 (1) 微信公众号开发模块。该模块实现系统与微信服务器的交互通信, 为微信公众号和购物系统的正常协作提供支持和服务, 实现用户关注公众号、进入商城、“我的-个人中心”
12、等菜单事件处理; (2) 购物车模块。该模块支持和实现用户购买商品的整个流程, 包括商品浏览、购物、下单等, 是系统最重要的部分; (3) 个人中心模块。该模块支持和实现用户自己的订单管理、查看及信息管理, 包括收货电话、收货地址和个人资料等功能。后台管理模块主要实现系统菜单及参数配置、角色和后台系统登录用户的管理维护、财务对账结算等。所涉及的客户、商品、客户订单等数据存储在系统数据库 (MyDB) 中, 各实体之间关系的建立通过外键完成。后台管理系统具备电子商务业务处理能力, 能够统一处理和调用这些业务数据。第三方使用系统分配权限对商品进行配置、对订单进行处理、对客户进行管理。系统前端模块通
13、过调用数据库数据获取商品、客户、订单等数据, 同时创建客户、订单等。平台商在后台为每个第三方分配登录用户名和密码, 保存微信公众号信息appid、appsecret 等。这些公众号信息, 对于希望入驻平台的第三方商户和平台开发商而言, 是对接平台的钥匙;单独对于平台开发商而言, 则是归集信息和响应信息的依据, 是实现微信端网上购物系统的关键和必备参数15-17。有了这些参数支持, 第三方就可以进行微信公众号开发, 将公司 (商城) 商品展示给关注用户, 实现线上销售。该电子商务系统的微信网购和后台管理功能如下:(1) 直接购买和购物车功能。通过微信端购买公司商品, 需实现商品列表、商品详情、直
14、接购买、添加商品到购物车、结算、下单、确认提交订单、支付等功能。(2) 客户资料信息管理。该功能帮助微信用户维护个人资料和收货信息, 包括电话、邮件、地址等。用户可以设置多个收货地址, 但只能将其中一个设成默认地址。(3) 用户订单管理。该功能可让微信用户删除已完成和已取消状态下的订单, 查看所有订单及每个订单的详细信息。(4) 商城微信公众号开发。商城微信公众号开发提供的服务包括微信接入验证、微信菜单、消息事件请求支持等。(5) 后台管理。平台商、第三方、供货商 3 种角色的管理员用户能够在后台系统中对系统、商品、订单、客户等进行统一管理。2.2 系统需求分析2.2.1 业务逻辑需求分析该系
15、统作为一套完整的电子商务系统, 需要兼具前端网上购物和后台管理功能。(1) 前端购物系统业务需求分析。前端网上购物在微信端进行, 需要借助微信公众开发平台实现。微信用户关注商城公众号, 通过点击公众号的商城名菜单进入商城首页, 浏览商品、查看详情、直接购买或者添加购物车、确认订单、提交订单、支付并完成购物流程。用户可以到个人中心页面对个人资料、收货信息进行增删改查等, 到订单中心对订单列表和订单详情进行查看, 对于已经完成的订单和取消的订单仍有记录的, 提供删除订单记录功能。(2) 后台管理系统业务需求分析。提供 3 种角色:平台商 (项目系统平台的开发商或者运营商) 、第三方、供货商。这 3
16、 种角色具有相对独立的业务管理权限。平台商角色用户主要业务功能:对后台系统管理页面的菜单进行维护、创建角色、为角色分配可操作的菜单权限、创建不同角色的登录用户、维护系统业务功能参数、创建其它两种角色的用户名和密码、财务结算业务等。第三方角色用户主要业务功能:添加商品、上架下架商品、查看订单、维护商城店铺名称及Logo 等基本信息数据、增删改查供货商数据、查看客户等。供货商角色用户主要业务功能:查看订单、发货、维护库存等。2.2.2 数据流分析本系统前端购物系统产生的主要业务数据是客户、商品、订单数据, 这些数据统一存储在 MyDB 数据库中。微信 openid 与客户 ID、公司等的对应和关联
17、关系, 以及 OpenCustomer 后台管理相关业务和系统数据也存储在 MyDB 数据库中。图 1 表示系统业务数据流, 微信用户的操作是购物业务数据产生来源, 微信用户在浏览和购物等操作过程中请求客户、商品、订单等信息, 网上购物系统响应请求后向 OpenCustomer 请求相关数据, 并将数据返回给微信用户, 然后根据需要在后台系统中创建客户、订单等, 同时存储这些过程中产生的业务数据。系统也会在 MyDB 数据库中存入微信 openid 与 OpenCustomer 系统中的客户 ID (openid) 、公司 (SHOPID) 的映射关系, 帮助系统通过微信 openid 查找相
18、关联的业务数据。图 1 系统业务数据 下载原图2.2.3 业务流程分析从用户购物下单到第三方销售人员处理订单和供货商发货的完整过程如图 2 所示, 该图展现网上购物系统的主要业务流程。微信用户首次关注某家第三方商城微信公众号时, 将该微信用户注册为该公众号对应的第三方商户的客户 (默认普通会员) ;用户可在系统中浏览第三方商城店铺的商品, 添加购物车, 进行购物车结算;下单流程开始, 进入确认订单页面后, 填写备注, 添加收货地址, 默认选择微信支付并确认订单, 然后提交订单。第三方销售人员在后台管理系统 (OpenCustomer) 中能够查看到用户订单, 由供货商进行发货。2.2.4 功能
19、介绍系统分为前端和后台管理两个模块。其中, 系统管理、商品管理、订单管理和客户 (会员) 管理等模块构成了后台管理系统 (OpenCustomer) 。前端模块主要由 3 个模块组成:个人中心管理模块、购物车模块、微信公众号开发模块。图 2 业务流程 下载原图(1) 前端模块功能描述。子模块一:个人中心模块的客户资料信息管理。该模块提供用户资料自我管理功能, 包括昵称、电话、QQ、Email 等的查看、修改, 以及收货地址的增删改查等。子模块二:个人中心模块的订单管理。该模块帮助用户管理自己的订单, 查看订单列表和订单详情并处理历史已完成订单、已取消订单。子模块三:购物车模块。该模块主要管理用
20、户购物的整个流程, 包括商品列表和商品详情的浏览、购物车管理、下单、完成订单、微信支付等。子模块四:微信公众号开发模块。该模块主要用于网上购物系统与微信服务器的通信交互, 包括微信公众号接入服务、微信公众号菜单事件处理等, 支持微信公众号与网上购物系统的协作运行。(2) 后台管理模块功能描述。该模块是为了让平台商、第三方和供货商管理员对系统、商品、订单、客户等进行统一管理。子模块一:系统管理模块。该模块让平台商管理员对系统菜单、系统参数等进行配置, 对财务进行结算。子模块二:商品管理模块。该模块帮助第三方管理人员对商品进行配置和商品的添加、修改、删除、上架及下架。子模块三:客户管理模块。该模块
21、下第三方管理人员可对客户进行维护。子模块四:订单管理模块。该模块帮助第三方管理人员和第三方的关系供货商对微信用户交易产生的订单进行查看和发货。2.2.5 系统性能需求网上购物系统性能要求如下:(1) 并发性。同一时间节点, 满足 300 个微信用户进入商城的承载力。(2) 系统处理性能要求。系统页面响应和加载时间不超过 7s, 图片加载时间不超过 15s, 业务处理和响应结果时间不超过 6s。(3) 服务器性能要求。上线环境下, 服务器处理器和内存使用率应低于 70%。(4) 可使用性。使用前端验证和服务器验证, 分类验证格式和数据类型存在限制的数据。简明的错误提醒, 提示和引导用户输入规范数
22、据。保证前后台管理界面和页面设计简洁, 导航设计合理快捷。3 系统架构与实现3.1 系统业务逻辑微信端网购页面的前端请求和微信服务器请求是网上购物系统处理的重要请求。由于网上购物系统是基于 B/S 模式、SSI 框架, Ajax 是处理 JavaWeb 前端页面请求的常用数据请求技术18-19。因此, 前端页面请求可以设计为 Ajax 异步请求。前端页面请求路径名命名规则是部署路径+“/shop”+传参, 微信服务器请求路径名命名规则是部署路径+“/wechat”+传参。业务逻辑处理流程如图 3所示。图 3 业务逻辑处理流程 下载原图系统通过分析请求路径区分事件请求, 是来自项目前端购物系统的
23、OpenCustomer 请求, 还是来自微信服务器方的请求, 然后进行相应的后台程序业务逻辑处理。对于需要访问 MyDB 数据库的业务, 在业务处理过程中通过调用OpenCustomer 提供的服务接口, 使用 iBATIS 工具连接 MyDB, 获取业务处理所需数据。请求处理结束后得到的数据需要经过封装, 然后反馈给请求方。3.2 系统数据库为便于介绍, 将此系统所使用的数据库命名为”MyDB”。MyDB 的微信用户表shop_wechatuser 中设置有商户 ShopID、客户 openid 的对应关系 (拥有第三方商户公众号的商户本身也是微信用户, 因此他们的数据也存储在shop_w
24、echatuser 表中, 通过标识属性 ISCLERK 区分, 1 是商户, 0 是普通微信用户) , 并通过关联商城 (店铺) 表的 shopId 获取某个微信商城商户 openid所拥有的商城名称。入驻平台所有第三方商户 (公司) 的主键 id、公司名称 name 等属性构成系统平台用户表 usertable 的部分属性。MyDB 中存在关联关系的shop_wechatuser、shop_orders、shop_product 表则分别用于存储客户、订单、商品数据, 对于订单和商品一对多的情况, 通过设置订单详情表shop_orderdetail 解决。MyDB 中存储了网上购物系统用到
25、的商户 ID (SHOPID) 、商品、订单、客户信息等数据。商品、订单、客户 E-R 关系如图 4-图 6 所示。商品 (商品) 实体包含所属卖家SHOPID、商品名称、商品编号、价格、备注等属性。订单实体包括微信买家openid 订单编号、订单状态、订单总额、创建日期、收货人地址、收货人电话等属性。客户实体包括客户编号 openid、客户姓名、默认收货地址等属性。3个表通过卖家 ShopID 和微信买家 openid 关联。图 4 shop_product 产品实体 E-R 关系 下载原图图 5 shop_orders 订单实体 E-R 关系 下载原图图 6 shop_wechatuser
26、 客户实体 E-R 关系 下载原图网上购物系统 OpenCustomer 为后台管理系统, 产品、订单、客户等数据存储在MyDB 数据库中。前端模块通过调用 OpenCustomer 系统框架下的服务接口, 获取相关产品、订单、客户等数据, 同时在 OpenCustomer 系统中创建客户、订单等, 结果以数据的形式存储在 MyDB 中。3.3 系统架构及服务该网上购物系统前端模块采用 B/S 架构和 SSI 框架, 并调用 easyRec 推荐引擎实现简单的推荐功能, 系统架构如图 7 所示。OpenCustomer 使用了 SSI 框架, 因此业务流程开发和执行效率很高, 并提供了丰富的服
27、务。整个架构的业务逻辑层提供商品、订单、客户、微信等业务相关服务及数据库连接工具等。MyDB存储微信 openid 与 OpenCustomer 系统中客户、公司的映射关系。网上购物系统后台模块直接使用 OpenCustomer 系统, 它也是采用 B/S 架构, 只需调用相应的服务接口实现业务请求。前端模块通过调用 OpenCustomer 系统服务接口, 获取商品、订单、客户等数据, 并创建客户、订单等。图 7 系统架构 下载原图推荐引擎是一个独立的单元, 拥有独立的数据库。推荐引擎使用前从 MyDB 中将商品信息维护到 easyRecDB 的 item 表中, 可以直接使用 js 请求访
28、问已发布的easyRec 系统, 解析返回的 Json 就是推荐结果, 将结果整理放到推荐位上即可。(1) 前端和微信业务支持模块。微信业务支持模块提供微信公众号接入验证、微信消息事件服务 (wechatMessageService) 等功能, 比如微信公众号菜单和图文消息推送等。开发者基于微信公众平台开发网上购物系统, 进入该系统需要进行接入验证请求。微信端用户在微信公众号中访问购物系统, 借助微信服务器向系统发送验证的 Get 请求, 系统部署在运营商服务器端, 接收请求参数进行验证。系统收到微信公众号验证请求后, 首先获取到请求流中的参数, fromusername:发送方账号 open
29、id;tousername:开发者微信号;Content:微信用户在公众号中输入的菜单功能标号 1 (联系客服) , 2 (新商品) , 3 () 。验证通过条件是 Timestamp (微信请求参数) 、Nonce (随机数、微信请求参数) 、Token (开发者账号) 的加密结果等于 Signature (微信请求参数) 。验证通过后返回微信服务器相关数据, 然后更新该公众号的菜单或内容。相关服务如下:wechatMessageService:微信接入验证和消息事件服务。请求 API 是:开发者+“&openid=“+fromusernamewechatUserSetRq:微信接入验证通过
30、后请求创建商城 (fromusername) 和客户关系映射。wechatPayService:微信支付服务。(2) OpenCustomer 模块。“opencustomerwebappmodulesystemmanage”后台系统项目路径下是OpenCustomer 系统的消息驱动 bean, 提供如下相关服务:productAction:商品服务, 对商品相关请求进行处理和结果封装, 如:对查询到的商品列表、商品详细信息等进行封装。orderAction:订单服务, 提供订单创建和多商品订单的拆单处理, 其中拆单工作是为了实现商品和订单多对多情况下的关系映射及数据存储。wechatUse
31、rService:响应 wechatUserSetRq, 查询客户与商家关系是否存在, 不存在则创建该关系, 并存储数据。图 8 展示了购物流程中相关服务 (productAction、orderAction) 的请求来源。图 8 用户购物流程 下载原图3.4 系统部署系统开发完成后部署到服务器端, 提供前端购物系统首页地址, 登录微信公众平台官网, 在服务器配置页, 配置相应参数并提交, 完成微信服务端接入。需注意的是, 微信公众号接口只支持 80 端口。推荐系统请求的调用采用 JS 访问方法。最终部署时, 为了实现推荐功能, easyRec 推荐系统也需部署到服务器。系统部署完成后, 启动
32、 easyRec 的服务, 进入 easyRec 的可视化管理界面, 为应用网站注册 Tenant, 并获得密钥 APIKey (http:/easyRec 发布位置:配置的端口号/easyrec-web) , 用于调用推荐时使用。4 结语本文基于微信公众平台开发了一款网上购物电子商务系统, 该系统采用S 可供下载使用的 OpenCustomer 实现电子商务和客户关系管理。Sourceforge 项目能为开发者提供更多开发思路和有效解决方案, 利用OpenCustomer 提供的基本商务功能进行业务功能补充, 从而为购物需求日益多样化的用户提供更加成熟和快捷的购物体验。参考文献1刘延民, 邵培基.企业 B2C 电子商务网站质量研究J.价值工程, 2005, 24 (1) :64-67. 2闫小坤, 周涛.微信公众平台开发基础与实战M.北京:机械工业出版社, 2014. 3潘伟.CRM 系统在企业网络营销中的作用J.中国流通经济, 2001 (2) :40-43. 4FLANAGAN D P.JavaScript:the definitive guideM.南京:东南大学出版社, 2011. 5BYIANROUGHLEY.Practical apache Struts2 Web2.0projectsM.Apress, 2007.
