一. 登录
1. 页面
<div class="login">
<h2>高校信息管理系统</h2>
<!-- <form action="http://www.bingjs.com:81/Admin/Login" method=""GET""> -->
<table>
<tr>
<td>账号：</td>
<td>
<input type="text" id="loginId">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" id="loginPwd">
</td>
</tr>
</table>
<h3>
<button type="submit" id="submit">登录</button>
<button type="reset" id="reset">取消</button>
</h3>
<!-- </form> -->
2. js
<script>
// 给登录按钮注册点击事件
submit.onclick = function(){
if(loginId.value==""||loginPwd.value==""){
alert('请输入完整信息!')
return
}
// 发生ajax请求，实现登录功能
let xhr = new XMLHttpRequest()
// 注意：GET方式的参数，直接拼接在url后面
xhr.open('GET',`http://www.bingjs.com:81/Admin/Login?loginId=${loginId.value}&loginPwd=${loginPwd.value}`)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
let data = JSON.parse(xhr.responseText)
alert(data.message)
// 登录成功，跳转到首页
if(data.success){
// 跳转到首页
location.href = './index.html'
}
}
}
}
}
</script>
</div>
3. css
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
width: 100vw;
height: 100vh;
background-color: rgb(255, 192, 203);
}
.login{
width: 400px;
height: 200px;
background-color: rgba(255, 255, 255, 0.658);
border-radius: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 10px;
}
h2{
text-align: center;
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
table{
margin: 0 auto;
border-spacing: 15px;
}
table tr{
font-size: 15px;
}
h3{
text-align: center;
}
h3 button{
margin-right: 20px;
margin-top: 10px;
}
</style>
二. 主页
1. 页面
<div class="main">
<div class="left">
<h2>高校信息管理系统</h2>
<!-- 设置超链接的target属性值为iframe的名称，超链接就会在iframe里面打开 -->
<a href="./add.html" target="content">添加学生</a>
<a href="./list.html" target="content">查询学生</a>
</div>
<div class="right">
<iframe name="content" src="./add.html" frameborder="0" style="width: 100%;height: 100%;"></iframe>
</div>
</div>
2. css
<style>
*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
font-size: 14px;
}
.main{
display: flex;
height: 100vh;
}
.main .left{
width: 200px;
background-color: rgb(6, 68, 139);
}
.main .left h2{
font-size: 18px;
color: white;
text-align: center;
padding: 20px 0;
}
.main .left a{
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 10px 0;
font-size: 16px;
}
.main .right{
flex: 1;
}
</style>
三. 展示学生列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询学生</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
font-size: 14px;
}
body{
padding: 10px;
}
table{
border-collapse: collapse;
}
h2{
font-size: 20px;
margin-bottom: 10px;
}
th,td{
border: 1px solid #ddd;
padding: 5px 20px;
}
td button{
margin-right: 4px;
}
.search{
border: 1px solid #eee;
padding: 5px;
margin-bottom: 5px;
}
.search *{
margin: 0 5px;
}
.search button{
padding: 0 10px;
}
#btns{
float: right;
}
</style>
</head>
<body>
<h2>查询学生</h2>
<div class="search">
<span>姓名(模糊查询):</span>
<input type="search" id="searchText">
<span>性别：</span>
<input checked name="sex" type="radio" value="">全部
<input type="radio" value="M" name="sex">男
<input type="radio" value="F" name="sex">女
<button id="searchBtn">搜索</button>
</div>
<table>
<thead>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年级</th>
<th>电话</th>
<th>地址</th>
<th>生日</th>
<th>邮箱</th>
<th>操作</th>
</thead>
<tbody id="tbody">
</tbody>
<tfoot>
<tr>
<td colspan="9">
<div id="btns">
<button id="first">首页</button>
<button id="prev"><</button>
<span id="pageIndex">1</span>
<span>/</span>
<span id="totalPage">1</span>
<button id="next">></button>
<button id="last">尾页</button>
</div>
</td>
</tr>
</tfoot>
</table>
<script src="./js/kai.js"></script>
<script>
//window加载事件
window.onload = function(){
// 调用加载学生信息的方法
loadStudents()
}
// 首页按钮点击事件
first.onclick = function(){
if(pageIndex.innerHTML==1) return
pageIndex.innerHTML = 1
loadStudents()
}
// 上一页按钮点击事件
prev.onclick = function(){
if(pageIndex.innerHTML==1) return
pageIndex.innerHTML--
loadStudents()
}
// 下一页按钮点击事件
next.onclick = function(){
if(pageIndex.innerHTML == totalPage.innerHTML) return
pageIndex.innerHTML++
loadStudents()
}
// 尾页按钮点击事件
last.onclick = function(){
if(pageIndex.innerHTML == totalPage.innerHTML) return
pageIndex.innerHTML = totalPage.innerHTML
loadStudents()
}
//搜索按钮点击事件
searchBtn.onclick = function(){
// 调用加载学生信息的方法
loadStudents()
}
//加载学生信息的方法
function loadStudents(){
tbody.innerHTML = ""
let studentName = searchText.value
let sexes = document.getElementsByName('sex')
let sex = ''
sexes.forEach(r=>{
if(r.checked){
sex = r.value
}
})
// 发送请求获取学生信息
let xhr = new XMLHttpRequest()
xhr.open('GET',`http://www.bingjs.com:81/Student/GetStudentsConditionPages?pageIndex=${pageIndex.innerHTML}&studentName=${studentName}&sex=${sex}`)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
// 获取数据，总数量，当前页码，每页数量
let {data,count,pageIndex,pageSize} = JSON.parse(xhr.responseText)
//总页数
totalPage.innerHTML = Math.ceil(count/pageSize)
//遍历数据，展示数据
data.forEach(r=>{
let tr = $b.$c('tr')
let td1 = $b.$c('td')
td1.innerHTML = r.StudentNo
let td2 = $b.$c('td')
td2.innerHTML = r.StudentName
let td3 = $b.$c('td')
td3.innerHTML = r.Sex == 'M' ? '男' : '女'
let td4 = $b.$c('td')
td4.innerHTML = r.Grade.GradeName
let td5 = $b.$c('td')
td5.innerHTML = r.Phone
let td6 = $b.$c('td')
td6.innerHTML = r.Address
let td7 = $b.$c('td')
td7.innerHTML = $b.$fd(new Date(r.BornDate))
let td8 = $b.$c('td')
td8.innerHTML = r.Email
let td9 = $b.$c('td')
let btn1 = $b.$c('button')
btn1.innerHTML = '修改'
btn1.onclick = function(){
location.href = './add.html?stuNo='+r.StudentNo
}
let btn2 = $b.$c('button')
btn2.innerHTML = '删除'
btn2.onclick = function(){
// 调用删除学生的方法
deleteStudent(r.StudentNo)
}
td9.appendChild(btn1)
td9.appendChild(btn2)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
tr.appendChild(td6)
tr.appendChild(td7)
tr.appendChild(td8)
tr.appendChild(td9)
tbody.appendChild(tr)
})
}
}
}
}
//删除学生
function deleteStudent(stuNo){
if(confirm('确定删除吗？')){
// 发送请求，删除学生
let xhr = new XMLHttpRequest()
xhr.open('POST','http://www.bingjs.com:81/Student/Delete')
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(JSON.stringify({studentNo:stuNo}))
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
if(xhr.responseText=='true'){
alert('删除成功！')
// 调用加载学生信息的方法
loadStudents()
}else{
alert('删除失败！')
}
}
}
}
}
}
</script>
</body>
</html>
四. 添加学生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加学生</title>
<style>
#studentNoMsg{
color: red;
display: none;
}
</style>
</head>
<body>
<h2 id="title">添加学生</h2>
<table>
<tr>
<td>学号：</td>
<td>
<input type="text" id="studentNo">
<span id="studentNoMsg">该学号已经存在</span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" id="loginPwd">
</td>
</tr>
<tr>
<td>姓名：</td>
<td>
<input type="text" id="studentName">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked value="M">男
<input type="radio" name="sex" value="F">女
</td>
</tr>
<tr>
<td>年级:</td>
<td>
<select id="gradeId">
</select>
</td>
</tr>
<tr>
<td>电话:</td>
<td>
<input type="text" id="phone">
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<textarea cols="50" rows="5" id="address"></textarea>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<input type="text" id="bornDate">
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="text" id="email">
</td>
</tr>
<tr>
<td>证件:</td>
<td>
<input type="text" id="identityCard">
</td>
</tr>
<tr>
<td></td>
<td>
<button id="add">添加</button>
<button id="cancel" onclick="clearInput()">取消</button>
</td>
</tr>
</table>
<script src="./js/kai.js"></script>
<script>
//窗体加载事件
window.onload = function(){
//调用加载年级信息的方法
loadGrade()
setTimeout(() => {
// 调用根据学号加载学生的方法
loadStudentByNo()
}, 500);
}
//根据学号加载学生的方法
function loadStudentByNo(){
//search有内容，就表示当前页面为修改
if(location.search){
//设置标题
title.innerHTML = '修改学生'
add.innerHTML = '修改'
let stuNo = location.search.split('?')[1].split('=')[1]
// 根据学号，查询学生信息
// 根据学号，查询指定的学生对象
let xhr = new XMLHttpRequest()
xhr.open('GET','http://www.bingjs.com:81/Student/GetStudentByNo?studentNo='+stuNo)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
let stu = JSON.parse(xhr.responseText)
//给表单元素赋值
studentNo.value = stu.StudentNo
loginPwd.value = stu.LoginPwd
studentName.value = stu.StudentName
if(stu.Sex=='M'){
document.getElementsByName('sex')[0].checked = true
}else{
document.getElementsByName('sex')[1].checked = true
}
gradeId.value = stu.GradeId
phone.value = stu.Phone
address.value = stu.Address
bornDate.value = stu.BornDate
email.value = stu.Email
identityCard.value = stu.IdentityCard
//将学号文本框设置为只读
studentNo.setAttribute('disabled','disabled')
}
}
}
}
}
// 学号文本框失去焦点事件
studentNo.onblur = function(){
//获取文本框里面的值
let val = this.value
// 根据学号，查询指定的学生对象
let xhr = new XMLHttpRequest()
xhr.open('GET','http://www.bingjs.com:81/Student/GetStudentByNo?studentNo='+val)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
if(xhr.responseText!='null'){
studentNoMsg.style.display = 'inline'
}else{
studentNoMsg.style.display = 'none'
}
}
}
}
}
// 添加按钮点击事件
add.onclick = function(){
//如果学号已存在，取消添加操作
if(studentNoMsg.style.display=='inline') return
//添加一个学生对象
let stu = {}
//获取表单数据，将数据赋值给学生对象
stu.studentNo = studentNo.value
stu.loginPwd = loginPwd.value
stu.studentName = studentName.value
let sexes = document.getElementsByName('sex')
sexes.forEach(r=>{
if(r.checked){
stu.sex = r.value
}
})
stu.gradeId = gradeId.value
stu.phone = phone.value
stu.address = address.value
stu.bornDate = bornDate.value
stu.email = email.value
stu.identityCard = identityCard.value
//检查用户输入是否完整
if(!checkInput(stu)) return
// 发生请求，执行添加
let xhr = new XMLHttpRequest()
//定义提交地址
let url = 'http://www.bingjs.com:81/Student/Add'
if(this.innerHTML=='修改'){
//切换提交地址为修改
url = 'http://www.bingjs.com:81/Student/Update'
}
xhr.open('POST',url)
// 设置请求头信息，定义Content-Type的格式
// application/x-www-form-urlencoded表示参数数据的格式是url格式
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// application/json表示参数数据的格式是json格式
xhr.setRequestHeader('Content-Type','application/json')
// GET请求方式的参数，放置在URL的后面
// POST请求的参数，放置在send方法里面
// send方法传递的参数，一般有两种格式：1.url格式，2.json格式
// url格式：name:张三&age=20&sex=女
// json格式：{"name":"张三","age":20,"sex":"女"}
// xhr.send($b.objectToStr(stu))
xhr.send(JSON.stringify(stu))
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
if(xhr.responseText=='true'){
alert('操作成功！')
//清空输入框里面的内容
clearInput()
}else{
alert('操作失败！')
}
}
}
}
}
//清空输入框内容
function clearInput(){
studentNo.value = ''
loginPwd.value = ''
studentName.value = ''
document.getElementsByName('sex')[0].checked = true
gradeId.value = '0'
phone.value = ''
address.value = ''
bornDate.value = ''
email.value = ''
identityCard.value = ''
studentNoMsg.innerHTML = ''
}
//验证输入是否完整
function checkInput(stu){
if(stu.studentNo=='' || stu.loginPwd=='' || stu.gradeId==0 || stu.phone=='' ||
stu.address=='' || stu.bornDate=='' || stu.email=='' || stu.identityCard==''){
alert('请输入完整信息！')
return false
}else{
return true
}
}
//加载年级信息
function loadGrade(){
let xhr = new XMLHttpRequest()
xhr.open('GET','http://www.bingjs.com:81/Grade/GetAll')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
let grades = JSON.parse(xhr.responseText)
grades.unshift({GradeId:0,GradeName:'请选择年级'})
grades.forEach(g => {
let option = $b.$c('option')
option.value = g.GradeId
option.innerHTML = g.GradeName
gradeId.appendChild(option)
});
}
}
}
}
</script>
</body>
</html>
