基于Vue的兴趣活动推荐APP的设计与实现

目 录

摘 要 I
Abstract II
引 言 1
1 相关技术简介 3
1.1 框架 3
1.1.1 Spring MVC 3
1.1.2 Spring框架 3
1.1.3 MyBatis框架 3
1.1.4 VUE框架 3
1.2 开发语言 3
1.2.1 JAVA 3
1.2.2 JavaScript 4
1.3 设计模式 4
1.4 数据库 4
2 可行性分析 5
2.1 社会可行性 5
2.2 经济可行性 5
2.3 技术可行性 6
2.4 操作可行性 6
3 系统概要设计 7
3.1 总体功能模块设计 7
3.2 系统设计思想 7
3.3 系统功能描述 7
3.4 系统用例图 8
3.5 数据库设计 9
3.5.1 数据库技术简介 9
3.5.2 E-R图 9
3.5.3 总体表设计 9
3.5.4 数据库表结构 10
4 系统详细设计与实现 17
4.1 兴趣推荐的实现 17
4.2 程序流程图 17
4.3 模块详细设计 18
4.3.1 登录模块 18
4.3.2 普通用户模块 20
5 系统测试 29
5.1 集成测试 29
5.2 压力测试 31
结 论 33
致 谢 34
参考文献 35

摘 要

近年来，随着互联网不断的普及与发展，生活也变的多姿多彩，每个人几乎都有属于自己的小小兴趣圈子，但人们的兴趣却不止一个，大多数人是没有时间为自己的兴趣“买单”的。为了解决我们在生活中对于各种兴趣活动的不确定性、复杂性和多样性等问题，结合每个人的喜好、特点、习性、生活方式和居住地等信息，通过基于海量数据的兴趣推荐算法，将兴趣活动的信息更直观的展现给用户。帮助用户更好的根据自己的兴趣爱好参加活动。项目前端用Vue实现数据动态绑定，后台运用SSM框架实现数据交互。Vue.js是现在流行的前端技术，是现在主流的构建用户界面的渐进式框架，选择其原因是相对其它前端主流框架有较好的性能优势。
基于内容的推荐算法可通过用户行为预测用户喜欢内容并应用于基于Vue的兴趣活动推荐APP，在极大程度上优化了用户体验。

关键词：Vue前端技术；SSM框架；兴趣推荐；Ajax

Abstract
In recent years, with the continuous popularization of the Internet, life has become colorful. Almost everyone has their own small interest circle, but people have more than one interest. Most people have no time to “pay” for their interest. In order to solve the uncertainty, complexity and diversity of various interest activities in our life, combined with everyone’s preferences, characteristics, habits, lifestyles and residences and other information, through the interest recommendation algorithm based on massive data, the information of interest activities will be more intuitive displayed to users. Help users better according to their own interests to participate in activities. The front end of the project uses Vue to realize data dynamic binding, and the back end uses SSM framework to realize data interaction. Vue.js is a popular front-end technology, and it is the mainstream progressive framework for building user interface. The reason for choosing it is that it has better performance advantages than other front-end mainstream frameworks.
The content-based recommendation algorithm can predict the user’s favorite content through the user behavior and apply it to the Vue based activity recommendation app, which greatly optimizes the user experience.

Keywords:Vue front-end technology; SSM framework; interest recommendation; Ajax

引 言

个性化推荐概念于1995年3月首次出现在美国人工智能协会。卡内基梅隆大学的罗伯特阿姆斯特朗建议使用个性化的导航系Web Watcher[1]。同时期，斯坦福大学的巴尔巴诺维奇等也推出了一个个性化推荐系统LIRA[2]。从此，个性化推荐的研究逐步开始发展。
此后，亚马逊开始使用推荐系统，对用户的浏览的商品和购买商品分析，试着对部分用户进行个性化推荐。根据国外一科技博客网站的统计，这种方法将该网站的销售额提升了三成之多。在此之后，个性化推荐的应用越来越广泛。
在本世纪初期，国内在推荐系统的研究方面取得了很好的成果。关于评估数据的稀缺性[3]，研究人员提出了几种算法，其中包括：一种协同过滤推荐算法和一种基于项目评分推测的协同过滤推荐算算法等。推荐算法都有各自的优缺点，因此许多研究人员为了修正算法的缺点，运用了结合多种过滤技术的方法。
随着4G网络的全面落实，5G时代的到来，智能手机的更新换代速度，使人们更倾向于用手机代替电脑[4]，希望手机可以实现更多的功能，因此使用移动端应用程序的社交网络将成为未来研究的热点。但就现有的移动端社交网络多数为PC端程序复制到手机上的，虽然具有很多功能，但是并不易操作，最不好的是，会伴随着一些扰人的信息；另外，在推荐网站方面关于用户的隐私问题并没有得到很多的关注和应有的保护，最后就是，市面上大多的应用、网站针对广大群众。有时候总会收到一些网络不良信息的影响，导致有时不仅不利于活动的展开，更是给社会风气带来了不好的作用。
为了丰富广大用户单一的业余时间，同时培养了用户的兴趣喜好，营造了健康的社会风气，通过移动端APP来满足人们随时随地进行交际，寻找志趣相投的朋友的需求，本论文就此设计了一款基于VUE的社交APP。此APP主要在安卓移动终端平台上运行，对于安卓端主要采用WebStorm开发，服务端也就是网页端主要采用SSM框架进行开发。后台数据库管理系统选用MySQL数据库，同时使用安卓模拟器模拟实际的安卓手机来测试程序。通过对一些社会人群的调查取样，然后分析当代人们信息建设的一些需求和弊端，再结合已有的具有推荐功能的APP，综合完善之后，最终呈现出一款面向社会的兴趣推荐APP。
众所周知，现在社会发展迅速，已经进入一个崭新的信息时代，人们只要连上网络，不管和亲人或者朋友相距多远，都可以随时随地联系、进行视频通话等。这些全都受惠于互联网的发展。也是因为互联网的发展，才使得人们对通信这方面需求更大，人们已经不满足于电脑PC端，而是更倾向于便捷的APP。
APP便是一款最新的且很轻巧的信息交互软件，本篇论文主要是基于移动端的兴趣推荐APP，主要针对广大人民群众群体，进行APP的开发，可以更好的服务人们，让人们的空余时间可以得到充足的体验。
本论文的主要工作是实现以下基本功能：
1、兴趣推荐：通过对多种推荐算法的研究，选取最适合本项目的推荐算法；
2、登录功能：用户若想进行操作，都必须先进行登录操作。在网络环境下，安卓端则需要用户自身先注册，才可登录；
3、系统主菜单：整个系统的核心，分为不同的板块和选项设置，用户可以根据自身的需求，点击对应的选项设置，进入该功能的界面，实行对应的操作；
4、活动发布功能：此功能可以添加好友，用户也可以查看好友的空间动态并且自己也可以发表动态，同时也可以对动态进行管理查看；
5、聊天功能：能够与所加好友即时通讯，可发送信息；
6、个人信息功能：包括用户密码、昵称、基本信息等的修改。

