前端及后端新增功能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語句轉到登錄界面。

---

登錄

前端頁面為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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。