Team4-微信后台管理项目_课程设计报告.docx

《网络编程》
课 程 设 计 报 告
（2014— 2015学年 第 1 学期）

系 别：
计算机学院软件工程系
专业名称：
12软件金融服务工程1班
课程设计科目：
《网络编程》课程设计
学生姓名：
陈雅红、欧钟源、侯志鹏、张晓攀、张晓云
学 号：
1207122102、12、32、45、46
指导教师：
林江毅
成 绩：

完成时间：
2015年1月19日-1月23日

项目组成员及分工
项目角色
日常职责
人员分配
项目组长
项目架构,团队管理,版本控制，进度管理等等
欧钟源
前台开发人员
前台界面设计及美工
陈雅红、侯志鹏
后台开发人员
Web服务器端程序开发
欧钟源、陈雅红、侯志鹏
数据库开发人员
数据库设计及实现
欧钟源、陈雅红、侯志鹏
测试人员
项目测试
张晓攀
文档完成人员
课设文档建设
欧钟源、陈雅红、侯志鹏、
张晓云、张晓攀
日志记录人员
日志记录
陈雅红、张晓云

项目组成员成绩
项目组成员
学号
成绩
陈雅红
1207122102

侯志鹏
1207122112

欧钟源
1207122132

张晓攀
1207122145

张晓云
1207122146

目 录

一、微信后台管理系统概述 1
二、需求分析与总体设计 1
三、界面设计 10
四、数据库设计 13
五、代码设计 16
六、运行调试 26
七、结论与心得 32
八、致谢 32
九、参考文献 33
附录：全部源程序清单 33
课程设计日志 38

一、微信后台管理系统概述
微信后台管理系统主要解决用户（后台管理员）对于微信用户界面和功能的设计与后期管理。微信管理员可以通过该系统对微信前台所展示的各项功能与内容进行一个系统化周期化的设计与安排。也可以通过该系统与用户进行交互，解决用户提交在平台上的需求，对具体的数据进行统计和只能分析。该系统对用户信息管理部分的功能主要使用了增、删、改、查与搜索遍历，通过查找到某一个用户的信息，并且对用户进行进一步的管理（修改参数、删除、查询记录等）。
微信后台管理系统在功能设计方面，调用微信提供的功能开发接口，导入设计所需的程序文件，以此达到功能的实践，用户通过输入指定的字符和自定义语句，就可以得到系统提供的相关信息。
插件管理方面，用户管理微信提供的日历控件、图片相册、表格以及辅助小插件，对日常的管理进行一个量化，为观察数据的方便提供一种新的理念。
二、需求分析与总体设计
2.1 需求分析
1、系统名称
微信后台管理系统
2、任务概述
如图2.1所示，此微信后台管理系统主要针对微信后台的系统支持中的后台管理、数据设备、商品储备、开发配置等一系列的功能进行整合，将后台管理事务系统的放在一个一个地方进行管理，将图文信息，表格，各种数据放在一起量化的管理，建立后台管理系统，一方面将后台管理事务系统的进行管理，另一方面，也方便后台管理人员作出及时的调整，将用户的需求与后台的工作直接挂钩，以便及时的适应市场的需求。

图2.1 整体架构展示
3、设计目的
将微信的图文推送，用户管理数据整合，功能设计等一系列后台整理事物整合在一起，方便管理，也方便系统管理员及时的与用户进行交互。
4、系统功能
① 登录及退出功能
后台按照管理员的分工进行划分。管理员按照自己的身份以及所管理的业务进入相应的管理模块，对客户、文档、数据和功能进行管理，如图2.2所示。

