HTML设计简单的教务管理系统

这是《人机界面设计》的一个作业，运用了HTML，css，javascript的基本操作设计出来的一个西安邮电教务系统的简单页面

本文适合新手运用所学的前端知识进行尝试，建议使用vscode编译器并安装相关包

话不多说，先看最终设计出来的页面：

上图为登陆界面。账号密码格式正确则跳转到主页面

在此处只验证了输入格式是否正确，并没有数据库与之匹配，所以只要格式规范就可以跳转到主界面

上图为跳转后的主页面

上图为模拟手机端打开登陆界面

上图为手机端展示的主页面

最终完成的文件夹。文件夹res存放需要用到的图片。main为主页面，login为登陆页面
接下来给大家分享登陆页面的HTML部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="./css/index.css"><title>登陆</title>
</head>
<body><div class="container" id="app" v-cloak><div class="row"><div class="hidden-sm-down col-lg-7 col-xl-8 back-img"><img src="./res/indexBack.jpg" alt="学生选课系统"></div><div class="col-sm-11 col-md-10 col-lg-5 col-xl-4 login-area"><ul class="nav nav-tabs type-change-tabs nav-justified"><li class="nav-item" v-for="(item, index) in tabs"><a href="javascript:;" v-bind:class="'nav-link ' + (item.isActive ? 'active' : '1') " v-bind:data-type="item.type" v-on:click="changeTabs" v-bind:data-index="index">{{ item.value }}</a></li></ul><form action="javascript:;" class="login-form"><div class="form-group"><label for="username">{{ tabs[show].showUsernameText }}:</label><input  type="text" name="username" id="username" class="form-control"v-bind:placeholder="tabs[show].showUsernameText" v-model="inputData.username"v-on:input="inputChange"></div><div class="form-group"><label for="password">密码:</label><input type="password" name="password" id="password" placeholder="密码" class="form-control" v-model="inputData.password"v-on:input="inputChange"></div><div class="form-group"><label for="captcha">验证码:</label><input type="text" name="captcha" id="captcha" class="form-control" placeholder="五位验证码"v-model="inputData.captcha"v-on:input="inputChange"><img alt="验证码" title="验证码" class="captcha" v-bind:src="captchaUrl" v-on:click="updateCaptcha"><span class="text-primary" v-on:click="updateCaptcha">看不清?换一张</span></div><div class="form-group"><input type="submit" class="btn btn-primary btn-block login-butt" v-bind:value="tabs[show].value + '登陆'"v-on:click="login"></div><div v-bind:class="'form-group info-show' + ' text-' + callbackInfoType">{{ callbackInfo }}</div></form></div></div></div><!-- 引入JS --><script src="./js/index.js"></script>
<div><center>copyright &copy; 西安邮电大学版权所有</center>
</div>
</body>
</html>

接下来是主页面（login成功后的跳转页面）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="./css/dashboard.css"><title>教务管理系统</title>
</head>
<body><div class="container-fluid" id="app" v-cloak><div class="row"><div class="col-12"><nav class="navbar bg-primary navbar-dark navbar-expand-md"><a class="navbar-brand" href="./index.html">教务管理系统</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item dropdown"><a href="javascript:;" id="navbardrop" data-toggle="dropdown" class="nav-link dropdown-toggle active">个人信息管理</a><div class="dropdown-menu"><a href="javascript:;" target="_blank" title="修改个人基本信息" class="dropdown-item">信息修改</a><a href="javascript:;" target="_blank" title="修改账户密码" class="dropdown-item">密码修改</a></div></li><li class="nav-item dropdown"><a href="javascript:;" id="navbardrop" data-toggle="dropdown" class="nav-link dropdown-toggle active">课程管理</a><div class="dropdown-menu"><a href="javascript:;" target="_blank" title="添加，删除课程" class="dropdown-item">课程管理</a><a href="javascript:;" target="_blank" title="管理课程的成绩" class="dropdown-item">成绩管理</a></div></li><li class="nav-item dropdown"><a href="javascript:;" id="navbardrop" data-toggle="dropdown" class="nav-link dropdown-toggle active">系统管理</a><div class="dropdown-menu"><a href="javascript:;" target="_blank" title="添加，删除用户" class="dropdown-item">用户管理</a></div></li></ul></div></nav></div></div><div class="row"><div class="col-xs-12 col-sm-10 col-md-4 col-lg-3 col-xl-2 center"><img src="./res/head.jpg" alt="头像" title="<%= info.name %>" class="head-img"><div class="alert alert-primary">欢迎你:王勇</div><div class="alert alert-dark">权限:管理员</div><button class="btn btn-primary btn-block"v-on:click="logout">退出登录</button></div></div></div><!-- js --><script src="./js/dashboard.js"></script>
<div><center>copyright &copy; 西安邮电大学版权所有</center>
</div>
</body>
</html>

JavaScript部分