1 相关技术简介

1.1 框架
1.1.1 Spring MVC
基于Vue的兴趣活动推荐APP通过使用Spring MVC实现Servlet和JSP相互配合的方法实现所有功能[5]。其目的是为了解决由JSP或Servlet在实现系统功能时出现的固有问题。
1.1.2 Spring框架
Spring是一个开源框架，为解决基于Vue的兴趣活动APP开发的复杂性而创建的。它的优点是采用JavaBean这个概念去解决以前只有EJB才能做到的工作内容。Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架，任何JAVA应用都可以从Spring中受益[6]。
1.1.3 MyBatis框架
MyBatis是对于现阶段来说一个非常优秀的持久层框架，在基于Vue的兴趣活动APP中承担了与数据库交互的功能。它的优点是可以自定义SQL，存储过程，同时还能够实现高级映射。基于Vue的兴趣活动APP后台使用MyBatis避免了手动设置参数和获取结果集[7]。
1.1.4 VUE框架
Vue框架是一套用于构建用户界面的渐进式框架[8]。Vue 的所有的核心库几户都适用于视图层，其简单易上手的特性，便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动[9]。
1.2 开发语言
1.2.1 JAVA
JAVA是一种具有简单、跨平台、面向对象等特点的编程语言，相较其它语言来说具有出色的性能。基于Vue的兴趣活动APP选取JAVA语言开发的原因之一就是它可以在不同平台上运行，只需要在对应的平台上安装JAVA虚拟机即可[10]。并且JAVA还提供了NULL指针检测、数组边界检测、异常出口、Byte code校验等功能。以上优点非常符合本项目开发需求[11]。
1.2.2 JavaScript
JavaScript是一种脚本语言，是一种动态类型的，弱类型的，基于原型的语言。其主要用于服务器端执行，基于Vue的兴趣活动APP前端采用JSP页面开发[12]，与JavaScript可以很好地兼容。JavaScript最大的作用还是用于浏览器端，因为它不需要服务器支持[13]。而随着服务器的强壮，虽然现在的程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道[14]。
1.3 设计模式
该系统使用MVC设计模式来实现系统构建。基于Vue的兴趣活动APP的前端用JSP页面，模型层用MySQL作为数据库层；控制层用SSM框架进行搭建，Bean层和Dao层则采用Mybatis逆向工程生成，减少部分开发周期。在某种意义上，架构的模式部分是让应用程序处于领先地位的全部原因[17]。综上所述，最终选择MVC的开发模式。
1.4 数据库
本系统使用MySQL数据库，基于Vue的兴趣活动APP选取其是因为性价比高，它是少数在开源免费的同时还具有极高性能的一款开源数据库，考虑到开发成本的问题，最终选取MySQL数据库作为基于Vue的兴趣活动APP的数据库层。另外它的可移植性强，MySQL能够运行与多种系统平台上，如windouws，Linux，Unix等，MySQL支持最常用的数据管理功能，适用于中小型企业甚至大型网站应用[18]。

2 可行性分析

系统分析也称为可行性分析，是开发基于Vue的兴趣活动APP的必要阶段。在这个阶段内首先要研究的就是系统开发的必要性和可能性。必要性是指在现在的情况下是否有必要开发一个基于Vue的兴趣活动APP来填补这个查询类工具的不足。可行性就要从“社会可行性”，“经济可行性”，“技术可行性”和“操作可行性”四个方面进行分析了，如图2.1所示。例如开发这个系统是否会造成资源浪费等等。

