这是《人机界面设计》的一个作业，运用了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 © 西安邮电大学版权所有
</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 © 西安邮电大学版权所有
</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文件夹后添加自己的图片，注意图片的命名即可，命名如下图所示。
至此任务基本上完成。读者可以试着自己照猫画虎感受前端的初步魅力
扫一扫
4500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