图2.2 用户登陆及退出功能
在登陆界面设置：1、用户名输入：根据管理员初始化用户名：admin（也可以自定义，目前全部使用此用户名）2、用户密码输入：密码的设计对长度，字母，位置以及特殊符号进行约束，仅限六位数字密码。（考虑到使用方便以及用户较少的情况，对密码的初始化仅为六位数字组成，在密码输入方面添加加密设置，对密码进行转码处理，以此来保护用户的隐私与安全。）3、用户信息记录：可以通过此权限使得浏览器对密码的保存时间规定在某一个时间段中；在此时间段内，可以直接登录系统后台，此功能的设计为用户频繁使用系统建立的便捷的通道。4、用户登录：用户登录界面通过点击“登录”确认信息无误后进入系统。5、报错以及初始化过程：对于忘记密码或者需要初始化的用户可以通过点击此按钮进行信息的验证和信息的初始化。

图2.3 用户管理界面
②用户管理
1、系统设置：通过对系统内部参数的调整，对后台的管理更加的便捷。2、信息：对系统产生的信息进行一个提示与管理。3、管理工具:通过对插件的使用对数据有功能进行管理。4、通过前端用户使用的情况对“留言”、“关注”、“订阅”等重要数据尽心随时的报告，方便对管理与设计进行详细的管理。5、累计数据显示：对阶段性累计的某项指标进行统计，以此来控制对整个项目进度的把控。6、程序构成部分：（此部分今后用户展示一些用户数据，目前处于设计测试阶段。）如图2.3所示。
③ 图文管理
1、图文信息的增删改查的实现：通过点击新增，编辑，删除，查询便可以对图文推送文章进行详细的管理。2、图文信息版块：头标题用户定位当前管理员所在的页面，使得管理一目了然。3、图文元素信息的展示：将已送出去的文章进行一个量化的处理，将文章的插图，时间，上传人员，具体内容等信息进行统计与管理，对推送进程进行把控和记录。如图2.4所示。

图2.4 图文管理界面

④ 语音搜索功能
随着语音识别研究的深入, 提高通用识别引擎的精度变得越来越困难。但对具体的语音识别任务, 结合相应的背景, 采取相应的措施, 有可能达到很理想的识别精度。本系统未来将针对已知语音输入为某有限集元素之一的情形, 提出了一种文音相似度( 原来称为文本相似度)。利用这种相似度, 可以使微信手机语音浏览的识别精度达到 95%以上。实践方法:先用通用的识别引擎对语音输入给出一个原始识别结果, 这个结果可能与候选集中的每个元素都不相同, 利用定义的一种文本之间的相似度, 即文音相似度, 计算原始识别结果与候选集中每个元素之间的文音相似度的大小, 把文本相似度最大的 图 2.5语音搜索功能 名字看成用户的期望，如图2.5所示。
⑤ 附近健身功能（地图搜索）如图2.6所示。
根据手机GPS搜索到周围的地点，将信息发送到手机上，软件系统得到发送到的信息后转变成为功能传达在界面上。涉及到的具体技术以及算法类似于公交系统中的地图遍历周围建筑的信息的方法：移动终端设备通过外部定位方式(如GPS)或者无线网络定位(如基站定位、Wi．fi定位)等方式获取用户的位置信息(经纬度等)，并实时的把这一位置信息以GSM网络、3G、4G、WLAN等方式上传到服务器，服务器对用户的相关请求做出回应，将相关的回应信息反馈到移动终端，这些信息包括地图数据、文本数据、声音数据等等，如图2.7所示。 图2.6 地图搜索功能

图2.7 LBS体系结构
5、详细功能
(1)登录退出
用户能在后台进行登录以及退出。用户在登录页面输入用户名及密码，点击“登入”按钮即可进入系统。用户登录系统后，在右上角点击“退出”按钮即可退出系统。
(2)用户管理
在此模块可以进行对用户的管理，包括新建用户、修改用户资料、删除用户。
(3)消息管理
用户通过手机微信，向公众号发送消息。公众号接收到消息的推送后，对不同消息进行处理。如果是文字消息，则对文字进行分词处理，利用solr对已经保存在数据库的图文信息进行全文搜索。将匹配出来的结果生成相对应的图文信息推向用户。同时将消息推送给客服人员。如果匹配不到信息，就将信息内容交付给第三方的语义识别系统。如果用户发来的是语音消息，则通过语音翻译转化为文本，交给文字系统处理。如果是位置消息，则提取用户的经纬度，生成百度静态图和网站链接。

