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

本篇文章的后端功能由php實(shí)現(xiàn)，可在阿里云服務(wù)器上查看源代碼

---

一、實(shí)現(xiàn)功能簡介：

• 注冊新用戶
• 登錄
• 檢驗(yàn)是否登錄
• 完善我的信息
• 發(fā)布我的自習(xí)
• 顯示已有自習(xí)列表
• 翻頁查看更多自習(xí)

---

二、具體實(shí)現(xiàn)

注冊新用戶

前端頁面為regestered.html

1.表單信息

• 賬號account
• 密碼password
• 確認(rèn)密碼confirmPassword
• 昵稱nickname
• 手機(jī)號碼cellphonNumber
• 科大郵箱ustcEmail
• 驗(yàn)證碼verificationCode

2.前端驗(yàn)證

• 通過regestered.js中的check_info()，每當(dāng)輸入完一個(gè)點(diǎn)擊下一個(gè)輸入框時(shí)對已有輸入內(nèi)容（不包含長度為0，也就是沒有輸入過的輸入框）進(jìn)行驗(yàn)證
• 通過regestered.js中的goToLoginFromRegestered()，在提交表單數(shù)據(jù)時(shí)對所有輸入內(nèi)容進(jìn)行驗(yàn)證，只有所有輸入框都有輸入，并且符合要求才可以提交
• 前端驗(yàn)證具體流程
  
  • 在form表單的最下方有一個(gè)type=’submit’的input標(biāo)簽
  • 點(diǎn)擊該標(biāo)簽意味著提交當(dāng)前表單數(shù)據(jù)
  • 由于form標(biāo)簽有οnsubmit=”return goToLoginFromRegestered()”
    
    • 故將先驗(yàn)證這個(gè)函數(shù)，返回值為false則不會(huì)跳轉(zhuǎn)，將出現(xiàn)alert框，提示輸入內(nèi)容有誤
    • 若果返回值為true則會(huì)執(zhí)行form標(biāo)簽的action
  • form標(biāo)簽的action=”../php/regestered.php”
    
    • 表單數(shù)據(jù)被提交到regestered.php中，之后將連接數(shù)據(jù)庫并進(jìn)行插入
      【之后各項(xiàng)功能的前端驗(yàn)證部分流程均類似，不再贅述】

3.具體要求

• 賬號：
  
  • 6-12位字符
  • 賬號錯(cuò)誤提示account_warning
• 密碼：
  
  • 6-12位字符
  • 密碼錯(cuò)誤提示password_warning
• 確認(rèn)密碼：
  
  • 6-12位字符
  • value與密碼相同
  • 確認(rèn)密碼錯(cuò)誤提示confirmPassword_warning
• 昵稱
  
  • 6-12位字符
  • 密碼錯(cuò)誤提示nickname_warning
• 手機(jī)號碼：
  
  • 11位阿拉伯?dāng)?shù)字
  • 手機(jī)號碼錯(cuò)誤提示cellphoneNumber_warning
• 科大郵箱：
  
  • 以@mail.ustc.edu.cn結(jié)尾
  • 郵箱錯(cuò)誤提示ustcEmail_warning
• 驗(yàn)證碼：
  
  • 驗(yàn)證碼功能暫未完成
  • 目前邏輯是必須為klkq

4.已知未完成邏輯

• 賬號、手機(jī)、郵箱應(yīng)該為數(shù)據(jù)庫中沒有的
• 驗(yàn)證碼應(yīng)該生成隨機(jī)驗(yàn)證碼發(fā)送到郵箱

5.后臺上傳

通過regestered.php文件與數(shù)據(jù)庫交互，當(dāng)前端表單驗(yàn)證的goToLoginFromRegestered()函數(shù)驗(yàn)證通過，返回true時(shí)，轉(zhuǎn)到regestered.php文件

后臺連接本地的3306端口的數(shù)據(jù)庫，數(shù)據(jù)庫用戶密碼均為root

向klkq_account表中插入表單post上來的所有數(shù)據(jù)

成功插入后輸出js語句轉(zhuǎn)到登錄界面。

---

登錄

前端頁面為index.html

1.表單信息

• 賬號account
• 密碼password
• 記住密碼remember

2.前端驗(yàn)證

• 通過checkAccount.js中的checkAccount()，輸入完用戶名后點(diǎn)擊密碼輸入框，就會(huì)調(diào)用checkAccount.php對已有輸入做驗(yàn)證
  
  • 通過如果在數(shù)據(jù)庫中檢測，若檢測到賬號則返回“”到account_warning
  • 若沒檢測到賬號則返回“賬號不存在”到account_warning
• 點(diǎn)擊記住密碼勾選框，增加兩個(gè)cookies，分別為account和password
  
  • 取消勾選后將兩個(gè)cookies的值設(shè)為null（這里應(yīng)該刪掉cookies，需要改正）
