开发步骤

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

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

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

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

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

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

所有学生信息(注意删除账户密码)。

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

 

vue实现学生管理系统的更多相关文章

  1. 【IOS开发笔记02】学生管理系统

    端到端的机会 虽然现在身处大公司,但是因为是内部创业团队,产品.native.前端.服务器端全部坐在一起开发,大家很容易做零距离交流,也因为最近内部有一个前端要转岗过来,于是手里的前端任务好像可以抛一 ...

  2. C程序范例(2)——学生管理系统”链表“实现

    1.对于学生管理系统,能够实现的方法有许多,但是今天我们用链表的方法来实现.虽然初学者很可能看不懂,但是不要紧,这是要在整体的系统的学习完C语言之后,我才编写出的程序.所以大家不必要担心.在这里与大家 ...

  3. jsp学习之基于mvc学生管理系统的编写

    mvc开发模式:分别是 model层 view层 Control层 在学生管理系统中,model层有学生实体类,数据访问的dao层,view层主要是用于显示信息的界面,Control层主要是servl ...

  4. java版本的学生管理系统

    import java.awt.BorderLayout; import java.awt.Color; import java.awt.Frame; import java.awt.event.Ac ...

  5. 学生管理系统-火车订票系统 c语言课程设计

    概要: C 语言课程设计一---学生管理系统 使使用 C 语言实现学生管理系统.系统实现对学生的基本信息和考试成绩的 管理.采用终端命令界面,作为系统的输入输出界面.采用文件作为信息存储介质. 功能描 ...

  6. Java学生管理系统项目案例

    这是一个不错的Java学生管理系统项目案例,希望能够帮到大家的学习吧. 分代码如下 package com.student.util; import java.sql.Connection; impo ...

  7. Java+Mysql+学生管理系统

    最近正在学java和数据库,想起以前写的学生管理系统,都是从网上下载,敷衍了事.闲来无事,也就自己写了一个,不过功能实现的不是很多. 开发语言:java: 开发环境:Mysql, java: 开发工具 ...

  8. JDBC学生管理系统--处理分页显示

    分页的思想: 假设一共有104条数据,每页显示10条数据: select * from student limit 0,10; 页数是index,第index页,对应的sql语句是: select * ...

  9. JDBC-简单的学生管理系统-增删改查

    结构:三层架构--mvc 三层是为了解决整个应用程序中各个业务操作过程中不同阶段的代码封装的问题,为了使程序员更加专注的处理某阶段的业务逻辑. 比如将数据库操作代码封装到一层中,提供一些方法根据参数直 ...

  10. Java写一个简单学生管理系统

    其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...

随机推荐

  1. 【python基础教程】-10.开箱即用(模块的工作原理,获悉模块的功能以及常用模块)

    资料来源 (1) Python基础教程第三版 1.模块的工作原理 1.1 简单的模块及使用 1.1.1 模块的本质 (1) 模块就是程序,任何python程序都可以作为模块导入; 1.1.2 简单的模 ...

  2. 初次安装虚拟机和Linux

    --初学Linux记录点滴 使用软件 VMware-Workstation-15.0.4 CentOS-7-x86_64-Minimal-2003.iso 1.首先使用 VMware-Workstat ...

  3. k8s入门_RC、RS、Deployment

    RC 什么是RC: Replication Controller(副本控制器),RC能够保证pod在任意时间运行的副本数量,能够保证pod总是可用的. RC控制的pod的多个副本,每个副本都有独立的i ...

  4. linux安装EMQ

    1.拉取Emqx包 wget https://www.emqx.com/zh/downloads/broker/4.2.14/emqx-centos7-4.2.14-x86_64.rpm 2.安装服务 ...

  5. pypi镜像-清华

    临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-package 注意,simple 不能少, 是 https 而不是 ...

  6. JavaScript 基础学习(二)

    JavaScript 基础学习(二) instanceof方法: var s = "hello"; var i = 8; //typeof 只能判断基本数据类型 alert(typ ...

  7. .Net Core自定义中间件(Middleware)

    .Net Core支持开发者自定义中间件 UseMiddleware<自定义class>(); app.UseMiddleware<AuthFuncMiddleware>(); ...

  8. No.1.5

    优先级:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器的样式 优先级公式:!imporant>行内样式>id选择器>类选择器>标签选择器>通配符选择 ...

  9. 遮罩DIV遮挡住下面元素 下面元素如何触发响应点击事件

    遮罩DIV{ pointer-events: none; }

  10. imputation文献-A systematic evaluation of single-cell RNA-sequencing imputation methods

    文章题目 A systematic evaluation of single-cell RNA-sequencing imputation methods 中文名: 单细胞RNA测序插补方法的系统评价 ...