基于微信公众平台的订单系统毕业设计论文

基于微信关注的客户服务系统设计与实现

基于微信关注的客户服务系统设计与实现

摘要

微信，作为一款跨平台即时聊天工具，在短短几年的时间内凝聚了大批用户群体。现如今，微信俨然已经成人们的生活方式，因此，基于微信的应用如雨后春笋般飞速而生。开发者或商家可以在微信公众平台上申请应用账号即微信公众号，该帐号与QQ账号是相通的，通过公众号，商家可在微信平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动 ，形成一种主流的线上线下微信互动营销方式。与传统app相比，在客户层面，基于微信关注的应用方便很多，用户不必下载安装，只需关注即可方便使用各项功能。在商家公司层面，基于微信关注的应用开发维护成本降低很多，安全性高，而且营销推广与传统方式相比成本更低，更加便捷，商家公司可定期给用户推送相关信息，还可与顾客进行互动，大大提高了用户粘度。

本文描述的基于微信关注的客户服务系统在用户层面分为两类，客户和系统管理员。其中在客户层面实现了客户浏览信息，在线下单，样品抢先预定，互动反馈，随时随地查看订单信息等功能。客户关注公众平台账号后首次进入应用时可选择与微信账号进行绑定，而后每次进入应用后不用再次登录，即可使用相关功能。对于客户，分为从未购买过产品和已经购买过产品两种，已经购买过产品的用户可享有预定样品的权限，以后每次有新品发布时，该类客户即可抢先预定。而从未购买过产品的用户则没有该权限。在管理员层面，管理员即使用本系统的商家公司可以随时随地查看运营情况，商品管理，信息发布，数据统计，处理订单等，还可以实现角色分离，所谓角色分离就是将系统管理员按不同的权限分为不同的角色。超级管理员、仓库、销售、运营等不同角色各司其职，互不干扰，使效率成倍提高。

I

基于微信关注的客户服务系统设计与实现

关键词：微信，微信公众平台，微信应用，APP

II

基于微信关注的客户服务系统设计与实现

DESIGN AND IMPLEMENTION OF A WECHAT BASED

CUSTOMER SERVICE SYSTEM

ABSTRACT

WeChat, as a cross-platform and instant-messaging tool, gathering a large number of users in the last few couple of years. Nowadays, WeChat has already been part of people’s lives and thus applications that based on WeChat have been developed out amazing quickly. WeChat Official Accounts are accounts that developers or companies apply for in WeChat Public Platform, that is, connected to QQ accounts, enterprises can implement communication through texts, images, voices and videos with specific users. This brings a mainstream interactive marketing approach either by online or offline. Compared to traditional App, WeChat basedapplications are way more convenient if we look at this from the view of customers; that is, for users, there’s no need to download and install such that they only need to subscribe and then they could conveniently enjoy every feature. From the view of developers, the cost of development, maintenance will be reduced a lot, the security is higher and compared to traditional marketing, this WeChat based approach is more convenient and reduces a lot of cost; developers and companies could push information to users and interact with them regularly, which greatly improves connection between companies and customers .

This paper describes a WeChat based customer service system, which implements information-browsing, ordering online, pre-ordering samples, getting feedback from interactions; and also, we implement role separation, super-administrator, storehouse, selling and operations, which totally runs separately

III

基于微信关注的客户服务系统设计与实现

such that they won’t interfere with each other and the efficiency will be improved a lot.

Key words: WeChat, WeChat Public Platform, WeChat Applications, APP

IV

基于微信关注的客户服务系统设计与实现

目 录

摘要................................................................ I ABSTRACT.......................................................... III 1 前言............................................................. 1

1.1 课题研究背景 ................................................ 1 1.2课题研究现状................................................. 1

1.2.1 订阅号................................................. 1 1.2.2 服务号................................................. 2 1.2.3 企业号................................................. 2 1.3课题研究目的................................................. 2 1.4课题研究内容................................................. 2 1.5本章小结..................................................... 3 2 相关技术介绍..................................................... 4

2.1 开发工具简介 ................................................ 4

2.1.1 网页开发工具........................................... 4 2.1.2 系统开发工具........................................... 4 2.1.3数据库及其工具 ......................................... 4 2.1.4建模工具 ............................................... 4 2.2 关键技术介绍 ................................................ 5

2.2.1 PHP.................................................... 5 2.2.2 Jquery................................................. 5 2.2.3 JavaScript............................................. 5 2.2.4 ThinkPHP架构 .......................................... 6 2.2.5 bootstrap架构 ......................................... 6 2.2.6 MVC设计模式 ........................................... 6 2.3 软件/硬件要求 ............................................... 6

V

基于微信关注的客户服务系统设计与实现

2.3.1 软件要求............................................... 6 2.3.2 硬件要求............................................... 7 2.4 本章小结 .................................................... 7 3 需求分析......................................................... 8

3.1业务流程概述................................................. 8 3.2前端需求分析................................................. 9

3.2.1 首页展示............................................... 9 3.2.2 商品列表............................................... 9 3.2.3 样品列表.............................................. 10 3.2.4产品相册列表 .......................................... 11 3.2.5产品服务列表 .......................................... 11 3.2.6案例展示列表 .......................................... 11 3.2.7新闻资讯列表 .......................................... 12 3.2.8用户咨询反馈 .......................................... 12 3.2.9用户登录 .............................................. 13 3.2.10用户在线下单 ......................................... 13 3.2.11用户订单信息查看 ..................................... 14 3.3后台需求分析................................................ 15

3.3.1管理员登录注销 ........................................ 15 3.3.2注册用户管理 .......................................... 16 3.3.3角色管理 .............................................. 16 3.3.4产品管理 .............................................. 17 3.3.5新闻管理 .............................................. 18 3.3.6订单管理 .............................................. 18 3.3.7咨询反馈管理 .......................................... 19 3.4交互的实现.................................................. 20

