Skip to content

zhijiaxinyu/ADWebPJ

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#高级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())实现在输入改动的时候搜索缓存中的项目信息并显示出来,以此实现自动补全。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 50.4%
  • Java 33.6%
  • JavaScript 10.3%
  • CSS 5.5%
  • Shell 0.2%