willliang1991 / adwebpj Goto Github PK

#高级WebPJ文档

###项目整体架构

采取前后端分离的架构，后端选择SpringBoot配置下的Spring + Spring Web MVC+ Hibernate框架，数据库选择H2 Database。

后端架构在Java代码里面可以体现出来，不同的package表示不同类别的类的集合。
Controller类负责处理前端(View)传来的Http请求，将Json数据解析为对应的Model类对象，通过Service类实现对Entity所需求的功能，将需要发送给前端的数据放入Model中通过Http Response返回给前端。
Spring Boot自带的annotation功能可以很方便的将Entity类映射到数据库中，通过调用Repository类的方法与数据库完成交互，Hibernate框架可以让我们免去编写大量SQL语句的窘境，从而使的后台能够专注于业务逻辑的实现。

前端为了完成单页面应用前端使用了AngularJS路由来完成页面的切换。

通过在主页面scenepage中使用controller来控制路由的切换，路由的子页面在templates/htmls/中, 每个页面使用内联的Javascript代码来控制自己页面的行为。

前后端的交互通过Ajax发送HTTP请求，后端提供一系列完成特定功能的API，前端通过Ajax发送HTTP请求到对应的Url，数据通过双方规定好的Json格式传输。

在这种架构下，前后端遵守双方定义好的API文档，各自独立的完成功能点的开发，再集中对每个对应的API进行测试即可完成全部的开发流程。

代码库保存于Github，主要在develop分支下进行开发，前后端每完成几个API的测试就会push到远程代码库上，然后小组成员pull最新的内容即可在最新的环境下继续开发。

###小组人员及分工: 黄颁钊 ：负责整个项目的后端工作以及Github的项目的管理

1. 全部后端Java代码
2. 与前端API接口的测试
3. 高级推荐算法

宋昊伦 ：前端, 项目展示页面

1. 主页搜索及菜单栏(自动补全功能等)
2. AngularJS页面跳转的controller
3. 项目列表页面，附近景观页面的各种功能(评论，收藏等)
4. 景观详细页的基本信息,评分,评论的显示，图片、视频、3d模型库。

宋文博 ：前端，评价功能与部分前后端接口的实现

1. 全部html静态页面,UI设计
2. 部分js（Angularjs路由控制的界面切换，部分页面的页面逻辑控制)
3. 评价功能（区域识别与凸显，显示已有标示，添加标志和文字建议（按类别)
4. 前端后台的自动化测试。

徐睿泽 : 前端，用户管理页面

1. 用户管理页面(注册、登陆、注销、更改头像)
2. 第三方登录
3. 微博分享

许哲纶 : 百度地图API

1. 百度地图的加载,项目的显示以及图层切换
2. 路线规划功能（包括景点在不在附近的判断）,到这去功能
3. 地图上景点标签的悬浮框功能 ###具体功能点的实现:

#####推荐算法 By 黄颁钊

采用了广泛运用的KNN(K近邻)算法,考虑到数据量过小，所以放弃了例如矩阵分解等机器学习算法，省去了训练这个步骤。
对每个user生成一个1*k的向量表示user对k个item的打分。
用户之间的相似度通过计算两个向量的cosin余弦来表示，越接近1表示两个用户越相似。
推荐是对一个用户，去预测他对没有打分过的item的打分，KNN中直接选取与这个用户最为相似的几个对该item有打分的用户，通过加权计算出预测打分。
我们则通过预测打分的高低给用户推荐item。

#####项目评价页面 By 宋文博

前台实现了三排按钮，用导航栏中的“活动类型”，“场景类型”，“建议”来实现切换。
每次按钮按下的时候在地图中产生一个可拖动的tag，若tag被拖到地图外则删除该tag，若tag被拖到地图上则在地图上产生一个tag并将该tag的种类，景点号和与地图的相对位置传到数据库中。
当页面加载时从数据库中读取当前景点已有的所有tag并按数据库中存储的位置显示在地图上。
关于添加标志与文字建议，每次将含有文字建议的tag拖动到地图上时将文字建议和tag信息一起存到数据库中，加载页面时将文字建议和tag信息一起获取并绘制到地图上。

#####第三方登录 By 徐睿泽

目前支持GITHUB的第三方账号登陆。
首先点击“获取第三方验证码”按钮后，应用将跳转至GITHUB的授权页面。
确认后输入GITHUB的账号与密码，通过验证后系统将返回用户界面。
此时再次点击“获取第三方验证码”，用户客户端将接收到一个名为“token”的文件，后台将在收到该文件后将文件上传到服务器，并自动为用户解析“token”代码。
再点击“GIT登陆”按钮。如果已经用户之前使用过“第三方登陆”的功能，则返回提示“登陆成功”，如果之前没有使用过该功能，则系统将自动以其GITHUB的用户名为应用用户名注册一个新的用户，并自动为用户登陆。
以后就可以以“GITHUB”的用户名为大众点评系统的用户名登陆。

#####路线规划 By 许哲纶

输入起点和终点的名称，地图上会出现相应的路线，这里会根据景点之间的距离来判断，只会显示出在以起点终点的中心为圆心，起点到终点距离为直径的圆以内的景观。
在百度地图里用map.getDistance判断点在不在里面。

#####3d模型的加载&自动补全 By 宋昊伦

3d模型:首先获取窗口元素的大小与属性并据此构建场景、灯光、渲染器等元素,再使用ThreeJS的THREE.JSONLoader方法将上传到服务器的3d模型文件解析,并利用MeshLambertMaterial将文件放到搭建好的场景中作为一个单独的HTML页面加入到页面中。
自动补全：利用JQuery提供的bind('input propertychange', function())实现在输入改动的时候搜索缓存中的项目信息并显示出来，以此实现自动补全。