前端及后端新增功能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标签有οnsubmit=”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语句转到登录界面。

通过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相关推荐

现代软件工程_团队项目_阿尔法阶段_前端知识共享_2017.11.21
现代软件工程_团队项目_阿尔法阶段_前端知识分享更加舒适浏览格式 http://blog.csdn.net/bowean HTML基础(一) 本文参考了[http://www.w3school.co ...
【软件工程实践 · 团队项目】第一次作业
[软件工程实践 · 团队项目] 第一次作业 Part 0 · 简要目录 Part 1 · 队伍阵容 Part 2 · 会议记录相关 Part 3 · 会议讨论记录 Pa ...
软件工程导论团队项目
软件工程导论团队项目(速课小龙) 一．团队介绍 1.团队成员邓旭 2016012068 (组长) 陈逸璇 2016012056 周紫伊 2016012043 谢月鹏 2016012066 洪泽芳 ...
软件工程课程团队项目——团队日志
软件工程课程团队项目,团队日志项目进度项目代码地址项目进度第0周软件工程课程团队项目--第0周开发日志 https://blog.csdn.net/Seb_Veeeettle/article ...
软件工程课程团队项目——第3、4周开发日志
软件工程课程团队项目,第3.4周开发日志时间成员具体工作个人日志 Zhang同学 Xu同学 Lu同学 Duan同学时间 2020.5.4-2020.5.17 成员 Zhang同学.Xu同学. ...
现代软件工程_团队项目_阿尔法阶段_需求分析文档_2017.11.13
用户需求分析版本 v1.0.0 0.目录 1. 引言 1.1 编写目的 1.2 项目背景 1.3 预期的读者和阅读建议 1.4 项目范围 1.5 参考资料 2.用户需求分析 2.1. 调查问卷(Us ...
机器学习中一阶段网络是啥_机器学习项目的各个阶段
机器学习中一阶段网络是啥 Many businesses and organizations are turning to machine learning for solutions to chal ...
【HelloKitty团队项目】Alpha阶段项目展示
项目内容这个作业属于哪个课程 2023北航软件工程这个作业的要求在哪里团队项目-Alpha阶段项目展示我在这个课程的目标是学习软件工程技术,完成团队开发流程这个作业在哪个具体方面帮助我实 ...
【HelloKitty团队项目】Beta阶段项目展示
项目内容这个作业属于哪个课程 2023北航软件工程这个作业的要求在哪里团队项目-Beta阶段项目展示我在这个课程的目标是学习软件工程技术,完成团队开发流程这个作业在哪个具体方面帮助我实现 ...

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

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

一、实现功能简介：

二、具体实现

注册新用户

1.表单信息

2.前端验证

3.具体要求

4.已知未完成逻辑

5.后台上传

登录

1.表单信息

2.前端验证

3.具体要求

4.已知未完成逻辑

5.后台上传

检验是否登录

完善我的信息

1.表单信息

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

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

4.已知未完成逻辑

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

发布我的自习

1.表单信息

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

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

4.已知未完成逻辑

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

显示已有自习列表

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

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

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

3.已知未完成功能

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

最新文章

热门文章