图2.1 可行性分析
2.1 社会可行性
社会可行性有的时候也被称为操作可行性。其主要论述了一些需要发布上线的系统在开发和运行中是否可以执行下去，并且也论述了系统在开发和运行中对企业等组织的影响。
在当前通讯速度的不断加快，计算机技术和软件技术的不断更新使管理系统不仅适用于企业或单位，甚至大众群体也可能需要采用这种先进的推荐技术。新的推荐技术对传统的查询方式产生了影响，并将带来一些积极的影响。而且，该系统满足相关产业的要求，不与国家法律法规相抵触，对促进信息产业的发展具有一定的作用，因此在社会方面是可行的。
2.2 经济可行性
根据成本/收益分析方法，可以使用此系统所需的软件和硬件资源。由于基于Vue的兴趣活动推荐APP是作为本人毕业项目自行开发的，因此开发成本的投资非常小。最初的资本投资主要集中在购买服务器上。因此，这在经济上是可行的。
2.3 技术可行性
该系统主要依靠JAVA技术以MySQL数据库实现，后台采用目前较为成熟的SSM框架搭建，另外依赖管理采用Maven。Maven将jar包保存到自定义仓库中，随用随取，用之如无，则会自动下载。并且Maven可以将一个项目拆分成多个文件，以实现项目的分布式发布。
基于Vue的兴趣活动推荐APP采用现阶段流行的开发技术，这样的技术在安全性和健壮性上相对稳定，当然这些技术的兼容性也是足够的，可以匹配市面上大部分电脑机型、系统等。所以，基于Vue的兴趣活动推荐APP在技术上是完全可行的。
2.4 操作可行性
基于Vue的兴趣活动推荐APP开发的核心就是方便。在绘制前端页面时应该有简约、美观等特点，在操作方面应该简单化，使初次操作本系统的用户也可以得心应手。基于系统美观、简介、可操作的特点使得它在操作性上可行。

3 系统概要设计

3.1 总体功能模块设计
基于Veu的兴趣活动推荐APP开发的目标是实现推荐算法，减少用户查询信息时的时间。其主要目的是通过用户过去喜欢的活动内容，通过推荐算法为其推荐经过算法过滤后极有可能是该类用户所感兴趣的活动信息，达到推荐的目的。其中，算法主要以内容推荐为主[19]。在查询类、浏览类系统或应用中，内容推荐算法算是现如今各类推荐算法的鼻祖，因此现在很多算法都可以从中看到内容推荐算法的影子，也有很多应用或者系统依旧采用此类算法推荐信息。
普通用户的需求是推过兴趣推荐算法查看到自己所感兴趣的活动内容并报名参加。还可以自愿发起活动。以及个人注册信息的修改；提供较为完善用户界面。
3.2 系统设计思想
兴趣推荐APP主要是便于普通用户查询活动相关信息。此系统的普通用户应该在系统中注册，只有注册成功后，通过注册后的账号密码登录，才可以查询活动的信息。另外还需要有对应的活动信息，因为只有系统中存在的活动信息，用户才可以对活动进行相报名活动、查看活动信息等相关操作[20]。
3.3 系统功能描述
普通用户的功能主要包括两部分：查看自己感兴趣的活动并报名（根据标签查询活动、兴趣推荐查看活动等）；用户信息管理（普通用户的注册功能、修改功能、注销注册信息功能等等）。
普通用户页面应具有的功能如下：
注册系统用户功能：对于新用户，需要在系统中注册系统用户方可使用该系统；
注销用户功能：如果用户想不再使用本系统，可对自己的注册信息进行注销操作；
活动查看与报名功能：通过可选条件或输入模糊查询信息对系统中已存在的活动信息进行查询，并通过链接找到活动主页，了解更详细的信息；
好友聊天：可以与关注的人或者好友进行通讯。
功能如图3.1所示。

图3.1普通用户功能模块
3.4 系统用例图
用例图(Use Case Diagram)是由基于Vue的兴趣活动推荐APP需求分析到最终实现的第一步，其中要有对角色的设计以及角色对系统的操作。用例图在各种开发之前的设计阶段中被广泛的应用，但是它最常用来描述系统及子系统，如图3.2所示。

图3.2普通用户用例图
3.5 数据库设计
3.5.1 数据库技术简介
数据库技术与计算机软件之间的关系密不可分，最早的数据库是IMS数据库系统。在本系统中，我们选用MySQL进行数据管理。
MySQL最大的优点就是容易上手、操作方便，其特性对于初学者相当友好，本系统的设计与实现主要是针对广大用户群体的，考虑到MySQL特性中的稳定性、安全机制、处理大数据、处理速度等方面，本系统非常适合采用MySQL数据库。
3.5.2 E-R图
通过实体关系模型来表示数据库的关系，例如账号信息表与个人基本信息表之间就是一一对应的关系，一个账号信息对应着一个个人基本信息，一个账号信息则对应着多个发布活动信息等，如图3.3所示。

