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.2.2 服务号

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

1.2.3 企业号

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

1.3课题研究目的

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

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

1.4课题研究内容

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

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

1.5本章小结

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

 

 

 

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图，用例图等的绘制，使得开发效率得到显著的提升。

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是无关的，在语义上有很大的差别。它的解释器被称为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 软件要求

软件要求即系统运行所必需的软件支持，主要有数据库、开发工具、服务器、和开发语言四个方面。其中数据库采用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等语言，此外还对系统运行所必需的硬件和软件要求也进行了详细说明，为后面系统的开发实现打下了较好的基础。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3  需求分析

 

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

 

3.1业务流程概述

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

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

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

3.2前端需求分析

3.2.1 首页展示

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

图 3-2 首页展示用例图

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

3.2.2 商品列表

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

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

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

3.2.3 样品列表

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

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

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

3.2.4产品相册列表

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

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

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

3.2.5产品服务列表

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

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

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

3.2.6案例展示列表

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

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

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

3.2.7新闻资讯列表

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

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

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

3.2.8用户咨询反馈

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

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

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

3.2.9用户登录

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

图 3-10 用户登陆用例分析图

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

3.2.10用户在线下单

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

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

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

3.2.11用户订单信息查看

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

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

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

3.3后台需求分析

3.3.1管理员登录注销

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

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

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

3.3.2注册用户管理

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

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

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

3.3.3角色管理

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

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

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

3.3.4产品管理

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

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

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

3.3.5新闻管理

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

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

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

3.3.6订单管理

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

图 3-18 管理员管理订单用例分析图

图3-18描述了管理员管理订单的流程：管理员可新增订单、产看订单、查询订单、删除订单、编辑修改订单、跟踪订单产看订单物流信息。

3.3.7咨询反馈管理

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

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

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

3.4交互的实现

3.4.1客户端与服务器的交互

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

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

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

3.4.2 微信服务器与系统的交互

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

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

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

3.5本章小结

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

 

 

 

 

 

 

 

 

 

4  系统设计

 

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

4.1系统数据库设计

4.1.1 ER图设计

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

图 4-1系统E-R图

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

4.1.2系统表设计

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

wx_article 文章新闻表：主要用于保存发表的新闻文章信息。

表 4-1文章新闻表

中文名	字段名	类型	主键	外键	null	默认值
文章ID	id	bigint（20）	√		×
文章标题	name	varchar2（200）			×
文章分类	classifyid	int（20）		√	×
文章内容	content	Text(10000)			×
预览图	preview	varchar2（200）			×
发布时间	createdate	datetime

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

 

wx_article_classify 文章新闻分类表：主要用于保存新闻文章分类信息。

表 4-2文章新闻分类表

中文名	字段名	类型	主键	外键	null	默认值
文章分类ID	id	bigint（20）	√		×
文章分类名称	name	varchar2（200）			×
添加时间	createdate	datetime

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

 

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

表 4-3文章新闻评论表

中文名	字段名	类型	主键	外键	null	默认值
文章评论ID	id	bigint（20）	√		×
文章ID	articleid	bigint（20）		√	×
文章评论标题	name	Varchar2（200）			×
文章评论内容	content	Text(10000)			×
邮箱	Email	varchar2（200）			×
评论时间	createdate	datetime

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

 

wx_consult 咨询反馈表：主要用于保存用户咨询反馈信息。

表 4-4咨询反馈表

中文名	字段名	类型	主键	外键	null	默认值
咨询ID	id	bigint（20）	√		×
标题	name	Varchar2（200）			×
内容	content	Text(10000)			×
邮箱	Email	varchar2（200）			×
发布时间	createdate	datetime

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

 

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

表 4-5订单表

中文名	字段名	类型	主键	外键	null	默认值
订单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

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

 

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

表 4-6产品信息表

中文名	字段名	类型	主键	外键	null	默认值
产品ID	id	bigint（20）	√		×
产品分类id	classify	bigint（20）		√	×
产品标题	name	varchar(100)			×
产品描述	describe	text（20000）			×
预览图	Preview	Varchar2(50)
产品价格	Price	Float(10)
库存数量	Amount	Float(10)
添加时间	createdate	datetime

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

 

wx_product_classify 产品分类表：主要用于保存产品分类信息。

表 4-7产品分类表

