简易学生管理系统

2022-05-12 20:34:53 阅读：159 来源： 互联网

标签：account const 管理系统 ## app express 学生简易 js

开发步骤

创建一个空文件夹，取名`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)//上面的函数，在失去焦点时调用

验证过账号是注册过的之后，才可以提交该表单给后台

后台根据前端传过来的账号，去数据表中查找对应的账户，如果找到，

则比较前端传来的密码和数据表中的密码是否一致，如果一致，

则允许登录，就把管理员查看学生信息的界面渲染给前端，同时

还要发送相应的数据，包括账户信息（注意删除账户密码）、对应权限、

所有学生信息（注意删除账户密码）。

如果不一致，则把登录界面重新渲染给前端

标签：account,const,管理系统,##,app,express,学生,简易,js
来源： https://www.cnblogs.com/coisini123/p/16264121.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9