前端简介 - noenergysoftware/rateMyCourse GitHub Wiki
简介
在本网站中,由于实现了前后端的完全分离,因此开发过程中直接相互隔离,采用了不同的分支进行代码管理,后端服务器会定时拉取最新的前端分支。
前端所采用的框架为Bootstrap框架,能够较好的实现移动端的适配,同时样式也不至于太难看。JS编写大部分采用了JQuery 3.2.1来实现,由于存在多个开发人员,在部分函数可能也会出现使用DOM的地方。
前后端通过接口相连接,前端发送ajax请求,对请求结果进行相应的处理。
页面
在Gamma最终版本中,前端页面实际使用的共有10个页面,其中绝大多数页面都存在着条头,条头暂时未采用复用,而是直接写入到对应的页面,条头的逻辑由head.js来控制。
-
index.html
index.html作为网站的首页,提供了搜索的地方。
- index.js
-
login.html
login.html是登录的页面,提供用户以登录或找回密码的选项。
- login.js
-
signup.html
signup.html是注册的页面,用于用户的注册,
- signup.js
-
searchResult.html
searchResult.html是显示搜索结果的页面,能初步显示课程的部分信息。
- searchResult.js
-
coursepage.html
coursePage.html是显示课程信息的页面,显示了课程的主要信息以及课程的评价。
- coursePage.js
-
personalinfo.html
personalinfo.html是个人信息的页面,展示用户的信息以及他的历史评论。
- personalinfo.js
-
searchResultSortedCourse.html
searchResultSortedCourse.html是显示课程排名的页面,有被评分了的课程都会显示在该页面上。
- searchResultSortedCourse..js
-
safe.html
safe.html是重置和修改密码的页面。
- safe.js
-
announcement.html
announcement.html是公告区页面,但几乎没有使用。
-
callBack.html
callBack.html是用于报错的页面,内容为空,仅有一条js语句用于加载页面内容。由于所采用的的Django后端在某些情况下ajax访问报错后返还的是一个包裹在json对象里的网页,无法正常显示,所以采用callBack页面来显示出来。
commentPage.html曾经为评论页面,后被舍弃。
资源
前端的各种资源分布于不同的文件夹中。对于用户的头像,我们采用的是第三方图床,因此在本地服务器没有存储其图片文件。
-
js
存放了所有自主编写的js。
-
css
存放了所有的css样式,有部分是库文件。
-
fonts
存放了font-awesome插件所必须的字体
-
lib
存放了外来的各种js插件。
-
resource
存放了所用到的部分图片资源