前端及后端新增功能v1.0.2

本篇文章的后端功能由php实现，可在阿里云服务器上查看源代码

一、实现功能简介：

• 注册新用户
• 登录
• 检验是否登录
• 完善我的信息
• 发布我的自习
• 显示已有自习列表
• 翻页查看更多自习

二、具体实现

注册新用户

前端页面为regestered.html

1.表单信息

• 账号account
• 密码password
• 确认密码confirmPassword
• 昵称nickname
• 手机号码cellphonNumber
• 科大邮箱ustcEmail
• 验证码verificationCode

2.前端验证

• 通过regestered.js中的check_info()，每当输入完一个点击下一个输入框时对已有输入内容（不包含长度为0，也就是没有输入过的输入框）进行验证
• 通过regestered.js中的goToLoginFromRegestered()，在提交表单数据时对所有输入内容进行验证，只有所有输入框都有输入，并且符合要求才可以提交
• 前端验证具体流程 
  
  • 在form表单的最下方有一个type=’submit’的input标签
  • 点击该标签意味着提交当前表单数据
  • 由于form标签有onsubmit=”return goToLoginFromRegestered()” 
    
    • 故将先验证这个函数，返回值为false则不会跳转，将出现alert框，提示输入内容有误
    • 若果返回值为true则会执行form标签的action
  • form标签的action=”../php/regestered.php” 
    
    • 表单数据被提交到regestered.php中，之后将连接数据库并进行插入 
      【之后各项功能的前端验证部分流程均类似，不再赘述】

3.具体要求

• 账号： 
  
  • 6-12位字符
  • 账号错误提示account_warning
• 密码： 
  
  • 6-12位字符
  • 密码错误提示password_warning
• 确认密码： 
  
  • 6-12位字符
  • value与密码相同
  • 确认密码错误提示confirmPassword_warning
• 昵称 
  
  • 6-12位字符
  • 密码错误提示nickname_warning
• 手机号码： 
  
  • 11位阿拉伯数字
  • 手机号码错误提示cellphoneNumber_warning
• 科大邮箱： 
  
  • 以@mail.ustc.edu.cn结尾
  • 邮箱错误提示ustcEmail_warning
• 验证码： 
  
  • 验证码功能暂未完成
  • 目前逻辑是必须为klkq

4.已知未完成逻辑

• 账号、手机、邮箱应该为数据库中没有的
• 验证码应该生成随机验证码发送到邮箱

5.后台上传

通过regestered.php文件与数据库交互，当前端表单验证的goToLoginFromRegestered()函数验证通过，返回true时，转到regestered.php文件

后台连接本地的3306端口的数据库，数据库用户密码均为root

向klkq_account表中插入表单post上来的所有数据

成功插入后输出js语句转到登录界面。

登录

前端页面为index.html

1.表单信息

• 账号account
• 密码password
• 记住密码remember

2.前端验证

• 通过checkAccount.js中的checkAccount()，输入完用户名后点击密码输入框，就会调用checkAccount.php对已有输入做验证 
  
  • 通过如果在数据库中检测，若检测到账号则返回“”到account_warning
  • 若没检测到账号则返回“账号不存在”到account_warning
• 点击记住密码勾选框，增加两个cookies，分别为account和password 
  
  • 取消勾选后将两个cookies的值设为null（这里应该删掉cookies，需要改正）
• 当提交表单时，直接调用checkAccountPassword.php（这里应该增加一个js，这样可以避免下面重新刷新页面的问题）对account和password进行比对 
  
  • 如果在数据库中看到同时满足account和password的数据 
    
    • 则跳转到登录界面
    • 同时存储cookies，account_remember_login_state和password_remember_login_state用于记住登录状态
  • 如果不满足则提示密码错误后重新加载登录界面（这里应该更改，应该加一个js）

3.具体要求

• 账号： 
  
  • 能够在数据库中找到与之对应的
  • 账号错误提示account_warning
• 密码： 
  
  • 在提交之前不能为空
  • 提交之后进行比对

4.已知未完成逻辑

• 取消勾选记住密码时应该删除cookies而不是设置为null
• 应该增加一个js用于传递数据，避免直接传递数据导致一旦账号密码错误登录页面必须重新刷新一次
• 账号、邮箱、手机号码等应该增加验证数据库中是否已经存在的逻辑，如果验证为已存在应该提示已存在

5.后台上传

• checkAccount.php验证是否存在账号
• checkAccountPassword.php验证账号和密码是否存在并匹配

检验是否登录

在登录界面的checkAccountPassword.php执行成功的最后将会创建两个cookie 
account_remember_login_state 和 password_remember_login_state 
用于验证是否已经登录，使浏览器可以保存登录状态

• 在的其他页面都引入check_login.js 
  
  • 登录页面除外
  • 需要调用window.onload()函数的页面除外（这些页面会把本段写到这些页面的js中）
• 将会在页面载入是检验是否有account_remember_login_state 
  
  • 如果有，将会把导航栏的account_remember_login_state_welcome赋值为用户名
  • 如果没有，将会提示请先登录，并跳转到登录页面