2.2 总体设计
1、登录模块设计
用户能在后台进行登录以及退出。用户在登录页面输入用户名及密码，点击“登入”按钮即可进入系统。用户登录系统后，在右上角点击“退出”按钮即可退出系统。
登录时，若用户勾选了“免登陆一个月”，则一个月无需登录即可进入系统。
该模块的流程如图2.8所示：

图2.8 登陆模块设计
2、个人中心模块设计
此模块用户可以查看自己的资料，以及修改自己的密码。
修改密码页面设有重置和返回按钮，点击重置后，所填的内容会清空，可重新填写。点击返回，页面则会跳转到系统首页。
修改密码的流程如图2.9所示：

图2.9 个人模块设计
3、用户管理功能模块设计
在此模块可以进行对用户的管理，包括新建用户、修改用户资料、删除用户。新建用户的流程图如图2.10所示：

图2.10 新建用户模块设计
4、消息管理功能模块设计
此模块为微信公众号上的粉丝发给我们的消息的管理，粉丝发送消息到我们的公众号有，可在此看到粉丝所发送的消息。此模块流程图如图2.11所示：

图2.11新建用户模块设计
5、内容管理模块
管理员可对图文进行增删改查以及预览。如图2.12所示。

图2.12内容管理模块
三、界面设计
在网页界面中，色彩是最直接也是最持久地给浏览者以网站形象的因素。色彩的科学知识是进行设计的基础，在这个基础上进一步从美学的角度去探讨色彩艺术的整体表现形式，从而对色彩产生较为全面深刻的认识，并在设计创造过程中逐步摆脱狭隘的经验，跨入更为广阔的色彩表现空间，使网页界面具有更好的视觉效果。
本系统的界面设计主要针对颜色与符号给予视觉体验。首先不同的主题来布置色彩，如健康类的网站就不能采用较为刺激的大红和黄、橙以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，以及一些不利于健康的联想。而相对较多的采用一些较纯的绿色或者相关不同明度的绿色这样能带给人宁静、安详与平和，如同让人置身大自然，感受那份清新，这样使人身心受益。
用色往往不是非常单纯的运用，还要考虑诸多因素，例如，访问者的类别：社会背景、心理需求和场合的差异等等，这就要求网页设计者要认真的分析网站的受众的不同，并且要多听取反馈信息，总结他们满意或者是不满意的原因，综合考虑。社会背景不同的人，各人的目的不同，他们对色彩的感受也不同，所以网站的用色就要考虑到硕士学位论文多方面的需求，尽可能能的吸引各种的注意力。访问者如果大多是素质较高的人，就应该考虑用色考究，要有一定的品位，有所偏向。

1、登录注册模块的界面设计
以人物头像符号以及锁型图案为登陆人员姓名以及密码的代表，用图案代表文字，符合网页极简设计理念，给予用户一种舒心的使用体验。布色方面整体使用蓝色调，背景为灰蓝色，登陆框为亮蓝色，登陆按钮以及其他按钮为深蓝色，整体安静和谐，适用于工作思维 和分析。如图3.1所示。
图3.1 登录注册模块的界面设计展示

2、数据查询功能模块的界面设计

图3.2数据查询功能模块的界面设计展示
数据查询用箭头和颜色表示上升和下降的趋势，根据人视觉传达，颜色给人不同感应时间的原理，将不同的数据赋予不同的颜色，使得操作者可以一步了然软件平台运营的情况。在这一部分的设计中，主要使用了符号和颜色的方式，将数据分门别类的凸显出来，而不再是一张大二枯草的数据表，如图3.2所示。