图3.3 E-R图
3.5.3 总体表设计
本系统中共用到了20个数据表。在创建数据表的是过程中，组合主键的字段应该尽可能的减少。毕竟主键的功能其中一个是作为索引，另一个是做为子表的外键，组合主键越少，运行时间越短，成本越低，而且节省了索引存储空间[21]，具体如表3.1所示：
表3.1数据库表名称与对应存放数据内容
表名 解释
ACTIVITY 发布活动表
ADD_ACTIVITY 参与活动
ADD_ACTIVITY_LOG 参与活动日志表
BASE 个人基本信息
COLLECT 收藏列表
CONNECT 一对多表，活动发起对应标签，用于兴趣推荐
FOLLOW 关注列表
HISTORY 浏览记录
MESSAGE 消息通知
SCORE 评分系统
SEARCH 搜索记录
SQUARE 广场发布信息
SQUARE_LOG 广场日志
TALK 对话表
TALK_LOG 对话日志表
TIPS 兴趣标签，可自添
UP 点赞列表
UPDATE_PASSWORD_LOG 密码修改日志表
USER 用户信息表
USER_LOG 用户日志表
3.5.4 数据库表结构
ACTIVITY表是为了存放发布活动的信息，例如：参加活动的人数、活动标题、内容、时间等。具体字段与数据类型如表3.2所示。
表3.2 ACTIVITY表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
PERSION persion INT(11) 11 是
TITLE title VARCHAR(450) 450 是
CONTENT content VARCHAR(5000) 5000 是
ADRESS adress INT(11) 11 是
MAX max INT(11) 11 是
MIN min INT(11) 11 是
BEGINTIME begintime DATETIME 是
ENDTIME endtime DATETIME 是
IMG img VARCHAR(450) 450 是
A1 a1 VARCHAR(45) 45 是
A2 a2 VARCHAR(45) 45 是
A3 a3 VARCHAR(45) 45 是
A4 a4 VARCHAR(45) 45 是
ADD_ACTIVITY表是为了存放参与活动的一些信息，例如：发起活动ID、参与人ID、活动时间等信息。具体字段与数据类型如表3.3所示。
表3.3 ADD_ACTIVITY表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
ACTID actid INT(11) 11 是
PEOPLEID peopleid INT(11) 11 是
TIME time DATETIME 是
A1 a1 VARCHAR(45) 45 是
A2 a2 VARCHAR(45) 45 是
A3 a3 VARCHAR(45) 45 是
A4 a4 VARCHAR(45) 45 是
ADD_ACTIVITY_LOG表是为了存放参与活动日志信息，例如：创建时间、删除时间等信息，具体字段与数据类型如表3.4所示。
表3.4 ADD_ACTIVITY_LOG表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
ACTID actid INT(11) 11 是
PEOPLEID peopleid INT(11) 11 是
TIME time DATETIME 是
DELTIME deltime DATETIME 是
BASE表是为了存放个人基本信息，例如：姓名、身份证号、性别、家庭住址、工作等信息，具体字段与数据类型如表3.5所示。
表3.5 BASE表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
NAME name VARCHAR(45) 45 是
IDCORD idcord VARCHAR(45) 45 是
GENDER gender CHAR(1) 1 是
ADRESS adress VARCHAR(450) 450 是
WORK work VARCHAR(45) 45 是
MMENOY mmenoy VARCHAR(45) 45 是
BASECOL basecol VARCHAR(45) 45 是
B1 b1 VARCHAR(45) 45 是
B2 b2 VARCHAR(45) 45 是
B3 b3 VARCHAR(45) 45 是
B4 b4 VARCHAR(45) 45 是
COLLECT表是为了存放收藏信息，例如：用户ID、活动ID等信息，具体字段与数据类型如表3.6所示。
表3.6 COLLECT表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
UID uid INT(11) 11 是
CID cid INT(11) 11 是
C1 c1 VARCHAR(45) 45 是
C2 c2 VARCHAR(45) 45 是
C3 c3 VARCHAR(45) 45 是
C4 c4 VARCHAR(45) 45 是
CONNECT表是为了存放活动和兴趣标签之间的关联信息，具体字段与数据类型如表3.7所示。
表3.7 CONNECT表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
ACTID actid INT(11) 11 是
TIPID tipid INT(11) 11 是
C1 c1 VARCHAR(45) 45 是
C2 c2 VARCHAR(45) 45 是
C3 c3 VARCHAR(45) 45 是
C4 c4 VARCHAR(45) 45 是
FOLLOW表是为了存放关注的活动信息，例如：用户ID、活动ID等信息，具体字段与数据类型如表3.8所示。
表3.8 FOLLOW表
是否主键 字段名 字段描述 数据类型 长度 可空
是 ID id INT(11) 11
UID uid INT(11) 11 是
FID fid INT(11) 11 是
F1 f1 VARCHAR(45) 45 是
F2 f2 VARCHAR(45) 45 是
F3 f3 VARCHAR(45) 45 是
F4 f4 VARCHAR(45) 45 是
HISTORY表是为了存放用户浏览信息，例如：用户ID、浏览的活动ID等信息，具体字段与数据类型如表3.9所示。
表3.9 HISTORY表
是否主键 字段名 字段描述 数据类型 长度 可空 约束
是 ID id INT(11) 11
UID uid INT(11) 11 是
AID aid INT(11) 11 是
H1 h1 VARCHAR(45) 45 是
H2 h2 VARCHAR(45) 45 是
H3 h3 VARCHAR(45) 45 是
MESSAGE表是为了存放用户消息通知信息，例如：消息通知内容、用户ID、是否已读等信息，具体字段与数据类型如表3.10所示。
表3.10 MESSAGE表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
CONTENT content VARCHAR(450) 450
UID uid INT(11) 11
FLOOK flook CHAR(1) 1
M1 m1 VARCHAR(45) 45
M2 m2 VARCHAR(45) 45
M3 m3 VARCHAR(45) 45
M4 m4 VARCHAR(45) 45
SCORE表是为了存放用户评分信息，例如：活动得分、用户评价内容等信息，具体字段与数据类型如表3.11所示。
表3.11 SCORE表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
BID bid INT(11) 11
PID pid INT(11) 11
SCORE score INT(11) 11
CONTENT content VARCHAR(450) 450
S1 s1 VARCHAR(45) 45
S2 s2 VARCHAR(45) 45
S3 s3 VARCHAR(45) 45
S4 s4 VARCHAR(45) 45
SEARCH表是为了存放用户搜索信息，例如：用户搜索内容、搜索之间等信息，具体字段与数据类型如表3.12所示。
表3.12 SEARCH表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
UID uid INT(11) 11
CONTENT content VARCHAR(40) 40
TIME time DATETIME
S1 s1 VARCHAR(45) 45
S2 s2 VARCHAR(45) 45
S3 s3 VARCHAR(45) 45
S4 s4 VARCHAR(45) 45
SQUARE表是为了存放广场发布信息，例如：发布时间、发布内容、发布图片等信息，具体字段与数据类型如表3.13所示。
表3.13 SQUARE表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
TIME time DATETIME
CONTENT content VARCHAR(450) 450
IMG img VARCHAR(450) 450
SENDID sendid INT(11) 11
S1 s1 VARCHAR(45) 45
S2 s2 VARCHAR(45) 45
S3 s3 VARCHAR(45) 45
S4 s4 VARCHAR(45) 45
SQUARE_LOG表是为了存放广场日志信息，例如：发布时间、发布内容、发布图片等信息，具体字段与数据类型如表3.14所示。
表3.14 SQUARE_LOG表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
TIME time DATETIME
CONTENT content VARCHAR(450) 450
IMG img VARCHAR(450) 450
SENDID sendid INT(11) 11
DELTIME deltime DATETIME
S1 s1 VARCHAR(45) 45
S2 s2 VARCHAR(45) 45
S3 s3 VARCHAR(45) 45
S4 s4 VARCHAR(45) 45
TALK表是为了存放对话信息，例如：对话内容、发送人ID、接收人ID、对话时间等信息，具体字段与数据类型如表3.15所示。
表3.15 TALK表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
CONTENT content VARCHAR(500) 500
SENDID sendid INT(11) 11
ACCEPTID acceptid INT(11) 11
TIME time DATETIME
T2 t2 VARCHAR(45) 45
T3 t3 VARCHAR(45) 45
T4 t4 VARCHAR(45) 45
TALK_LOG表是为了存放对话日志信息，例如：对话内容、发送人ID、接收人ID、对话时间、删除对话时间等信息，具体字段与数据类型如表3.16所示。
表3.16 TALK_LOG表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
CONTENT content VARCHAR(450) 450
SID sid INT(11) 11
AID aid INT(11) 11
TIME time DATETIME
DELTIME deltime DATETIME
T1 t1 VARCHAR(45) 45
T2 t2 VARCHAR(45) 45
T3 t3 VARCHAR(45) 45
T4 t4 VARCHAR(45) 45
TIPS表是为了存放兴趣标签信息，例如：兴趣标签内容等信息，具体字段与数据类型如表3.17所示。
表3.17 TIPS表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
CONTENT content VARCHAR(45) 45
T1 t1 VARCHAR(45) 45
T2 t2 VARCHAR(45) 45
T3 t3 VARCHAR(45) 45
T4 t4 VARCHAR(45) 45
UP表是为了存放点赞信息，例如：点赞用户、被点赞的活动等信息，具体字段与数据类型如表3.18所示。
表3.18 UP表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
UID uid INT(11) 11
CONID conid INT(11) 11
U1 u1 VARCHAR(45) 45
U2 u2 VARCHAR(45) 45
U3 u3 VARCHAR(45) 45
U4 u4 VARCHAR(45) 45
UPDATE_PASSWORD_LOG表是为了存放修改密码信息，例如：用户账号、用户密码、上次修改密码时间、本次修改密码时间等信息，具体字段与数据类型如表3.19所示。
表3.19 UPDATE_PASSWORD_LOG表
是否主键 字段名 字段描述 数据类型 长度
是 ID id INT(11) 11
USERNAME username VARCHAR(45) 45
PASSWORD password VARCHAR(45) 45
OLD_TIME old_time DATETIME
NEW_TIME new_time DATETIME
USER表是为了存放用户信息信息，例如：用户账号、用户密码、联系电话、邮箱、用户类型、用户IP地址、创建账号时间、更新时间等信息，具体字段与数据类型如表3.20所示。
表3.20 USER表
是否主键 字段名 字段描述 数据类型 长度
是 ID id BIGINT(20) 20
USERNAME 用户名 VARCHAR(50) 50
PASSWORD password VARCHAR(50) 50
PHONE phone VARCHAR(20) 20
EMAIL email VARCHAR(50) 50
USER_TYPE user_type CHAR(1) 1
USER_SCH user_sch INT(11) 11
IP ip VARCHAR(30) 30
CREATED created DATETIME
UPDATED updated DATETIME
UID uid INT(11) 11
USER3 user3 INT(11) 11
USER4 user4 INT(11) 11