3.4.1客户端与服务器的交互 .................................. 20 3.4.2 微信服务器与系统的交互................................ 20 3.5本章小结.................................................... 21

VI

基于微信关注的客户服务系统设计与实现

4 系统设计........................................................ 22

4.1系统数据库设计.............................................. 22

4.1.1 ER图设计 ............................................. 22 4.1.2系统表设计 ............................................ 22 4.2系统分层设计................................................ 26

4.2.1模型层设计（model） ................................... 26 4.2.2视图层设计（view） .................................... 27 4.2.3控制层设计（control） ................................. 28 4.3系统模块详细设计............................................ 29

4.3.1系统模块基本设计 ...................................... 29 4.3.2产品管理模块 .......................................... 30 4.3.3订单管理模块 .......................................... 33 4.3.4文章管理模块 .......................................... 35 4.3.5用户管理模块 .......................................... 38 4.3.6角色管理模块 .......................................... 40 4.3.7咨询反馈管理模块 ...................................... 42 4.4本章小结.................................................... 44 5 系统实现........................................................ 45

5.1系统前端实现................................................ 45

5.1.1实现的功能 ............................................ 45 5.1.2 性能要求.............................................. 45 5.1.3 详细设计.............................................. 46 5.1.3 运行结果展示.......................................... 50 5.2系统后台实现................................................ 56

5.2.1实现的功能 ............................................ 56 5.2.2 性能要求.............................................. 57 5.2.3 详细设计.............................................. 57 5.2.4 运行结果展示.......................................... 60 5.3本章小结.................................................... 64

VII

基于微信关注的客户服务系统设计与实现

6 总结与展望....................................................... 65

6.1项目总结.................................................... 65

6.1.1 开发中的问题.......................................... 65 6.2项目展望.................................................... 65

6.2.1 项目创新点............................................ 65 6.2.2 项目展望.............................. 错误！未定义书签。

参考文献........................................................... 67 致谢............................................................... 68 译文及原文......................................................... 69

VIII

基于微信关注的客户服务系统设计与实现

1 前言

本章分别从课题研究背景、课题研究现状、课题研究目标以及课题研究内容概述性地阐述本课题的产生背景以及要研究和实现的系统概况，为以后章节的描述做一个概括性的铺垫。

1.1 课题研究背景

随着科技的发展,智能手机越来越普及，如今，智能手机已经稳稳地跻身于手机主流市场。然而不管是什么样的智能机，几乎每部手机都有一个必备的软件

——微信，一款由腾讯公司继QQ之后推出的又一即时跨平台通讯工具。

2011年1月腾讯公司推出微信1.0测试版本，该版本仅有简单的聊天、分享照片、修改个人资料等功能。随后，在两个月时间内发布了1.1、1.2和1.3三个测试版本，用户数也增长到五百万左右。截至2012年3月，微信注册用户数已经超过1亿；2012年9月，突破2亿；2013年1月，突破3亿；2013年第四季度，月活跃用户数已经达到3.55亿。目前，微信已在全球200多个国家和地区拥有大批用户，国内外月活跃用户超过2.7亿。微信公众账号截至目前已经增长到200多万个，并且每天有8000多个新的公众账号诞生，信息交互[1] 超过亿次。迄今为止微信已成为增速最快的手机应用，也是增速最快的互联网服务

[2]

。在短短两年多的时间里，微信已成为最热门的信息传播平台和大批手机用

户的生活方式，开创了移动互联网传播的新时代。

1.2课题研究现状

随着微信的快速发展，腾讯又推出了基于微信关注的应用，其便捷性和广大的用户群体使得基于微信关注的应用快速发展，各大企业都纷纷推出自己的微信公众平台，其中微信公众平台可以分为三类，下面将分别进行阐述。

1.2.1 订阅号

适用于个人和组织，为媒体和个人提供一种新的信息传播方式，构建与读者

1

基于微信关注的客户服务系统设计与实现

之间更好的沟通与管理模式。

1.2.2 服务号

适用于企业和组织，给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。

1.2.3 企业号

适用于企业，帮助企业和组织内部建立员工、上下游合作伙伴与企业IT系统间的连接。

1.3课题研究目的

微信庞大的用户群，使得基于微信关注的应用推广非常方便，不仅如此，基于微信的应用省去了传统app开发维护成本高，推广麻烦等一系列缺点，用户只需扫描关注即可使用各种功能。因此，开发基于微信关注的客户服务系统是大势所趋 。

本系统致力于为客户提供最方便最实用的生活工具，将客户和公司两个角色恰当的融合到一个系统中，在为客户带来方便的同时，对公司运营效率也有显著的提升，角色分离的设计使得公司员工各尽所能、各司其职。

1.4课题研究内容

本文所述基于微信关注的客户服务系统由前端和后台管理系统组成，其中前端功能有用户浏览产品，登录注册，查看公司新闻动态、产品相册、客户案例，在线下单，预定样品，查看管理自己的订单等等，上述功能只有在用户关注公众平台后才可使用，用户只需首次关注绑定即可，省去了每次输入用户名密码的繁琐。

后台管理系统有客户管理、角色管理、产品管理、订单管理、文章管理、样品管理、样品订单管理、咨询反馈管理等功能，其中产品管理下有产品分类和产品两个栏目，文章管理下有文章分类和文章两个栏目。角色即拥有不同权限的管理员，超级管理员有全部的操作权限，在角色管理一栏中，可以为角色分配不同的权限，系统根据角色权限显示相应的菜单，从而实现角色的分离。

2

基于微信关注的客户服务系统设计与实现

1.5本章小结

在本章中，从课题研究背景、课题研究现状、课题研究目标以及课题研究内