完善我的信息

前端页面为–/self_study/improve_information.html

1.表单信息

• 账号account
• 真实姓名realName
• 昵称nickname
• 性别sex（选择框）
• 学院department（选择框）
• 年级grade（选择框）
• 手机号码cellphoneNumber（数据库中读取，不可更改）
• 科大邮箱ustcEmail（数据库中读取，不可更改）
• 学号studentNum
• 科气值ustcGas（数据库中读取，不可更改）
• 兴趣爱好interest
• GPA gpa
• 个人介绍introduction
• 个人头像 功能暂未实现
• 朋友圈 功能暂未实现

2.1表单自动填充–/js/improve_information.js 和 –/php/improve_information_read.php

考虑到用户可能需要对已经上传的数据进行更改，我们在加载本页面时添加了自动填充功能

• 在页面加载时调用improve_information.js 的 fillExistedInfomation(account)
• account为cookies中读取的数据
• 调用improve_information.php
• 如果数据存在则返回数据
• 如果数据不存在则返回空数据“”

2.2前端验证–/js/improve_information.js

【已下验证规则均有待商榷】

• 账号 
  
  • 账号并非用来验证，是用来找到数据库中对应数据的id
• 真实姓名 
  
  • 长度0-30
  • 错误提示realName_warning
• 性别、学院、年级 
  
  • 长度>0
• 学号 
  
  • 长度为10（还应该验证前两位为PB,SA或BA）
  • 错误提示studentNum_warning
• 兴趣爱好 
  
  • 长度0-150
  • 错误提示interest_warning
• GPA 
  
  • 数值0< gpa <4.3
  • 长度4（包含小数点）
  • 错误提示gpa_warning
• 个人介绍 
  
  • 长度0-150
  • 错误提示introduction_warning

验证规则同注册页面

• 每当点击其他的input框时check_info_improve_information()都对已有的进行验证
• 提交表单时goToLoginFromImproveInformation()对所有输入框是否符合规范，是否均有输入进行验证

4.已知未完成逻辑

• 个人介绍和兴趣爱好增加已输入字符统计功能
• 学号验证增加PB/SA/BA
• 部分信息应该增加第二次登陆设置为不可修改

5.后台上传–/php/improve_information_write.php

• 上传逻辑同注册，只不过把insert换成了update

发布我的自习

前端页面为–/self_study/release_self_study.html

1.表单信息

• 账号account
• 自习时间段selfStudyTime
• 自习地点selfStudyLocation
• 自习科目selfStudySubject
• 理由陈述reasonStatement
• 朋友圈 功能暂未实现

2.1表单自动填充–/js/release_self_study.js 和 –/php/release_self_study_read.php

考虑到用户可能多次自习理由时间地点科目相同，我们在加载本页面时添加了自动填充功能

• 在页面加载时调用release_self_study.js 的 fillExistedInfomation(account)
• account为cookies中读取的数据
• 调用release_self_study_read.php
• 如果数据存在则返回数据
• 如果数据不存在则返回空数据“”

2.2前端验证–/js/release_self_study.js

【已下验证规则均有待商榷】

• 自习时间段 
  
  • 时间需要按照规定格式输入（应该改成日期输入框，通过点击日历上的信息输入）
  • 改正过后只要验证长度大于0即可
  • 错误提示selfStudyTime_warning
• 自习地点 
  
  • 长度大于0
• 自习科目 
  
  • 长度0-30
  • 错误提示selfStudySubject_warning
• 理由陈述 
  
  • 长度0-30
  • 错误提示reasonStatement_warning

验证规则同注册页面

• 每当点击其他的input框时
• check_info_improve_information()都对已有的进行验证
• 提交表单时goToLoginFromImproveInformation()对所有输入框是否符合规范，是否均有输入进行验证

4.已知未完成逻辑

• 增加时间选择框

5.后台上传–/php/release_self_study_write.php

• 上传逻辑同注册，只不过把insert换成了update

显示已有自习列表

1.页面信息–/self_study/home_page.html

页面主干部分为3个div，用于显示目前已有的自习

• self_study_0
• self_study_1
• self_study_2

2.1后台读取数据–/self_study/home_page.js 和 –/php/home_page_read.php

• 页面加载时调用home_page.js 中的showSelfStudy(jsonId = 0) 0代表第一页
• 该函数将会向服务器请求数据
• home_page_read.php将会返回一个json格式的数据
• home_page.js将会读取数据并传到页面

2.2翻页重新读取–/self_study/home_page.js 和 –/php/home_page_read.php

• 首页firstPage()
• 上一页previousPage()
• 下一页nextPage()
• 尾页lastPage()

3.已知未完成功能

• 尾页函数过于理想化
• 后台读取数据条数不是3的整数倍出现空白自习框

现代软件工程_团队项目_阿尔法阶段_前端及后端新增功能_v1.0.1_2017.11.29

原文：http://www.cnblogs.com/klkqyfct/p/7932154.html