學生管理系統筆記
阿新 • • 發佈:2022-05-11
開發背景
開發準備
開發步驟
建立一個空資料夾,取名students-system
方式一:右鍵新建
方式二:命令列新建(提倡)
##windows系統
md students-system
##mac/linux
mkdir students-system
初始化
npm init -y
執行結果:該資料夾下新增了一個package.json
在該目錄下新建資料夾/檔案
mkdir public views data router
##mac/linux
touch app.js
##windows
cd.>app.js
cd public
mkdir css img js
cd ../views
##mac/linux
touch admin-login.html show-students.html
##windows
cd.>admin-login.html show-students.html
cd ../data
##mac/linux
touch admins.json students.json jurisdiction.json
##windows
cd.>admins.json students.json jurisdiction.json
安裝包
npm i express express-art-template art-template bootstrap@3 jquery
編輯app.js
app.js
搭建基礎框架
const express=require('express')
const app=express()
app.listen(3000,()=>console.log('app is running...'))
建立路由
在router資料夾下,新建index.js
,並引入至app.js
./router/Index.js
const express=require('express')
const router=express.Router()
//對外暴露router
module.exports=router
app.js
const express=require('express')
const router=require('./router')//開發者自己建立的模組,必須以./或../開頭
const app=express()
//引入express-art-template用以解析html檔案
app.engine('html',require('express-art-template'))
//開放靜態資料夾
app.use('/public',express.static('public'))
app.use('/node_modules',express.static('node_modules'))
//配置body-parser,現在高版本的body-parser直接內建在了express裡
//必須配置body-parser,否則後端無法收到前端post來的資訊
express.use(express.urlencoded({extended:false}))
express.use(express.json())
app.use(router)
app.listen(3000,()=>console.log('app is running...'))
編輯管理員登入介面
admin-login.html
自行搭建介面,要有登入表單區域
<h1>
歡迎登入
</h1>
<form class="form-horizontal" action="/admin-login" method="post">
<div class="form-group">
<label for="account" class="col-sm-2 control-label">Account</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="account" id="account" placeholder="Account">
<p class="text-danger hidden" id="p1">賬號格式不正確</p>
<p class="text-danger hidden" id="p2">該賬號未註冊</p>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
form表單中,action是地址,method是方法,這兩個值要跟後端保持一致
當account失去焦點時,通過正則判斷手機號格式是否正確,如果正確,則通過ajax向後臺驗證賬號是否已註冊,這一步我們使用jQuery來實現。
const test_account = () => {
/*if(正則格式位數正確){
傳送此手機號給後端
後端進行驗證(是否有此手機號)
如果有,加上hidden
如果沒有,提示"該賬號不存在"
}else{
提示賬號格式不正確
}
*/
//手機號的正則表示式
//附:正則驗證網址 https://regexper.com/
const reg_phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
//正則表示式.test(字串),如果滿足則返回true,不滿足返回false
if (reg_phone.test($('#account').val())) {
$('#p1').addClass('hidden')//新增class名hidden,新增後該標籤將消失
//通過get方法,向'/test-account'路徑傳送資訊{account: $('#account').val()},
//其返回值就是後面函式的引數data
$.get('/test-account', {account: $('#account').val()}, data => {
if (data) {
//如果後端返回了資料,並且account為true,意為經後臺驗證,該賬號是已註冊賬號
islogin.account = true
$('#p2').addClass('hidden')
return
}
islogin.account = false
$('#p2').removeClass('hidden')
})
return
}
$('#p1').removeClass('hidden')
$('#p2').addClass('hidden')
islogin.account = false
}
$('#account').blur(test_account)//上面的函式,在失去焦點時呼叫
驗證過賬號是註冊過的之後,才可以提交該表單給後臺
後臺根據前端傳過來的賬號,去資料表中查詢對應的賬戶,如果找到,
則比較前端傳來的密碼和資料表中的密碼是否一致,如果一致,
則允許登入,就把管理員檢視學生資訊
的介面渲染給前端,同時
還要傳送相應的資料,包括賬戶資訊(注意刪除賬戶密碼)、對應許可權、
所有學生資訊(注意刪除賬戶密碼)。
如果不一致,則把登入介面重新渲染給前端