容较简要的阐述了本课题所设计和实现的系统。其中从课题研究背景和现状较生动的描述本课题所研究系统的外在条件。课题研究目标和研究内容描述了本系统的内在必要性和系统所具备的基本功能，方便于以后章节的描述。

3

基于微信关注的客户服务系统设计与实现

2 相关技术介绍

本章介绍系统开发的主要工具和技术，包括thinkPHP、bootstrap等主流框架及zendstudio开发环境和PHP、jquery，JavaScript等语言，还有系统 对软件、硬件的相关要求。

2.1 开发工具简介

2.1.1 网页开发工具

基于Web的可视化系统开发工具使开发者很方便的创建动态的Web应用程序。系统将采用Dreamweaver 进行页面的开发，它是用来快速创建数据驱动Web应用程序的开发环境。同时采用Photoshop制作相关图片进行网站美工。页面上使用的相关技术包括：Html，thinkPHP标签，Javascript，JQuery等。 2.1.2 系统开发工具

使用zendstudio进行系统框架的搭建和系统功能的实现。应用部署服务器采用Apache。框架采用目前最流行简洁的thinkPHP框架。 2.1.3数据库及其工具

数据库采用小型的关系型数据库MySQL，数据库工具采用phpMyAdmin。phpMyAdmin 是一个以PHP为基础，基于Web方式架构在网站主机上的MySQL的数据库管理工具，管理者可通过Web接口管理MySQL数据库。Web接口可以提供一个简易方式输入繁杂的SQL语法，尤其方便处理大量资料的导入及导出。 2.1.4建模工具

建模工具采用Office Visio 2007，Visio是微软公司出品的一款用于方便IT和商务专业人士对于较复杂信息，流程和系统的分析交流软件。使用该软件可以方便简单的进行业务流程图，数据流图，ER图，用例图等的绘制，使得开发效

4

基于微信关注的客户服务系统设计与实现

率得到显著的提升。

2.2 关键技术介绍

2.2.1 PHP

PHP（超文本预处理器）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl等语言的特点，非常利于初学者学习，使用非常广泛，主要用于Web网站开发，服务器脚本程序的编写等。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法，它可以比其他脚本语言更快速地执行动态网页。使用PHP语言编写的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；编译后的代码PHP也可以执行，通过预编译，可以达到加密和优化代码运行，使代码运行更快。 2.2.2 Jquery

Jquery是一个优秀的Javascript库。虽然它属于轻量级的js库 ，但兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本不再支持IE6/7/8浏览器。jQuery使开发者能更方便地处理HTML、events、实现动画效果，并且对AJAX交互方式进行了很好的封装，开发者可以很方便的调用。jQuery另外一个比较大的优势是，它的说明文档很全很详细，而且各种应用也有相应demo，同时还有许多成熟的插件可供选择。jQuery还能够使用户的html页面代码和html内容分离，也就是说，不用需要在html里面插入一些复杂的js来调用命令了，只需要定义id或class即可。 2.2.3 JavaScript

JavaScript也被称为ECMAScript，是常用web浏览器的一部分，实现了客户端脚本和用户之间的交互。用户可以通过JavaScript控制浏览器，与服务器进行异步通讯，还可以改变显示的文档内容。JavaScript尽管一些命名，句法和标准库相似，但它和Java是无关的，在语义上有很大的差别。它的解释器被称为

5

基于微信关注的客户服务系统设计与实现

JavaScript引擎，属于浏览器的一部分，JavaScript作为广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态和一些特效功能。 2.2.4 ThinkPHP架构

ThinkPHP是一个快速、兼容而且简单的轻量级国产PHP开发框架，作为一个整体开发解决方案，ThinkPHP能够解决应用开发中的大多数需要，因为其自身包含了兼容处理、基类库、数据库访问层、模板引擎、缓存机制、插件机制、角色认证、底层架构、表单处理等常用的组件，并且对于跨版本、跨平台和跨数据库移植都非常方便。 2.2.5 bootstrap架构

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，即它是由动态CSS语言Less编写而成。

2.2.6 MVC设计模式

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是实现用户界面的一种软件架构模式。[3]。它将一个给定的应用软件分为三个相互关联的部分，以独立的内部信息表示信息的展示或接受用户的方法。按照把业务逻辑、数据、界面显示进行分离的方法组织代码，将业务逻辑聚集到controller里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑的代码。MVC设计模式广泛用于用于映射传统的输入、处理和输出功能在一个逻辑[4]的图形化用户界面的结构中。

2.3 软件/硬件要求

2.3.1 软件要求

6

基于微信关注的客户服务系统设计与实现

软件要求即系统运行所必需的软件支持，主要有数据库、开发工具、服务器、和开发语言四个方面。其中数据库采用MySQL5.6.21，开发工具采用Zendstudio，服务器采用Apache2.4.9，PHP版本为PHP5.4.40。 2.3.2 硬件要求

硬件要求即系统运行所必需的硬件环境，主要有处理器、内存、磁盘等方面。 CPU为频率1GHz以上的32 位(x86)或64位(x64)处理器。内存要求为512MB内存（建议使用1G或以上内存）。硬盘空间要求有效硬盘空间1G或以上。

2.4 本章小结

本章主要介绍了系统开发的主要工具和技术，包括thinkPHP、bootstrap等主流框架及zendstudio开发环境和PHP、jquery，JavaScript等语言，此外还对系统运行所必需的硬件和软件要求也进行了详细说明，为后面系统的开发实现打下了较好的基础。

7

基于微信关注的客户服务系统设计与实现

3 需求分析

本章节主要进行系统进行需求分析，将从业务流程、前端、后台、交互几个方面进行需求的详细分析。首先将对整个业务流程进行梳理，对于每一个需求都画出用例图，以便更好的分析需求。

