開發步驟

建立一個空資料夾，取名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

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)//上面的函式，在失去焦點時呼叫

驗證過賬號是註冊過的之後，才可以提交該表單給後臺

後臺根據前端傳過來的賬號，去資料表中查詢對應的賬戶，如果找到，

則比較前端傳來的密碼和資料表中的密碼是否一致，如果一致，

則允許登入，就把管理員檢視學生資訊的介面渲染給前端，同時

還要傳送相應的資料，包括賬戶資訊（注意刪除賬戶密碼）、對應許可權、

所有學生資訊（注意刪除賬戶密碼）。

如果不一致，則把登入介面重新渲染給前端