JavaScript_day27_2020/12/05_[学生管理后台][练习]
复习练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理系统</title>
<link rel="stylesheet" href="./src/css/index.css">
</head>
<body>
<div class="header">
<img src="./src/image/logo.png" alt="">
<span>学生后台管理系统</span>
</div>
<dl class="menu">
<dt>学生管理</dt>
<dd class="active" data-id="student-list">学生列表</dd>
<dd data-id="student-add">新增学生</dd>
</dl>
<div class="content">
<div class="student-list student-content active-content" id="student-list">
<table id="student-body">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>邮箱</th>
<th>年龄</th>
<th>手机号</th>
<th>住址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>name</td>
<td>m</td>
<td>111111111.com</td>
<td>18</td>
<td>13100001111</td>
<td>sz</td>
<td>
<button class="btn edit">编辑</button>
<button class="btn remove">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="modal">
<div class="modal-content">
<h3>编辑信息</h3>
<form class="student-form" id="student-edit-form">
<div><label for="edit-name">姓名</label><input type="text" id="name" name="edit-name"></div>
<div>
<label for="">性别</label>
<input type="radio" id="edit-male" checked name="sex" value="0"><label for="edit-male" class="sex">男</label>
<input type="radio" id="edit-female" name="sex" value="1"><label for="edit-female" class="sex">女</label>
</div>
<div><label for="edit-email">邮箱</label><input type="text" id="edit-email" name="email"></div>
<div><label for="edit-sNo">学号</label><input type="text" id="edit-sNo" name="sNo" readonly></div>
<div><label for="edit-birth">出生年</label><input type="text" id="edit-birth" name="birth"></div>
<div><label for="edit-phone">手机号</label><input type="text" id="edit-phone" name="phone"></div>
<div><label for="edit-address">住址</label><input type="text" id="edit-address" name="address"></div>
<div><label for=""></label>
<!-- <input class="btn" id="student-edit-submit" type="submit" value="提交">
<input class="btn" id="student-edit-cancel" type="submit" value="返回"> -->
<button class="btn" id="student-edit-submit">提交</button>
<button class="btn" id="student-edit-cancel">返回</button>
</div>
</form>
</div>
</div>
</div>
<div class="student-add student-content" id="student-add">
<form class="student-form" id="student-add-form">
<div><label for="name">姓名</label><input type="text" id="name" name="name"></div>
<div>
<label for="">性别</label>
<input type="radio" id="male" name="sex" value="0" checked><label for="male" class="sex">男</label>
<input type="radio" id="female" name="sex" value="1"><label for="female" class="sex">女</label>
</div>
<div><label for="email">邮箱</label><input type="text" id="email" name="email"></div>
<div><label for="sNo">学号</label><input type="text" id="sNo" name="sNo"></div>
<div><label for="birth">出生年</label><input type="text" id="birth" name="birth"></div>
<div><label for="phone">手机号</label><input type="text" id="phone" name="phone"> </div>
<div><label for="address">住址</label><input type="text" id="address" name="address"></div>
<div><label for=""></label>
<input class="btn" id="student-add-submit" type="submit" value="提交">
<input class="btn" type="reset" value="重置">
</div>
</form>
</div>
</div>
<script src="./src/js/index.js"></script>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
/* html, body{
height: 100%;
} */
.header{
height: 70px;
line-height: 70px;
font-size: 14px;
background-color: #354457;
color: #b3bcc5 ;
}
.header img{
margin-left: 20px;
width: 30px;
height: 30px;
vertical-align: middle;
}
.menu{
width: 200px;
/* height: calc(100% - 70px); */
height: 100%;
position: fixed;
color: #b3bcc5 ;
background-color: #4d5e70;
font-size: 14px;
line-height: 40px;
}
.menu dt{
padding-left: 10px;
}
.menu dd{
padding-left: 40px;
cursor: pointer;
}
.menu dd:hover{
background-color:rgba(255, 255, 255, 0.5);
color: #354457;
}
.menu dd.active{
background-color: #ddd;
color: #354457;
}
.content{
padding-left: 200px;
height: calc(100vh - 70px);
background-color: #eee;
overflow-y: scroll;
}
.content .student-content{
display: none;
}
.content .active-content{
display: block;
}
#student-body{
width: 100%;
text-align: center;
line-height: 30px;
font-size: 14px;
}
#student-body thead{
color: #646987 ;
background-color: #e3e8ee;
}
#student-body tbody{
background-color: #fff;
}
#student-body .btn{
color: #fff;
padding: 5px 10px;
border: none;
outline: none;
cursor: pointer;
}
#student-body .btn.edit{
background-color: #5cb85c;
}
#student-body .btn.remove{
background-color: #d9534f;
}
.student-form{
width: 400px;
margin: 20px auto;
}
.student-form label:not(.sex){
width: 100px;
display: inline-block;
text-align: right;
margin-right: 10px;
}
.student-form div {
margin: 10px 0;
}
.student-form .btn {
padding: 5px 25px;
}
.modal {
position: fixed;
/* left: 0; //2种方法铺满页面
right: 0;
top: 0;
bottom: 0; */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color:rgba(0, 0, 0, 0.5) ;
display: none;
}
.modal .modal-content {
width: 400px;
height: 400px;
background-color: #fff;
position: absolute;
left: 50%;
margin-left: -200px ;
top: 50%;
margin-top: -200px;
padding: 20px;
}
.modal.show{
display: block;
}
js，新增编辑内的返回按钮（未做点击遮罩层关闭窗口）
/**
*
* @param {String} method 请求方式 需要大写
* @param {String} url 请求地址 协议（http）+ 域名+ 端口号 + 路径
* @param {String} data 请求数据 key=value&key1=value1
* @param {Function} cb 成功的回调函数
* @param {Boolean} isAsync 是否异步 true 是异步 false 代表同步
*/
function ajax(method, url, data, cb, isAsync) {
console.log(data);
// get url + '?' + data
// post
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// xhr.readyState 1 - 4 监听是否有响应
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
cb(JSON.parse(xhr.responseText));
}
}
};
method = method.toUpperCase();
if (method == "GET") {
xhr.open(method, url + "?" + data, isAsync);
xhr.send();
} else if (method == "POST") {
xhr.open(method, url, isAsync);
// key=value&key1=value1
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
}
}
// 定义一个全局变量，用来存储表格数据
var tableData = [];
// 绑定事件处理函数 步骤一
function bindEvent() {
// 切换 行为
var menu = document.querySelector('.menu');
menu.onclick = function (e) {
if (e.target.tagName === 'DD'){
var elements = [].slice.call(e.target.parentNode.children);
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('active');
}
e.target.classList.add('active');
var id = e.target.dataset.id;
var content = document.getElementById(id);
console.log(content);
var activeContent = [].slice.call(content.parentNode.children);
console.log(activeContent);
for (var i = 0; i < activeContent.length; i++) {
activeContent[i].classList.remove('active-content');
}
content.classList.add('active-content');
}
}
// 新增学生 行为
var studentAddSubmit = document.getElementById('student-add-submit');
studentAddSubmit.onclick = function (e) {
e.preventDefault();
var form = document.getElementById('student-add-form');
// 先拿到form表单，拿到之后 .下面数据的name值，就可以拿到输入的位置， 再.value就能拿到当前数据的值
var formData = getFormData(form);
if (formData.status == 'fail'){
alert(formData.msg);
} else {
// var data = Object.assign({
// appkey: 'sk8id_1606828424588'
// },formData.data)
// var dataStr = '';
// // console.log(data);
// for (var prop in data) {
// if (data.hasOwnProperty(prop)) {
// dataStr += prop + '=' + data[prop] + '&';
// // console.log(dataStr);
// }
// }
// ajax('get', 'http://open.duyiedu.com/api/student/addStudent', dataStr, function (res) {
// console.log(res);
// if (res.status == 'success') {
// // 跳转到学生列表
// var studentListMenu = document.querySelector('.menu dd[data-id="student-list"');
// studentListMenu.click();
// } else {
// alert.log(res);
// }
// }, true);
transferData("/api/student/addStudent", formData.data, function(date) {
alert('添加成功');
var studentListMenu = document.querySelector('.menu dd[data-id="student-list"');
studentListMenu.click();
})
}
}
// 编辑按钮点击行为
var tbody = document.querySelector('#student-body tbody');
var modal = document.querySelector('.modal');
tbody.onclick = function (e) {
if (e.target.classList.contains('edit')) {
modal.classList.add('show');
var index = e.target.dataset.index;
renderEditForm(tableData[index]);
} else if (e.target.classList.contains('remove')) {
var index = e.target.dataset.index;
var student = tableData[index];
var isDel = confirm('确认删除学号为' + student.sNo + '的学生信息吗');
if (isDel) {
transferData('/api/student/delBySno', {
sNo : student.sNo
}, function () {
alert('删除成功');
getTableData();
})
}
}
}
// 编辑表单的提交
var studentEditSubmit = document.getElementById('student-edit-submit');
studentEditSubmit.onclick = function (e) {
e.preventDefault();
var form = document.getElementById('student-edit-form');
var formData = getFormData(form);
if (formData.status == 'fail'){
alert(formData.msg);
} else {
transferData('/api/student/updateStudent', formData.data, function () {
alert('修改成功');
modal.classList.remove('show');
getTableData();
})
}
}
//返回按钮（关闭窗口）
var studentEditCancel = document.getElementById('student-edit-cancel');
// var studentListMenu = document.querySelector('.menu dd[data-id="student-list"');
studentEditCancel.onclick = function (e) {
modal.classList.remove('show');
getTableData();
}
}
// 查找所有的兄弟节点 封装函数 for步骤一（练习时未封装）
function getSibling(node){
var elements = [].slice.call(node.parentNode.children);
return elements.filter(function (item) {
return item != node;
})
}
// 获取表单数据 封装函数 for步骤一
function getFormData(form) {
// 读取表单中的所有数据 --> 通过拿到form，然后form.name.value方式获取
var name = form.name.value;
var sex = form.sex.value;
var email = form.email.value;
var sNo = form.sNo.value;
var birth = form.birth.value;
var phone = form.phone.value;
var address = form.address.value;
// 规则校验
if (!name || !sex || !email || !sNo || !birth || !phone || !address) {
// 返回一个对象，status=fail则为失败，success则为成功
return {
status: 'fail',
msg: '信息填写不完全，请检查后重新提交'
}
}
// 性别只为0或者1，
var sexReg = /[01]$/;
if (!sexReg.test(sex)) {
return {
status: 'fail',
msg: '性别只能选择男或女'
}
}
// 邮箱 @ .com/.cn
var emailReg = /^[\w\.]+@[\w-]+\.(com|cn)$/;
if (!emailReg.test(email)) {
return {
status: 'fail',
msg: '邮箱格式不正确'
}
}
// 出生年份 年龄在 10 - 80之间 1940 - 2010
if (birth < 1940 || birth > 2010) {
return {
status: 'fail',
msg: '学生出生年份请填写1940 - 2010 之间的数字'
}
}
// 手机号 11位数字 以1开头 第二位不是1/2
var phoneReg = /^1[3-9]\d{9}$/;
if (!phoneReg.test(phone)) {
return {
status: 'fail',
msg: '手机号格式不正确'
}
}
// 学号必须为4-16位的数字组成
var sNoReg = /^\d{4,16}$/;
if (!sNoReg.test(sNo)) {
return {
status: 'fail',
msg: '学号必须为4-16位的数字组成'
}
}
return {
status: 'success',
data: {
name,
sex,
email,
sNo,
birth,
phone,
address
}
}
}
// 获取学生列表数据 步骤二
function getTableData() {
transferData('/api/student/findAll', {}, function(data) {
tableData = data;
renderTableReduce(data);
});
}
// 封装网络请求的方法 for步骤二
function transferData(url, data, success) {
// 请求数据（字符串类型）
var dataStr = '';
if (typeof data === 'object') {
data = Object.assign({
appkey: 'sk8id_1606828424588'
},data);
for (var prop in data) {
if (data.hasOwnProperty(prop)) {
dataStr += prop + '=' + data[prop] + '&';
// console.log(dataStr);
}
}
} else {
dataStr = data + '&appkey=sk8id_1606828424588';
}
// console.log(dataStr);
ajax('get', 'http://open.duyiedu.com' + url, dataStr, function (res) {
if (res.status == 'success') {
success(res.data);
} else {
alert(res.msg);
}
}, true);
}
// 渲染表格数据 步骤三
function renderTableReduce(data) {
var str = data.reduce(function (prev, item, index) {
return `${prev}<tr>
<td>${item.sNo}</td>
<td>${item.name}</td>
<td>${item.sex == 0 ? '男': '女'}</td>
<td>${item.email}</td>
<td>${new Date().getFullYear() - item.birth}</td>
<td>${item.phone}</td>
<td>${item.address}</td>
<td>
<button class="btn edit" data-index=${index}>编辑</button>
<button class="btn remove" data-index=${index}>删除</button>
</td>
</tr>`
},'')
var tbody = document.querySelector('#student-body tbody');
tbody.innerHTML = str;
}
// 编辑表单的数据回填(往input框内塞数据) 封装函数 for步骤三、编辑按钮操作
function renderEditForm(data) {
var form = document.getElementById('student-edit-form');
for (var prop in data) {
if (form[prop]) {
form[prop].value = data[prop];
}
}
}
bindEvent();
getTableData();
浙公网安备 33010602011771号