• 當(dāng)提交表單時(shí)，直接調(diào)用checkAccountPassword.php（這里應(yīng)該增加一個(gè)js，這樣可以避免下面重新刷新頁面的問題）對account和password進(jìn)行比對
  
  • 如果在數(shù)據(jù)庫中看到同時(shí)滿足account和password的數(shù)據(jù)
    
    • 則跳轉(zhuǎn)到登錄界面
    • 同時(shí)存儲cookies，account_remember_login_state和password_remember_login_state用于記住登錄狀態(tài)
  • 如果不滿足則提示密碼錯(cuò)誤后重新加載登錄界面（這里應(yīng)該更改，應(yīng)該加一個(gè)js）

3.具體要求

• 賬號：
  
  • 能夠在數(shù)據(jù)庫中找到與之對應(yīng)的
  • 賬號錯(cuò)誤提示account_warning
• 密碼：
  
  • 在提交之前不能為空
  • 提交之后進(jìn)行比對

4.已知未完成邏輯

• 取消勾選記住密碼時(shí)應(yīng)該刪除cookies而不是設(shè)置為null
• 應(yīng)該增加一個(gè)js用于傳遞數(shù)據(jù)，避免直接傳遞數(shù)據(jù)導(dǎo)致一旦賬號密碼錯(cuò)誤登錄頁面必須重新刷新一次
• 賬號、郵箱、手機(jī)號碼等應(yīng)該增加驗(yàn)證數(shù)據(jù)庫中是否已經(jīng)存在的邏輯，如果驗(yàn)證為已存在應(yīng)該提示已存在

5.后臺上傳

• checkAccount.php驗(yàn)證是否存在賬號
• checkAccountPassword.php驗(yàn)證賬號和密碼是否存在并匹配

---

檢驗(yàn)是否登錄

在登錄界面的checkAccountPassword.php執(zhí)行成功的最后將會(huì)創(chuàng)建兩個(gè)cookie
account_remember_login_state 和 password_remember_login_state
用于驗(yàn)證是否已經(jīng)登錄，使瀏覽器可以保存登錄狀態(tài)

• 在的其他頁面都引入check_login.js
  
  • 登錄頁面除外
  • 需要調(diào)用window.onload()函數(shù)的頁面除外（這些頁面會(huì)把本段寫到這些頁面的js中）
• 將會(huì)在頁面載入是檢驗(yàn)是否有account_remember_login_state
  
  • 如果有，將會(huì)把導(dǎo)航欄的account_remember_login_state_welcome賦值為用戶名
  • 如果沒有，將會(huì)提示請先登錄，并跳轉(zhuǎn)到登錄頁面

---

完善我的信息

前端頁面為–/self_study/improve_information.html

1.表單信息

• 賬號account
• 真實(shí)姓名realName
• 昵稱nickname
• 性別sex（選擇框）
• 學(xué)院department（選擇框）
• 年級grade（選擇框）
• 手機(jī)號碼cellphoneNumber（數(shù)據(jù)庫中讀取，不可更改）
• 科大郵箱ustcEmail（數(shù)據(jù)庫中讀取，不可更改）
• 學(xué)號studentNum
• 科氣值ustcGas（數(shù)據(jù)庫中讀取，不可更改）
• 興趣愛好interest
• GPA gpa
• 個(gè)人介紹introduction
• 個(gè)人頭像 功能暫未實(shí)現(xiàn)
• 朋友圈 功能暫未實(shí)現(xiàn)

2.1表單自動(dòng)填充–/js/improve_information.js 和 –/php/improve_information_read.php

考慮到用戶可能需要對已經(jīng)上傳的數(shù)據(jù)進(jìn)行更改，我們在加載本頁面時(shí)添加了自動(dòng)填充功能

• 在頁面加載時(shí)調(diào)用improve_information.js 的 fillExistedInfomation(account)
• account為cookies中讀取的數(shù)據(jù)
• 調(diào)用improve_information.php
• 如果數(shù)據(jù)存在則返回?cái)?shù)據(jù)
• 如果數(shù)據(jù)不存在則返回空數(shù)據(jù)“”

2.2前端驗(yàn)證–/js/improve_information.js

【已下驗(yàn)證規(guī)則均有待商榷】

• 賬號
  
  • 賬號并非用來驗(yàn)證，是用來找到數(shù)據(jù)庫中對應(yīng)數(shù)據(jù)的id
• 真實(shí)姓名
  
  • 長度0-30
  • 錯(cuò)誤提示realName_warning
• 性別、學(xué)院、年級
  
  • 長度>0
• 學(xué)號
  
  • 長度為10（還應(yīng)該驗(yàn)證前兩位為PB,SA或BA）
  • 錯(cuò)誤提示studentNum_warning
