开发步骤
创建一个空文件夹,取名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)//上面的函数,在失去焦点时调用
验证过账号是注册过的之后,才可以提交该表单给后台
后台根据前端传过来的账号,去数据表中查找对应的账户,如果找到,
则比较前端传来的密码和数据表中的密码是否一致,如果一致,
则允许登录,就把管理员查看学生信息
的界面渲染给前端,同时
还要发送相应的数据,包括账户信息(注意删除账户密码)、对应权限、
所有学生信息(注意删除账户密码)。
如果不一致,则把登录界面重新渲染给前端