3、控制功能模块的界面设计
工具界面设计正如人们日常使用工具的习惯，我们通常习惯与将相同的工具放在相同的地方，比如：文具都放在笔袋中，书籍都放在书架上，作业 图3.3 控制空能模块设计 图3.4子功能展示 纸都放在抽屉里一样。主要目的是为了清晰明了，用时好找。本系统设计功能窗格正是基于人们多年来的这一生活习惯，将功能罗列在一个树形窗格中，每一个功能名称和标示符都简单的呈现出来，如图3.3所示。而子功能可以通过点击按照层次体现出来，如图3.4所示。

4、图表功能界面设计

图3.5图表功能界面设计展示
数据的走势最好的体现方式正是图表，此处插入图表为观察数据提供了更好的渠道。如图3.5所示。

四、数据库设计
4.1 表设计
本系统中一共涉及到了3张表，并把每张表贴出来，给出各数据库表的简短描述，并标注表名和表序，以下分别为表4.1、4.2、4.3.

表4.1 admin 用户表

表4. 2 msg 消息表

表4.3 pictext 图文表

4.2建立JDBC连接
如图4.4所示：

图4.4建立JDBC连接
五、代码设计
5.1 登录模块主要代码
如图5.1所示
图5.1 登录模块

登录的代码流程图如图5.2所示：

图5.2 登录的代码流程图
5.2用户管理模块主要代码
如图5.3所示

图5.3用户管理模块主要代码

新建用户的代码流程图如图5.4所示:

5.4新建用户的代码流程图
5.3消息管理模块主要代码
如图5.5所示

图5.5 消息管理模块
5.4图文管理模块主要代码
如图5.6所示：

图5.6 图文管理模块主要代码

5.5语音搜索主要代码
获得语音识别结果,根据结果进行模糊匹配，如图5.7所示

图5.7 语音搜索主要代码展示

5.6 附近搜索主要代码
①获得经纬度信息，调用百度api生成静态图和地图链接，如图5.8所示。

图5.8附近搜索主要代码

② 获得get传参，调用jsp界面，如图5.9所示。

图5.9 获得get传参

③ 调用百度Api，生成动态地图，如图5.10所示。

图5.10 生成动态地图
六、运行调试
6.1用户操作
用例名称
登录
用例标识号
System_User_01

用例角色
用户
简要说明
用户登录系统
数据引用
用户信息表
前置条件
用户未登录
基本事件流
1、 用户点击《登录》，弹出登录界面窗口，输入用户名和密码、验证码，点击《登录》。
2、系统验证用户名和密码，如果正确则登录成功，显示登录状态页面；否则显示登录失败信息。
2a、用户名或者密码为空，提示“用户名或者密码不为空”
2b、用户名和密码不匹配，提示“用户名或者密码错误”
约束条件
1、用户登录成功之后，系统自动保存此次登录时间。
后置条件
登录成功
注释

用例名称
修改密码
用例标识号
System_User_02

用例角色
用户
简要说明
用户修改密码
数据引用
用户信息
前置条件
会员登录
基本事件流
1、 用户点击界面右上角的用户头像，出现个下拉框
2、 点击修改密码
3、系统显示修改密码页面。
4、会员输入原密码与新密码，确认密码，点击《修改》。
4a、若原密码有误，提示“原密码出错，请重新输入”，并且置空所有输入框
4b、若新密码与原密码相同，提示：“新密码不可与原密码相同，请重新输入！”，并且置空所有输入框
4c、若输入的验证码与系统提供的有误，提示：“验证码有误，请重新输入！”，并且置空所有输入框
5、系统显示修改密码成功，请重新登录。
约束条件

后置条件

注释

用例名称
个人信息
用例标识号
System_User_03

用例角色
用户
简要说明
用户查看个人信息
数据引用
用户信息
前置条件
用户登录
基本事件流
1、 会员点击界面右上角的用户头像，出现个下拉框
2、 点击个人信息
3、系统显示个人信息界面
4、用户可以查看用户名与角色
5、点击返回可以回到主界面
约束条件

后置条件

注释

