学生管理系统的设计与实现—前端代码
这里只展示主要功能页面，不对其他页面进行展示,并且忽略掉CSS
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"
charset="utf-8">script>
<style type="text/css">
此处省略
style>
head>
<body>
<div class="login">
<div class="content clearfix">
<div class="content-left">
<div class="logo">
<img src="../static/images/logo.png" alt="" />
<p>XXXX就业管理系统p>
div>
div>
<form action="login" method="post">
<div class="shu">div>
<div class="content-right">
<div class="login-form">
<h2>用户登录/LOGINh2>
<div class="identifire">
<span>身 份：span> <select name="roleId">
<option value="1" selected="selected">学生option>
<option value="2">教师教辅人员option>
select>
div>
<div class="account clearfix">
<span>账 号：span> <input type="text" value="" name="account" />
div>
<div class="password clearfix">
<span>密 码：span> <input type="password" value="" name="password" />
div>
<div class="code clearfix">
<span>验证码：span> <input type="text" value="" name="vcode" />
<em>
<img alt="" src="../vcode.png" height="35px" width="120px" id="refresh_vcode">
em>
div>
<div class="btn">
<span><input type="submit" value="登录" id="login">span> <span
class="forget"><a href="password.html">忘记密码a>span>
div>
<span style="color: red;font-size:18px;margin-left:48px;">${msg }span>
div>
div>
form>
div>
div>
<script>
$('#refresh_vcode').on('click', ()=>{
$('#refresh_vcode').attr('src', '../vcode.png?'+Math.random());
})
script>
body>
html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/TeacherPersonalInfo.css">
head>
<body>
<div class="container flgure">
<div class="content">
<ul class="clearfix info">
<li class="active">基础信息li>
ul>
<div class="basic">
<a id="emit" href="javascript:;">编辑a> <a id="keep"
href="javascript:;">保存a>
<div class="select active">
<div class="left fl">
<div>
<label for="">姓 名：label>
<input type="text" value="${teacherinfo.subject }" id="subject"
disabled>
div>
<div>
<label for="">性 别：label>
<c:if test="${teacherinfo.gender eq 1 }">
男：<input type="radio" id="gender" value="1"
style="width: 20px; margin-top: 12px;" checked>
女：<input type="radio" id="gender" value="2"
style="width: 20px;">
c:if>
<c:if test="${teacherinfo.gender eq 2 }">
男：<input type="radio" id="gender" value="1"
style="width: 20px; margin-top: 12px;">
女：<input type="radio" id="gender" value="2"
style="width: 20px;" checked>
c:if>
div>
<div>
<label for="">出生日期：label> <input type="text"
value="${teacherinfo.birth }" id="birth" disabled>
div>
<div>
<label for="">身份证号：label> <input type="text"
value="${teacherinfo.identify }" id="identify" disabled>
div>
<div>
<label for="">工 号：label>
<input type="text" value="${teacherinfo.account }" id="account"
disabled>
div>
<div>
<label for="">民 族：label>
<input type="text" value="${teacherinfo.nation }" id="nation"
disabled>
div>
<div class="label">
<label for="">政治面貌：label> <input type="text"
value="${teacherinfo.politics }" id="politics" disabled>
div>
<div class="label">
<label for="">教师等级：label> <input type="text"
value="${teacherinfo.degree }" id="degree" disabled>
div>
div>
<div class="right fr">
<div class="label">
<label for="">手机号码：label> <input type="number"
value="${teacherinfo.tel }" id="tel" disabled>
div>
<div>
<label for="">QQ号码：label> <input type="number"
value="${teacherinfo.qq }" id="qq" disabled>
div>
<div class="label">
<label for="">电子邮箱：label> <input type="email"
value="${teacherinfo.email }" id="email" disabled>
div>
<div class="label">
<label>家庭地址label> :
<textarea rows="3" cols="20" id="address" style="width: 200px;">${teacherinfo.address }textarea>
div>
div>
div>
div>
div>
div>
<script src="js/jquery-1.9.1.min.js">script>
<script>
$('#emit').on('click',function(){
$('input').removeAttr('disabled');
});
$('#keep').on('click',function(){
$('input').attr('disabled','disabled');
var obj = {
subject: $('#subject').val(),
gender: $('#gender').val(),
birth: $('#birth').val(),
identify: $('#identify').val(),
account: $('#account').val(),
nation: $('#nation').val(),
politics: $('#politics').val(),
degree: $('#degree').val(),
address: $('#address').val(),
tel: $('#tel').val(),
email: $('#email').val(),
qq: $('#qq').val()
};
$.ajax({
url: 'teacherinfo',
type: 'POST',
data: {info : JSON.stringify(obj)},
success: ()=>{
alert('保存成功')
}
})
});
script>
body>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/student.css">
<script src="js/jquery-1.9.1.min.js">script>
head>
<body>
<div class="container">
<div class="content">
<div class="header clearfix">
<div class="top fl">当前位置>个人信息div>
<div class="bottom fr">
<a id="emit" href="javascript:;">编辑a>
<a id="keep" href="javascript:;">保存a>
div>
div>
<div class="main">
<div class="BasicInformation">
<div class="title">
基础信息
div>
div>
<div class="content clearfix">
<div class="left fl">
<div>
<label for="">姓名：label>
<input id="name" type="text" value="${studentinfo.name }" disabled />
div>
<div>
<label for="">性别：label>
<c:if test="${studentinfo.gender eq 1 }">
男：<input type="radio" id="gender" value="1" style="width: 20px; margin-top: 12px;" checked>
女：<input type="radio" id="gender" value="2" style="width: 20px;">
c:if>
<c:if test="${studentinfo.gender eq 2 }">
男：<input type="radio" id="gender" value="1" style="width: 20px; margin-top: 12px;">
女：<input type="radio" id="gender" value="2" style="width: 20px;" checked>
c:if>
div>
<div>
<label for="">出生日期：label>
<input id="birth" type="text" value="${studentinfo.birth }" placeholder="日期格式:yyyy-MM-dd" disabled>
div>
<div>
<label for="">身份证号：label>
<input id="identification" class="id oInp" type="text" value="${studentinfo.identification }" disabled>
div>
div>
<div class="right fr">
<div>
<label for="">学号：label>
<input id="account" type="number" value="${studentinfo.account }" disabled>
div>
<div>
<label for="">民族：label>
<input id="nation" type="text" value="${studentinfo.nation }" disabled>
div>
<div class="label">
<label for="">政治面貌：label>
<div class="option clearfix" id="politics">
<a id="pl_name" href="javascript:;" class="fl" >
${studentinfo.politics }
a>
<i class="fr">i>
<ul>
<li>中共党员li>
<li>中共预备党员li>
<li>共青团员li>
<li>群众li>
<li>无党派人士li>
ul>
div>
div>
div>
div>
<div class="BasicInformation">
<div class="title">联系方式div>
div>
<div class="content clearfix">
<div class="left fl">
<div>
<label for="">手机号码：label>
<input id="tel" type="number" value="${studentinfo.tel }" disabled>
div>
<div>
<label for="">QQ号码：label>
<input id="qq" type="number" value="${studentinfo.qq }" disabled>
div>
div>
<div class="right fr">
<div>account
<label for="">电子邮箱：label>
<input id="email" type="text" value="${studentinfo.email }" class="mailbox" disabled>
div>
div>
div>
<div class="BasicInformation">
<div class="title">
辅导员信息
div>
div>
<div class="content clearfix">
<div class="left fl">
<div>
<label for="">姓名：label>
<input type="text" value="${studentinfo.name }">
div>
div>
<div class="right fr">
<div>
<label for="">电话号码：label>
<input type="number" value="${studentinfo.tel }">
div>
div>
div>
div>
div>
div>
<script>
$('#politics i').on('click', function() {
$(this).siblings('ul').show();
});
$('#politics ul li').on('click', function() {
var selTxt = $(this).text();
$('#politics a').text(selTxt);
$('#politics ul').hide();
});
$('#child i').on('click', function() {
$(this).siblings('ul').show();
});
$('#child ul li').on('click', function() {
var selTxt = $(this).text();
$('#child a').text(selTxt);
$('#child ul').hide();
});
$('#emit').on('click',function(){
$('input').removeAttr('disabled');
});
$('#keep').on('click',function(){
$('input').attr('disabled','disabled');
var obj = {
name: $('#name').val(),
gender: $('#gender').val(),
birth: $('#birth').val(),
identification: $('#identification').val(),
account: $('#account').val(),
nation: $('#nation').val(),
politics: $('#pl_name').text(),
tel: $('#tel').val(),
qq: $('#qq').val(),
email: $('#email').val()
};
$.ajax({
url: 'studentinfo',
type: 'POST',
data: {info : JSON.stringify(obj)},
success: ()=>{
alert('保存成功')
}
})
});
/* $(document).ready(function(){
$.ajax({
url: "http://101.201.154.205:9090/bm/bmList",
type: 'post',
data: {
t: Math.random()
},
dataType: 'jsonp',
'jsonp': 'callback'
}).then(function(res){
console.log(res)
// var stu_name = $('#stu_name').val();
for (var i=0; i
script>
body>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/search.css">
<style type="text/css">
a{
pointer:cursor;
}
li{
border-bottom: 0.2px solid black;
margin:auto;
}
style>
head>
<body>
<div class="container">
<div class="search-content content clearfix">
<div class="search-bar clearfix ">
<div class="bar-content clearfix fl">
<input type="text" value="" class="fr" id='keyword'/>
div>
<a id="search" class="search-font fr">搜索a>
<div class="word fl">建议搜索词汇div>
<div class="list fl ">
<ul class="clearfix">
<li>学号li>
<li>姓名li>
ul>
div>
div>
div>
<hr>
检索到[<span style="color: blue" id="size">span>]条数据:<hr>
<ul id="content" class="clearfix">
ul>
div>
<script src="js/jquery-1.9.1.min.js">script>
<script type="text/javascript">
$('#search').on('click',()=>{
$.ajax({
url: "search",
type: "GET",
data: { keyword:JSON.stringify($('#keyword').val())},
success: (data)=>{
var student = JSON.parse(data);
var li = "";
$('#size').text(student.length);
student.forEach((element,index) =>{
li += "[" +(index+1)+"] " + element.name + ",学号:"+element.account+"，政治面貌:"+element.politics+"，联系方式:"+element.tel+"";
});
$('#content').html(li);
}
});
});
script>
body>