《基于easyUi+php+MySQL的PC端同学管理系统》2025.03

1.数据库

-- 1. 创建数据库    当前数据库；mysql
create database 张婧怡的数据库 
DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

-- 2.创建用户并授权
CREATE USER `d用户名`@`%` IDENTIFIED BY '密码';
GRANT all ON `张婧怡的数据库`.* TO `d用户名`@`%`;
flush privileges;

-- 3. 创建班级表，同学表，用户表   当前数据库；张婧怡的数据库
-- 班级表：
CREATE TABLE `班级表_张婧怡`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `名称` varchar(50) NOT NULL,
  `备注` varchar(100) NOT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `名称`(`名称`) USING BTREE
) ENGINE = InnoDB;

INSERT INTO `班级表_张婧怡` VALUES (10000, '22数媒技本科', '周2下午课');
INSERT INTO `班级表_张婧怡` VALUES (10001, '24专升本-1班', '周1上午课');
INSERT INTO `班级表_张婧怡` VALUES (10002, '24专升本-2班', '周1下午课');
INSERT INTO `班级表_张婧怡` VALUES (10003, '24专升本-3班', '周2上午课');

-- 同学表：
CREATE TABLE `同学表_张婧怡`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `学号` varchar(16) NOT NULL,
  `姓名` varchar(10) NOT NULL,
  `性别` enum('男','女') NOT NULL,
  `生日` date NOT NULL,
  `手机号` varchar(11) NOT NULL,
  `QQ号` varchar(12) NOT NULL,
  `EMail` varchar(25) NULL DEFAULT NULL,
  `籍贯` varchar(15) NOT NULL,
  `住址` varchar(50) NULL DEFAULT NULL,
  `照片类型` varchar(5) NULL DEFAULT NULL,
  `照片` mediumblob NULL COMMENT 'jpg格式',
  `班级id` int(11) NOT NULL,
  PRIMARY KEY (`学号`) USING BTREE,
  UNIQUE INDEX `id`(`id`) USING BTREE,
  UNIQUE INDEX `QQ号`(`QQ号`) USING BTREE,
  UNIQUE INDEX `手机号`(`手机号`) USING BTREE,
  CONSTRAINT `bjbh` FOREIGN KEY (`班级id`) REFERENCES `班级表_张婧怡` (`id`)
) ENGINE = InnoDB ;

INSERT INTO 同学表_张婧怡(学号, 姓名, 性别, 生日, 手机号, QQ号, EMail, 籍贯, 住址, 照片类型, 班级id) VALUES 
('21109', '韩雨',   '女', '2004.08.08', '13903519453', '1007558122', '1007558122@qq.com', '山西省长治市潞州区', '潞州区', 'jpg', 10000), 
('21141', '张婧怡', '女', '2003.05.22', '13903513429', '1009460938', '1009460938@qq.com', '山西省临汾市侯马市', '侯马市红卫厂平阳中公家属区', 'jpg', 10000), 
('22101', '阿琪',   '女', '2003.06.30', '13903516615', '1009652893', '1009652893@qq.com', '西藏区那曲市色尼区', '色尼区电力小区', 'jpg', 10000), 
('22102', '安媛媛', '女', '2004.01.24', '13903518212', '1002889468', '1002889468@qq.com', '山西省晋中市祁县', '祁县紫东小区', 'jpg', 10000), 
('22103', '陈淑英', '女', '2004.01.10', '13903513630', '1001395531', '1001395531@qq.com', '山东省聊城市茌平区', '茌平区新清华园', 'jpg', 10000), 
('22104', '陈宇帆', '男', '2004.02.09', '13903513717', '1007972743', '1007972743@qq.com', '浙江省宁波市宁海县', '宁海县桃源街道沙田路', 'jpg', 10000), 
('22105', '杜佳庆', '男', '2004.10.28', '13903517948', '1006867970', '1006867970@qq.com', '山西省运城市盐湖区', '盐湖区', 'jpg', 10000), 
('22106', '格桑元旦', '男', '2004.08.24', '13903515884', '1006153616', '1006153616@qq.com', '西藏区日喀则市桑珠孜区', '桑珠孜区甲措雄乡罗杰村', 'jpg', 10000), 
('22107', '郝雪雯', '女', '2002.04.06', '13903516237', '1005560718', '1005560718@qq.com', '山西省大同市', '大同泰丰里小区D区', 'jpg', 10000), 
('22108', '荆之楠', '男', '2004.09.09', '13903518811', '1007967927', '1007967927@qq.com', '山西省阳泉市高新区', '阳泉市高新区宁波路御康山庄住宅小区', 'jpg', 10000), 
('22109', '李海跃', '男', '2003.10.13', '13903511559', '1005005716', '1005005716@qq.com', '山东省滨州市邹平市', '邹平市鹤伴春天', 'jpg', 10000), 
('22110', '李楠',   '女', '2005.03.19', '13903512240', '1007565770', '1007565770@qq.com', '山西省忻州市繁峙县', '繁峙县砂河镇', 'jpg', 10000), 
('22111', '李若溪', '女', '2004.06.01', '13903511713', '1000227649', '1000227649@qq.com', '山东省淄博市张店区', '张店区共青团西路恒大帝景', 'jpg', 10000), 
('22112', '李向杰', '男', '2004.09.04', '13903518861', '1003203622', '1003203622@qq.com', '海南省临高县', '临高县临城镇厚禄小区', 'jpg', 10000), 
('22113', '林宏玉', '男', '2004.01.23', '13903518483', '1002378131', '1002378131@qq.com', '江西省新余市分宜县', '分宜县', 'jpg', 10000), 
('22114', '刘嘉庆', '女', '2004.06.30', '13903511719', '1007776874', '1007776874@qq.com', '山西省运城市盐湖区', '盐湖区', 'jpg', 10000), 
('22115', '刘洋',   '男', '2003.11.20', '13903510838', '1007866122', '1007866122@qq.com', '浙江省金华市婺城区', '婺城区白龙桥镇星河湾', 'jpg', 10000), 
('22116', '刘翌彤', '女', '2004.06.27', '13903516597', '1004529165', '1004529165@qq.com', '山东省济南市平阴县', '平阴县云翠嘉苑', 'jpg', 10000), 
('22117', '马超飞', '男', '2003.07.26', '13903514439', '1004479477', '1004479477@qq.com', '新疆区阿拉尔市十团', '十团翠湖雅居', 'jpg', 10000), 
('22118', '毛荃莹', '女', '2003.03.08', '13903512367', '1005657449', '1005657449@qq.com', '山东省济南市市中区', '济南市市中区', 'jpg', 10000), 
('22119', '王博雅', '女', '2004.08.17', '13903512263', '1006133853', '1006133853@qq.com', '新疆区塔城地区沙湾市', '沙湾市润泽三期', 'jpg', 10000), 
('22120', '王浩然', '男', '2003.12.01', '13903519544', '1005649308', '1005649308@qq.com', '山西省长治市襄垣县', '襄垣县古韩镇南湖名都小区', 'jpg', 10000), 
('22121', '王京乐', '女', '2005.02.22', '13903514790', '1009298643', '1009298643@qq.com', '山西省太原市晋源区', '晋源区', 'jpg', 10000), 
('22122', '王楷婷', '女', '2004.10.25', '13903518497', '1001471368', '1001471368@qq.com', '山西省吕梁市孝义市', '孝义市贾庄小区', 'jpg', 10000), 
('22123', '王梦瑶', '女', '2004.05.08', '13903518226', '1001003053', '1001003053@qq.com', '山西省临汾市曲沃县', '曲沃县', 'jpg', 10000), 
('22124', '王绍华', '男', '2004.03.16', '13903518516', '1001642351', '1001642351@qq.com', '山西省运城市盐湖区', '盐湖区', 'jpg', 10000), 
('22125', '王文静', '女', '2003.10.24', '13903516960', '1006446043', '1006446043@qq.com', '山西省运城市闻喜县', '闻喜县', 'jpg', 10000), 
('22126', '闻宇坤', '男', '2004.09.10', '13903514587', '1007303095', '1007303095@qq.com', '江西省九江市永修县', '永修县', 'jpg', 10000), 
('22127', '武慧珍', '女', '2004.08.01', '13903510477', '1006257886', '1006257886@qq.com', '山西省晋中市祁县', '祁县', 'jpg', 10000), 
('22128', '武启启', '男', '2003.12.20', '13903513180', '1002019872', '1002019872@qq.com', '山西省吕梁市交城县', '交城县', 'jpg', 10000), 
('22129', '谢国鑫', '男', '2003.05.03', '13903514345', '1007842845', '1007842845@qq.com', '江西省赣州市龙南市', '龙南市里仁镇圳背村', 'jpg', 10000), 
('22130', '谢佳欣', '女', '2004.06.18', '13903514380', '1002697494', '1002697494@qq.com', '海南省海口市美兰区', '美兰区桂林洋盛洋小区', 'jpg', 10000), 
('22131', '谢世琛', '男', '2003.02.15', '13903516823', '1003441016', '1003441016@qq.com', '江西赣州安远县丰背', '安远县丰背', 'jpg', 10000), 
('22132', '徐瑞誉', '女', '2003.11.08', '13903517824', '1003301674', '1003301674@qq.com', '山西省临汾市尧都区', '尧都区', 'jpg', 10000), 
('22133', '肖卓群', '男', '2003.01.30', '13903511568', '1004431420', '1004431420@qq.com', '山西省晋中市榆次区', '榆次区玉湖公园', 'jpg', 10000), 
('22134', '许宇哲', '男', '2004.01.31', '13903513139', '1004623849', '1004623849@qq.com', '浙江省台州市温岭市县', '温岭市县前街', 'jpg', 10000), 
('22135', '张露尹', '女', '2004.06.12', '13903510093', '1002576126', '1002576126@qq.com', '山西省太原市晋源区', '晋源区', 'jpg', 10000), 
('22136', '张旭婷', '女', '2003.10.15', '13903512948', '1008720097', '1008720097@qq.com', '山西省晋中市平遥县', '平遥县香乐乡薛贤村', 'jpg', 10000), 
('22137', '张宇婕', '女', '2004.04.04', '13903517006', '1007882019', '1007882019@qq.com', '山西省长治市潞州区', '潞州区延安南路清华街清华家属楼', 'jpg', 10000), 
('22138', '赵文博', '男', '2003.01.29', '13903519502', '1005171939', '1005171939@qq.com', '山西省太原市万柏林区', '万柏林区上庄街赞城小区', 'jpg', 10000), 
('22139', '钟杉',   '女', '2003.09.20', '13903519925', '1001964129', '1001964129@qq.com', '江西省赣州市于都县', '于都县贡江镇工贸城', 'jpg', 10000), 
('22140', '周荣泉', '女', '2004.06.10', '13903516282', '1001898890', '1001898890@qq.com', '新疆区石河子市17小区', '石河子市17小区合十花园', 'jpg', 10000);