3.1业务流程概述

本文所述基于微信关注的客户服务系统前端主要实现客户注册登录绑定账号、在线下单、产品展示、案例展示、新闻展示、样品预定、订单查看等功能。后台实现了角色管理、客户管理、商品管理、新闻管理、订单管理、咨询管理等功能。客户关注微信公众平台后方可使用以上功能，当用户购买过产品后就可预定样品。

注册角色管理登录客户管理普通客户订购产品文章新闻管理查看订单有购买记录客户查看信息管理员产品管理订单管理预定样品

图 3-1 系统功能概述分析图

图3-1描述了本文所述基于微信关注的客户服务系统的主要功能。其中用户可以注册登录、浏览商品、在线下单、查看订单。管理员可以管理订单、管理产品、分配角色等。

8

基于微信关注的客户服务系统设计与实现

3.2前端需求分析

3.2.1 首页展示

首页是整个系统前端的入口，用户可以通过微信公众平台底部菜单和应用菜单导航栏进入首页。首页展示采用比较舒适的天蓝渐变色，使人看上去比较舒服。首页展示内容有关于我们、产品服务、新闻资讯、产品列表、产品相册、样品列表、客户案例、关注我们、联系我们九大板块组成，点击每个版块即可进入相应版块。

关于我们产品服务<><>联系我们<><>关注我们<><><><><>产品列表新闻资讯客户案例客户产品相册样品列表

图 3-2 首页展示用例图

图3-2描述了首页展示的内容：关于我们、产品服务、新闻资讯、产品列表、产品相册、样品列表、客户案例、关注我们、联系我们。用户进入首页有两种途径：微信公众平台底部菜单、导航栏。 3.2.2 商品列表

商品列表页展示最新十条商品，用户可通过微信公众号菜单和首页进入商品列表页面，商品列表页面可以通过商品分类进行商品的筛选。每个商品展示预览图片，标题，规格，详细描述等信息，用户可选择在线下单进行购买商品。

9

基于微信关注的客户服务系统设计与实现

立即下单<><>产品筛选<><><><>预览图片标题规格客户详细描述

图 3-3 产品列表展示用例图

图3-3描述了产品列表页的功能，每个产品展示预览图片，标题，规格，详细描述等信息，用户可选择在线下单进行购买商品。 3.2.3 样品列表

样品列表页展示最新十条样品，用户可通过微信公众号菜单和首页进入样品品列表页面，样品列表页面可以通过样品分类进行样品的筛选。每个样品展示图片，标题，规格，特性等信息，当客户已经购买过商品的话便可以预定样品，否则预定样品按钮不可用。

立即下单<><>样品筛选<><><><>标题预览图片规格客户详细描述

图 3-4 样品列表展示用例图

10

基于微信关注的客户服务系统设计与实现

图3-4描述了样品列表页的主要功能，每个样品展示预览图片，标题，规格，详细描述等信息，已经购买过产品的用户可选择在线下单进行购买商品。 3.2.4产品相册列表

产品相册列表展示最新产品的高清图册，用户可以通过微信公众平台底部菜单和首页进入产品相册列表页。产品相册采用精美的圆角相册展示，用户点击后可查看高清大图，也可左右切换，方便浏览。

<>产品图片列表<>高清大图<>滑动展示客户

图 3-5 产品相册列表展示用例图

图3-5描述了产品相册基本功能，每个预览图片点击后可浏览高清大图，也可左右滑动查看。 3.2.5产品服务列表

产品服务列表展示公司服务内容及范围，用户可以通过微信公众平台底部菜单和首页进入产品服务列表页。该列表页还展示比较固定项目的报价单，使客户一目了然。

<><>服务列表<>详细介绍报价单客户

图 3-6 产品服务列表展示用例图

图3-6描述了服务列表的基本功能，每个服务项目点击后可浏览详细介绍，也可查看整个报价单。 3.2.6案例展示列表

11

基于微信关注的客户服务系统设计与实现

案例展示列表页展示公司经典案例，用户可以通过微信公众平台底部菜单和首页进入该页。该页详细介绍案例，并提供地址查看，使得客户更直观的了解公司信息和实力。

<><>案例列表<>成果展示客户详细介绍图 3-7 产品服务列表展示用例图

图3-7描述了案例列表页基本功能，每个案例项目点击后可浏览详细介绍，也可查看详细成果。 3.2.7新闻资讯列表

新闻资讯列表页展示最新业内咨询，产品最新优惠等，用户可以通过微信公众平台底部菜单和首页进入该页。新闻资讯可以通过分类进行筛选，客户也可以发表自己的看法进行评论。

详细内容<><>新闻列表<><>信息筛选客户信息评论

图 3-8 产品服务列表展示用例图

图3-8描述了新闻资讯页的基本功能，每条信息点击后可浏览详细内容，也可按类别筛选，评论。 3.2.8用户咨询反馈

12

基于微信关注的客户服务系统设计与实现

用户咨询反馈页给用户提供反馈机制，用户可将自己建议反馈给公司。用户可以通过微信公众平台底部菜单和首页进入该页。

标题<><>客户咨询反馈<><><>顶层包::客户提交信息联系方式内容 图 3-9 产品服务列表展示用例图

图3-9描述了咨询反馈页的基本功能，进入该页后用户可以反馈信息给管理员，当标题、内容、联系方式填写正确后才能提交。 3.2.9用户登录

当用户首次进入应用进行购买商品或查看订单时会自动转向登录页面，由于用户每次进入应用时会随身携带唯一的openid标识，所以用户首次登录后以后可以不用登录，便可使用各项功能。

<>用户名或密码错误登陆失败重新登陆用户名和密码正确用户(from Use Case View)输入登陆信息登陆验证<>登陆成功进入功能界面 图 3-10 用户登陆用例分析图