6.2用户管理
用例名称
新增用户
用例标识号
System_ManagerUser_01

用例角色
管理员
简要说明
管理员新增用户
数据引用
用户信息
前置条件
管理员登录
基本事件流
1、 管理员点击界面左边的用户管理
2、 系统显示用户管理界面
3、点击管理界面左上方的新增用户
4、系统显示新增用户界面
5、管理员输入用户名，密码并设置用户角色
5a、点击确定新增用户
5b、点击重置重新输入信息
5c、点击返回返回用户界面
约束条件

后置条件

注释

用例名称
修改用户
用例标识号
System_ManagerUser_02

用例角色
管理员
简要说明
管理员修改用户
数据引用
用户信息
前置条件
管理员登录
基本事件流
1、 管理员点击界面左边的用户管理
2、 系统显示用户管理界面
3、点击管理界面中用户列表右侧对应的操作按钮
4、选择修改
5、管理员修改用户名，密码并设置用户角色
5a、点击“确定”修改用户
5c、点击“返回”返回用户界面
约束条件

后置条件

注释

用例名称
删除用户
用例标识号
System_ManagerUser_03

用例角色
管理员
简要说明
管理员删除用户
数据引用
用户信息
前置条件
管理员登录
基本事件流
3、 管理员点击界面左边的用户管理
4、 系统显示用户管理界面
3、点击管理界面中用户列表右侧对应的操作按钮
4、选择删除
5、系统弹出提示框，询问是否删除该用户
5a、点击“确定”删除用户
5c、点击“取消”返回用户界面
约束条件

后置条件

注释

6.3消息管理
用例名称
消息管理
用例标识号
System_ManagerMsg_01

用例角色
用户
简要说明
用户查看消息
数据引用
消息
前置条件
用户登录
基本事件流
1、 用户点击界面左边的信息管理
2、 系统显示消息管理界面
3、用户可以查看消息
约束条件

后置条件

注释

6.4内容管理
用例名称
新增图文
用例标识号
System_ManagerContent_01

用例角色
用户
简要说明
用户新增图文内容
数据引用
图文数据库
前置条件
用户登录
基本事件流
1、 用户点击界面左边的内容管理
2、 系统显示内容管理界面
3、 用户点击内容管理界面左上角的新增图文
4、 系统显示新增图文界面
5、 用户输入标题，摘要，封面链接，文章地址，文章类型等内容
6a、点击确定保存图文
6b、点击返回返回管理界面
约束条件

后置条件

注释

用例名称
修改图文
用例标识号
System_ManagerContent_02

用例角色
用户
简要说明
用户修改图文内容
数据引用
图文数据库
前置条件
用户登录
基本事件流
1、 用户点击界面左边的内容管理
2、 系统显示内容管理界面
3、 用户点击内容管理界面对应条目右边的修改按钮
4、 系统显示修改图文界面
5、 用户可以修改标题，摘要，封面链接，文章地址，文章类型等内容
6a、点击确定保存图文
6b、点击返回返回管理界面
约束条件

后置条件

注释

用例名称
查看图文
用例标识号
System_ManagerContent_03

用例角色
用户
简要说明
用户查看图文内容
数据引用
图文数据库
前置条件
用户登录
基本事件流
1、 用户点击界面左边的内容管理
2、 系统显示内容管理界面
3、 用户点击内容管理界面对应条目右边的查看按钮
4、 系统打开图文链接
5、 用户可以查看图文内容
约束条件

后置条件

注释

用例名称
删除图文
用例标识号
System_ManagerContent_04

用例角色
用户
简要说明
用户删除图文内容
数据引用
图文数据库
前置条件
用户登录
基本事件流
1、 用户点击界面左边的内容管理
2、 系统显示内容管理界面
3、 用户点击内容管理界面对应条目右边的删除按钮
4、 系统弹出对话框提示是否删除
5a、用户点击“确定”删除图文
5b、用户点击“取消”返回管理界面
约束条件