INSERT INTO 同学表_张婧怡(学号, 姓名, 性别, 生日, 手机号, QQ号, EMail, 籍贯, 住址, 照片类型, 班级id) VALUES 
('24101', '白还宇', '男', '2002-11-28', '13903527659', '1012552325', '1012552325@qq.com', '山西省吕梁市柳林县', '柳林县孟门镇白家也村', 'jpg', 10001),
('24102', '陈怡琳', '女', '2003-04-13', '13903521743', '1012866531', '1012866531@qq.com', '山西省运城市平陆县', '龙韵华庭', 'jpg', 10001),
('24103', '程杰',   '男', '2000-10-20', '13903523175', '1015643175', '1015643175@qq.com', '山西省晋中市平遥县', '昌源西街北一巷十五号', 'jpg', 10001),
('24104', '崔董伟', '男', '2003-10-25', '13903523462', '1017445098', '1017445098@qq.com', '山西省运城市垣曲县', '垣曲县惠民小区', 'jpg', 10001),
('24105', '崔裴帅', '男', '2003-10-15', '13903520370', '1011001988', '1011001988@qq.com', '山西省临汾市乡宁县', '昌宁镇祥瑞府小区', 'jpg', 10001),
('24106', '冯金财', '男', '2000-09-16', '13903524625', '1018748467', '1018748467@qq.com', '山西省临汾市吉县', '尧都区御景水城', 'jpg', 10001),
('24107', '冯子乐', '男', '2003-05-25', '13903529967', '1011955895', '1011955895@qq.com', '山西省忻州市忻府区', '忻府区', 'jpg', 10001),
('24108', '郭梦婕', '女', '2002-05-31', '13903529221', '1010502437', '1010502437@qq.com', '山西省临汾市洪洞县', '洪洞县金阳小区', 'jpg', 10001),
('24109', '韩子晨', '男', '2003-12-06', '13903525982', '1012334322', '1012334322@qq.com', '山西省临汾市吉县', '安乐村', 'jpg', 10001),
('24110', '郝加愉', '男', '2003-03-03', '13903527532', '1014609151', '1014609151@qq.com', '山西省吕梁市临县', '临县大禹乡后小峪村', 'jpg', 10001),
('24111', '侯天惠', '女', '2003-06-26', '13903528208', '1018296423', '1018296423@qq.com', '山西省吕梁市汾阳市', '汾阳市阳城乡', 'jpg', 10001),
('24112', '雷雅楠', '女', '2003-04-23', '13903527063', '1015901637', '1015901637@qq.com', '山西省吕梁市方山县', '方山县马坊镇王家湾村', 'jpg', 10001),
('24113', '雷誉',   '男', '2002-10-28', '13903529021', '1018024448', '1018024448@qq.com', '山西省临汾市尧都区', '尧都区段店乡西张村', 'jpg', 10001),
('24114', '李律锭', '男', '2003-03-31', '13903529991', '1015488487', '1015488487@qq.com', '山西省长治市襄垣县', '襄垣县夏店镇', 'jpg', 10001),
('24115', '李瑞鹏', '男', '2003-07-18', '13903523737', '1019371454', '1019371454@qq.com', '山西省长治市襄垣县', '襄垣县秦家沟', 'jpg', 10001),
('24116', '李欣烨', '女', '2003-03-21', '13903522982', '1013738891', '1013738891@qq.com', '山西省太原市清徐县', '小店区', 'jpg', 10001),
('24117', '刘锦童', '男', '2002-11-15', '13903521585', '1019615368', '1019615368@qq.com', '山西省晋城市泽州县', '泽州县北义城镇西张村', 'jpg', 10001),
('24118', '刘咏琴', '女', '2002-02-02', '13903525459', '1014324474', '1014324474@qq.com', '山西省阳泉市盂县', '盂县苌池镇东苌池村', 'jpg', 10001),
('24119', '马锦璇', '女', '2003-09-20', '13903528783', '1015991778', '1015991778@qq.com', '山西省大同市平城区', '平城区水泊寺街道富力小区', 'jpg', 10001),
('24120', '牛煜凯', '男', '2003-09-16', '13903528214', '1017244476', '1017244476@qq.com', '山西省长治市', '长治市', 'jpg', 10001),
('24121', '秦松',   '男', '2002-08-02', '13903524978', '1015548545', '1015548545@qq.com', '山西省太原市晋源区', '晋源区化肥小区', 'jpg', 10001),
('24122', '任晓敏', '女', '2003-01-22', '13903527379', '1012647161', '1012647161@qq.com', '山西省晋中市介休市', '介休市', 'jpg', 10001),
('24123', '桑添霖', '女', '2003-08-18', '13903523513', '1015587746', '1015587746@qq.com', '山西省晋中市榆次区', '榆次区乌金山镇兴治村', 'jpg', 10001),
('24124', '苏斌',   '男', '2002-09-08', '13903526449', '1010196040', '1010196040@qq.com', '山西省朔州市朔城区', '顺城区', 'jpg', 10001),
('24125', '王嘉怡', '女', '2003-08-19', '13903520558', '1011258370', '1011258370@qq.com', '山西省朔州市朔城区', '朔城区开发南路凯旋城', 'jpg', 10001),
('24126', '王静',   '女', '2002-03-26', '13903528217', '1011523500', '1011523500@qq.com', '山西省晋中市祁县', '城赵镇城赵村', 'jpg', 10001),
('24127', '王宁',   '男', '2003-03-29', '13903529205', '1012548522', '1012548522@qq.com', '黑龙江省延边州望奎县', '敦化市雁鸣湖镇', 'jpg', 10001),
('24128', '王一帆', '男', '2003-11-21', '13903525933', '1011228804', '1011228804@qq.com', '山西省运城市新绛县', '运城市新绛县康城三期', 'jpg', 10001),
('24129', '王宇杰', '男', '2003-07-03', '13903529738', '1011390343', '1011390343@qq.com', '山西省晋中市榆社县', '榆社县北白村', 'jpg', 10001),
('24130', '王泽尧', '男', '2003-07-17', '13903521282', '1012901682', '1012901682@qq.com', '山西省晋城市泽州县', '南村镇东阳村', 'jpg', 10001),
('24131', '王卓然', '男', '1999-05-15', '13903523683', '1012607884', '1012607884@qq.com', '山西省太原市清徐县', '清徐县福瑞山小区', 'jpg', 10001),
('24132', '魏阳娜', '女', '2003-05-09', '13903520615', '1011077573', '1011077573@qq.com', '山西省晋中市榆次区', '文华街125号', 'jpg', 10001),
('24133', '吴远明', '男', '2003-04-26', '13903524757', '1013240857', '1013240857@qq.com', '山西省阳泉市郊区', '河底镇大固庄村', 'jpg', 10001),
('24134', '闫文凯', '男', '2003-04-21', '13903520172', '1017580043', '1017580043@qq.com', '山西省吕梁市临县', '东峁村铁路安置小区', 'jpg', 10001),
('24135', '杨冰艳', '女', '2002-04-09', '13903529686', '1010857011', '1010857011@qq.com', '山西省长治市屯留区', '余吾镇岳底村', 'jpg', 10001),
('24136', '杨宇芹', '女', '2002-03-18', '13903523863', '1011814570', '1011814570@qq.com', '山西省吕梁市岚县', '岚县东村镇马家坪', 'jpg', 10001),
('24137', '姚辉',   '男', '2004-09-28', '13903529597', '1014684662', '1014684662@qq.com', '山西省临汾市翼城县', '翼城县', 'jpg', 10001),
('24138', '张晶莹', '女', '2002-11-03', '13903527094', '1011128184', '1011128184@qq.com', '山西省长治市上党区', '上党区荫城镇琚寨村小区', 'jpg', 10001),
('24139', '张可佳', '女', '2003-03-28', '13903522053', '1018950301', '1018950301@qq.com', '山西省晋城市泽州县', '北义城镇楼岭村', 'jpg', 10001),
('24140', '张丽军', '男', '2004-07-17', '13903522103', '1017440264', '1017440264@qq.com', '山西省忻州市五台县', '东雷乡', 'jpg', 10001),
('24141', '张艺博', '男', '2001-10-02', '13903523297', '1019104584', '1019104584@qq.com', '山西省吕梁市汾阳市', '三泉镇员庄村', 'jpg', 10001),
('24142', '张逸婧', '女', '2003-04-04', '13903524983', '1016368390', '1016368390@qq.com', '山西省太原市清徐县', '清徐县王答乡', 'jpg', 10001),
('24143', '赵玉芳', '女', '2003-08-27', '13903526529', '1016774640', '1016774640@qq.com', '山西省朔州市平鲁区', '朔城区雁门街安居小区', 'jpg', 10001),
('24144', '周国莉', '女', '2003-10-06', '13903522976', '1010759078', '1010759078@qq.com', '山西省临汾市汾西县', '汾西县佃坪乡', 'jpg', 10001),
('24145', '周涛',   '男', '2000-12-02', '13903521846', '1010380474', '1010380474@qq.com', '山西省晋中市和顺县', '和顺县马坊乡西河', 'jpg', 10001);