图3-10描述了用户登录的流程：输入用户名和密码，验证通过后即可登录成功进入功能页面，否则提示相应的错误，重新输入登录。 3.2.10用户在线下单

在产品列表页用户可以在线下单，用户可以通过微信公众平台底部菜单和首页进入商品列表页进行在线下单。

13

基于微信关注的客户服务系统设计与实现

产品品选择<><><><>选择支付方式<>客户货到付款提交订单填写相关信息<>在线支付

图 3-11 用户在线下单用例分析图

图3-11描述了用户在线下单的流程：选择商品，填写相关信息，填写错误则提示重填，否则提交订单并提示继续下单还是查看订单，根据选择跳转到商品列表页或订单中心。 3.2.11用户订单信息查看

用户可以通过微信公众平台底部菜单查看订单信息，对于未发货的订单可以取消，已发货的订单可以查看物流信息。其中订单信息以未支付，待发货，待收货状态进行筛选。

14

基于微信关注的客户服务系统设计与实现

支付<>未支付订单<>取消<><><>未发货订单<><><>顶层包::已购买产品用户<>已完成订单评价已发货订单查看物流信息

图 3-12 用户查看订单用例分析图

图3-12描述了用户查看订单的流程：订单分为三种：未支付订单、未发货订单、已发货订单和已完成订单，对于未支付的订单用户可选择继续支付货取消订单。对于未发货订单用户可选择取消订单。对于已发货订单用户可查看订单物流信息。对于已完成订单用户可评价。

3.3后台需求分析

3.3.1管理员登录注销

系统管理员和系统角色首次访问后台是会自动转向登录页面，登录成功后根据角色权限显示相应的菜单。登录之后也可注销账号退出登录。

<>用户名或密码错误登陆失败重新登陆用户名和密码正确用户(from Use Case View)输入登陆信息登陆验证<>登陆成功进入功能界面 图 3-13 管理员登录用例分析图

图3-13描述了用户登录的流程：输入用户名和密码，验证通过后即可登录

15

基于微信关注的客户服务系统设计与实现

成功进入功能页面，否则提示相应的错误，重新输入登录。 3.3.2注册用户管理

系统管理员和有用户管理权限的角色登录后台后可以查看、编辑、添加、删除、锁定注册用户。

用户查看<>用户编辑<><><>用户搜索顶层包::管理员用户删除<>用户添加

图 3-14 管理员登录用例分析图

图3-14描述了管理员管理用户的流程：管理员可以添加、编辑、搜索、查看、删除用户。 3.3.3角色管理

角色就是具有不同权限的系统管理员，超级管理员可以创建角色并分配相应的权限，登录后台时根据相应的角色权限展示功能菜单，有角色管理权限的角色也可以添加、编辑系统角色。

16

基于微信关注的客户服务系统设计与实现

角色查看<>角色编辑<><><>角色搜索顶层包::管理员角色删除<>角色添加

图 3-15 管理员管理角色用例分析图

图3-15描述了管理员管理角色的流程：管理员可以添加、编辑、搜索、查看、删除角色。 3.3.4产品管理

产品管理分为产品分类管理和商品管理，有产品管理权限的角色可以添加、编辑、删除产品及其分类。

<>产品分类添加<><>产品分类查看<><><><><><>产品查看产品编辑产品添加选择产品分类<><><>填写产品信息管理员产品分类编辑产品分类删除产品删除

图 3-16 管理员管理产品用例分析图

17

基于微信关注的客户服务系统设计与实现

图3-16描述了管理员管理产品的流程：管理员可以添加、编辑、搜索、查看、删除产品及其分类。 3.3.5新闻管理

新闻管理包含新闻分类和新闻管理。有新闻管理权限的角色可以添加、编辑、删除新闻及其分类。

<>新闻分类添加<><>新闻分类查看<><><><><><>新闻查看新闻编辑新闻添加选择新闻分类<><><>填写新闻信息管理员新闻分类编辑新闻分类删除新闻删除

图 3-17 管理员管理新闻用例分析图

图3-17描述了管理员管理新闻的流程：管理员可以添加，编辑，搜索，查看，删除新闻及其分类。 3.3.6订单管理

订单管理包含订单的搜索，按状态筛选，订单批量导出打印，订单编辑，查看等功能。有订单管理权限的角色可以编辑、打印订单。

18

基于微信关注的客户服务系统设计与实现 查询订单新增订单删除订单<>开立之后审批订单修改订单审批之后<>国外订单用户(from Use Case View)查看订单详情订单跟踪改变订单状态订单入库<>清关付款之后生成入库单付款开发票(from Use Case View) 图 3-18 管理员管理订单用例分析图 图3-18描述了管理员管理订单的流程：管理员可新增订单、产看订单、查询订单、删除订单、编辑修改订单、跟踪订单产看订单物流信息。 3.3.7咨询反馈管理

该功能可查看，编辑客户的咨询反馈信息。有该权限的角色可以管理用户反馈咨询信息。

<><><>咨询反馈信息查看咨询反馈信息状态修改管理员咨询反馈信息删除

图 3-19 管理员管理咨询反馈例分析图

图3-19描述了管理员管理咨询反馈信息的流程：管理员查看、编辑修改咨询反馈信息。

19

基于微信关注的客户服务系统设计与实现

3.4交互的实现

3.4.1客户端与服务器的交互

客户端通过发送HTTP请求跟服务器进行异步交互，服务器收到请求后返回相应的内容到客户端，客户端获取内容后展示在页面上。

JavaScript发送特定请求PHP程序<>展示给用户

图 3-20客户端与服务器的交互分析图

图3-20描述了客户端与服务器交互的分析图，客户端向服务器发送HTTP请求，服务器根据请求内容返回相应的内容并展现给用户。 3.4.2 微信服务器与系统的交互