4 系统详细设计与实现

4.1 兴趣推荐的实现
常见的推荐算法通常是基于用户近段时间的活动信息、用户近段时间的操作信息以及与用户自身相关联等信息来针对单一用户构建推荐模型。用户的相关信息可以是用户的名字、常驻活动地点、家的位置、年龄、学历水平等信息，用户操作信息可以是平常喜欢使用的通讯软件、使用软件时的输入习惯、评论内容、浏览记录、使用系统时的操作习惯等，用户自身关联信息可以是同用户有强烈关联的好友自身的活动地点、收藏信息、点赞列表、喜好等信息。使用内容兴趣推荐通常都会依赖于以上与用户本身相关的行为信息，从而达到推荐的目的。
数学模型如下：假设用户A对三个活动的喜爱程度分别是4、5、3，用户B对三个活动的喜爱程度分别是2、1、4。经过分析发现前两个活动的共同内容是“学习”，那么我们就能发现用户A是对“学习”感兴趣的。
利用公式就可以轻易的算出A喜欢“学习”的程度为0.5。同理，可以算出用户A对其他活动的喜好程度。
最后通过余弦相似度的公式来计算得出给定的User 和给定的Item之间的距离。余弦相似度的值越大说明U越有可能喜欢I[19]。
余弦相似度的具体计算方法如下：

Ua表示，用户A对特征a的喜好值。Ia表示，电影I是否包含特征a。
4.2 程序流程图
经过这个阶段的工作，应得出目标系统的精确描述[22]，在编码阶段，该描述被直接翻译成以通用编程语言编写的程序。
详细设计的目的不只是实现每个模块功能，还有设计的处理和设计的过程使其更加通俗易懂，本阶段的设计任务不是具体的程序编写，而是要设计程序的大体构思，以后通过大体思路从而编译出程序代码。
该模块实现的算法的详细设计和描述可以使用程序流程图[23]。如图4.1所示。