INSERT INTO 同学表_张婧怡(学号, 姓名, 性别, 生日, 手机号, QQ号, EMail, 籍贯, 住址, 照片类型, 班级id) VALUES 
('24201', '艾诗语', '女', '2003.07.10', '13903514862', '1029021584', '1029021584@qq.com', '湖北省孝感市汉川市', '汉川城关西湖大道工行宿舍', 'jpg', 10002),
('24202', '白金婵', '女', '2002.08.23', '13903516634', '1027157198', '1027157198@qq.com', '山西省运城市闻喜县', '闻喜县桐城镇南宋村', 'jpg', 10002),
('24203', '白晶琦', '女', '2003.04.16', '13903515276', '1021687852', '1021687852@qq.com', '山西省忻州市五台县', '五台县东冶镇南大兴村', 'jpg', 10002),
('24204', '白伟琪', '女', '2003.02.07', '13903513319', '1028353597', '1028353597@qq.com', '山西省朔州市应县', '山怀仁五里滩', 'jpg', 10002),
('24205', '崔晋玮', '男', '2002.12.12', '13903515277', '1026514913', '1026514913@qq.com', '山西省运城市闻喜县', '闻喜县桐城镇三一家园', 'jpg', 10002),
('24206', '邓鑫',   '女', '2003.03.19', '13903511583', '1027212747', '1027212747@qq.com', '山东省菏泽市巨野县', '巨野县太平镇中邓楼村', 'jpg', 10002),
('24207', '范荣权', '男', '2003.10.10', '13903511318', '1021512624', '1021512624@qq.com', '山西省临汾市古县', '古县北平镇圪堆村', 'jpg', 10002),
('24208', '房蒲东', '男', '2003.07.02', '13903513037', '1022211070', '1022211070@qq.com', '山西省临汾市大宁县', '大宁县曲峨镇道教村', 'jpg', 10002),
('24209', '付文佳', '女', '2003.09.16', '13903514700', '1020317209', '1020317209@qq.com', '山西省吕梁市方山县', '方山县峪口镇土福则村', 'jpg', 10002),
('24210', '高佳宇', '男', '2002.08.29', '13903516993', '1023767885', '1023767885@qq.com', '山西省临汾市霍州市', '霍州市西张东港湾', 'jpg', 10002),
('24211', '关晓毅', '男', '2003.07.03', '13903516988', '1023538417', '1023538417@qq.com', '山西省临汾市襄汾县', '襄汾县南辛店乡崔村', 'jpg', 10002),
('24212', '郭小龙', '男', '2004.03.29', '13903519150', '1021409299', '1021409299@qq.com', '山西省太原市杏花岭区', '杏花岭巨轮街道富力阳光', 'jpg', 10002),
('24213', '纪红霞', '女', '2001.03.24', '13903511802', '1023292049', '1023292049@qq.com', '山西省临汾市洪洞县', '洪洞县提村乡安定村', 'jpg', 10002),
('24214', '李昌根', '男', '2003.04.17', '13903518076', '1021537739', '1021537739@qq.com', '山西省晋中市平遥县', '平遥县岳壁乡梁村', 'jpg', 10002),
('24215', '李浩泉', '男', '2003.02.18', '13903519662', '1028480259', '1028480259@qq.com', '山西省晋中市祁县', '祁县东观镇东炮村', 'jpg', 10002),
('24216', '李嘉新', '男', '2003.03.02', '13903519005', '1029175913', '1029175913@qq.com', '山西省临汾市襄汾县', '襄汾县古城镇北焦彭村', 'jpg', 10002),
('24217', '李乐天', '男', '2001.10.28', '13903519353', '1023709855', '1023709855@qq.com', '山西省忻州市代县', '代县东关大街', 'jpg', 10002),
('24218', '李泽华', '女', '2002.09.12', '13903515348', '1022078682', '1022078682@qq.com', '山西省长治市上党区', '上党区国土园', 'jpg', 10002),
('24219', '廉超玉', '男', '2002.12.16', '13903512747', '1023400665', '1023400665@qq.com', '山西省长治市沁源县', '沁源县郭道镇和泰小区', 'jpg', 10002),
('24220', '马国旭', '男', '2002.08.17', '13903518182', '1024707585', '1024707585@qq.com', '山西省运城市盐湖区', '盐湖区南城街道柏口窑村', 'jpg', 10002),
('24221', '马耀宗', '男', '2002.12.31', '13903513669', '1026391790', '1026391790@qq.com', '山西省忻州市繁峙县', '繁峙县繁城镇作头村', 'jpg', 10002),
('24222', '孟怡静', '女', '2003.06.22', '13903517618', '1029702652', '1029702652@qq.com', '山西省吕梁市孝义市', '孝义市四中小区', 'jpg', 10002),
('24223', '秦贺龙', '男', '2001.03.15', '13903517039', '1020613882', '1020613882@qq.com', '山西省临汾市侯马市', '侯马市小里村168号', 'jpg', 10002),
('24224', '任嘉鑫', '女', '2003.12.16', '13903513776', '1025646101', '1025646101@qq.com', '山西省吕梁市中阳县', '中阳县金罗镇', 'jpg', 10002),
('24225', '宋嘉鑫', '男', '2003.07.21', '13903515244', '1028159426', '1028159426@qq.com', '山西省长治市屯留区', '屯留区李高乡驼坊村', 'jpg', 10002),
('24226', '王高祥', '男', '2002.03.31', '13903516894', '1027732648', '1027732648@qq.com', '河南省周口市鹿邑县', '尖草坪区兴华北小区西区', 'jpg', 10002),
('24227', '王文丽', '女', '2003.10.20', '13903517213', '1020906862', '1020906862@qq.com', '山西省临汾市尧都区', '尧都区金殿镇峪里村', 'jpg', 10002),
('24228', '王晓杰', '女', '2003.06.14', '13903515955', '1025965982', '1025965982@qq.com', '山西省太原市清徐县', '清徐县徐沟镇庄子营村', 'jpg', 10002),
('24229', '王星婷', '女', '2004.12.12', '13903511579', '1026023960', '1026023960@qq.com', '山西省吕梁市离石区', '离石区', 'jpg', 10002),
('24230', '王宇飞', '男', '2003.12.16', '13903514237', '1025768947', '1025768947@qq.com', '山西省晋城市城区', '晋城市城区和凤苑', 'jpg', 10002),
('24231', '尉润甲', '男', '2002.06.05', '13903515439', '1026581353', '1026581353@qq.com', '山西省大同市阳高县', '阳高县阳和首席26号楼', 'jpg', 10002),
('24232', '温宇'  , '男', '1993.07.24', '13903510797', '1020842836', '1020842836@qq.com', '山西省太原市清徐县', '清徐县清源镇油房堡村', 'jpg', 10002),
('24233', '吴天圆', '女', '2002.07.17', '13903513678', '1022602366', '1022602366@qq.com', '河北省沧州市东光县', '东光县于桥乡冯庄村', 'jpg', 10002),
('24234', '武睿棋', '男', '2001.12.29', '13903515446', '1020301868', '1020301868@qq.com', '山西省运城市河津市', '河津市城区街道办东黄村', 'jpg', 10002),
('24235', '席瑞',   '女', '2002.11.15', '13903510612', '1024943754', '1024943754@qq.com', '山西省忻州市五台县', '五台县走马岭小区', 'jpg', 10002),
('24236', '邢方源', '女', '2003.07.24', '13903512262', '1028569915', '1028569915@qq.com', '山西省忻州市忻府区', '忻府区田村', 'jpg', 10002),
('24237', '邢泽峰', '男', '2003.06.09', '13903510503', '1025020373', '1025020373@qq.com', '山西省吕梁市柳林县', '离石区善水新苑', 'jpg', 10002),
('24238', '薛千一', '男', '2000.09.27', '13903513541', '1024788776', '1024788776@qq.com', '山西省运城市芮城县', '芮城县东垆乡南曹庄村', 'jpg', 10002),
('24239', '扆国秀', '女', '2002.11.11', '13903512002', '1025786531', '1025786531@qq.com', '山西省运城市盐湖区', '盐湖区解州镇扆家庄', 'jpg', 10002),
('24240', '张昊新', '男', '2003.08.20', '13903516100', '1021800377', '1021800377@qq.com', '山西省晋中市榆社县', '榆社县紫东花园', 'jpg', 10002),
('24241', '张君德', '男', '2002.06.12', '13903511557', '1020291312', '1020291312@qq.com', '山西省吕梁市文水县', '文水县南安镇南安村', 'jpg', 10002),
('24242', '张扬赛', '女', '2003.11.09', '13903512339', '1026799338', '1026799338@qq.com', '山西省运城市稷山县', '稷山县化峪镇东段村', 'jpg', 10002),
('24243', '张永强', '男', '2002.03.11', '13903514518', '1022423805', '1022423805@qq.com', '山西省太原市古交市', '古交市河口镇火山苑', 'jpg', 10002),
('24244', '赵丹阳', '女', '2003.05.08', '13903517255', '1022733470', '1022733470@qq.com', '山西省晋中市寿阳县', '朝阳镇半月村', 'jpg', 10002),
('24245', '周佳祺', '女', '2003.08.27', '13903519572', '1027475093', '1027475093@qq.com', '山西省临汾市侯马市', '侯马市凤城乡西赵村', 'jpg', 10002);