中文名	字段名	类型	主键	外键	null	默认值
产品分类ID	id	bigint（20）	√		×
标题	name	Varchar2（200）			×
发布时间	createdate	datetime

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

 

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

表 4-8系统角色表

中文名	字段名	类型	主键	外键	null	默认值
角色ID	id	bigint（20）	√		×
角色名	name	Varchar2（200）			×
登录后台密码	password	Varchar2(100)			×
状态	status	int（5）			×
权限	authority	Varchar2(100)
上次登录时间	logindate	Datetime
创建时间	createdate	datetime

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

 

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

表 4-9系统用户表

中文名	字段名	类型	主键	外键	null	默认值
用户ID	id	bigint（20）	√		×
用户名	username	Varchar2（200）			×
登录密码	password	Varchar2(100)			×
状态	status	int（5）			×
opeinid	openid	Varchar2(100)
邮箱	Email	Varchar2(50)
年龄	Age	Int(5)
性别	Gender	Int(5)
住址	Address	Varchar2(300)
上次登录时间	logindate	Datetime
注册时间	createdate	datetime

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

4.2系统分层设计

视图层(view)	Internet Explorer 、chrome、Firefox、safari、移动端浏览器
控制层(control)	订单管理	产品管理	文章管理	角色管理	样品管理	用户管理	咨询反馈
模型层(model)	数据库

图 4-1 系统分层图

（1）视图层(view)：用来与用户交互，并把来自系统的信息显示给客户。

（2）控制层(control)：这一层处理应用的核心业务逻辑。

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

4.2.1模型层设计（model）

在MVC的三个部件中，模型拥有最多的处理任务。例如它可能用像EJBs和ColdFusion Components这样的构件对象来处理数据库，被模型返回的数据是中立的，就是说模型与数据格式无关，这样一个模型能为多个视图提供数据，由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。

本文描述系统将每一个实体抽象成一个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和像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、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）订单管理模块，包括订单新增，订单修改，订单删除，订单查询，订单跟踪，订单筛选，订单打印等功能。

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

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

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

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

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

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

4.3.2产品管理模块

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

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

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

 

 

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

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

在产品新增页面，当用户提交信息不符合规定时会提示错误信息，例如：产品标题须是6到20个汉字和英文字符串，可以是纯汉字或英文，价格和数量字段强制填写数字类型，上传图片可以是本地上传或远程图片。产品描述是10到10000个字符的字符串。当信息全部填写正确后才能提交到后台，提交至后台后对所有字段进行过滤，首先过内容中包含的滤脚本标签，即采用strip_tags函数进行过滤。

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

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

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

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

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

在产品分类新增和编辑页面对用户输入的信息进行检查，产品分类标题为必填项，必须2到20个字符的汉字、英文组合或纯汉字或英文。备注不是必填项，信息填写正确后方可提交至后台，提交至后台后需要对每个字段值进行过滤，采用strip_tags函数过滤。

4.3.3订单管理模块

该模块主要是针对订单的增删改查。

图下4-5所示，该图描述了订单管理模块流程图，该模块实现订单的新增、修改、查询、删除操作。 进入订单管理页面后是所有订单的列表，点击新增订单按钮后进入新增产品页面，在该页面用户需选择产品，填写联系人，填写联系地址、数量、选择付款方式、填写用户名等信息后点击提交按钮后即可，提交成功后转入到查询界面。

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

 

 

图 4-5 订单管理模块流程图

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

订单状态改变情况如下图所示。

图 4-6 订单状态改变流程图

图4-6描述了订单状态改变流程图，对于订单，相关规则为：用户提交的订单，如果是货到付款，则初始状态为未发货，管理员可选择发货，发货时需填写物流信息。如果是在线支付，若用户付款成功，则该订单状态为未发货。对于在线支付而又未支付的订单，显示修改价格按钮，管理员可以修改此订单的价格，用户可以选择支付。对于已发货的订单可以查看物流信息，物流信息采用第三方接口api，提供物流公司和快递号即可查看。

4.3.4文章管理模块

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

 

图 4-7 文章管理模块流程图

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

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

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

在文章新增页面，当用户提交信息不符合规定时会提示错误信息，例如：文章标题须是6到20个汉字和英文字符串，可以是纯汉字或英文，价格和数量字段强制填写数字类型，上传图片可以是本地上传或远程图片。文章描述是10到10000个字符的字符串。当信息全部填写正确后才能提交到后台，提交至后台后对所有字段进行过滤，首先过内容中包含的滤脚本标签，即采用strip_tags函数进行过滤。