图4.1整体流程图
4.3 模块详细设计
按照概要设计描述的基于Vue的兴趣活动推荐应用应具有的具体功能来具体实现该应用，尽量完善系统的每一个要求。
系统采用模块化结构，将系统功能划分为多个模块，每个模块完成部分功能，并通过功能完成数据交互操作[24]。具体的系统模块如下：
4.3.1 登录模块
系统登录模块本身实现了用户的身份验证，由于本应用是对所有用户开放，因此登录界面设计为注册按钮。新用户可以通过单击“注册”按钮来注册系统用户。如果用户名、密码确认正确，则用户通过系统判断进入页面[25]，如图4.2所示。

图4.2 登录验证流程图
如果输入的登录信息有误（用户名在数据库中不存在或者密码错误），则显示登录错误提示信息，主要代码：
@RequestMapping(value=“/userlogin”,method=RequestMethod.POST)
@ResponseBody
public Msg Login(User user,Model model) {
UserExampleuserExample = new UserExample();
UserExample.Criteria criteria = userExample.createCriteria();
criteria.andUsernameEqualTo(user.getUsername());
List users = userService.getUserName(userExample);
User newuser = new User();
for (int i = 0; i<users.size(); i++) {
newuser = (User)users.get(i);
}
if(user.getPassword().equals(newuser.getPassword())){
newuser.setUpdated(new Date());
userService.updateUser(newuser);
httpSession.setAttribute(“name”, newuser.getUsername());
httpSession.setAttribute(“userType”, “”+newuser.getUserType());
return Msg.success().add(“userType”, “”+newuser.getUserType());
}else{
return Msg.fail();
}
}
4.3.2 普通用户模块
普通用户注册功能界面如图4.3所示，用户可以通过输入用户账号、用户密码、用户邮箱、用户电话等功能进行注册，最后点击注册的按钮，即可完成注册。

图4.3 用户注册界面
主要代码:
register:function(){
if(this.newUsername == “” || this.newPassword == “”,this.email == “” || this.phone == “”){
alert(“请输入用户名或密码”)
}else{
let data = {‘username’:this.newUsername,‘password’:this.newPassword,‘email’:this.email,‘phone’:this.phone}
/接口请求/
//url是接口地址
this.$ajax.post(‘/adduser’, data).then(res => {
if(res.data.code == 200){
this.tishi = “该用户名已存在”
this.showTishi = true
}else{
this.tishi = “注册成功”
this.showTishi = true
setTimeout(function(){
this.showLogin = true,
this.showRegister = false,
this.showTishi = false,
this.tishi = ‘’,
this.username = ‘’,
this.password = ‘’,
this.newUsername = ‘’,
this.newPassword = ‘’
}.bind(this),1000)
}
}).catch(error => {
this.handleError(error);
});
}
},
用户登录界面如图4.4所示，输入账号、密码，点击登录按钮即可进入APP首页。

图4.4 用户登录界面
普通用户登录之后会进入首页，如图4.5所示，首页展示各大推荐活动的轮播图信息，并且导航栏有对应的标签列表可供选择。在页面下方有快速功能栏，里面有一些活动的选项标签，可通过点击选项标签快速找到对应活动。

图4.5 首页界面
主要代码如下：
loadMore:function () {
if(this.nodata0) return false;
if(this.loading) return false;
this.loading = true;
this.$store.commit("nextpage");letthat=this;letaddress=this.$local;
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …on(){ that.ajax.get(‘/selActivity’,pageInfo).then(res => {
let data = res.data.extend.pageInfo.list
if(data.length0){
that.nodata=0;
}
that.KaTeX parse error: Expected 'EOF', got '}' at position 66: …ng = false }̲).catch(error =…router.push({path:‘/actmessage’});
}
}
聊天界面如图4.6和图4.7所示，显示了所有聊天对象。点击对应聊天对象可进入对应聊天窗口页面。

图4.6 聊天界面 图4.7对话界面
主要代码如下：
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … Vue.prototype.talkid = tid;
this.KaTeX parse error: Expected 'EOF', got '}' at position 39: …tmessage'}); }̲, back(){ t…router.go(-1);
},
send(){
let pageInfo = {‘id’:this.talkid,‘content’:this.content}
if(this.content!=null){
this.KaTeX parse error: Expected 'EOF', got '}' at position 164: … }); }̲ }, load(){…talkid;
let pageInfo = {‘id’:this.talkid}
this.$ajax.get(‘/selTalk’,pageInfo).then(res => {
this.item = res.data.extend.pageInfo;
}).catch(error => {
this.handleError(error);
});
}
活动列表界面如图4.8所示，显示了所有活动的部分信息（活动展开所在地、活动性质、活动名称等等）。点击对应活动可进入对应信息页面。

图4.8 活动列表界面
我的界面如图4.9所示，包含了收藏记录，评价记录，浏览记录，钱包，卡包，会员中心，客服中心，我要合作和关于等功能，点击对应功能即可进入对应功能。

图4.9 我的界面
主要代码如下：
back() {
this.KaTeX parse error: Expected 'EOF', got '}' at position 22: ….go(-1); }̲, dianzan(){ …router.push({path: ‘/dianact’});
},
liulan(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 35: …'/liulan'}); }̲, soucang(){ …router.push({path: ‘/soucang’});
},
/页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录/
if(getCookie(‘username’)){
this.name = getCookie(‘username’);
}
发布活动功能如图4.10、4.11、4.12所示，可以可以设置活动主题，活动内容，活动地点，活动人数，开始时间，结束时间，活动时间等内容进行活动发布。