INSERT INTO 同学表_张婧怡(学号, 姓名, 性别, 生日, 手机号, QQ号, EMail, 籍贯, 住址, 照片类型, 班级id) VALUES 
('24301', '安峰民', '男', '2003-04-17', '13903530207', '1034192061', '1034192061@qq.com', '山西省太原市清徐县', '清徐县孟封镇孟封村', 'jpg', 10003),
('24302', '白泽红', '男', '2003-03-08', '13903532694', '1038059206', '1038059206@qq.com', '山西省忻州市五台县', '五台县沟南乡官庄村', 'jpg', 10003),
('24303', '蔡炯明', '男', '2003-02-19', '13903536332', '1036050136', '1036050136@qq.com', '山西省晋城市城区', '晋城市城区西上庄办牛山村', 'jpg', 10003),
('24304', '曹明宇', '女', '2003-07-30', '13903532307', '1039034112', '1039034112@qq.com', '山西省长治市沁县', '沁县荆村', 'jpg', 10003),
('24305', '陈彩庆', '女', '2003-11-29', '13903535315', '1036108619', '1036108619@qq.com', '山西省运城市闻喜县', '闻喜县小泽村', 'jpg', 10003),
('24306', '杜林颖', '女', '2003-06-05', '13903530427', '1036213737', '1036213737@qq.com', '山西省运城市河津市', '河津市柴家镇下牛村', 'jpg', 10003),
('24307', '冯雨吉', '男', '2003-09-05', '13903531704', '1031949823', '1031949823@qq.com', '山西省吕梁市柳林县', '离石区世纪华庭', 'jpg', 10003),
('24308', '付慧慧', '女', '2002-06-22', '13903535016', '1032008284', '1032008284@qq.com', '山西省阳泉市盂县', '盂县牛村镇牛村', 'jpg', 10003),
('24309', '付瑞敏', '男', '2000-12-25', '13903537522', '1036602482', '1036602482@qq.com', '山西省长治市平顺县', '杏花岭区太钢118小区', 'jpg', 10003),
('24310', '郭浩男', '男', '2003-09-28', '13903537281', '1034579699', '1034579699@qq.com', '山西省晋城市陵川县', '陵川县平城镇秦家庄', 'jpg', 10003),
('24311', '韩佳芳', '女', '2003-12-06', '13903534348', '1032620760', '1032620760@qq.com', '山西省临汾市洪洞县', '洪洞县堤村乡三交村', 'jpg', 10003),
('24312', '郝黎花', '女', '2003-05-24', '13903536323', '1035219549', '1035219549@qq.com', '山西省晋中市介休市', '介休市北城紫园', 'jpg', 10003),
('24313', '候鹏杰', '男', '2003-04-07', '13903538790', '1033657204', '1033657204@qq.com', '山西省吕梁市临县', '临县临泉镇东峁村', 'jpg', 10003),
('24314', '吉婉茹', '女', '2004-01-17', '13903532360', '1035933190', '1035933190@qq.com', '山西省运城市稷山县', '稷山县吉祥苑', 'jpg', 10003),
('24315', '解昌奇', '男', '2003-05-10', '13903535798', '1039485248', '1039485248@qq.com', '山西省临汾市洪洞县', '洪洞县明姜镇宫官村', 'jpg', 10003),
('24316', '李牧轩', '男', '2003-10-25', '13903536525', '1035319028', '1035319028@qq.com', '山西省运城市闻喜县', '闻喜县万福花园', 'jpg', 10003),
('24317', '李颖',   '女', '2004-01-11', '13903536213', '1030822970', '1030822970@qq.com', '山西省晋中市平遥县', '平遥县中都乡梁周村', 'jpg', 10003),
('24318', '李泽坤', '男', '2003-12-23', '13903539711', '1030818717', '1030818717@qq.com', '山西省长治市潞城区', '汇金国际', 'jpg', 10003),
('24319', '刘伟伟', '男', '2003-10-28', '13903531050', '1030161081', '1030161081@qq.com', '山西省太原市小店区', '小店区刘家堡乡王屋村', 'jpg', 10003),
('24320', '马宇康', '男', '2003-03-25', '13903533717', '1038403020', '1038403020@qq.com', '山西省太原市晋源区', '晋源区梁家寨村', 'jpg', 10003),
('24321', '乔梦鑫', '女', '2003-08-28', '13903534678', '1031688178', '1031688178@qq.com', '山西省临汾市襄汾县', '襄汾县邓庄镇北梁村', 'jpg', 10003),
('24322', '曲韦政', '男', '2003-02-04', '13903533520', '1038321304', '1038321304@qq.com', '山西省阳泉市平定县', '平定县西城枫景', 'jpg', 10003),
('24323', '陕亿涛', '男', '2003-04-15', '13903530113', '1036508983', '1036508983@qq.com', '山西省运城市绛县', '绛县卫庄镇卫庄村', 'jpg', 10003),
('24324', '申培清', '女', '2003-08-16', '13903538422', '1032903718', '1032903718@qq.com', '山西省长治市沁县', '沁县惠民小区', 'jpg', 10003),
('24325', '孙鹏佳', '女', '2002-07-13', '13903538722', '1033771425', '1033771425@qq.com', '山西省长治市襄垣县', '襄垣县和美园小区', 'jpg', 10003),
('24326', '孙文蓬', '男', '2003-08-08', '13903530709', '1030126441', '1030126441@qq.com', '山西省晋中市介休市', '介休市罗王庄村', 'jpg', 10003),
('24327', '王虹',   '女', '2003-10-06', '13903539018', '1039061056', '1039061056@qq.com', '山西省阳泉市城区', '阳泉市城区燕煤花园', 'jpg', 10003),
('24328', '王家豪', '男', '2002-10-01', '13903530595', '1031296780', '1031296780@qq.com', '山西省晋中市介休市', '介休市绿城华府', 'jpg', 10003),
('24329', '王杰红', '女', '2001-10-01', '13903531329', '1036530625', '1036530625@qq.com', '山西省太原市娄烦县', '娄烦县无名路口纪委宿舍', 'jpg', 10003),
('24330', '王溶乐', '女', '2002-09-06', '13903536587', '1035808464', '1035808464@qq.com', '山西省长治市襄垣县', '襄垣县西关村', 'jpg', 10003),
('24331', '王鑫林', '男', '2003-09-08', '13903533359', '1030839974', '1030839974@qq.com', '山西省长治市黎城县', '黎城县东阳关镇东黄须村', 'jpg', 10003),
('24332', '王占伟', '男', '2003-07-01', '13903536363', '1030999068', '1030999068@qq.com', '山西省忻州市静乐县', '忻府区新建南路粮运宿舍', 'jpg', 10003),
('24333', '王振江', '男', '2001-04-09', '13903538547', '1039156746', '1039156746@qq.com', '山西省晋中市榆次区', '榆次区', 'jpg', 10003),
('24334', '王紫珺', '女', '2002-02-02', '13903537396', '1034731709', '1034731709@qq.com', '山西省太原市万柏林区', '万柏林区滨西工业园小区', 'jpg', 10003),
('24335', '武宵',   '男', '2002-12-15', '13903532357', '1034426666', '1034426666@qq.com', '山西省长治市武乡县', '武乡县蟠龙镇尚元村', 'jpg', 10003),
('24336', '闫伟杰', '男', '2003-01-01', '13903533209', '1035828293', '1035828293@qq.com', '山西省临汾市襄汾县', '襄汾县南贾镇荀董村', 'jpg', 10003),
('24337', '杨恩浩', '男', '2003-08-27', '13903533396', '1031029134', '1031029134@qq.com', '山西省晋中市平遥县', '平遥县南政乡南政村', 'jpg', 10003),
('24338', '杨欣欣', '女', '2003-04-09', '13903534924', '1035659878', '1035659878@qq.com', '山东省聊城市高唐县', '琉璃寺镇皮庄村', 'jpg', 10003),
('24339', '杨怡非', '男', '2003-10-10', '13903532304', '1035570805', '1035570805@qq.com', '山西省运城市稷山县', '稷峰镇东渠村', 'jpg', 10003),
('24340', '于豆豆', '女', '2003-07-08', '13903530703', '1034939544', '1034939544@qq.com', '山西省运城市夏县', '夏县尉郭村', 'jpg', 10003),
('24341', '张浩',   '男', '1999-01-03', '13903539838', '1037425439', '1037425439@qq.com', '山西省太原市清徐县', '清徐县清源镇孔村', 'jpg', 10003),
('24342', '张佳琪', '女', '2004-06-19', '13903530517', '1031358163', '1031358163@qq.com', '山西省运城市临猗县', '临猗县七级镇南王村', 'jpg', 10003),
('24343', '张楠',   '男', '2002-10-30', '13903532603', '1030942190', '1030942190@qq.com', '山西省运城市绛县', '绛县陈村镇陈村', 'jpg', 10003),
('24344', '张晓艳', '女', '2002-01-21', '13903532274', '1036840277', '1036840277@qq.com', '山西省太原市小店区', '小店区刘家堡乡南马村', 'jpg', 10003),
('24345', '郑明宇', '男', '2003-01-07', '13903535536', '1037162970', '1037162970@qq.com', '山西省晋中市灵石县', '灵石县静升镇阳光集贤苑', 'jpg', 10003);

-- 用户表：
CREATE TABLE `用户表_张婧怡`  (
  `用户名` varchar(10) NOT NULL,
  `密码` varchar(32) NULL DEFAULT NULL,
  PRIMARY KEY (`用户名`) USING BTREE
) ENGINE = InnoDB;

INSERT INTO `用户表_张婧怡` VALUES ('张婧怡', MD5(CONCAT('张婧怡',MD5('12345678'))));

-- 同学视图：
create view 同学视图_张婧怡 
as
select 同学表_张婧怡.id,学号,姓名,性别,生日,手机号,QQ号,EMail,籍贯,住址,班级id,名称 AS 班级名称,备注 AS 班级备注 
from (同学表_张婧怡 join 班级表_张婧怡 
on (同学表_张婧怡.班级id = 班级表_张婧怡.id));

2.前端

2.1 前段框架引用第三方文件

说明	文件名
EasyUiPc/easyui文件夹	Easyui文件
引入jquery的库	EasyUiPc/js/jquery.min.js
引入jquery easyui的库	EasyUiPc/js/jquery.easyui.min.js
引入jquery easyui中中文包	EasyUiPc/js/easyui-lang-zh_CN.js
引入easyui的数据网格插件	EasyUiPc/js/jquery.edatagrid.js
登录界面密码md5剁碎程序	EasyUiPc/js/md5.js
css文件	EasyUiPc/css/easyui.css
css文件	EasyUiPc/css/color.css
css文件	EasyUiPc/css/icon.css
themes图标文件夹	EasyUiPc/css/icons
themes图片文件夹	EasyUiPc/css/images

2.2 系统实现的程序文件列表(非引用--自定义的程序文件)