文章分类信息的增删改查：

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

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

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

在文章分类新增和编辑页面对用户输入的信息进行检查，文章分类标题为必填项，必须2到20个字符的汉字、英文组合或纯汉字或英文。备注不是必填项，信息填写正确后方可提交至后台，提交至后台后需要对每个字段值进行过滤，采用strip_tags函数过滤。

 

图 4-8 文章分类管理模块流程图

4.3.5用户管理模块

该模块主要是针对用户的增删改查。

如下图4-9所示，该图描述了用户管理模块流程图，该模块实现用户的新增、修改、查询、删除操作。 进入用户管理页面后是所有用户的列表，点击新增用户按钮后进入新增用户页面，在该页面填写用户名，密码，openid等信息后点击提交按钮后即可，提交成功后转入到查询界面。

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

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

图 4-9 用户管理模块流程图

 

用户状态改变情况如下图4-10所示，该图描述了用户状态改变流程图，对于用户，状态有禁用和正常两种，所有用户管理员均可以将其删除 ，对于禁用的用户显示激活按钮，可以将其激活回到正常状态。

 

图 4-10 用户状态改变流程图

4.3.6角色管理模块

该模块主要是针对角色的增删改查。

如下图4-11所示，该图描述了角色管理模块流程图，该模块实现角色的新增、修改、查询、删除操作。 进入角色管理页面后是所有角色的列表，点击新增角色按钮后进入新增角色页面，在该页面填写角色名，密码，权限等信息后点击提交按钮后即可，提交成功后转入到查询界面。

 

 

图 4-11 角色管理模块流程图

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

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

图 4-12 角色状态改变流程图

图4-12描述了角色状态改变流程图，对于角色，状态有禁用和正常两种，所有角色超级管理员均可以将其删除 ，对于禁用的角色显示激活按钮，可以将

其激活回到正常状态。

4.3.7咨询反馈管理模块

该模块主要是针对用户咨询反馈的删改查。

 

图 4-13 咨询反馈管理模块流程图

图4-13描述了咨询反馈管理模块流程图，该模块实现咨询反馈的修改、查询、删除操作。 进入咨询反馈管理页面后是所有咨询反馈的列表。

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

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

在咨询反馈新增页面，当用户提交信息不符合规定时会提示错误信息，例如：咨询反馈标题须是6到20个汉字和英文字符串，可以是纯汉字或英文。咨询反馈描述是10到10000个字符的字符串。当信息全部填写正确后才能提交到后台，提交至后台后对所有字段进行过滤，首先过内容中包含的滤脚本标签，即采用strip_tags函数进行过滤。

4.4本章小结

在本章中，对系统进行了详细的设计，分别从系统数据库设计，系统分层设计，系统模块设计方面描述。在数据库设计中，对整个ER图进行了分析，还有对每个数据表进行了详细的设计描述。在分层设计中，通过控制层、模型曾、视图层进行了详细的设计描述。系统模块设计中，从订单、产品、用户、角色、样品、文章、资讯七个方面进行了详细的设计描述。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5  系统实现

 

在本章中，将本课题实现的系统进行了详细的实现，其中主要论述了系统实现的功能、性能需求、界面设计、数据交互设计和最后实现的效果截图。其中在设计部分对各模块分别画了功能流程图来进行一一分析，在实现部分，分为前端和后台两部分进行描述，在实现部分对重要代码进行了详细的介绍分析，并对代表性的运行效果进行截图展示。

5.1系统前端实现

5.1.1实现的功能

用户进入首页看到的界面，显示的内容主要有九项：关于我们、产品服务、新闻资讯、产品列表、产品相册、样品列表、客户案例、关注我们、联系我们。

关于我们：公司的一些基本信息的介绍。

产品服务：主要服务项目的介绍及报价。

新闻资讯：最新的新闻、活动信息等。

产品列表：所有产品列表，显示每个产品的标题、预览图、价格、规格、详细介绍等信息。

产品相册：所有产品的缩略图展示，点击后显示高清大图，可以幻灯片滑动。

样品列表：展示所有样品的基本信息，已购买过产品的用户可以申请预定样品。