图4.10 活动简介 图4.11选择地点 图4.12活动基础信息
主要代码如下：
back(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 18: …uter.go(-1); }̲, handleNext …ajax.get(‘/addActivity’, data).then(res => {
this.$router.push(‘/main’)
}).catch(error => {
this.handleError(error);
});
}

5 系统测试

5.1 集成测试
按软件结构组合在一起，讲这些作为一个系统来综合测试。该测试阶段主要对完整系统进行测试，分别从三个用户的角度，对系统的各个功能进行测试，如图5.1 集成测试图所示。

图5.1 集成测试图
所针对所有用户，测试登录功能页面、注册功能页面和密码功能修改页面的所有功能，测试结果如表5.1所示。
表5.1登录、注册、忘记密码测试用例
测试项 测试方法 与期望结果
登录界面账号输入框 数据测试 一致
登录界面账号输入错误提示 数据测试 一致
登录界面密码输入框 数据测试 一致
登录界面密码输入错误提示 数据测试 一致
登录界面提交测试 点击测试 一致
登录界面跳转忘记密码界面链接 点击测试 一致
登录界面跳转注册界面链接 点击测试 一致
注册界面账号输入框 数据测试 一致
注册界面账号输入格式错误提示 数据测试 一致
注册界面密码输入框 数据测试 一致
注册界面密码输入不一致提示 数据测试 一致
注册界面邮箱输入框 数据测试 一致
(表5.1续表)
测试项 测试方法 与期望结果
注册界面邮箱输入格式错误提示 数据测试 一致
注册界面提交测试 点击测试 一致
注册界面跳转忘记密码界面链接 点击测试 一致
注册界面跳转登录界面链接 点击测试 一致
忘记密码界面账号输入框 数据测试 一致
忘记密码界面账号输入格式错误提示 数据测试 一致
忘记密码界面密码输入框 数据测试 一致
忘记密码界面密码输入格式错误提示 数据测试 一致
忘记密码界面邮箱输入框 数据测试 一致
忘记密码界面邮箱输入格式错误提示 数据测试 一致
忘记密码界面提交测试 点击测试 一致
忘记密码界面跳转登录界面链接 点击测试 一致
忘记密码界面跳转注册界面链接 点击测试 一致
所针普通用户，普通用户查询兴趣推荐时的所有功能，包括活动列表浏览、活动条件查询等，测试结果如表5.2所示。
表5.2 普通用户测试用例
测试项 测试方法 与期望结果
发布活动信息 点击测试 一致
推荐活动显示 观察测试 一致
参与活动 点击测试 一致
个人信息显示 观察测试 一致
收藏列表显示 观察测试 一致
收藏功能 点击测试 一致
活动查询 点击测试 一致
关注功能 点击测试 一致
关注列表显示 观察测试 一致
对话列表显示 观察测试 一致
对话功能 点击测试 一致
评分功能 点击测试 一致
点赞功能 点击测试 一致
(表5.2续表)
测试项 测试方法 与期望结果
个人信息修改 数据测试 一致
退出活动 点击测试 一致
删除活动记录 点击测试 一致
删除点赞记录 点击测试 一致
删除评分记录 点击测试 一致
删除对话记录 点击测试 一致
清楚查询记录 点击测试 一致
删除浏览记录 点击测试 一致
5.2 压力测试
使用压力测试的软件，针对同时在线用户数量、同时间的用户获取数据量、同时间的页面响应进行压力测试[25]。
这部分主要是通过同一时间的用户在线数量和一段时间内的用户在线数量进行压力测试。使用ApacheJmater软件创建进程。
首先以千位用户同时访问进行测试，可以看到平均响应时间为664，并没有发现丢包现象，总用时1.9秒左右，效果如图5.2所示。

图5.2 千位用户压力测试界面
然后以万位用户同时访问进行测试，可以看到平均响应时间为1110，并没有发现丢包现象，总用时9秒左右。可以发现随着同时访问数量的增加，服务器的响应时间也会随之增加，但还未出现崩溃或丢包的现象。效果如图5.3所示。

图5.3万位用户压力测试界面

结 论

经过几个月对项目的设计和开发，基于Vue的兴趣推荐APP都已经开发完毕。在开发项目之前，本人曾访问过许多与本项目开发相关的网站，同时也搜集了大量有关于本项目开发相关的资料作为参考，从中也学习了很多之前没有了解过的关于Web开发方面的知识。
基于Vue的兴趣推荐APP可以作为一般的工具类系统，对于该系统来说，模块清晰，功能明确，还具有如下特点：
采用B/S的结构体系，使系统同时具有高维护性和高重用性。
采用SSM框架的开发模式，使逻辑分离，代码更加容易管理。
后台采用的MySQL数据库，有可扩展、易于使用和安全的特点。
但由于本人开发时间和开发技术实在有限，还有很多地方可以改进。例如浏览界面的美观方面，功能上的进一步优化，在数据库的负载均衡方面，对人性化的处理还不是特别细致。对本人来说，整个APP的开发是符合预期目标的，但有些方面还要在今后的学习中提高。
毕业设计对我来说不仅是自己学习的一种考试，也是对自己能力提高。通过完成基于Vue的兴趣互动APP让我明白了自己这些年来学习知识的不足，自己需要学习的东西还有很多，也让我掌握了发现问题和解决问题的能力，通过自我学习补充，学习到了很多课本上学习不到的知识。在完成这个基于Vue的兴趣活动APP的过程中，我终于明白学习是一个长期积累的过程，在以后的工作中应该不断的努力学习，提高自己专业素质。
在这次开发基于Vue的兴趣活动APP中，让我感受到了同学之间互相帮助，也感受到了劳动成果的来之不易，通过这次学习让我积累了很多宝贵的经验，同时也让我明白了毕业设计是一个学生从学校走向社会最后一次锻炼自己的机会。