说明	文件名
html文件---(9个)	/
登录界面	login_zjy.html
主控界面	index.html
班级信息浏览页面	listCla_zjy.html
同学信息浏览页面	listStu_zjy.html
班级信息管理页面之一(edatagrid)	editClass_zjy.html
同学信息管理页面之一(edatagrid)	editStudent_zjy.html
班级信息管理页面之二(datagrid--dialog--form)	editCla_zjy.html
同学信息管理页面之二(datagrid--dialog--form)	editStu_zjy.html
设置密码页面	setPass_zjy.html
js程序---增删改对话框处理	/js/manager.js
js程序---自定义验证规则 输入校对	/js/validatebox.rules.js
图片文件	/image/main.jpg
php文件---(13个)	/php
数据库连接公用程序	conn_zjy.php
登录验证	login _zjy.php
分页、搜索班级信息	listCla_zjy.php
分页、搜索同学信息	listStu_zjy.php
获取同学照片	getPhoto_zjy.php
为列表框获取班级名称信息	getClassNames _zjy.php
添加班级	addClass_zjy.php
修改保存班级	updateClass_zjy.php
删除班级	deleteClass_zjy.php
添加同学	addStudent_zjy.php
修改保存同学	updateStudent_zjy.php
删除同学	deleteStudent_zjy.php
设置密码	setPass_zjy.php

2.3 系统实现的程序文件调用关系

2.4 HTML文件

(1)登录页面login_zjy.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF8">
    <title>张婧怡同学信息管理系统.登录</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/color.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script src="js/md5.js"></script>
</head>
<body>
<div id="win" class="easyui-window" title="张婧怡同学信息管理系统.登录"
     style="width: 320px; height: 240px;"
     data-options="
         iconCls:'icon-ok',
         collapsible: false,
         maximizable: false,
         minimizable: false,
         resizable: false,
         closable: false,
         modal: true,
         border:'thin',
         cls:'c1',">
    <form style="padding: 30px 20px 20px 20px;" id="login" method="post">
        <div style="margin-bottom: 10px; text-align: center;">
            <input class="easyui-textbox" id="用户名" style="width: 80%"
                   data-options="prompt:'输入用户名',required:true">
        </div>
        <div style="margin-bottom: 10px; text-align: center;">
            <input class="easyui-passwordbox" id="密码" style="width: 80%"
                   data-options="prompt:'输入密码',required:true">
        </div>
        <div style="padding: 5px; text-align: center;">
            <a href="javascript:void(0)" class="easyui-linkbutton"
               id="submitBtn" icon="icon-ok">登录</a>
            <a href="javascript:void(0)"
               class="easyui-linkbutton" onclick="clearForm()" icon="icon-cancel">取消</a>
            <a href="http://www.zjyzhaojiang.cn/WebFrontEnd/index.html"
               class="easyui-linkbutton"  icon="icon-ok">返回</a>
        </div>
    </form>
</div>
<script>
    $(function() {
        //登录
        $("#submitBtn").click(function() {
            $.ajax({
                type : "post",
                url : "php/login_zjy.php",
                data : {用户名:$("#用户名").val(), 口令:hex_md5($("#密码").val())},
                dataType : "json", //返回数据类型
                success : function(data) {
                    if ("出现一些错误。" === data.msg) {
                        $.messager.alert("消息提醒","用户名或密码错误!",
                            "warning");
                        $('#pass').textbox('setValue','');
                    }
                    if (data.success) {
                        window.location.href = "index.html?username=" + $("#用户名").val();
                    }
                }
            });
        });
    })
</script>
</body>
</html>

(2)主控页面index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>张婧怡同学信息管理系统</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/icon.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script>
        // 解析通过window.location.search传入的参数
        function GetQueryValue1(queryName) {
            var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if ( r != null ){
                return decodeURI(r[2]);
            }else{
                return null;
            }
        }

        $(function(){
            // 数据
            var treeData=[{
                text:"同学信息管理",
                children:[{
                    text:"浏览系统数据",
                    state : "open",
                    children:[{
                        text:"浏览班级信息",
                        attributes:{url:"listCla_zjy.html"}
                    },{
                        text:"浏览同学信息",
                        attributes:{url:"listStu_zjy.html"}
                    }]
                },{
                    text:"管理系统数据之1",
                    state : "open",
                    children:[{
                        text:"管理班级信息之1",
                        attributes:{url:"editClass_zjy.html"}
                    },{
                        text:"管理同学信息之1",
                        attributes:{url:"editStudent_zjy.html"}
                    }]
                },{
                    text:"管理系统数据之2",
                    state : "open",
                    children:[{
                        text:"管理班级信息之2",
                        attributes:{url:"editCla_zjy.html"}
                    },{
                        text:"管理同学信息之2",
                        attributes:{url:"editStu_zjy.html"}
                    }]
                },{
                    text:"设置登录密码",
                    state : "open",
                    children:[{
                        text:"设置登录密码",
                        attributes:{url:"setPass_zjy.html"}
                    }]
                }]
            }];

            // 实例化树菜单
            $("#tree").tree({
                data:treeData,
                lines:true,
                onClick:function(node){
                    if(node.attributes){
                        openTab(node.text,node.attributes.url);
                    }
                }
            });
            // 新增Tab
            function openTab(text,url){
                if($("#tabs").tabs('exists',text)){
                    $("#tabs").tabs('select',text);
                }else{
                    var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
                    $("#tabs").tabs('add',{
                        title:text,
                        closable:true,
                        content:content
                    });
                }
            }
            // 设置用户名
            $("#username").text( GetQueryValue1("username") );
        });
    </script>
</head>
<body class="easyui-layout">
<div region="north" style="height: 80px;background-color: #E0EDFF">
    <div align="left" style="width: 80%;float: left"><img src="images/main.jpg"></div>
    <div style="padding-top: 50px;padding-right: 20px;">当前用户：&nbsp;<span id="username" style="color:red" >用户名</span>　<a href="login_zjy.html">退出</a></div>
</div>
<div region="center">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
        <div title="首页" >
            <div align="center" style="padding-top: 100px;"><font color="red" size="10">山西传媒学院</font></div>
            <div align="center" style="padding-top: 100px;"><font color="red" size="10">张婧怡同学信息管理系统</font></div>
        </div>
    </div>
</div>
<div region="west" style="width: 200px;" title="导航菜单" split="true">
    <ul id="tree"></ul>
</div>
<div region="south" style="height: 25px;" align="center">版权所有<a href="http://www.zjyzhaojiang.cn/index.html">张婧怡工作室</a></div>
</body>
</html>

(3) 班级信息浏览页面 listCla_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/easyui.css"/>
    <link rel="stylesheet" href="css/icon.css"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'班级信息列表(datagrid--dialog--form方式编辑)'">
        <table id="datagrid"  class="easyui-datagrid" style="width:100%;height:100%"
               url="php/listCla_zjy.php"
               toolbar="#dgtoolbar" pagination="true"
               pageSize="15"
               pageList="[20,15,10]"
               rownumbers="true" fitColumns="true"  idField="id"  fit="true">
            <thead>
            <tr>
                <th data-options="field:'id',align:'center',width:'6%'">id</th>
                <th data-options="field:'名称',halign:'center',width:'9%'">班级名称</th>
                <th data-options="field:'备注',halign:'center',width:'9%'">备注</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</body>
</html>

(4) 同学信息浏览页面 listStu_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>张婧怡同学列表</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/icon.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
</head>
<body>
<table id="datagrid" class="easyui-datagrid" title="同学信息浏览"
       pagination="true"  idField="id" toolbar="#dgtoolbar"
       rownumbers="true" fitColumns="true" fit="true" singleSelect="true"  url='php/listStu_zjy.php'>
    <thead>
    <tr>
        <th field="id" width="60" align="center" >学生id</th>
        <th field="班级id" width="60" align="center" >班级id</th>
        <th field="班级名称" width="80" align="center" >班级名称</th>
        <th field="学号" width="100" align="center" >学号</th>
        <th field="姓名" width="80" align="center" >姓名</th>
        <th field="性别" width="60"  align="center" >性别</th>
        <th field="生日" width="100" align="center" >生日</th>
        <th field="手机号" width="120" align="center" >手机号</th>
        <th field="QQ号" width="120"  align="center" >QQ号</th>
        <th field="EMail" width="200" align="center" >EMail</th>
        <th field="籍贯" width="180" align="left" >籍贯</th>
        <th field="住址" width="180" align="left">住址</th>
        <th field="照片" width="110" formatter="showImg" align="center">照片</th>
    </tr>
    </thead>
</table>
<div id="dgtoolbar">
    <input class="easyui-searchbox" searcher='doSearch' data-options="prompt:'请输入姓名中包含的关键词'" style="width:230px;vertical-align:middle;">
</div>
<script>
    function showImg(value, row, index){
        if(row.id){
            return "<img style='width:30px;height:40px;' border='1' src='php/getPhoto_zjy.php?id="+row.id+"'/>";
        }
    }
    //搜索按钮事件
    function doSearch(value){
        $("#datagrid").datagrid("reload",{
            "Search": value
        });
    }
</script>

</body>
</html>>

(5) 班级信息管理页面之一(edatagrid)，editClass_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>张婧怡的网站</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/icon.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/jquery.edatagrid.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script>
        $(function(){
            $('#dg').edatagrid({
                url: 'php/listCla_zjy.php',
                saveUrl: 'php/addClass_zjy.php',
                updateUrl: 'php/updateClass_zjy.php',
                destroyUrl: 'php/deleteClass_zjy.php',
                destroyMsg:{
                    norecord:{ // when no record is selected
                        title:'警告',
                        msg:'没有选择要删除的数据行(记录).' },
                    confirm:{  // when select a row
                        title:'请确认',
                        msg:'是否确实要删除选择的行?'
                    }
                }
            });
        });
    </script>
</head>
<body>
<table id="dg" title="班级表"  toolbar="#toolbar" pagination="true"  idField="id"
       rownumbers="true" fitColumns="true" fit="true" singleSelect="true">
    <thead>
    <tr>
        <th field="id" width="60" align="center" editor="{type:'validatebox',options:{required:true}}">id</th>
        <th field="名称" width="80"  align="center" editor="text">名称</th>
        <th field="备注" width="200" align="left" editor="text">备注</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">增加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a>
</div>
</body>
</html>