微信公众平台开发接口提供与用户进行消息交互、自定义菜单交互的能力。对于成功接入公众平台开发接口的公众账号，当用户发消息给公众号，微信公众平台服务器会使用http请求对接入的网址进行消息推送，第三方服务器可通过响应包回复特定结构，从而达到回复消息的目的。

[6]

[5]

20

基于微信关注的客户服务系统设计与实现

微信服务器动作用户推送给用户发送特定请求返回相应内容系统

图 3-21微信公众平台与系统程序的交互分析图

图3-21描述了微信公众平台与系统交互的分析图，首先在微信公众平台后台填写向本系统发送请求的地址，微信服务器会发送一个验证请求，验证通过后就可以启用该配置，以后每次用户在公众平台有动作时，微信服务器会将相应的请求发送到填写的地址，系统接收到请求后返回相应的内容给微信服务器，微信服务器接收到请求后检查无误后推送给用户展示在微信公众平台。

3.5本章小结

本章主要对项目课题进行了需求分析，根据业务流程的步骤和功能将系统划分为前端和后台两个模块：其中前端模块通过产品、新闻资讯、在线下单、反馈咨询等方面介绍需求。后台模块通过角色管理、用户管理、订单管理、商品管理、新闻管理、咨询管理等方面阐述了具体需求。

21

基于微信关注的客户服务系统设计与实现

4 系统设计

本章主要是在第三章需求分析的基础上，对系统进行详细的模块划分，并详细阐述每一个模块的功能，及其具体实现。同时对系统的数据库进行设计，定义系统所需要使用的表。

4.1系统数据库设计

4.1.1 ER图设计

整个系统中实体之间的联系比较复杂，为了能够清晰简洁的阐述清楚各个实体之间的联系，采用ER图（实体-联系图）来表示他们之间的联系。在设计时，主要从系统整体和主要模块方面进行ER图的设计。

id名称创建时间1idNN产品分类id名称预览图价格数量描述产品分类名称创建时间产品用户id手机N地址订单id联系人状态改变时间创建时间商品单价11订单价格支付方式id内容文章评论N发布时间图片用户名密码id文章id内容商品id标题联系方式评论时间快递公司创建时间添加添加添加添加1id文章id标题分类id

图 4-1系统E-R图

图4-1描述了系统E-R图，主要对象有商品，角色，文章（新闻），用户，角色。其中，每个角色可以添加多个商品，订单，文章，每个用户可以有多个订单，多条咨询反馈，每篇文章有多个评论，每个用户有多个评论，每个订单中可以有多个商品。 4.1.2系统表设计

22

N文章分类1名称角色权限客户订单状态预览图快递单号密码11N数量商品名称提交N1id咨询反馈N发布内容

基于微信关注的客户服务系统设计与实现

系统一共包括10张表，其中表前缀为wx_,用于方便识别属于微信数据库。现各表分别介绍如下：

wx_article 文章新闻表：主要用于保存发表的新闻文章信息。 中文名 文章ID 文章标题 文章分类 文章内容 预览图 发布时间

表 4-1文章新闻表

字段名 类型 id bigint（20） name varchar2（200） classifyid int（20） content Text(10000) preview varchar2（200） createdate datetime

主键 外键

√ √

null

× × × × ×

默认值

表4-1描述了文章新闻数据表，该表存储了管理员发布的一些文章，包括新闻、活动等信息其中文章分类字段classifyid为外键，对应于文章分类表的id。

wx_article_classify 文章新闻分类表：主要用于保存新闻文章分类信息。 中文名 文章分类ID 文章分类名称 添加时间

表 4-2文章新闻分类表 字段名 类型 主键 外键 null 默认值 id bigint（20） √ × name varchar2（200） × createdate datetime

表4-2描述了文章新闻分类数据表，该表存储了文章分类信息。主键id是每条字段的唯一标识符，文章表可以引用该id，从而确定文章分类信息。

wx_article_comment 文章新闻评论表：主要用于保存新闻文章评论信息。 中文名

文章评论ID 文章ID

文章评论标题 文章评论内容 邮箱

评论时间

表 4-3文章新闻评论表 字段名 类型 主键 外键 id bigint（20） √ articleid bigint（20） √ name Varchar2（200） content Text(10000) Email varchar2（200） createdate datetime

null

× × × × ×

默认值

表4-3描述了文章新闻评论数据表，该表存储了文章评论信息。主键id是每条字段的唯一标识符，外键articleid对应相应的文章，从而确定文章评论信息。

23

基于微信关注的客户服务系统设计与实现

wx_consult 咨询反馈表：主要用于保存用户咨询反馈信息。 中文名 咨询ID 标题 内容 邮箱

发布时间

表 4-4咨询反馈表

字段名 类型 id bigint（20） name Varchar2（200） content Text(10000) Email varchar2（200） createdate datetime

主键 外键

√

null

× × × ×

默认值

表4-4描述了用户咨询反馈数据表，该表存储了用户咨询反馈信息。主键id是每条字段的唯一标识符，保存内容有标题、内容、联系方式、反馈时间。

wx_order 订单表：主要用于保存用户提交的订单信息。 表 4-5订单表

中文名 字段名 类型 订单ID id bigint（20） 用户ID userid bigint（20） 联系人 name Varchar2（200） 手机 phone Varchar2(11) 地址 address varchar2（500） 商品id productid Bigint(20) 商品名称 productname Varchar2(100) 支付方式 payway Int(5) 商品数量 Amount Int(5) 订单总价 Price Float(15) 商品单价 Singleprice Flaot(10) 订单状态 Status Int(5) 快递公司 expresscompany Varchar(20) 快递单号 Expressno Varchar(24) 预览图 Preview Varchar2(100) 状态改变时间 Changedate datetime 下单时间 createdate datetime