致 谢

四年的大学学习生活在即将划上一个句号，而于我的人生来说却仅仅只是一个逗号，我将应对新的征程的开始。在这四年中，给我帮助的人太多太多，令我感动的时刻数不胜数，岁月的脚步依然匆匆，我会把每一份关怀，每一份勉励都铭记、珍藏。
大学四年学习时光已经接近尾声，在此我想对我的母校，我的父母、亲人们，我的教师和同学们表达我由衷的谢意。感激我的家人对我大学三年学习的默默支持；感激我的母校沈阳城市学院给了我我在大学四年深造的机会，让我能继续学习和提高；感激我们专业的教师和同学们四年来的关心和鼓励。教师们课堂上的活力洋溢，课堂下的谆谆教诲；同学们在学习中的认真热情，生活上的热心主动，所有这些都让我的三年充满了感动。这次毕业论文设计我得到了很多教师和同学的帮忙，其中我的论文指导教师朱元华教师和刘建生教师对我的关心和支持尤为重要。每次遇到难题，我最先做得就是向朱元华教师和刘建生教师寻求帮忙，而朱元华教师和刘建生教师每次不管忙或闲，总会抽空来找我谈话，然后一齐商量解决的办法。
我做毕业设计的每个阶段，从选题到查阅资料，论文提纲的确定，中期论文的修改，后期论文格式调整等各个环节中都给予了我悉心的指导。这几个月以来，朱元华教师和刘建生教师不仅仅在学业上给我以精心指导，同时还在思想给我以无微不至的关怀，在此谨向朱元华教师和刘建生教师致以诚挚的谢意和崇高的敬意。
同时，本片毕业论文的写作也得到了付继业、祝明等同学的热情帮忙。感激在整个毕业设计期间和我密切合作的同学，和以往在各个方面给予过我帮忙的伙伴们，在此，我再一次真诚地向帮忙过我的教师和同学便是感激！

参考文献

[1]沈剑翘，陈泽椿. Vue.js在构建系统前端SPA的应用[J]. 科技创新与应用， 2020(3) ：181-182
[2]裘月. 融入个体人格特质的个性化图书推荐模型研究[D]. 浙江工商大学， 2015
[3]李宏恩. 基于分流策略和谱聚类的多图层推荐算法[D]. 福建师范大学， 2014
[4]王戴钰. 基于Android平台移动社交网络的设计与实现[D]. 大连海事大学， 2014
[5]吴玫，刘大君. 基于Struts2框架的在线课程平台系统的设计[J]. 软件， 2020， 41(3) ：242-244
[6]孙旸. 基于SSM框架的高校信息采集管理系统设计与实现[J]. 无线互联科技， 2019， 16(23) ：48-50
[7]王丽，宗镇欣. 基于SSM框架的学生信息管理系统[J]. 电脑知识与技术， 2019， 15(28) ：95-96
[8]吕品田. 基于vue.js的共享空间平台的设计[J]. 数字通信世界， 2018(03) ：199+280
[9]解凯，李天聪. 云笔记系统[J]. 北京印刷学院学报， 2018， 26(09) ：87-91
[10]曲芳晓. 基于主数据管理的数据中心系统设计与实现[D]. 天津大学， 2016.
[11]田昊坤. JAVA编程平台的优点分析[J]. 中国科技投资， 2017， (19) ：370
[12]郭珂. 用JavaScript脚本语言编写试题网页[J]. 电脑编程技巧与维护， 2014， (6) ：65-67
[13]王玉涛. 高性能的Web服务及其在机票系统中的应用研究[D]. 东华大学， 2015
[14]Yong Fang, Cheng Huang, Yu Su, Yaoyao Qiu. Detecting malicious JavaScript code based on semantic analysis[J]. Computers & Security, 2020, 93
[15]何祥宇. Ajax实现数据交互技术[J]. 网友世界·云教育， 2014， (11) ：49-49
[16]Yash Gupta,Himanshu Dewan,Alka Leekha. Real-time monitoring using AJAX and WebSockets[J]. Journal of Statistics and Management Systems, 2020, 23(1)
[17]李霞. MVC设计模式的原理与实现[D]. 吉林：吉林大学， 2004
[18]Margaretha Ohyver,Jurike V. Moniaga,Iwa Sungkawa, Bonifasius Edwin Subagyo, Ian Argus Chandra. The Comparison Firebase Realtime Database and MySQL Database Performance using Wilcoxon Signed-Rank Test[J]. Procedia Computer Science, 2019, 157
[19]史杨凯. 基于本地移动轨迹和相似关系的兴趣点推荐[D]. 湖南大学， 2018
[20]徐宏昌. 基于JSP体系架构的学生信息查询系统的研究与实现[D]. 北京工业大学， 2014
[21]刘小飞，李美满. 基于Android系统的开放教育移动教学平台构建[J]. 广东开放大学学报， 2018， 27(01) ：11-14+40
[22]杨敏. 基于.NET的贵阳多元工贸公司信息管理系统的分析与设计[D]. 贵州大学， 2009
[23]Junwei Tang, Ruixuan Li, Kaipeng Wang, Xiwu Gu,Zhiyong Xu. A Novel Hybrid Method to Analyze Security Vulnerabilities in Android Applications[J]. Tsinghua Science and Technology, 2020, 25(05) ：589-603
[24]刘虎. 进口食品超市POS管理系统[D]. 华东师范大学， 2010
[25]Chaka Chaka,Tlatso Nkhobo. Online module login data as a proxy measure of student engagement: the case of my Unisa, Moya MA , Flipgrid, and Gephi at an ODeL institution in South Africa[J]. International Journal of Educational Technology in Higher Education, 2019, 16(1)