(6) 同学信息管理页面之一(edatagrid)，editStudent_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>张婧怡的网站</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/icon.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/jquery.edatagrid.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script src="js/validatebox.rules.js" charset="utf-8"></script>
    <script>
        let classnames;
        $.ajax("php/getClassNames_zjy.php",{
            type:'get',
            async: false,
            success:function(data){
                classnames = JSON.parse(data);
            }
        });
        $(function(){
            $('#dg').edatagrid({
                url: 'php/listStu_zjy.php',
                saveUrl: 'php/addStudent_zjy.php',
                updateUrl: 'php/updateStudent_zjy.php',
                destroyUrl: 'php/deleteStudent_zjy.php',
                destroyMsg:{
                    norecord:{ // when no record is selected
                        title:'警告',
                        msg:'没有选择要删除的数据行(记录).' },
                    confirm:{  // when select a row
                        title:'请确认',
                        msg:'是否确实要删除选择的行?'
                    }
                }
            });
        });
    </script>
</head>
<body>
<table id="dg" title="张婧怡同学表(edatagrid)"  toolbar="#toolbar" pagination="true"  idField="id"
       rownumbers="true" fitColumns="true" fit="true" singleSelect="true">
    <thead>
    <tr>
        <th data-options="field:'id',align:'center',width:'5%'">学生id</th>
        <th field="班级id" width="130" align="center" editor="{type:'combobox', options:{data: classnames,
                            valueField: 'value', textField: 'text', editable: false, required: true} }">班级id</th>
        <th field="班级名称" width="130" halign="center" editor="{}" hidden="true">班级名称</th>
        <th field="学号" width="130" align="center" editor="{type:'numberbox',options:{required:true,validType:'length[3,10]'}}">学号</th>
        <th field="姓名" width="100" align="center" editor="{type:'validatebox',options:{required:true,validType:['CHS','length[2,8]']}}">姓名</th>
        <th field="性别" width="80"  align="center" editor="{type:'combobox',  options:{
                        data: [{value:'男',text:'男'},{value:'女',text:'女'}]}}">性别</th>
        <th field="生日" width="130" align="center"  editor="{type:'datebox'}">生日</th>
        <th field="手机号" width="150" align="center" editor="{type:'numberbox',options:{required:true,validType:'mobile'}}">手机号</th>
        <th field="QQ号" width="160"  align="center" editor="{type:'validatebox',options:{required:true,validType:'QQ'}}">QQ号</th>
        <th field="EMail" width="280" align="center" editor="{type:'validatebox',options:{required:true,validType:'email'}}">EMail</th>
        <th field="籍贯" width="200" align="left" editor="{type:'validatebox',options:{required:true,validType:['CHS','length[3,15]']}}">籍贯</th>
        <th field="住址" width="200" align="left" editor="{type:'validatebox',options:{required:true,validType:'length[2,28]'}}">住址</th>
        <th field="照片" width="110" formatter="showImg" align="center">照片</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">增加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a>
</div>

<script>
    function showImg(value, row, index){
        if(row.id){
            return "<img style='width:30px;height:40px;' border='1' src='php/getPhoto_zjy.php?id="+row.id+"'/>";
        }
    }
</script>
</body>
</html>

(7) 班级信息管理页面之二(datagrid--dialog--form)，editCla_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="css/easyui.css"/>
    <link rel="stylesheet" href="css/icon.css"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script src="js/manager.js" charset="utf-8"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'班级信息列表(datagrid--dialog--form方式编辑)'">
        <table id="datagrid"  class="easyui-datagrid" style="width:100%;height:100%"
               url="php/listCla_zjy.php"
               toolbar="#dgtoolbar" pagination="true"
               pageSize="15"
               pageList="[20,15,10]"
               rownumbers="true" fitColumns="true"  idField="id"  fit="true" singleSelect="true">
            <thead>
            <tr>
                <th data-options="field:'id',align:'center',width:'6%'">id</th>
                <th data-options="field:'名称',halign:'center',width:'9%'">班级名称</th>
                <th data-options="field:'备注',halign:'center',width:'9%'">备注</th>
            </tr>
            </thead>
        </table>
        <div id="dgtoolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addDialog('添加班级')">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="editDialog('修改班级')">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="removeData('删除班级','php/deleteClass_zjy.php')">删除</a>
            <div style="float:right;">
                <input class="easyui-searchbox" searcher='doSearch' data-options="prompt:'请输入班级名称中包含的关键词'" style="width:230px;vertical-align:middle;">
                <a href="#" class="easyui-linkbutton" plain="true" >高级检索</a>
            </div>
        </div>
    </div>
    <div id="modifydg" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px" closed="true">
        <form id="fim" method="post" novalidate>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label=" id:" name="id" readonly style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="班级名称:" name="名称" required style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <textarea class="easyui-textbox" label="备注:" name="备注" multiline="true" style="width:100%;height:60px" required></textarea>
            </div>
            <div style="text-align:center">
                <input class="easyui-linkbutton" type="button" value="保存" style="width:80px;height:30px" onclick='saveData("php/updateClass_zjy.php")'>
                <a href="#" class="easyui-linkbutton" style="width:80px;height:30px" onclick="javascript:$('#modifydg').dialog('close')">取消</a>
            </div>
        </form>
    </div>
    <div id="adddg" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px" closed="true">
        <form id="fam" method="post" novalidate>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label=" id:" name="id" readonly style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="班级名称:" name="名称" required style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <textarea class="easyui-textbox" label="备注:" name="备注" multiline="true" style="width:100%;height:60px" required></textarea>
            </div>
            <div style="text-align:center">
                <input class="easyui-linkbutton" type="button" value="添加" style="width:80px;height:30px" onclick='addData("php/addClass_zjy.php")'>
                <a href="#" class="easyui-linkbutton" style="width:80px;height:30px" onclick="javascript:$('#adddg').dialog('close')">取消</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

(8) 同学信息管理页面之二(datagrid--dialog--form)，editStu_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="css/easyui.css"/>
    <link rel="stylesheet" href="css/icon.css"/>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="UTF-8"></script>
    <script src="js/validatebox.rules.js" charset="UTF-8"></script>
    <script src="js/manager.js" charset="UTF-8"></script>
    <script>
        function showImg(value, row, index){
            if(row.id){
                return "<img style='width:30px;height:40px;' border='1' src='php/getPhoto_zjy.php?id="+row.id+"'/>";
            }
        }
     </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',title:'同学信息列表(datagrid--dialog--form方式编辑)'">
        <table id="datagrid"  class="easyui-datagrid" style="width:100%;height:100%"
               url="php/listStu_zjy.php"
               toolbar="#dgtoolbar" pagination="true"
               pageSize="15"
               pageList="[20,15,10]"
               rownumbers="true" fitColumns="true"  idField="id"  fit="true" singleSelect="true" >
            <thead>
            <tr>
                <th data-options="field:'id',align:'center',width:'5%'">学生id</th>
                <th data-options="field:'班级id',align:'center',width:'5%'">班级id</th>
                <th data-options="field:'班级名称',align:'center',width:'8%'">班级名称</th>
                <th data-options="field:'学号',align:'center',width:'8%'">学号</th>
                <th data-options="field:'姓名',align:'center',width:'6%'">姓名</th>
                <th data-options="field:'性别',align:'center',width:'3%'">性别</th>
                <th data-options="field:'生日',align:'center',width:'8%'">生日</th>
                <th data-options="field:'手机号',align:'center',width:'8%'">手机号</th>
                <th data-options="field:'QQ号',align:'center',width:'8%'">QQ号</th>
                <th data-options="field:'EMail',align:'center',width:'12%'">EMail</th>
                <th data-options="field:'籍贯',halign:'center',width:'12%'">籍贯</th>
                <th data-options="field:'住址',halign:'center',width:'12%'">住址</th>
                <th field="照片" width="110" formatter="showImg" align="center">照片</th>
            </tr>
            </thead>
        </table>
        <div id="dgtoolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addDialog('添加同学')">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="editDialog('修改同学信息')">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="removeData('删除同学信息','php/deleteStudent_zjy.php')">删除</a>
            <div style="float:right;">
                <input class="easyui-searchbox" searcher='doSearch' data-options="prompt:'请输入姓名中包含的关键词'" style="width:230px;vertical-align:middle;">
                <a href="#" class="easyui-linkbutton" plain="true" >高级检索</a>
            </div>
        </div>
    </div>

    <div id="modifydg" class="easyui-dialog" style="width:500px;height:560px;padding:10px 20px"
         closed="true">
        <form id="fim" method="post" novalidate>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="学生id:" name="学生id" readonly style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-combobox" label="班级id:" name="班级id" required style="width:90%"
                       data-options="valueField:'value',textField:'text',url:'php/getClassNames_zjy.php'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="学号:" name="学号" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="姓名:" name="姓名" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-combobox" label="性别:" name="性别" data-options="data:[{value:'男',text:'男'},{value:'女',text:'女'}]" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-datebox" label="生日:" name="生日" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="手机号:" name="手机号" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="QQ号:" name="QQ号" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="EMail:" name="EMail" required validType="email" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="籍贯:" name="籍贯" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="住址:" name="住址" required style="width:90%">
            </div>
            <div style="text-align:center">
                <input class="easyui-linkbutton" type="button" value="保存" style="width:80px;height:30px" onclick='saveData("php/updateStudent_zjy.php")'>
                <a href="#" class="easyui-linkbutton" style="width:80px;height:30px" onclick="javascript:$('#modifydg').dialog('close')">取消</a>
            </div>
        </form>
    </div>


    <div id="adddg" class="easyui-dialog" style="width:500px;height:500px;padding:10px 20px" closed="true">
        <form id="fam" method="post" novalidate>
            <div style="margin-bottom:10px">
                <input class="easyui-combobox" label="班级id:" name="班级id" required style="width:90%"
                       data-options="valueField:'value',textField:'text',url:'php/getClassNames_zjy.php'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox easyui-validatebox" label="学号:" name="学号" data-options="required:true,validType:['integ','length[3,10]']" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox easyui-validatebox" label="姓名:" name="姓名" data-options="required:true,validType:['CHS','length[2,8]']" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-combobox" label="性别:" name="性别" data-options="data:[{value:'男',text:'男'},{value:'女',text:'女'}]" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-datebox" label="生日:" name="生日" required style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox easyui-validatebox" label="手机号:" name="手机号" data-options="required:true,validType:'mobile'" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox easyui-validatebox" label="QQ号:" name="QQ号" data-options="required:true,validType:'QQ'" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="EMail:" name="EMail" required validType="email" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox easyui-validatebox" label="籍贯:" name="籍贯" data-options="required:true,validType:['CHS','length[3,8]']" style="width:90%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox easyui-validatebox" label="住址:" name="住址" required style="width:90%">
            </div>
            <div style="text-align:center">
                <input class="easyui-linkbutton" type="button" value="添加" style="width:80px;height:30px" onclick='addData("php/addStudent_zjy.php")'>
                <a href="#" class="easyui-linkbutton" style="width:80px;height:30px" onclick="javascript:$('#adddg').dialog('close')">取消</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