主键 外键

√ √ √

null

× × × × ×

默认值

表4-5描述了订单数据表，该表存储了订单信息。主键id是每条字段的唯一标识符，外键productid对应相应的产品，从而确定订单产品，userid也是外键，对应用户id，从而确定订单用户，此外保存了订单的一些基本信息，入联系人、联系方式、价格、数量、地址等等。

wx_product 产品表：主要用于保存产品信息。

表 4-6产品信息表

24

基于微信关注的客户服务系统设计与实现

中文名 产品ID 产品分类id 产品标题 产品描述 预览图 产品价格 库存数量 添加时间

字段名 id

classify name describe Preview Price Amount createdate 类型 bigint（20） bigint（20） varchar(100) text（20000） Varchar2(50) Float(10) Float(10) datetime 主键 外键 √ √ null

× × × × 默认值

表4-6描述了产品数据表，该表存储了产品信息。主键id是每条字段的唯一标识符，外键classifyid对应相应的产品分类，从而确定产品分类信息。此外该表还存储了产品的一些基本信息，如标题、描述、预览图片、价格、数量等等。

wx_product_classify 产品分类表：主要用于保存产品分类信息。 中文名 产品分类ID 标题

发布时间

表 4-7产品分类表

字段名 类型 id bigint（20） name Varchar2（200） createdate datetime

主键 外键 null 默认值

√ × ×

表4-7描述了产品分类数据表，该表存储了产品分类信息。主键id是每条字段的唯一标识符，产品表应用该id，而确定产品分类信息。

wx_role 角色表：主要用于保存管理角色信息。 中文名

角色ID 角色名

登录后台密码 状态 权限

上次登录时间 创建时间

表 4-8系统角色表

字段名 类型 id bigint（20） name Varchar2（200） password Varchar2(100) status int（5） authority Varchar2(100) logindate Datetime createdate datetime

主键 外键

√

null

× × × ×

默认值

表4-8描述了系统角色数据表，该表存储了系统角色相关信息。主键id是每条字段的唯一标识符，此外还有角色名称和密码用于登录后台，状态表示该角色可用与否，还有角色最后一次登录时间，权限等，拥有角色管理权限的管理员可以编辑这些信息。

wx_user 用户表：主要用于保存用户信息。

25

基于微信关注的客户服务系统设计与实现

中文名 用户ID 用户名 登录密码 状态 opeinid 邮箱 年龄 性别 住址

上次登录时间 注册时间

表 4-9系统用户表

字段名 类型 id bigint（20） username Varchar2（200） password Varchar2(100) status int（5） openid Varchar2(100) Email Varchar2(50) Age Int(5) Gender Int(5) Address Varchar2(300) logindate Datetime createdate datetime

主键 外键

√ null

× × × × 默认值

表4-9描述了用户数据表，该表存储了用户相关信息。主键id是每条字段的唯一标识符，此外还有用户名称和密码用于登录，状态表示该角色可用与否，还有角色最后一次登录时间，权限、邮箱、性别、年龄、住址等等，拥有用户管理权限的管理员可以编辑这些信息。

4.2系统分层设计

视图层(view) 控制层(control) 模型层(model) Internet Explorer 、chrome、Firefox、safari、移动端浏览器 订单管理 产品管理 文章管理 角色管理 数据库 图 4-1 系统分层图 样品管理 用户管理 咨询反馈 （1）视图层(view)：用来与用户交互，并把来自系统的信息显示给客户。 （2）控制层(control)：这一层处理应用的核心业务逻辑。

（3）模型层(model)：这一层处理数据库信息，按照实体类型建模。 4.2.1模型层设计（model）

在MVC的三个部件中，模型拥有最多的处理任务。例如它可能用像EJBs和ColdFusion Components这样的构件对象来处理数据库，被模型返回的数据是

26

基于微信关注的客户服务系统设计与实现

中立的，就是说模型与数据格式无关，这样一个模型能为多个视图提供数据，由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。

本文描述系统将每一个实体抽象成一个model对象，实体属性对应对象的属性，对实体的操作对应对象的方法，除此之外将所有实体的共性操作抽象出来放到基础对象中，其他对象均继承自此对象，下面重点讲述系统的几个重要模型。

（1）基础模型Model

该模型封装了所有基础操作，包括数据库的连接，对数据库表基本的增删改查操作，此外该类还实现了对数据的安全过滤和缓存机制。

（2）文章新闻模型ArticleModel

该模型继承自Model模型，此外还定义了属于自己的属性：id、name、classify、preview、content、createDate。

（3）订单模型OrderModel

该模型继承自Model模型，此外还定义了属于自己的属性：'id', 'userid','name','mobile','address','productid', 'productname','payway',

'status','amount','price','singleprice','expresscompany','expressno','preview','changeDate','createDate'。

（4）产品模型ProductModel

该模型继承自Model模型，此外还定义了属于自己的属性：'id','classify', 'name','describe','preview','price','amount','createDate'。

（5）用户模型UserModel

该模型继承自Model模型，此外还定义了属于自己的属性：'id', 'username','password', 'openid','email', 'age','gender','address','createDate'。 4.2.2视图层设计（view）

视图是用户看到并与之交互的界面。对老式的Web应用程序来说，视图就是由HTML元素组成的界面，在新式的Web应用程序中，HTML依旧在视图中扮演着重要的角色，但一些新的技术已层出不穷，它们包括Adobe Flash和像

27

基于微信关注的客户服务系统设计与实现

XHTML，XML/XSL,WML等一些标识语言和Web services.

本文描述系统将每一个视图对应一个HTML模版页面，model层的数据经过control层运算后传到视图层，由视图负责渲染模版展示出来。下面重点讲述系统的几个重要视图。

