Web技術——簡易班級管理系統(tǒng)（框架）
時間：2023-06-24 23:30:02 | 來源：網站運營
時間：2023-06-24 23:30:02 來源：網站運營
Web技術——簡易班級管理系統(tǒng)（框架）：OMG，終于來到最后一部分了，實現(xiàn)一個簡易班級管理系統(tǒng)。為啥不用java web?因為...我不會....只會flask web的菜鳥一枚。相信大家通過前幾篇文章，寫一個屬于自己的flask web應該是相當easy了。那么，這篇文章將把我們之前提到的所有東西融合起來，做一個簡單的網站來更深地了解上述技術。麻雀雖小五臟俱全，let's start!
一、實驗目標
- 用戶可以注冊和登錄該網站（賬戶合法性檢測）
- 用戶可以獲取個人信息和相應的班級信息和成員信息
- 管理員可以登錄該網站（賬戶合法性檢測）
- 管理員可以獲取班級信息和成員信息
- root權限管理員可以新建普通權限管理員
二、系統(tǒng)分析
1. 業(yè)務流程
針對新系統(tǒng)的功能結構圖，再結合原有系統(tǒng)的分析改進，可得到新系統(tǒng)的業(yè)務流程圖如下所示：
2. 數(shù)據(jù)流程
系統(tǒng)規(guī)劃后可以繪制出如下的數(shù)據(jù)流程圖：
3. 數(shù)據(jù)字典
根據(jù)新系統(tǒng)中數(shù)據(jù)流圖中描述的數(shù)據(jù)信息流，可以得到新系統(tǒng)中用到的信息表，對信息表進行細化后可以得到如下的數(shù)據(jù)字典，分三部分來描述：
三、總體設計
1.開發(fā)環(huán)境
為了降低實現(xiàn)難度，我們將代碼運行在本地PC上，則需要環(huán)境如下所示：
- Pycharm proffessional（運行服務器腳本）
- 幾款不同的瀏覽器（火狐/IE/Chrome）
- Flask web開發(fā)組件
- Anaconda 2.7.13 解釋器（python腳本解釋器）
- Mysql 5.7.16解壓縮版數(shù)據(jù)庫
2.系統(tǒng)功能結構
3. 系統(tǒng)網絡結構
四、詳細設計
1. 服務器端主要代碼框架
服務器端采用python語言編寫，主要的工作是從客戶端獲取通過ajax發(fā)送過來的消息，查詢數(shù)據(jù)庫后獲得相應的信息并通過json返回數(shù)據(jù)信息。可能會有變化的情況：接收數(shù)據(jù)是利用ajax還是form表格發(fā)送的，返回json 數(shù)據(jù)還是網頁。
2. 客戶端主要代碼框架
客戶端采用jquery方式編寫，主要的工作是從網頁獲取信息，并發(fā)送給服務器端，接收服務器端的返回信息，并顯示在網頁上?？赡軙凶兓那闆r：是否需要利用ajax發(fā)送數(shù)據(jù)，返回json 數(shù)據(jù)還是網頁。
3. 數(shù)據(jù)庫設計
數(shù)據(jù)庫設計主要包括概念設計、邏輯設計和物理設計三部分，因此，該部分將分別從這三部分出發(fā)來闡述整個數(shù)據(jù)庫的設計過程。
3.1 概念結構設計概念設計是對用戶要求描述的現(xiàn)實世界(可能是一個工廠、一個商場或者一個學校等)，通過分類、聚集和概括，建立抽象的概念數(shù)據(jù)模型以擴充的實體。主要表現(xiàn)形式為（E-R模型），下面將繪制出本系統(tǒng)的E-R圖。
3.2 邏輯結構設計邏輯設計是將現(xiàn)實世界的概念數(shù)據(jù)模型設計成數(shù)據(jù)庫的一種邏輯模式，即適應于某種特定數(shù)據(jù)庫管理系統(tǒng)所支持的邏輯數(shù)據(jù)模式。主要表現(xiàn)形式為關系實體描述，下面將詳細描述本系統(tǒng)的關系實體，用到的所有關系模式如下所示：
- 用戶（用戶id，賬戶，密碼，姓名，性別，居住地，電子郵箱）
- 管理員（管理員id，賬戶，權限等級，密碼）
- 備忘錄（備忘錄id，標題，內容，日期）
- 公告（公告id，標題，內容，日期）
- 班級（班級id，名稱）
- 班級成員（班級id,用戶id）
3.3 物理結構設計物理設計是根據(jù)特定數(shù)據(jù)庫管理系統(tǒng)所提供的多種存儲結構和存取方法等依賴于具體計算機結構的各項物理設計措施。主要表現(xiàn)形式為具體的數(shù)據(jù)表描述（包括各個字段，主鍵/外鍵/數(shù)據(jù)類型等，主碼為加粗選項）。
4. 輸入輸出界面設計
在完成了數(shù)據(jù)庫后端設計后，如何設計UI界面，讓系統(tǒng)使用者能夠友好快速的使用該系統(tǒng)就成為了當前急需解決的問題。良好的UI界面不僅能增加用戶對該系統(tǒng)的好感，也能夠將系統(tǒng)的功能最大限度的展現(xiàn)在使用者面前。因此，接下來將從輸入界面設計和輸出界面設計兩方面開始闡述該系統(tǒng)的輸入輸出界面設計。
4.1 輸入界面設計系統(tǒng)的輸入主要是靠html的表格和模態(tài)框來完成的，并且輸入輸出界面有很大重合性（獲得輸入結果后又輸出顯示在當前界面上(通過對話框或是網頁列表等)），典型的輸入界面包括如下幾個：
- 注冊登錄頁面
【用戶注冊登錄頁面】用戶使用系統(tǒng)前要完成注冊和登錄功能，因此，單獨列出注冊登錄頁面會比較方便，該頁面原型如下(signin.html)
【管理員登錄頁面】管理員只需要登錄即可使用該系統(tǒng)，新管理員的產生是通過root權限管理員授權而得到的。因此采用對話框方式實現(xiàn)，具體如下所示：
【其余信息輸入界面】包括密碼修改界面新密碼的輸入輸出均采用對話框方式，類似于管理員登錄頁面，在此不做贅述.
4.2 輸出界面設計輸出界面和輸入界面都是在一個html文件里，區(qū)別在于：動態(tài)輸出頁面主要是通過改變html中的無序列表來設計的。
【個人信息界面】用戶個人信息界面總體上分兩欄設計，左邊放置用戶個人信息，右邊放置備忘錄信息；管理員信息頁面布局與用戶界面布局類似，只是將個人信息轉變?yōu)橘~戶信息，備忘錄轉變?yōu)橄到y(tǒng)中所有管理員信息即可。
【班級信息界面】班級信息主要包括班級公告和班級成員，兩者采用的界面具有高度的相似性，具體如下所示：
相信通過這一系列圖表你已經對整個系統(tǒng)的框架有了很清晰的了解了，接下來就是動手把它一點一點實現(xiàn)的時候了~
在線咨詢