后置条件

注释

6.5微信功能
用例名称
语音搜索
用例标识号
System_Weixin_01

用例角色
用户
简要说明
用户语音搜索
数据引用
数据库
前置条件
用户登录
基本事件流
1、 用户打开微信界面
2、 进入公众号
3、 用语言说话（例：肩部）
4、 系统显示相应信息
约束条件

后置条件

注释

用例名称
附近健身(地图搜索)
用例标识号
System_Weixin_02

用例角色
用户
简要说明
用户搜索附近美食与健身房
数据引用
数据库
前置条件
用户登录
基本事件流
1、用户打开微信界面
2、进入公众号
3、点击工具
4、获取位置，并将位置发送给公众号
5、公众号获取位置，根据位置搜索附近美食与健身房，以地图的形式返回给用户。
约束条件

后置条件

注释

七、结论与心得
此系统我们才用了JFinal的开发框架，对于我们来说这是一个全新的框架，但在学习使用中发现它十分的便捷。此外，我们还用到了jsp，使我们对jsp的运用更加的熟练。后台模版我们采用了Ace-Admin，多种开发语言可用，主要为HTML5+Bootstrap3.0。
此外，意料之中我们遇到了一些问题，但通过百度基本得到了解决方法。但由于时间有限，我们的系统也只开发了一部分，还有很多功能没有完成。在接下来的一段时间，我们会继续完善我们的系统，将它做的更好！

八、致谢
本次课程设计是在导师林江毅老师的悉心指导下完成的。在此，谨向林江毅老师致以深深的敬意和由衷的感谢。
感谢班级同学对我们作品的宝贵意见和真挚帮助。感谢陈雅红、欧钟源对系统设计所作出的不懈努力。还要感谢团队中的每一个人，系统的搭建与后期的完善与建设离不开每一位成员的努力和思考，你们在系统完善上给予系统正常运行的动力，也使给了我们努力学习的信心和力量。
最后，感谢JFinal的急速开发框架，感谢Ace-Admin的后台模版,给我们提供了很多技术帮助。

九、参考文献
1. JFinal极速开发手册
2. 《微信公众平台开发最佳实践》
3. 刘中华.LIU Zhong-hua 从视觉设计的角度谈网页设计中的几个技术问题[期刊论文]-湘南学院学报2005,26(5)
4. 路玲娟.LU Ling-juan 视觉设计与网页[期刊论文]-常州信息职业技术学院学报2003,2(1)
5. 兰岚 基于网页界面视觉艺术元素的分析与研究[学位论文]2009
6. 施勇.许勇.Shi Yong.Xu Yong 网页的视觉形态设计[期刊论文]-出版与印刷2009(1)
7. 马力 网页设计的艺术美感分析[期刊论文]-长江论坛2008(6)
8. 李多 网页的视觉传达与设计表现研究[学位论文]2009

附录：全部源程序清单
代码结构如图所示：

课程设计日志
设计
日志

1月19日：进行需求分析，设计主要系统功能，一期功能主要包括登陆退出模块、后台用户管理、消息管理、图文管理、语音功能、地图搜索功能（附近健身）。

1月20日：分配任务，陈雅红负责登陆退出、用户管理、消息管理，侯志鹏负责图文管理，欧钟源负责语音功能以及地图功能，张晓攀负责测试，大家一起写文档。而后设计数据库，完成登录功能，以及语音功能的基本实现。

1月21日：完成用户管理功能、图文管理功能以及语音功能，完成文档需求部分。

1月22日：完成消息管理功能以及附近健身功能，完善之前所做功能，进行部分功能测试并改进。

1月23日：进行整体测试，大家一起完成文档，陈雅红、欧钟源和侯志鹏完成各自功能的需求分析、总体设计、数据库设计以及代码设计部分以及各自的结论心得，张晓攀完成测试用例，张晓云完成文档的总体概述以及文档整合。

指导教师
评 语

指导教师签字: 年 月 日