var app = new Vue({el : '#app',data : {},methods : {// 退出登陆logout : function() {window.location.href = './login.html';}}
});

var app = new Vue({el : '#app',data : {// 选项卡的值tabs : [{isActive : true,value : '学生',type : 'student',showUsernameText : '学号'},{isActive : false,value : '老师',type: 'teacher',showUsernameText : '工号'}],// 当前展示的选项卡的下标show: 0,// 登陆API回调的信息callbackInfo : '',// 登陆API回调的信息类型callbackInfoType : '',// 输入的表单数据inputData : {username : '',password : '',captcha  : ''},// 验证码的地址captchaUrl : './res/captcha.svg'},methods : {/*** 修改选中的选项卡* @param {object} e */changeTabs : function(e) {this.tabs[this.show].isActive = false;this.tabs[parseInt(e.target.dataset.index)].isActive = true;this.show = parseInt(e.target.dataset.index);},/*** 处理登陆事件*/login : function() {let username = this.inputData.username;let password = this.inputData.password;let captcha = this.inputData.captcha;let type = this.tabs[this.show].type;if(username.length != 8) {this.callbackInfo = '用户名必须是8位'this.callbackInfoType = 'warning'return;}if(/\D/.test(username)) {this.callbackInfo = '用户名只能是纯数字';this.callbackInfoType = 'warning';return;}if(password.length < 6) {this.callbackInfoType = 'warning';this.callbackInfo = '密码长度不能小于6';return;}let pattern = /^\w{6,}$/;if(!pattern.test(password)) {this.callbackInfo = '密码只能是数字或者字母';this.callbackInfoType = 'warning';return;}if(captcha.length != 5) {this.callbackInfo = '验证码错误';this.callbackInfoType = 'warning';return;}// 这里是验证成功之后的API请求window.location.href = './index.html';},/*** input事件*/inputChange : function() {if(!this.callbackInfo.length) return;this.callbackInfo = this.callbackInfoType = '';},/*** 更新验证码图片*/updateCaptcha : function() {this.captchaUrl = './res/captcha.svg' + '?time=' + new Date().getTime();}}
});

登录界面中使用学号（8位数字）和密码（6位以上字母和数字的组合）登录，通过javascript验证学号和密码的格式是否正确，如果格式且验证码正确则跳转至首页（不用验证密码是否正确）；如果格式不正确，提示用户重新输入

css部分：

[v-cloak]{display: none;
}
.show-page-frame{overflow: hidden;height: 100%;width: 100%;
}
.center{text-align: center;margin: 0px auto;
}
.head-img{border-radius: 50%;border:1px solid gray;max-width: 200px;max-height: 200px;margin-top: 20px;margin-bottom: 20px;
}

[v-cloak] {display: none;
}
.login-area{margin: 0px auto;
}.type-change-tabs{margin-bottom: 20px;
}
.info-show{text-align: center;overflow: hidden;height:20px;
}
.back-img>img{width:100%;height:100%;
}
.back-img{margin-bottom: 20px;
}
.row{padding-top: 100px;
}
.captcha{cursor: pointer;
}
.captcha~span{cursor: pointer;
}

至于res中的文件是用来存放图片的，读者可以创建res文件夹后添加自己的图片，注意图片的命名即可，命名如下图所示。

至此任务基本上完成。读者可以试着自己照猫画虎感受前端的初步魅力

HTML设计简单的教务管理系统相关推荐

你也可以设计简单的内容管理系统
2019独角兽企业重金招聘Python工程师标准>>> 谈及国内早期的内容管理系统,如出名的discuz内容管理系统,原作者戴志康. 他是早期的PHP开发人员其实,你也可以定义内 ...
数据库课程设计：高校教务管理系统（含代码）
写在最开始:此课程设计是我2021年暑假自己一行一行代码写出来的,现在免费分享给大家,如果有帮到你的话希望可以给我点个赞哦,谢谢. 如果有什么问题可以留下评论,我看到的话会回你的,但是我只能回答我的代 ...
java做一个客房管理系统定制_管理皮孩子很难？来，教你一个java设计简单的学生管理系统...
前言: 孩子不听话,那就系统的管理起来,啊哈哈哈哈学生成绩管理系统要求: 完善Student类,Student类包含学号.姓名.年级.专业.三门功课的成绩(英语.高数.计算机)的成员变量,完善成绩 ...
java教务系统类设计_基于Java EE体系的高校教务管理系统的设计开发
<基于Java EE体系的高校教务管理系统的设计开发>由会员分享,可在线阅读,更多相关<基于Java EE体系的高校教务管理系统的设计开发(3页珍藏版)>请在人人文库网上搜索. ...
Python+Mysql实现教务管理系统
需求: 设计一款教务管理系统,实现如下功能: 1.此教务管理系统面向三种身份,学生.教职工.系统管理员 2.要有登录界面,在登录界面能根据不同身份自动选择登录入口 3.教职工凭借工号和密码登录,学生凭 ...
SSM博雅学校教务管理系统计算机毕设源码86203
摘要在中国随着教育体制的逐步完善,学校规模在不断的扩大,在校学生的增多以及在校老师数量的增加也加大了教务管理的难度,不管是教师信息,学生信息.查询起来非常麻烦,通过传统的数据管理方法很难对所有信息 ...
数据库（教务管理系统）
1.2需求分析 1.2.1 功能需求系统的用户有三个不同的角色,分别是教务教师,管理人员,学生,角色不同,需求不同.通过分析,各用户的需求如下: 1.2.1.1 教师用户需求教师可以通过系统录入成 ...
计算机毕业设计django基于python的学生选课系统-高校教务管理系统(源码+系统+mysql数据库+Lw文档）
项目介绍本论文主要论述了如何使用Python技术开发一个高校教务管理系统,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言中,作者将论述高校教务管 ...
java基于ssm的学校教务管理系统的设计与实现论文-计算机毕业设计
学校教务管理系统的设计与实现摘要学校教务管理信息化是提高办公效率的主要途径,随着我国高等教育的快速发展,学校办学规模的不断扩大,在校学生人数不断增多,办学层次出现多元化,由一地办学发展到多地多点 ...

HTML设计简单的教务管理系统

HTML设计简单的教务管理系统相关推荐

最新文章

热门文章