简易学生管理系统 前端+AJAX(jQuery)+PHP+MYSQL
最近利用现在学会的东西写了一个简易学生管理系统，负责对学生的信息进行增删改查，在这里分享一下，尽管很low。
编写工具：VSCode，xampp
步骤：
1. 使用HTML+CSS进行页面布局和样式
2. 使用jQuery正则表达式对邮箱，出生年，手机号进行匹配符合条件的内容
3. MYSQL负责创建系统对应的数据库及学生信息表
4. 使用PHP进行对数据库中的数据进行操纵
5. AJAX(jQuery)负责向后台传送数据到服务器中，从服务器接收数据显示到页面上并进行局部刷新
这里展示一下页面
页面是很丑，勉强看吧
学生信息查询页面：
添加学生页面：
遮罩层修某个学生信息：
代码如下：
1、HTML+CSS代码如下：
这个是学生信息页面和添加页面的代码，这里不介绍了，input标签里的name与数据库学生表中的属性名相同，避免混淆
<div class="wrapper">
<div class="title">
<img src="" alt="">
学生管理系统
</div>
<div class="nav">
<ul class="nav_ul">
<li>学生管理</li>
<ul>
<li class="list">学生列表</li>
<li class="list">新增学生</li>
</ul>
</ul>
<div class="content">
<div class="studentList">
</div>
<div class="addStudent">
<form id="add">
学号：<input type="text" name="sid"> <span>学号不能为空</span> <br>
姓名：<input type="text" name="sname"> <span>姓名不能为空</span><br>
性别：<input type="radio" name="sex" value="男"> 男 <input type="radio" value="女" name="sex"> 女 <span>性别不能为空</span><br>
邮箱：<input type="text" name="mail" class="mail"> <span>邮箱不能为空</span><br>
出生年：<input type="text" name="birthday" class="birthday"> <span>出生年不能为空</span><br>
手机号：<input type="text" name="phone" class="phone"> <span>手机号不能为空</span><br>
住址：<input type="text" name="address"> <span>住址不能为空</span><br>
<input type="button" id="btSubmit" value="提交"> <input type="reset" id="btReset" value="重置">
</form>
</div>
</div>
</div>
</div>全屏遮盖层是修改学生信息的,这个放在类名为wrapper的尾部,给外层div的position为fixed, top,right,bottom,left为0铺满全屏，背景颜色随意，它是随着点击事件淡入淡出的，这个后面我会在代码里标出
<div class="modal">
<div class="modal-dialog">
<h3>编辑信息</h3>
<br>
<div class="modal-content">
<form id="update1">
学号：<input type="text" name="sid" readonly="readonly" class="noReset"> <br><p>学号不能为空</p>
姓名：<input type="text" name="sname"> <br><p>姓名不能为空</p>
性别：<input type="radio" name="sex" value="男"> 男 <input type="radio" value="女" name="sex"> 女<br> <p>性别不能为空</p>
邮箱：<input type="text" name="mail" class='mail'> <br><p>邮箱不能为空</p>
出生年：<input type="text" name="birthday" class="birthday"><br> <p>出生年不能为空</p>
手机号：<input type="text" name="phone" class='phone'> <br><p>手机号不能为空</p>
住址：<input type="text" name="address"> <br><p>住址不能为空</p>
<input type="button" id="btSubmit" value="提交"> <input type="button" id="btReset" value="重置">
</form>
</div>
</div>
</div>CSS样式如下：
<style>
* {
padding: 0px;
margin: 0px;
list-style: none;
}
.wrapper {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.title {
width: 100%;
height: 50px;
background-color: rgb(62, 74, 155);
line-height: 50px;
color: #fff;
}
.nav {
display: inline-block;
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
height: auto;
background-color: #eee;
}
.nav .nav_ul{
position: absolute;
width: 170px;
height: 100%;
top: 0px;
left: 0px;
bottom: 0px;
display: inline-block;
vertical-align: top;
background-color: rgba(62, 74, 155,.5);
}
.nav_ul li {
padding:5px 6px;
width: 150px;
height: 30px;
overflow: hidden;
color: #eee;
font-weight: bold;
font-size: 14px;
}
.nav_ul .list {
padding-left: 30px;
font-weight: normal;
}
.list:hover {
background-color: #eee;
cursor: pointer;
color: #000;
}
.content {
position: absolute;
display: inline-block;
height: 100%;
left:170px;
right: 0px;
top: 0px;
}
.content .studentList {
width: 100%;
}
.content .studentList table {
text-align: center;
width: 100%;
}
.content .studentList th{
width: auto;
height: 30px;
background-color: rgba(131, 153, 211, 0.534);
color: rgba(19, 42, 104, 0.534);
}
.content .studentList tbody td {
width: auto;
height: 30px;
background-color: #fff;
}
.content .studentList button {
color: #fff;
width: 48px;
background-color: red;
border: none;
cursor: pointer;
}
.content .studentList #delete {
background-color: green;
}
.content .addStudent {
display: none;
width: 350px;
margin: auto;
margin-top: 20px;
}
span,.modal p {
font-size: 12px;
color: red;
line-height: 16px;
display: none;
}
form {
color: rgba(63, 50, 50, 0.534);
}
input {
margin: 10px 0px;
color: rgba(63, 50, 50, 0.534);
}
#btSubmit,#btReset{
width: 45px;
margin:20px 13px;
cursor: pointer;
}
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,.3);
display: none;
}
.modal-dialog {
width: 460px;
height: 460px;
background: #fff;
margin: 100px auto 0;
}
.modal-content {
width: 250px;
margin: auto;
}
.modal-content span {
display: none;
}
h3 {
display: block;
position: relative;
top: 15px;
left: 20px;
color: rgba(131, 153, 211, 0.534);
font-size: 14px;
font-weight: bold;
}
</style>2、jQuery的正则匹配
这里说明一下，所有的正则匹配我写在了前端页面里，并不是在PHP中进行判断的。
添加学生邮箱的匹配
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
添加学生的手机号的匹配
var pattern = /^1[34578]\d{9}$/;
出生年的匹配
var filter = /^\d{4}$/;
年份满足YYYY格式
3、数据库代码
创建数据库manage，学生信息表为student
#设置编码
SET NAMES UTF8;
#删除数据库
DROP DATABASE IF EXISTS manage;
#创建数据库
CREATE DATABASE manage CHARSET=UTF8;
#使用数据库
USE manage;
#建学生表
CREATE TABLE student(
sid VARCHAR(10) PRIMARY KEY,
sname VARCHAR(40) NOT NULL,
sex VARCHAR(6) NOT NULL,
mail VARCHAR(40) NOT NULL,
birthday YEAR,
phone VARCHAR(15) NOT NULL,
address VARCHAR(1000) NOT NULL
);4、PHP代码
PHP负责对数据库学生信息进行操纵。在所有的PHP代码中，为了对数据库内容进行操作，必须先连接数据库，连接后要先设置后续编码，防止出现中文乱码。还有一点是方便AJAX使用的，是要先设置响应消息头部。
//设置响应消息类型
header("Content-Type:text/html");
//连接数据库
$conn = mysqli_connect("127.0.0.1","root","","manage",3306);
//设置后续编码
$sql = 'SET NAMES UTF8';设置响应消息格式
mysqli_connect()是连接MYSQL数据库的函数，mysqli_connect()中的参数分别是主机名，数据库中的用户名，用户密码，连接的数据库名称，端口号。
查看学生列表select_student.php
<?php
//设置响应消息类型
header("Content-Type:text/html");
//连接数据库
$conn = mysqli_connect("127.0.0.1","root","","manage",3306);
//设置后续编码
$sql = 'SET NAMES UTF8';
mysqli_query($conn,$sql);
//查询所有学生信息
$sql = "SELECT * FROM student";
$result = mysqli_query($conn,$sql);
echo "<table cellpadding='0' cellspacing = '0'><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>邮箱</th><th>出生年</th><th>手机号</th><th>住址</th><th>操作</th>
</thead><tbody>";
if($result) {
//每个学生的信息以关联数组的形式取出
while(($db = mysqli_fetch_assoc($result))!= ""){
echo "<tr>";
echo "<td class='sid'>$db[sid]</td>";
echo "<td>$db[sname]</td>";
echo "<td>$db[sex]</td>";
echo "<td>$db[mail]</td>";
echo "<td>$db[birthday]</td>";
echo "<td>$db[phone]</td>";
echo "<td>$db[address]</td>";
echo "<td><button id = 'update'>编辑</button> <button id='delete'>删除</button></td>";
echo "</tr>";
}
echo "</tbody></table>";
}else {
echo "执行失败";
}
?>这里查询学生得到的数据使用mysqli_fetch_assoc()。mysql_fetch_assoc() 函数从结果集result中取得一行作为关联数组。
返回根据从结果集取得的行生成的关联数组，如果没有更多行，则返回 false。
修改某个学生信息时，需要获得该学生的信息作为input的值，selectone_student.php
<?php
//设置响应消息类型
header("Content-Type:text/plain");
//连接数据库
$conn = mysqli_connect('127.0.0.1','root','','manage',3306);
//设置后续编码
$sql = 'SET NAMES UTF8';
mysqli_query($conn,$sql);
$sid = $_REQUEST['sid'];
//查询某位同学的信息
$selectSql = "SELECT * FROM student WHERE sid = '$sid';";
$result = mysqli_query($conn,$selectSql);
if($result) {
$db = mysqli_fetch_assoc($result);
echo "$db[sid] ";
echo "$db[sname] ";
echo "$db[sex] ";
echo "$db[mail] ";
echo "$db[birthday] ";
echo "$db[phone] ";
echo "$db[address]";
}
?>
添加学生insert_student.php
<?php
//设置响应消息类型
header("Content-Type:text/plain");
//获取添加学生页面部分中与属性名相对应的name的input的值
$sid = $_REQUEST['sid'];
$sname = $_REQUEST['sname'];
$sex = $_REQUEST['sex'];
$mail = $_REQUEST['mail'];
$birthday = $_REQUEST['birthday'];
$phone = $_REQUEST['phone'];
$address = $_REQUEST['address'];
$conn = mysqli_connect("127.0.0.1","root","","manage",3306);
$sql = 'SET NAMES UTF8';
mysqli_query($conn,$sql);
//向学生表中插入新增的学生信息
$sql = "INSERT INTO student VALUES(
'$sid',
'$sname',
'$sex',
'$mail',
'$birthday',
'$phone',
'$address'
);";
$result = mysqli_query($conn,$sql);
if($result) {
echo "success";
}else {
echo "执行失败";
}
?>修改某个学生的信息update_student.php
<?php
//设置响应消息类型
header("Content-Type:text/plain");
//获取当前修改学生页面部分中修改后的学生的个人信息
$sid = $_REQUEST['sid'];
$sname = $_REQUEST['sname'];
$sex = $_REQUEST['sex'];
$mail = $_REQUEST['mail'];
$birthday = $_REQUEST['birthday'];
$phone = $_REQUEST['phone'];
$address = $_REQUEST['address'];
//连接数据库
$conn = mysqli_connect("127.0.0.1","root","","manage",3306);
//设置后续编码
$sql = 'SET NAMES UTF8';
mysqli_query($conn,$sql);
//更新学生信息
$sql = "UPDATE student SET sname='$sname',sex='$sex',mail='$mail',birthday='$birthday',phone='$phone',address='$address' WHERE sid='$sid';";
$result = mysqli_query($conn,$sql);
if($result) {
echo "success";
}else {
echo "执行失败";
}
?>删除某位学生delete_student.php
<?php
//设置响应消息类型
header("Content-Type:text/plain");
//获取要删除的学生的学号
$sid = $_REQUEST['sid'];
//连接数据库
$conn = mysqli_connect("127.0.0.1","root","","manage",3306);
//设置后续编码
$sql = 'SET NAMES UTF8';
mysqli_query($conn,$sql);
//删除对应学号的学生
$sql = "DELETE FROM student WHERE sid = '$sid'";
$result = mysqli_query($conn,$sql);
if($result) {
echo "success";
}else {
echo "执行失败";
}
?>5、AJAX代码+jQuery
AJAX负责更新局部数据，我使用的是jQuery中的AJAX。
我主要使用两个方法与PHP配合：
（1）$.get()
用法：$.get(‘2.php’,[k=v&kv],fn)
作用：创建XHR对象，发起异步请求，得到成功的响应消息，调用指定的回调方法。
具体用法：$.get(
‘2.php’, //url,请求路径
[ {name:’tom’,age:20} ] , //获取服务器端的数据
function(date,msg,xhr){ //得到成功的响应消息，调用指定的回调方法。
//对data的操作
}
)
（2）$.post()
post用法基本一致，但是常用来向服务器发送数据
修改学生页面中的刷新页面
var result = $("#update1").serialize();
$.post(
'update_student.php',
result,
function(data,msg,xhr){
}
)serialize()序列化修改学生页面中form表单里的值
删除学生页面中的刷新页面
$.get(
'delete_student.php',
{'sid':sid},
function(data,msg,xhr){
}
)添加学生页面中的刷新页面
$.get(
'insert_student.php',
result,
function(txt,msg,xhr){
console.log(txt);
if(txt == 'success') {
alert("添加学生成功");
add.reset();
}else if(txt == '执行失败') {
alert("学号已经存在");
console.log(txt);
}
}
)点击添加学生时，学生列表页面隐藏，添加学生页面显示。下面是在前端页面使用jQuery正则判断前端页面的数据是否合法，合法才能向服务器端传输。
//点击学生列表时，添加学生页面隐藏，学生列表页面显示
$(".content .studentList").css("display","none");
$(".content .addStudent").css("display","block");
//change()监听当前form表单中input标签的变化
$(".content .addStudent input").change(function(){
var n = $(this).val();
//console.log(n);
//将警告信息初始化
if(n === ""){
if($(this).hasClass("mail")){
$(".addStudent .mail").next().html("邮箱不能为空");
}else if($(this).hasClass("phone")){
$(".addStudent .phone").next().html("手机号不能为空");
}else if($(this).hasClass("phone")){
$(".addStudent .birthday").next().html("出生年不能为空");
}
//学生信息不能为空，为空值时显示警告信息
$(this).next().css("display",'inline');
}else if($(this).hasClass("phone")){
//手机号的正则匹配
function isPhoneNo(n) {
var pattern = /^1[34578]\d{9}$/;
var phoneTest = pattern.test(n);
if(phoneTest) {
//手机号合法时，警告信息初始化并隐藏
$(".addStudent .phone").next().html("手机号不能为空");
$(".addStudent .phone").next().css("display","none");
}else{
//手机号非法时，警告信息变更并显示
$(".addStudent .phone").next().html("手机号输入内容错误");
$(".addStudent .phone").next().css("display",'inline');
}
}
isPhoneNo(n);
}else if($(this).hasClass("mail")){
////邮箱的正则匹配
function CheckMail(mail) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(mail)){
//邮箱合法时，警告信息初始化并隐藏
$(".addStudent .mail").next().html("邮箱格式不能为空");
$(".addStudent .mail").next().css("display","none")
//console.log(filter.test(mail));
}
else{
//邮箱格式非法时，警告信息变更并显示
$(".addStudent .mail").next().html("邮箱格式错误");
$(".addStudent .mail").next().css("display",'inline');
//console.log(filter.test(mail));
}
}
CheckMail(n);
}else if($(this).hasClass("birthday")){
function checkBirth(birth){
var filter = /^\d{4}$/;
if (filter.test(birth)){
//邮箱合法时，警告信息初始化并隐藏
$(".addStudent .birthday").next().css("display","none")
//console.log(filter.test(birth));
}
else{
//出生年格式非法时，警告信息变更并显示
$(".addStudent .birthday").next().html("出生年格式错误");
$(".addStudent .birthday").next().css("display","inline");
//console.log(filter.test(birth));
}
}
checkBirth(n);
}else{
if($(this).val() === '男'){
$(".addStudent input:eq(3)").next().css("display",'none');
}else{
$(this).next().css("display",'none');
}
}
})输入完信息后，利用AJAX的$.get()方法，得到添加学生信息后的结果
//点击添加页面的提交按钮，开始AJAX
$("#btSubmit").click(function(){
//判断是否有非法的信息
var flag = true;
遍历添加学生信息中form表单的值，看是否有非法输入
$(".content .addStudent input").each(function() {
if($(this).val() == "") {
flag = false;
$(this).next().css("display",'inline');
}
})
//遍历警告信息，只要有警告信息显示，就非法
$(".content .addStudent span").each(function() {
if($(this).css("display") == "inline") {
flag = false;
}
})
if(($(".addStudent input:eq(2)").prop('checked') === false)&&($(".addStudent input:eq(3)").prop("checked") == false)){
flag = false;
$(".addStudent input:eq(3)").next().css("display","inline");
}
//序列化表单信息
var result = $("#add").serialize();
console.log(flag);
//flag为true才合法，否则不能传输数据
if(flag) {
$.get(
'insert_student.php',
result,
function(txt,msg,xhr){
//console.log(txt);
//获取insert_student.php传来的文本信息，判断是否成功
if(txt == 'success') {
alert("添加学生成功");
add.reset();
}else if(txt == '执行失败') {
alert("学号已经存在");
//console.log(txt);
}
}
)
}else {
alert("请正确填写信息");
}
});学生列表页面
点击学生列表，添加学生页面隐藏，学生列表显示并更新，获取学生信息。
$(".content .addStudent").css("display","none");
$(".content .studentList").css("display","block");
$.get(
'select_student.php',
{sid:'sid',sname:'sname',sex:'sex',mail:'mail',birthday:'birthday',phone:'phone',address:'address'},
function(data,msg,xhr){
$(".content .studentList").html(data);
}
)删除学生信息
//使用delegate()事件代理，代理新生成的元素删除按钮执行点击事件，即从查询学生select_student.php
获得的删除按钮
$(".studentList").delegate("#delete","click",function(){
//确认是否删除的弹窗
var statu = confirm("确定删除么？");
if(!statu){
return false;
}
//获取当前点击删除的所在行学生学号
var sid = $(this).parent().siblings(".sid").html();
$.get(
'delete_student.php',
{'sid':sid},
function(data,msg,xhr){
}
)
$(this).parent().parent().remove();
alert("删除成功");
});delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
学生列表的修改信息页面
点击学生列表的编辑按钮，修改学生信息的遮罩层淡入。
$(".content .addStudent").css("display","none");
$(".content .studentList").css("display","block");
$.get(
'select_student.php',
{sid:'sid',sname:'sname',sex:'sex',mail:'mail',birthday:'birthday',phone:'phone',address:'address'},
function(data,msg,xhr){
$(".content .studentList").html(data);
}
)获取要修改的当前学生信息
//编辑按钮也是新生成的元素，无法直接绑定事件，使用delegate()
$(".studentList").delegate("#update","click",function(){
$(".modal").fadeIn();
var a = $(this).parent().siblings('.sid').text();
$.get(
'selectone_student.php',
{sid:a},
function(text,msg,xhr){
var array = text.split(' ');
//console.log(array);
var inputs = $("#update1 input:lt(8)");
var j = 0;
//console.log(array[j]);
for(var i = 0; i < inputs.length; i++){
console.log(array[j]);
if(array[j] === "男") {
inputs[i].checked = 'checked';
i++;
j++;
}else if(array[j] === "女"){
i++;
inputs[i].checked = 'checked';
j++;
}else {
inputs[i].value = array[j];
j++;
}
}
}
)
});因为学号是不能被修改的，因此需要设置为只读并可以传输，而且也不能被重置
<input type="text" name="sid" readonly="readonly" class="noReset"> 监听当前form表单中input标签的变化，和添加信息的正则匹配相似
$(".modal input").change(function(){
//初始化警告信息
if($(".modal .mail").next().next().html('')){
$(".modal .mail").next().next().html("邮箱不能为空");
}
if($(".modal .phone").next().next().html('')){
$(".modal .phone").next().next().html("手机号不能为空");
}
if($(".modal .birthday").next().next().html('')){
$(".modal .birthday").next().next().html("出生年不能为空");
}
$(".modal input:eq(3)").next().next().css("display","none");
var a = $(this).val();
//console.log(a);
//输入信息为空时，警告信息显示
if(a == ""){
$(this).next().next().css("display",'block');
}else if($(this).hasClass("phone")){
function isPhoneNo(n) {
var pattern = /^1[34578]\d{9}$/;
var phoneTest = pattern.test(n);
console.log(phoneTest);
if(phoneTest) {
$(".modal .phone").next().next().css("display","none")
}else {
$(".modal .phone").next().next().html("手机号输入内容错误");
$(".modal .phone").next().next().css("display","block");
}
}
isPhoneNo(a);
}else if($(this).hasClass("mail")){
function CheckMail(mail) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(mail)){
$(".modal .mail").next().next().css("display","none")
console.log(filter.test(mail));
}
else{
$(".modal .mail").next().next().html("邮箱格式错误");
$(".modal .mail").next().next().css("display","block");
console.log(filter.test(mail));
}
}
CheckMail(a);
}else if($(this).hasClass("birthday")){
function checkBirth(birth){
var filter = /^\d{4}$/;
if (filter.test(birth)){
$(".modal .birthday").next().next().css("display","none")
console.log(filter.test(birth));
}
else{
$(".modal .birthday").next().next().html("出生年格式错误");
$(".modal .birthday").next().next().css("display","block");
console.log(filter.test(birth));
}
}
checkBirth(a);
}else{
if($(this).val() === '男'){
$(".modal input:eq(3)").next().next().css("display",'none');
}else if($(this).val() === '女'){
$(this).next().next().css("display",'none');
}else {
$(this).next().next().css("display",'none');
}
}
})点击修改学生信息页面的提交按钮后，输入框内信息合法才能向服务器传输。传输后局部更新查询页面。和添加信息类似。
$(".modal #btSubmit").click(function(){
//序列化表单信息
var result = $("#update1").serialize();
var flag = true;
$(".modal input").each(function() {
if($(this).val() === "") {
flag = false;
$(this).next().next().css("display",'block');
}
})
$("#update1 p").each(function() {
if($(this).next().next().css("display") === "block") {
flag = false;
}
})
if(($(".modal input:eq(2)").prop("checked") === false)&&($(".modal input:eq(3)").prop("checked") === false)){
flag = false;
$(".modal input:eq(3)").next().next().css("display","block");
}
var result = $("#update1").serialize();
console.log(flag);
if(flag) {
$.post(
'update_student.php',
result,
function(data,msg,xhr){
}
)
$.get(
'select_student.php',
{sid:'sid',sname:'sname',sex:'sex',mail:'mail',birthday:'birthday',phone:'phone',address:'address'},
function(data,msg,xhr){
$(".content .studentList").html("");
$(".content .studentList").html(data);
alert("修改成功");
}
)
$(".modal").fadeOut(150);
}else{
alert('请正确输入信息')
}
})这里有个地方需要注意，当页面加载完之后，input按钮的checked属性为undefined,不会更改,要使用prop('checked')
点击重置按钮，重置表单信息
$(".modal #btReset").click(function(){
var noReset = document.getElementsByClassName('noReset')[0];
noReset.defaultValue = noReset.value;
update1.reset();
$("span").css("display","none");
})因为学号不能被重置，但是reset()方法会重置form表单中所有的input标签，所以要在重置前将学号的input标签的defaultValue设为默认值，也就是原学号。defaultValue 属性设置或返回文本框的初始内容。