客户案例：经典客户案例展示，包括案例的详细介绍及成果查看。

关注我们：显示公司微博、facebook、twitter等账号，用户可以点击关注。

联系我们：显示公司联系方式及地址，用户也可以在该页面提交反馈咨询意见。

5.1.2 性能要求

在九项内容中，关于我们、产品服务、客户案例、关注我们、联系我们五项是缓存生成的静态HTML页面以加快访问速度。新闻资讯、产品样品列表、产品相册信息是从数据库中读取出来的。

5.1.3 详细设计

       1）界面方面：首先是首页展示，根据mvc逻辑，当用户访问首页时有IndexController类处理该请求，也就是说当用户访问首页时执行IndexController类的index（）方法，该方法代码及注释如下：

public function index($openid=''){         $this->addOpenId($openid);//将用户openid添加至session         $this->assign("siteName",C('siteName'));//从配置文件获取网站名称，并赋值到模版         $this->display('index');输出相应的模版文件     }       public function addOpenid($openid){         if(!empty($_SESSION['openid'])){//判断session中是否已添加openid              return true;         }         else{              $_SESSION['openid'] = $openid;//若还未添加，则将该openid放入session              return true;         }     }

 

2）关于我们：该页对应于AboutController下的about方法，当用户点击该页面时是由该函数来处理的，下面是该函数代码及注释：

public function about($openid=''){            $this->addOpenId($openid);//检查openid是否为空，为空则添加            $this->assign('title',"关于我们");//添加页面标题            $this->display('about');//输出对应模版文件      }

 

3）产品服务：该页对应于ProductController下的serviceList方法，当用户点击该页面时是由该函数来处理的，下面是该函数代码及注释：

 

public function serviceList($openid=''){            $this->addOpenId($openid);// 检查openid是否为空，为空则添加            $this->assign('title','产品服务'); //添加页面标题            $this->display('service'); //输出对应模版文件      }

 

4）新闻资讯：该页对应于ArticleController下的newsList方法，当用户点击该页面时是由该函数来处理的，下面是该函数代码及注释：

 

public function newsList($openid='',$classify=''){//新闻列表处理函数            $this->addOpenId($openid);// 检查openid是否为空，为空则添加            $article = M('Article');//创建文章模型对象            $articleClassify = M('ArticleClassify');创建文章分类模型对象            if($classify==''){//若分类信息为空即首次进入，则获取所有新闻信息                 $this->assign('articles',$article->where()->select());//从数据库查找所有新闻信息并赋值到模版            }else{//否则，即分类信息不为空                 $data['classify'] = $classify;                 $this->assign('articles',$article->where($data)->select());//根据分类信息从数据库查找相应新闻并赋值到模版            }           $this->assign('articleClassifys',$articleClassify->where()->select());//从数据库将所有分类信息读取出来并赋值到模版，供用户筛选            $this->assign('title','新闻列表');//定义页面标题            $this->display('newslist');//输出相应的模版      }

 

新闻资讯详细页面：该页对应于ArticleController下的news方法，当用户点击文章列表页的某条文章时会跳转到此页，该页面时是由该函数来处理的，下面是该函数代码及注释：

public function news($id = 0){//新闻资讯详情页面函数            $article = M('Article');//创建文章模型对象            $articleComment = M('ArticleComment');//创建文章评论模型对象            $map['articleid'] = $id;//赋值文章id变量            $data['id'] = $id;//赋值id变量            $this->assign('articles',$article->where($data)->select());//从数据库获取该id的文章信息并赋值到模版           $this->assign('comments',$articleComent->where($map)->select());//获取该条新闻的评论信息并赋值到模版            $this->assign('title','新闻');//定义页面标题            $this->display('news');//输出相应模版      }

 

5）产品列表：该页对应于ProductController下的List方法，当用户进入该页面时是由该函数来处理的，下面是该函数代码及注释：

 

public function lists($openid='',$classify=''){//产品列表处理函数            $this->addOpenId($openid);//设置openid            $productClassify = M('ProductClassify');//创建产品分类模型对象            $product = M('Product');//创建产品模型对象           $this->assign('productClassifys',$productClassify->where()->select());//从数据库查找所有产品分类信息并赋值到模版            if(empty($classify)){//若分类信息为空，即首次进入，则查找所有产品                 $this->assign('products',$product->where()->select());            }else{//否则，检索相应分类的产品信息并赋值到模版                 $data['classify'] = $classify;                 $this->assign('products',$product->where($data)->select());            }            $this->assign('title',"产品列表");//定义页面标题            $this->display('product_list');//输出相应模版      }

 

6）产品相册：该页对应于ProductController下的gallery方法，当用户进入该页面时是由该函数来处理的，下面是该函数代码及注释：

 

public function gallery($openid=''){//产品相册处理函数            $this->addOpenId($openid);//检查添加openid至session            $this->assign('title','产品相册');//定义页面标题            $this->display('gallery');//输出相应页面模版      }

 

7）样品列表：该页对应于ExampleProductController下的list方法，当用户进入该页面时是由该函数来处理的，下面是该函数代码及注释：

 

public function lists($openid='',$classify=''){//样品列表页处理函数            $this->addOpenId($openid);//检查设置openid            $productClassify = M('ProductClassify');//创建产品分类模型对象            $product = M('ExampleProduct');//创建样品模型对象           $this->assign('productClassifys',$productClassify->where()->select());//检索所有产品分类信息并赋值到模版            if(empty($classify)){//若分类为空，则检索所有样品                 $this->assign('products',$product->where()->select());            }else{//否则。检索相应分类下的样品，并赋值到模版                 $data['classify'] = $classify;                 $this->assign('products',$product->where($data)->select());            }            $this->assign('title',"产品列表");//定义页面标题            $this->display('product_list');//输出相应模版      }

 

8）客户案例：该页对应于ProductController下的client方法，当用户进入该页面时是由该函数来处理的，该函数处理方式于“产品相册“页面类似，页面标题赋值，模版输出等操作。

9）关注我们：该页对应于AboutController下的follow方法，当用户进入该页面时是由该函数来处理的，该函数处理方式于“客户案例“页面类似，页面标题赋值，模版输出等操作。

10）联系我们：该页对应于AboutController下的contact方法，当用户进入该页面时是由该函数来处理的，该函数处理方式于“关注我们“页面类似，页面标题赋值，模版输出等操作。

5.1.3 运行结果展示

       1）首页展示截图：

图 5-1 首页展示界面截图

图5-1展示了首页展示界面截图。在首页展示界面，一共有九项内容，分别是关于我们、产品服务、新闻资讯产品列表，产品相册、样品列表、客户案例、关注我们、联系我们。每个内容分别是一个超链接，点击进去后是详细内容，详细内容后面章节将会叙述。

2）关于我们截图：

图 5-2 关于我们展示界面截图

图5-2展示了关于我们展示界面截图。该页面是由首页关于我们点击进入的，也可以由微信公众平台底部菜单进入。该页主要是详细介绍公司的一些情况。

 

2）产品服务截图：

 

图 5-3 产品服务展示界面截图

图5-3展示了产品服务展示界面截图。该页详细介绍了公司的各类服务项目及一些报价单，方便客户一目了然。

 

3）新闻资讯、产品列表截图：

图 5-4 新闻资讯、产品列表展示界面截图

图5-4展示了新闻资讯列表、产品列表展示界面截图。在新闻列表页展示的是最新的新闻信息，客户可以根据类别进行筛选查看，点击标题后就进入新闻资讯详细描述页面。产品列表页展示最新的产品信息，客户也可以根据分类进行筛选，客户可以查看产品信息，也可以选择立即预定。

 

4）产品相册、客户案例截图：

图 5-5 客户案例、产品相册展示界面截图

图5-5展示了客户案例、产品相册列表展示界面截图。客户案例页面详细展示了公司的经典案例及详细介绍，客户可查看成果等。产品相册列表展示最新的产品图册，点击后可查看高清大图，也可滑动查看，非常方便。

5）关注我们、联系我们实现截图：

图 5-6 联系我们、关注我们展示界面截图

图5-6展示了关注我们、联系我们展示界面截图。“关注我们”页面列出了公司的一些媒体账号，如facebook，twitter，微博等等，用户可以点击进行关注，关注后可查看公司详细动态。

6）新闻资讯详情页实现截图：

    

图 5-7 新闻资讯详情页面展示界面截图

图5-7展示了新闻资讯详情页面展示界面截图。该页是新闻资讯详情页，展示新闻资讯的详细情况，用户也可以参与评论，查看评论等。

5.2系统后台实现

5.2.1实现的功能

用户进入后台看到的界面，显示两栏菜单：系统管理、业务管理。

系统管理：包含用户管理和角色管理两部分。

A：用户管理：主要是对用户的增删改查操作。

B：角色管理：主要是对角色的增删改查操作。

业务管理：包含产品管理、产品分类管理、文章管理、文章分类管理、订单管理、样品管理、咨询反馈管理七部分。

A：产品管理：主要是对产品的增删改查操作。

B：产品分类管理：主要是对产品分类的增删改查操作。

C：文章管理：主要是对文章的增删改查操作。

D：文章分类管理：主要是对文章分类的增删改查操作。

E：订单管理：主要是对订单的增删改查操作。

F：咨询反馈管理：主要是对咨询反馈的删改查操作。

5.2.2 性能要求

在首页，页面每隔10分钟向后台异步请求，检查是否有新的订单，有则提示管理员。数据库读取内容和静态页面均有缓存，以加快访问速度

5.2.3 详细设计

       1）界面方面：首先是首页展示，根据mvc逻辑，当用户访问首页时有IndexController类处理该请求，也就是说当用户访问首页时执行IndexController类的index（）方法，该方法代码及注释如下：

public function index(){//后台首页处理函数          if(empty($_SESSION['admin'])){//判断管理员是否登陆               $this->error('请先登录!','admin.php/Index/login.html',1);//管理员未登录或session失效时转向登陆页面               return;          }          $this->assign('role',$_SESSION['admin']);//赋值管理员角色到模版          $authority = array("role"=>"role",//预定义角色权限数组                                               "user"=>"user",                                               "product"=>"product",                                               "article"=>"article",                                               "order"=>"order",                                               "consult"=>"consult");          $this->assign('authority',$authority);//赋值权限集到模版          $this->assign('roles',$_SESSION['role']);//赋值角色值到模版          $this->display();//输出默认模版     }

 

2）添加用户操作，该操作对应UserController类的toAdd（）方法，该方法代码及注释如下：

 

public function toAdd(){//添加用户处理函数          $user = M('User');//创建用户模型对象          $data = $user->create();//接受页面传来的输入值          $data['password'] = md5($data['password']);//密码进行md5加密          date_default_timezone_set("PRC");//设置默认时区          $data['createDate'] =  date("Y-m-d H:i:s");//赋值创建时间          $data['address'] = '';//赋值默认地址为空          $result = $user->add($data);//向数据库添加纪录            if(!empty($result)){//添加成功返回添加纪录的id                 $this->success('添加成功','index.html');//提示成功，转向用户管理首页            }     }

 

3）编辑角色操作，该操作对应RoleController类的save（）方法，该方法代码及注释如下：

 

public function save(){//角色编辑保存方法          $role = M('Role');//创建角色模型对象          $data = $role->create();//获取页面传来的输入值          $data['password'] = md5($data['password']);//md5加密密码          $data['authority'] = implode(I('post.node'),",");//将角色权限数组转换成字符串，以逗号分隔          $result = $role->save($data);//向数据库插入数据          if(!empty($result)){//插入成功，提示并转入角色首页               $this->success('修改成功','index.html');          }else{//否则打印错误信息               dump($result);          }      }

 

4）产品添加操作，该操作对应ProductController类的toAdd（）方法，该方法代码及注释如下：

public function toAdd(){//产品添加处理函数          $product = M('Product');//创建产品模型对象          $data = $product->create();//接受页面传来的值          $str = htmlspecialchars_decode($data['describe']);//对产品描述信息进行过滤          $pattern = "/<img.+src=\"?(.+\.(jpg|gif|bmp|bnp|png|jpeg))\"?.+>/";//定义图片匹配字符串          preg_match($pattern,$str,$match);//匹配获取图片地址          if(!empty($match)){               $data['preview'] = substr($match[1], 0,58);//产品预览图片赋值          }          date_default_timezone_set("PRC");//设置时区          $data['createDate'] =  date("Y-m-d H:i:s");//赋值创建时间          $result = $product->add($data);//向数据库添加纪录            if(!empty($result)){//添加成功，提示并转向产品首页                 $this->success('添加成功','index.html');            }else{//否则，打印出错原因                 dump($data);            }     }

 

5）订单导出操作，该操作对应OrderController类的export（）方法，该方法代码及注释如下：

public function export($state=''){//订单导出处理函数          $status[-1] = '已取消';//定义订单状态显示          $status[0] ='待发货';          $status[1] ='待付款';          $status[2] ='已发货';          $status[3] ='已完成';          $payway[0] = '货到付款';          $payway[1] = '在线支付';          $order = M('Order');          if($state==''){//根据订单状态筛选需要导出的订单，状态为空则全部导出               $result = $order->where()->select();          }else{               $data['status'] = $state;               $result = $order->where($data)->select();          }          header("Content-type:application/vnd.ms-excel");//定义导出文件类型          header("Content-Disposition:attachment;filename=orders.xls");//定义导出文件名称          $title = array('订单号','用户id','收货人','联系方式','地址','商品编号','商品名称','付款方式','订单状态','数量','总价','单价','快递公司','快递号','预览图片','发货时间','下单时间');//定义文件表头          echo iconv('utf-8', 'gbk', implode("\t", $title))."\n";//定义文件编码          foreach ($result as $exdata){//循环将数据插入到导出文件中               $exdata['payway'] = $payway[$exdata['payway']];               $exdata['status'] =$status[$exdata['status']];               echo iconv('utf-8', 'gbk',implode("\t", $exdata))."\n";          }     }

 

5.2.4 运行结果展示

       1）首页展示截图：

图 5-8 后台首页界面截图

图5-8展示了后台首页展示界面截图。该页是管理员角色刚登陆进入的展示页面，该页按功能分为系统管理和业务管理。在系统管理栏目下有角色管理和栏目管理两个菜单。业务管理下有产品管理、产品分类管理、文章管理、文章分类管理、订单管理、样品管理、咨询反馈管理等子菜单。

2）用户列表、角色列表截图：

图 5-9 用户列表、角色列表界面截图

图5-9展示了用户列表、角色列表界面截图。用户列表页是展示目前所有的用户信息，在该页有添加用户，编辑用户功能，管理员可以添加，编辑用户。角色列表页展示所有角色信息，角色就是拥有不同权限的管理员，拥有角色管理权限的管理员可以添加编辑角色。

3）用户添加、角色编辑截图：

图 5-10 用户添加、角色编辑界面截图

图5-10展示了用户添加、角色编辑界面截图。用户添加页面是添加用户的一些必填信息，添加好后保存即可。角色添加界面，除了要填写基本的名称密码状态之外还需选择角色的权限，管理员登陆时会根据管理员的权限展示不同的菜单。

4）商品分类列表、商品列表界面截图：

图 5-11 商品分类列表、商品列表界面截图

图5-11展示了商品分类列表、商品列表界面截图。商品即产品，商品分类页展示的所有的分类信息，管理员可以在该页选择添加、编辑、删除商品分类。商品列表页显示所有的商品信息，管理员可以在该页新增、编辑、删除商品。

5）商品添加界面截图：

图 5-12 商品添加界面截图

图5-12展示了商品添加界面截图。在该页管理员填写基本的商品信息，保存后即可。在产品详细描述页面是富文本编辑器，管理员可在此插入图片，在点击保存后系统会从提交的信息里面抓取第一张图片作为商品预览图

6）订单列表界面截图：

图 5-13 商品添加界面截图

图5-13展示了订单列表界面截图。该页显示所有订单信息，管理员可以搜索、筛选订单，对于订单根据不同的状态展示不同的界面，对于未付款订单可以进行价格修改，对于待发货订单，管理员可以发货。对于已发货订单可以跟踪订单，产看物流信息。此外还可以导出文件订单，导出时可以按订单状态选择导出的订单。

5.3本章小结

在本章中，将本课题实现的系统进行了详细的实现，其中主要论述了系统实现的功能、性能需求、界面设计、数据交互设计和最后实现的效果截图。其中在设计部分对各模块分别画了功能流程图来进行一一分析，在实现部分，分为前端和后台两部分进行描述，在实现部分对重要代码进行了详细的介绍分析，并对代表性的运行效果进行截图展示。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6 总结与展望

 

本章主要是对系统从设计到实现的整个阶段的总结和对系统的展望。对系统已经实现的部分做出了概括，同时针对系统的一些不足和需要继续完善的部分进行了阐述。

6.1项目总结

6.1.1 开发中的问题

在本系统的设计实现中，遇到了不少问题，首先，本系统的设计采用了thinkPHP框架，此前只是简单了解过该框架，并没有实际运用过，这次为了设计该系统，我从头到脚系统的看了一遍thinkPHP的官方开发手册，虽然之前也开发了不少项目，对程序上手挺快，但是对于自定义的模版标签刚开始有点难懂，随着不断的实践，慢慢掌握了。还有一大困难就是，此次开发的前端也运用了框架，用了目前比较流行的bootstrap框架，bootstrap最难懂的就是他的栅栏概念和设计，刚开始难于理解，后台通过查资料，看视频慢慢理解了，加上动手实践，很快就掌握了。

6.2项目展望

6.2.1 项目创新点

在本系统最大的创新点就是方便快捷，该系统基本实现了传统app的所有功能，然而传统app开发维护成本高，用户使用不方便，推广难度大。此系统依附于微信上，微信的用户现在已超过6亿，几乎是有智能手机的地方就有微信，用户只需扫一扫关注后即可使用所有功能，还可定期免费向用户推送信息，实现营销推广。

目前系统的大部分基础功能已经完成，但也存在着一些美中不足之处。在在线支付方面因为调用接口的限制儿没有很好的实现，目前只实现了对支付宝的个人即时到账的接口，因为该接口是个人可以申请的免费的，支付宝担保接口申请需要企业身份，所以没有支持该接口，然而在现实生活中，用的最多的事支付宝担保接口，因此这是一个缺憾，还有财付通，网银在线支付等接口也没有实现。

还有就是对数据的统计功能没有实现，这是一个很大的缺陷，因为未来得数据者得天下，数据可以说话。对于用户的行为只是简单的记录了最后一次登陆时间，而没有详细纪录用户的各种动作，这对于本系统来说是一个短板。接下去的开发将着力在支付接口和数据统计两个方面。

 

 

 

参考文献

 

[1]谢征﹒官方微信及其在报刊媒体中的运用[J]，出版发行研究，2013(9)：72-76

[2]陈超贤﹒政务微信发展的现状、问题及对策[J]﹒中共青岛市委党校青岛行政学院学报，2013(4)：37-39﹒

[3] 张世琨, 张文娟, 常　欣, 王立福, 杨芙清. 基于软件体系结构的可复用构件制作和组装.软件学报, 2001 Vol. 12, No. 9

[4] Head First 设计模式（中文版）（美）弗里曼（Freeman，E.）　等著，Oreily Taiwan公司　译，UML China　改编中国电力出版社

[5]政务微信被纳入中国政府网站绩效评估考核指标[EB/OL]﹒ [2013-12-01]﹒http://www.techweb.com.cn/internet/2013-11-29/1364115.shtml.

[6]李蕾，高海珍﹒微信：3亿用户的背后[J]﹒新闻与写作，2013(4)：34-36﹒

[7]陈晓华﹒传统报纸使用微信新媒体的现状及问题研究[J]﹒新闻传播，2013(1)：14-17

[8]王艳丽﹒从功能论角度探析微信的属性[J]﹒中国报业，2013(7)：27-28﹒

[9]王欢，祝阳﹒人际沟通视阈下的微信传播解读[J]﹒现代情报，2013，33(7)：24-27﹒

[10]谭震﹒传统媒体如何借助微信扩大影响——微信的媒介功能及影响分析[J]﹒中国记者，2013(5)：101-102﹒

[11] John Foreman , Kimberly Brune , Patricia McMillan , Robert Rosen-stein. Software Technology Review ,CMU/ SEI ,June 1997

 

 

致谢

 

    本文是在于守健老师的悉心指导下完成的。在本次论文的撰写过程中，无论是一开始的选题、调研，还是到后期的论文修改，都得到了于老师耐心的指导，给了我很多宝贵的意见，让我在完成本次论文课题过程中，学到了许多的新的技术，积累了项目开发经验。

同时我要感谢实验室的研究生学长们，在我完成毕业设计的过程中，给予了我很大的帮助，不但热心帮助我解决撰写论文中所碰到的问题，还同我分享了许多开发经验，在实验室中为我创造了很好的学习氛围。

最后，特别要感谢我的家人和同学，他们四年来对我的关心和支持是我完成学业的精神动力，没有他们的关心和支持，就没有我今天的成就。

 

 

 

译文及原文