• 興趣愛好
  
  • 長度0-150
  • 錯(cuò)誤提示interest_warning
• GPA
  
  • 數(shù)值0< gpa <4.3
  • 長度4（包含小數(shù)點(diǎn)）
  • 錯(cuò)誤提示gpa_warning
• 個(gè)人介紹
  
  • 長度0-150
  • 錯(cuò)誤提示introduction_warning

驗(yàn)證規(guī)則同注冊頁面

• 每當(dāng)點(diǎn)擊其他的input框時(shí)check_info_improve_information()都對已有的進(jìn)行驗(yàn)證
• 提交表單時(shí)goToLoginFromImproveInformation()對所有輸入框是否符合規(guī)范，是否均有輸入進(jìn)行驗(yàn)證

4.已知未完成邏輯

• 個(gè)人介紹和興趣愛好增加已輸入字符統(tǒng)計(jì)功能
• 學(xué)號驗(yàn)證增加PB/SA/BA
• 部分信息應(yīng)該增加第二次登陸設(shè)置為不可修改

5.后臺上傳–/php/improve_information_write.php

• 上傳邏輯同注冊，只不過把insert換成了update

---

發(fā)布我的自習(xí)

前端頁面為–/self_study/release_self_study.html

1.表單信息

• 賬號account
• 自習(xí)時(shí)間段selfStudyTime
• 自習(xí)地點(diǎn)selfStudyLocation
• 自習(xí)科目selfStudySubject
• 理由陳述reasonStatement
• 朋友圈 功能暫未實(shí)現(xiàn)

2.1表單自動(dòng)填充–/js/release_self_study.js 和 –/php/release_self_study_read.php

考慮到用戶可能多次自習(xí)理由時(shí)間地點(diǎn)科目相同，我們在加載本頁面時(shí)添加了自動(dòng)填充功能

• 在頁面加載時(shí)調(diào)用release_self_study.js 的 fillExistedInfomation(account)
• account為cookies中讀取的數(shù)據(jù)
• 調(diào)用release_self_study_read.php
• 如果數(shù)據(jù)存在則返回?cái)?shù)據(jù)
• 如果數(shù)據(jù)不存在則返回空數(shù)據(jù)“”

2.2前端驗(yàn)證–/js/release_self_study.js

【已下驗(yàn)證規(guī)則均有待商榷】

• 自習(xí)時(shí)間段
  
  • 時(shí)間需要按照規(guī)定格式輸入（應(yīng)該改成日期輸入框，通過點(diǎn)擊日歷上的信息輸入）
  • 改正過后只要驗(yàn)證長度大于0即可
  • 錯(cuò)誤提示selfStudyTime_warning
• 自習(xí)地點(diǎn)
  
  • 長度大于0
• 自習(xí)科目
  
  • 長度0-30
  • 錯(cuò)誤提示selfStudySubject_warning
• 理由陳述
  
  • 長度0-30
  • 錯(cuò)誤提示reasonStatement_warning

驗(yàn)證規(guī)則同注冊頁面

• 每當(dāng)點(diǎn)擊其他的input框時(shí)
• check_info_improve_information()都對已有的進(jìn)行驗(yàn)證
• 提交表單時(shí)goToLoginFromImproveInformation()對所有輸入框是否符合規(guī)范，是否均有輸入進(jìn)行驗(yàn)證

4.已知未完成邏輯

• 增加時(shí)間選擇框

5.后臺上傳–/php/release_self_study_write.php

• 上傳邏輯同注冊，只不過把insert換成了update

---

顯示已有自習(xí)列表

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

頁面主干部分為3個(gè)div，用于顯示目前已有的自習(xí)

• self_study_0
• self_study_1
• self_study_2

2.1后臺讀取數(shù)據(jù)–/self_study/home_page.js 和 –/php/home_page_read.php

• 頁面加載時(shí)調(diào)用home_page.js 中的showSelfStudy(jsonId = 0) 0代表第一頁
• 該函數(shù)將會(huì)向服務(wù)器請求數(shù)據(jù)
• home_page_read.php將會(huì)返回一個(gè)json格式的數(shù)據(jù)
• home_page.js將會(huì)讀取數(shù)據(jù)并傳到頁面

2.2翻頁重新讀取–/self_study/home_page.js 和 –/php/home_page_read.php

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

3.已知未完成功能

• 尾頁函數(shù)過于理想化
• 后臺讀取數(shù)據(jù)條數(shù)不是3的整數(shù)倍出現(xiàn)空白自習(xí)框

總結(jié)

以上是生活随笔為你收集整理的现代软件工程_团队项目_阿尔法阶段_前端及后端新增功能_v1.0.1_2017.11.29的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。