(9) 设置密码页面，setPass_zjy.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>张婧怡的网站</title>
    <link rel="stylesheet" href="css/easyui.css">
    <link rel="stylesheet" href="css/icon.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script>
    $(function() {
        $("#重置密码").click(function() {
            $.ajax({
                type : "post",
                url : "php/setPass_zjy.php",
                data : {用户名:$("#用户名").val(), 原密码:hex_md5($("#原密码").val()), 新密码:hex_md5($("#新密码").val())},
                dataType : "json", //返回数据类型
                success : function(data) {
                    if (data.success) {
                        $.messager.alert("告知", "密码重置成功!", "info");
                        $("#win").panel("close");
                    }
                    else
                        $.messager.alert("消息提醒","密码重置失败!", "warning");
                }
            });
        });
    })
</script>
</head>
<body>
<div id="win" class="easyui-window" title="重置密码"
     style="width: 400px; height: 300px;"
     data-options="
         iconCls:'icon-ok',
         collapsible: false,
         maximizable: false,
         minimizable: false,
         resizable: false,
         modal: true,
         border:'thin',
         cls:'c1',">
    <form id="ff" style="padding: 30px 20px 20px 20px;">
        <div style="margin-bottom: 10px; text-align: center;">
            <input class="easyui-textbox" id="用户名" style="width: 80%"
                   data-options="prompt:'输入用户名',required:true">
        </div>
        <div style="margin-bottom: 10px; text-align: center;">
            <input class="easyui-passwordbox" id="原密码" style="width: 80%"
                   data-options="prompt:'输入原密码',required:true">
        </div>
        <div style="margin-bottom: 10px; text-align: center;">
            <input class="easyui-passwordbox" id="新密码" style="width: 80%"
                   data-options="prompt:'输入新密码',required:true">
        </div>
        <div style="padding: 5px; text-align: center;">
            <input type="button" id="重置密码" value="重置密码" class="easyui-linkbutton" iconCls="icon-ok" style="width:50%;height:32px">
        </div>
    </form>
</div>
</body>
</html>

(10) 页面editStu_zjy.html、editCla_zjy.html的manager.js

//添加对话框
function addDialog(_title){
    $('#adddg').dialog('open').dialog('setTitle','添加'+_title+'信息');
    //数据清空
    $('#fam').form('clear');

}

//修改对话框
function editDialog(_title){
    //选中某一行
    let row = $('#datagrid').datagrid('getSelected');
    if (row){
        $('#modifydg').dialog('open').dialog('setTitle',_title);
        //显示未修改前的信息
        $('#fim').form('load',row);
    } else
        $.messager.show({title:'提示',msg:'请选择一行信息修改。',showType:'show'});
}

//修改对话框
function photoDialog(_title){
    //选中某一行
    let row = $('#datagrid').datagrid('getSelected');
    if (row){
        $('#photodg').dialog('open').dialog('setTitle',_title);
        //显示未修改前的信息
        $('#pfim').form('load',row);
    } else
        $.messager.show({title:'提示',msg:'请选择一行信息上传或删除照片。',showType:'show'});
}


//保存数据事件
function saveData(_url){
    let valid = $("#fim").form('validate');
    if (!valid){
        $.messager.alert({title: 'Error',msg: '修改的数据有错，请修正。'});
    } else
        $.ajax(_url,{
            type:'post',
            data:getFormData("#fim"),
            success:function(data){
                let result = eval('('+data+')');
                if (result.success){
                    $('#modifydg').dialog('close');        // close the dialog
                    $('#datagrid').datagrid('reload');    // reload the user data
                    $.messager.show({title: 'Success',msg: '修改成功'});
                } else {
                    $.messager.show({title: 'Error',msg: result.msg    });
                }
            }
        }); 
}

//获取Form数据函数
function getFormData(formId){
    let data = {};
    let results = $(formId).serializeArray();
    $.each(results,function(index,item){
        //文本表单的值不为空才处理
        if(item.value && $.trim(item.value) !== ""){
            if(!data[item.name]){
                data[item.name]=item.value;
            }else{
                //name属性相同的表单，值以英文,拼接
                data[item.name]=data[item.name]+','+item.value;
            }
        }
    });
    //console.log(data);
    return data;
}

//搜索按钮事件
function doSearch(value){
    $("#datagrid").datagrid("reload",{
        "Search": value
    });
}


//添加数据事件
function addData(_url){
    let valid = $("#fam").form('validate');
    if (!valid){
        $.messager.alert({title: 'Error',msg: '添加的数据有错，请修正。'});
    } else
        $.ajax(_url,{
            type:'post',
            data:getFormData("#fam"),
            success:function(data){
                let result = eval('('+data+')');
                if (result.success){
                    $('#adddg').dialog('close');        // close the dialog
                    $('#datagrid').datagrid('reload');    // reload the user data
                    $.messager.show({title: 'Success',msg: '添加成功'});
                } else {
                    $.messager.show({title: 'Error',msg: result.msg    });
                }
            }
        }); 
}


//删除按钮、数据事件 'remove_users'
function removeData(_title,_url){
    let row = $('#datagrid').datagrid('getSelected');

    if (row){
        $.messager.confirm('Confirm','确定要删除 id='+row.id + '的' + _title+'?',function(r){
            if (r){
                $.ajax(_url,{
                    type:'post',
                    data:{id:row.id},
                    success:function(data){
                        let result = eval('('+data+')');
                        if (result.success){
                            $('#datagrid').datagrid('reload');    // reload the user data
                            $.messager.show({ title: 'Success', msg: '删除成功' });
                        } else {
                            $.messager.show({title: 'Error', msg: result.msg });
                        }
                    }
                });
            }
        });
    } else
        $.messager.show({title:'提示',msg:'请选择一行信息删除。',showType:'show'});
}

(11) 页面editStudent_zjy.html、editClass_zjy.html的validatebox.rules.js

 // 自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
        CHS: {
          validator: function (value, param) {
            return /^[\u0391-\uFFE5]+$/.test(value);
          },
          message: '请输入汉字'
        },
        english : {// 验证英语
              validator : function(value) {
                  return /^[A-Za-z]+$/i.test(value);
              },
              message : '请输入英文'
          },
          ip : {// 验证IP地址
              validator : function(value) {
                  return /\d+\.\d+\.\d+\.\d+/.test(value);
              },
              message : 'IP地址格式不正确'
          },
        ZIP: {
          validator: function (value, param) {
            return /^[0-9]\d{5}$/.test(value);
          },
          message: '邮政编码不存在'
        },
        QQ: {
          validator: function (value, param) {
            return /^[1-9]\d{4,10}$/.test(value);
          },
          message: 'QQ号码不正确'
        },
        mobile: {
          validator: function (value, param) {
            return /^(?:13\d|15\d|18\d)-?\d{5}(\d{3}|\*{3})$/.test(value);
          },
          message: '手机号码不正确'
        },
        tel:{
          validator:function(value,param){
            return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})?(-\d{1,6})?$/.test(value);
          },
          message:'电话号码不正确'
        },
        mobileAndTel: {
          validator: function (value, param) {
            return /(^([0\+]\d{2,3})\d{3,4}\-\d{3,8}$)|(^([0\+]\d{2,3})\d{3,4}\d{3,8}$)|(^([0\+]\d{2,3}){0,1}13\d{9}$)|(^\d{3,4}\d{3,8}$)|(^\d{3,4}\-\d{3,8}$)/.test(value);
          },
          message: '请正确输入电话号码'
        },
        number: {
          validator: function (value, param) {
            return /^[0-9]+.?[0-9]*$/.test(value);
          },
          message: '请输入数字'
        },
        money:{
          validator: function (value, param) {
               return (/^(([1-9]\d*)|\d)(\.\d{1,2})?$/).test(value);
           },
           message:'请输入正确的金额'

        },
        mone:{
          validator: function (value, param) {
               return (/^(([1-9]\d*)|\d)(\.\d{1,2})?$/).test(value);
           },
           message:'请输入整数或小数'

        },
        integer:{
          validator:function(value,param){
            return /^[+]?[1-9]\d*$/.test(value);
          },
          message: '请输入最小为1的整数'
        },
        integ:{
          validator:function(value,param){
            return /^[+]?[0-9]\d*$/.test(value);
          },
          message: '请输入整数'
        },
        range:{
          validator:function(value,param){
            if(/^[1-9]\d*$/.test(value)){
              return value >= param[0] && value <= param[1]
            }else{
              return false;
            }
          },
          message:'输入的数字在{0}到{1}之间'
        },
        minLength:{
          validator:function(value,param){
            return value.length >=param[0]
          },
          message:'至少输入{0}个字'
        },
        maxLength:{
          validator:function(value,param){
            return value.length<=param[0]
          },
          message:'最多{0}个字'
        },
        //select即选择框的验证
        selectValid:{
          validator:function(value,param){
            if(value == param[0]){
              return false;
            }else{
              return true ;
            }
          },
          message:'请选择'
        },
        idCode:{
          validator:function(value,param){
            return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);
          },
          message: '请输入正确的身份证号'
        },
        loginName: {
          validator: function (value, param) {
            return /^[\u0391-\uFFE5\w]+$/.test(value);
          },
          message: '登录名称只允许汉字、英文字母、数字及下划线。'
        },
        equalTo: {
          validator: function (value, param) {
            return value == $(param[0]).val();
          },
          message: '两次输入的字符不一至'
        },
        englishOrNum : {// 只能输入英文和数字
              validator : function(value) {
                  return /^[a-zA-Z0-9_ ]{1,}$/.test(value);
              },
              message : '请输入英文、数字、下划线或者空格'
          },
         xiaoshu:{ 
            validator : function(value){ 
            return /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/.test(value);
            }, 
            message : '最多保留两位小数！'    
            },
        ddPrice:{
        validator:function(value,param){
          if(/^[1-9]\d*$/.test(value)){
            return value >= param[0] && value <= param[1];
          }else{
            return false;
          }
        },
        message:'请输入1到100之间正整数'
      },
      jretailUpperLimit:{
        validator:function(value,param){
          if(/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)){
            return parseFloat(value) > parseFloat(param[0]) && parseFloat(value) <= parseFloat(param[1]);
          }else{
            return false;
          }
        },
        message:'请输入0到100之间的最多俩位小数的数字'
      },
      rateCheck:{
        validator:function(value,param){
          if(/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)){
            return parseFloat(value) > parseFloat(param[0]) && parseFloat(value) <= parseFloat(param[1]);
          }else{
            return false;
          }
        },
        message:'请输入0到1000之间的最多俩位小数的数字'
      }
});