(1)文章新闻视图ArticleView

该视图下包含index、add、edit视图，分别用来展示、添加、编辑文章新闻 。

(2)订单视图OrderView

该视图下包含index、add、edit、expressinfo、send视图，分别用来展示订单、添加订单、编辑订单、查看物流信息、订单发货。

(3)产品视图ProductView

该视图下包含index、add、edit视图，分别用来展示、添加、编辑产品。

(5)用户视图UserView

该视图下包含index、add、edit、login、register视图，分别用来展示、添加、编辑用户和用户的登录注册 。 4.2.3控制层设计（control）

控制器接受用户的输入并调用模型和视图去完成用户的需求，所以当单击Web页面中的超链接和发送HTML表单时，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

本文所描述的系统将每一个controler对应一个model，多个view。每个control都继承自基础控制器Control，下面重点讲述系统的几个重要控制器。

（1）基础控制器Control

该控制器实现了所有控制器的一些共性操作，包括模版渲染、数据处理、重定向、缓存操作等。

（2）文章新闻控制器ArticleControl

该控制器继承自基础控制器Control，除此之外还有index、add、edit、

28

基于微信关注的客户服务系统设计与实现

save、delete操作，分别对应处理文章新闻视图中的列表、添加、编辑、保存、删除操作。

（4）订单控制器OrderControl

该控制器继承自基础控制器Control，除此之外还有index、add、edit、save、delete操作，分别对应处理订单视图中的列表、添加、编辑、保存、删除操作。

（4）产品控制器ProductControl

该控制器继承自基础控制器Control，除此之外还有index、add、edit、save、delete操作，分别对应处理产品视图中的列表、添加、编辑、保存、删除操作。

（5）用户控制器UserControl

该控制器继承自基础控制器Control，除此之外还有index、add、edit、save、delete、login、singup操作，分别对应处理用户视图中的列表、添加、编辑、保存、删除操作和用户登录、注册。

4.3系统模块详细设计

4.3.1系统模块基本设计

基于微信关注的客户服务系统 订单管理 产品管理 用户管理 角色管理 样品管理 文章管理 咨询管 理

图 4-2 系统模块图

整个系统被划分成七个子模块，每个模块的主要功能如下：

（1）订单管理模块，包括订单新增，订单修改，订单删除，订单查询，订

29

基于微信关注的客户服务系统设计与实现

单跟踪，订单筛选，订单打印等功能。

（2）产品管理模块，包括产品及分类新增，产品及分类修改，产品及分类删除，产品及分类查询等功能。

（3）用户管理模块，包括用户的新增，用户的查询，用户的编辑，用户的删除等功能。

（4）角色管理模块，包括角色的查询，角色的修改，角色的查看，角色权限的编辑，角色的新增等功能。

（5）样品管理模块，包括样品的新增，样品的修改，样品查看，样品删除等功能。

（6）文章管理模块，包括文章信息及其分类的新增、修改、删除、查看等功能。

（7） 咨询反馈模块，包括咨询反馈信息的修改、删除、查看等功能。 4.3.2产品管理模块

该模块主要是针对产品及其分类的增删改查。

如下图4-3所示，该图描述了产品管理模块流程图，该模块实现产品的新增、修改、查询、删除操作。 进入产品管理页面后是所有产品的列表，点击新增产品按钮后进入新增产品页面，在该页面用户需填写产品标题，选择产品分类，上传产品预览图片，填写产品价格、数量、规格、详细描述等信息后点击提交按钮后即可，提交成功后转入到查询界面。

在搜索框中输入信息，点击查询按钮，系统根据输入信息进行模糊匹配产品信息，将产品标题中包含该字符串的所有产品罗列出来展示在页面，用户可对搜索出来的产品进行编辑，删除操作。

30

基于微信关注的客户服务系统设计与实现

状态可编辑产品查看提交新增产品显示新增产品页面点击新增按钮点击查询按钮显示查询结果点击取消按钮点击删除按钮确认删除提示点击确定按钮点击编辑按钮显示产品编辑页面点击返回按钮提交编辑信息

图 4-3 产品管理模块流程图

在查询出来的产品中选中相应的产品后可对其进行编辑和删除。点击编辑按钮后进入编辑界面，此时所有产品信息都显示出来，并且是处于可编辑状态，用户编辑相应的信息后点击保存按钮即可，保存成功后转入到查询界面。点击删除按钮后弹出确认删除的提示框，用户选择确定后删除相应产品，并刷新当前页面，用户选择取消后关闭对话框，不做任何操作。

在产品新增页面，当用户提交信息不符合规定时会提示错误信息，例如：产品标题须是6到20个汉字和英文字符串，可以是纯汉字或英文，价格和数量字段强制填写数字类型，上传图片可以是本地上传或远程图片。产品描述是10到

31

基于微信关注的客户服务系统设计与实现

10000个字符的字符串。当信息全部填写正确后才能提交到后台，提交至后台后对所有字段进行过滤，首先过内容中包含的滤脚本标签，即采用strip_tags函数进行过滤。

产品分类信息的增删改查：

状态可编辑产品分类查看提交新增产品分类点击新增按钮点击查询按钮显示新增产品分类页面显示查询结果点击取消按钮点击删除按钮确认删除提示点击确定按钮点击编辑按钮显示产品分类编辑页面点击返回按钮提交编辑信息

图 4-4 产品分类管理模块流程图

图4-4描述了产品分类管理模块流程图，该模块实现产品分类的新增、修改、查询、删除操作。 进入产品分类管理页面后是所有产品分类的列表，点击新增产品分类按钮后进入新增产品分类页面，在该页面用户需填写产品分类标题，备注等信息后点击提交按钮后即可，提交成功后转入到查询界面。

32

本文来源：https://www.bwwdw.com/article/19pg.html