3.后端php

(1) 数据库连接conn_zjy.php

<?php
   header("content-type:text/html;charset=utf-8");
   $dsn="mysql:dbname=张婧怡的数据库;host=公网ip;port=3306;charset=utf8";
   $db_user='用户名';
   $db_pass='*秘密*';;
   //$opt = array(PDO::MYSQL_ATTR_INIT_COMMAND=>'set names utf8');
   try{
      $pdo = new PDO($dsn,$db_user,$db_pass);//,$opt);
      // echo "ok";
   }catch(PDOException $e){
      die("数据库连接失败!!!".$e->getMessage()."<br>");
      // echo "err";
   }
?>

(2) 分页、搜索班级信息listCla_zjy.php

<?php
   //分页、搜索获取信息
   $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
   $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 20;
   $name = isset($_POST['Search']) ? $_POST['Search'] : "";
   $offset = ($page-1)*$rows;
   $result = array();
   include "conn_zjy.php";
   $sth = $pdo->prepare("select count(*) as c from 班级表_张婧怡");
   $sth->execute();
   $result["total"] = $sth->fetchColumn();
   if($name == "")
      $sql= "SELECT id,名称,备注 FROM 班级表_张婧怡  limit $offset,$rows";
   else
      $sql= "SELECT id,名称,备注 FROM 班级表_张婧怡 where 名称 like '%$name%' limit $offset,$rows";
   $stmt = $pdo->prepare($sql);
    $stmt->execute( );
   $items = $stmt->fetchAll(PDO::FETCH_ASSOC);
   $result["rows"] = $items;
   echo json_encode($result, JSON_UNESCAPED_UNICODE);
   $pdo = null;
 ?>

(3) 分页、搜索同学信息listStu_zjy.php

<?php
    //分页获取所有信息
    $page = isset($_POST['page']) ? $_POST['page'] : 1;
    $rows = isset($_POST['rows']) ? $_POST['rows'] : 20;
    $name = isset($_POST['Search']) ? $_POST['Search'] : "";

    $offset = ($page-1)*$rows;
    include "conn_zjy.php";

    $sth = $pdo->prepare("select count(*) as c from 同学表_张婧怡");
    $sth->execute();
    $result = array();
    $result["total"] = $sth->fetchColumn();
    if($name == "")
        $sql= "SELECT id,学号,姓名,性别,生日,手机号,QQ号,EMail,籍贯,住址,班级id, 班级名称 FROM 同学视图_张婧怡 limit $offset,$rows";
    else
        $sql= "SELECT id,学号,姓名,性别,生日,手机号,QQ号,EMail,籍贯,住址,班级id, 班级名称 FROM 同学视图_张婧怡 where 姓名 like '%$name%' limit $offset,$rows";
    $stmt = $pdo->prepare($sql);
    $stmt->execute( );
    $items = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $result["rows"] = $items;
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
    $pdo = null;
 ?>

(4) 为班级id下列列表框获取班级名称信息getClassNames _zjy.php

<?php
   include "conn_zjy.php";
   $sql= "SELECT id as value, 名称 as text FROM 班级表_张婧怡";
   $stmt = $pdo->prepare($sql);
   $stmt->execute( );
   $items = $stmt->fetchAll(PDO::FETCH_ASSOC);
   echo json_encode($items, JSON_UNESCAPED_UNICODE);
 ?>

(5) 添加班级addClass_zjy.php

<?php
   $mc = $_POST["名称"];
   $bz = $_POST["备注"];
   include 'conn_zjy.php';
   $sql = "insert into 班级表_张婧怡(名称, 备注) values ('$mc', '$bz') ";
   $res=$pdo->exec($sql);
   //echo '影响行数：'.$res;
   if ($res ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

(6) 添加同学addStudent_zjy.php

<?php
$class = $_REQUEST['班级id'];
$stuId = $_REQUEST['学号'];
$name = $_REQUEST['姓名'];
$sex = $_REQUEST['性别'];
$date = $_REQUEST['生日'];
$phone = $_REQUEST['手机号'];
$qq = $_REQUEST['QQ号'];
$email = $_REQUEST['EMail'];
$local = $_REQUEST['籍贯'];
$adress = $_REQUEST['住址'];
include 'conn_zjy.php';
$sql = "insert into 同学表_张婧怡(学号,姓名,性别,生日,手机号,QQ号,EMail,籍贯,住址,班级id) values('$stuId','$name','$sex','$date','$phone','$qq','$email','$local','$adress','$class')";
   $res=$pdo->exec($sql);
   //echo '影响行数：'.$res;
   if ($res ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

(7) 修改保存班级updateClass_zjy.php

<?php
   $id = $_POST["id"];
   $mc = $_POST["名称"];
   $bz = $_POST["备注"];

   include 'conn_zjy.php';
   $sql = "update 班级表_张婧怡 set 名称 = '$mc', 备注 = '$bz' where id = $id ";
   $res=$pdo->exec($sql);
   //echo '影响行数：'.$res;
   if ($res ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

(8) 修改保存同学updateStudent_zjy.php

<?php
$id = $_REQUEST['id'];
$class =  $_REQUEST['班级id'];
$stuId =  $_REQUEST['学号'];
$name =  $_REQUEST['姓名']);
$sex =  $_REQUEST['性别'];
$date = $_REQUEST['生日']);
$phone =  $_REQUEST['手机号'];
$qq =  $_REQUEST['QQ号'];
$email =  $_REQUEST['EMail'];
$local =  $_REQUEST['籍贯'];
$adress =  $_REQUEST['住址'];
//$adress =  htmlspecialchars($_REQUEST['住址']);
include 'conn_zjy.php';
$sql = "update 同学表_张婧怡 set 班级id='$class',学号='$stuId',姓名='$name',性别='$sex',生日='$date',手机号='$phone',QQ号='$qq',EMail='$email',籍贯='$local',住址='$adress' where 学生id=$学生id";
//@mysql_query($sql);
$result=$pdo->exec($sql);
   if ($result ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误$id。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

(9) 删除班级deleteClass_zjy.php

<?php
   $id = intval($_REQUEST['id']);
   include 'conn_zjy.php';
   $sql = "delete from 班级表_张婧怡 where id = $id ";
   $res=$pdo->exec($sql);
   //echo '影响行数：'.$res;
   if ($res ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

(10) 删除同学deleteStudent_zjy.php

<?php
$id = intval($_REQUEST['id']);
include 'conn_zjy.php';
$sql = "delete from 同学表_张婧怡 where id=$id";
   $res=$pdo->exec($sql);
   //echo '影响行数：'.$res;
   if ($res ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

(11) 登录login _zjy.php

<?php
   header("content-Type: text/html; charset=utf-8");//字符编码设置
   $username = $_POST['用户名'];
   $pwd = $_POST['口令'];
   $mm = md5($username.$pwd);
   include 'conn_zjy.php';
   $sql = "select 用户名 from 用户表_张婧怡 where (用户名 = '$username' and 密码 = '$mm' );";

   $res = $pdo->query($sql);
   $num_rows =  $res->rowCount();
   if ($num_rows==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
?>

(12) 获取同学照片getPhoto_zjy.php

<?php
    $id = isset($_GET['id']) ? $_GET['id'] : 500000;
    include "conn_zjy.php";
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "select 照片, 照片类型 from 同学表_张婧怡 where id = :id;";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':id', $id, PDO::PARAM_INT);
    $stmt->execute();
    $row = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($row) {
      // 设置内容类型为图像类型（这里以JPEG为例）
      header('Content-Type: image/'.$row['照片类型']);
      // 直接输出图像数据到浏览器
      echo $row['照片'];
    } else {
      echo 'Image not found.';
    }
 ?>

(13) 设置密码setPass_zjy.php

<?php
   $username = $_POST['用户名'];
   $oldpwd = $_POST['原密码'];
   $newpwd = $_POST['新密码'];
   $jmm = md5($username.$oldpwd );
   $xmm = md5($username.$newpwd );
   include 'conn_zjy.php';
//测试下密码修改功能，完成后再把密码改回来--12345678
//修改通过后屏蔽下句，以防密码修改进不了系统
   $sql = "update 用户表_张婧怡 set 密码 = '$xmm' where (用户名 = '$username' and 密码 = '$jmm' );";
   $res=$pdo->exec($sql);
   if ($res ==1){
      echo json_encode(array('success'=>true));
   } else {
      echo json_encode(array('msg'=>'出现一些错误。'), JSON_UNESCAPED_UNICODE);
   }
   $pdo = null;
?>

网页元素调用、引用、对应关系：

• 超链接 href

  <a href="...">XXXXXX</a>
  

• 表单提交 action

  <form action="...">...</form>
  action属性值 <==> 后台接收处理的url地址：路径/文件名
  

• Ajax提交 url

  url值 <==> 后台接收处理的url地址：路径/文件名
  

• 表单元素与php

  <input|select|textarea name ="口令"
  name属性 <=> ['...']
  $pwd = $_POST['口令']; | $_GET['口令'])  | $_REQUEST['口令']
  

• Ajax data对象与php

  Ajax data对象的Key值   <=> php的 ['...']
  

• php与数据库

  SQL语句