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

1.数据库

-- 1. 创建数据库    当前数据库；mysql
create database 王骞的数据库 
DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

-- 2.创建用户并授权
CREATE USER `u王骞`@`%` IDENTIFIED BY '密****码';
GRANT all ON `王骞的数据库`.* TO `u王骞`@`%`;
flush privileges;
-- 3. 创建班级表，同学表，用户表   当前数据库；王骞的数据库
-- 班级表：
CREATE TABLE `班级表_王骞`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `名称` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `备注` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE INDEX `名称`(`名称`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 10000 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

INSERT INTO `班级表_王骞` VALUES (10002, '22-2班专升本', '周4上午课');
INSERT INTO `班级表_王骞` VALUES (10003, '22-3班专升本', '周5上午课');
-- 同学表：
CREATE TABLE `同学表_王骞`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `学号` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `姓名` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `性别` enum('男','女') CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `生日` date NOT NULL,
  `手机号` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `QQ号` varchar(12) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `EMail` varchar(25) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `籍贯` varchar(15) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `住址` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `照片类型` varchar(5) CHARACTER SET utf8 COLLATE utf8_general_ci 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
) ENGINE = InnoDB AUTO_INCREMENT = 500000 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

INSERT INTO 同学表_王骞(学号, 姓名, 性别, 生日, 手机号, QQ号, EMail, 籍贯, 住址, 照片类型, 班级id) VALUES 
('301', '崔航瑞', '男', '2002.01.01', '13903519901', '10004081', '10004081@qq.com', '山西省长治市襄垣县', '长畛村', 'jpg', 10003), 
('302', '范鑫雨', '女', '2002.06.01', '13903517742', '10002832', '10002832@qq.com', '山西省长治市黎城县', '古县村', 'jpg', 10003), 
('303', '范月耀', '女', '2002.05.01', '13903510479', '10003514', '10003514@qq.com', '山西省长治市长子县', '慈林镇应城村', 'jpg', 10003), 
('304', '郭秉群', '男', '2001.06.01', '13903512726', '10009033', '10009033@qq.com', '山西省临汾市洪洞县', '堤村乡好义村', 'jpg', 10003), 
('305', '郭龙', '男', '2000.01.01', '13903517168', '10001532', '10001532@qq.com', '山西省太原市万柏林区', '窊流村', 'jpg', 10003), 
('306', '贺超超', '男', '2001.05.01', '13903517567', '10007567', '10007567@qq.com', '山西省运城市河津市', '下化乡杜家湾村', 'jpg', 10003), 
('307', '贺志然', '女', '2002.04.01', '13903519251', '10005946', '10005946@qq.com', '山西省晋城市泽州县', '柳树口镇下村村', 'jpg', 10003), 
('308', '贾佳欣', '女', '2002.07.01', '13903516143', '10003639', '10003639@qq.com', '山西省晋中市太谷区', '范村镇范村', 'jpg', 10003), 
('309', '姜卫涛', '男', '1999.04.01', '13903515753', '10007008', '10007008@qq.com', '山西省临汾市尧都区', '五一东路油库南', 'jpg', 10003), 
('310', '解琦锐', '女', '2001.10.01', '13903516914', '10006914', '10006914@qq.com', '山西省运城市万荣县', '万泉乡庙后村', 'jpg', 10003), 
('311', '景少茹', '女', '2002.05.01', '13903512029', '10003723', '10003723@qq.com', '山西省运城市稷山县', '化峪镇吴嘱村', 'jpg', 10003), 
('312', '寇嘉燕', '女', '2000.06.01', '13903510095', '10007134', '10007134@qq.com', '山西省吕梁市汾阳市', '肖家庄镇玉兰村', 'jpg', 10003), 
('313', '寇振东', '男', '2000.03.01', '13903510882', '10006836', '10006836@qq.com', '山西省太原市万柏林区', '西铭路413小区', 'jpg', 10003), 
('314', '王骞宇', '女', '2001.04.01', '13903515628', '10008844', '10008844@qq.com', '山西省吕梁市文水县', '南庄镇横沟村', 'jpg', 10003), 
('315', '李儒', '女', '2002.09.01', '13903517420', '10008434', '10008434@qq.com', '山西省运城市闻喜县', '桐城镇南宋村', 'jpg', 10003), 
('316', '李雅鹏', '男', '2002.03.01', '13903518392', '10006786', '10006786@qq.com', '山西省大同市云冈区', '新泉街南三路小区', 'jpg', 10003), 
('317', '刘富强', '男', '2002.02.01', '13903519545', '10004027', '10004027@qq.com', '山西省临汾市乡宁县', '西坪头村', 'jpg', 10003), 
('318', '刘昊岩', '男', '2002.11.01', '13903519882', '10003154', '10003154@qq.com', '山西省吕梁市孝义市', '如孟小区', 'jpg', 10003), 
('319', '刘金哲', '男', '2002.09.01', '13903516084', '10006709', '10006709@qq.com', '山西省运城市新绛县', '横桥乡文候村', 'jpg', 10003), 
('320', '刘路锋', '男', '2001.11.01', '13903513935', '10004970', '10004970@qq.com', '河南省安阳市林州市', '榆次区顺城街水泵厂小区', 'jpg', 10003), 
('322', '刘志洋', '男', '2001.09.01', '13903510657', '10002256', '10002256@qq.com', '山西省吕梁市孝义市', '协和瑞苑', 'jpg', 10003), 
('323', '吕文涛', '男', '2002.01.01', '13903516736', '10004988', '10004988@qq.com', '山西省大同市平城区', '煤气小区', 'jpg', 10003), 
('324', '莫雯', '女', '2001.04.01', '13903517541', '10003607', '10003607@qq.com', '河北省唐山市', '大同市云冈区', 'jpg', 10003), 
('325', '穆雪艳', '女', '2002.07.01', '13903515609', '10004024', '10004024@qq.com', '山西省阳泉市平定县', '东门小区', 'jpg', 10003), 
('326', '钱玺睿', '男', '2002.05.01', '13903519253', '10005386', '10005386@qq.com', '山西省运城市河津', '铝厂朝霞小区', 'jpg', 10003), 
('327', '任长生', '男', '2001.08.01', '13903516794', '10009352', '10009352@qq.com', '山西省广灵县', '云冈区安福里东小区', 'jpg', 10003), 
('328', '史鹏程', '男', '1997.09.01', '13903519290', '10000138', '10000138@qq.com', '山西省阳泉市郊区', '郊区荫营镇', 'jpg', 10003), 
('329', '宋佳', '女', '2002.04.01', '13903510682', '10009815', '10009815@qq.com', '山西省清徐县', '清徐县牛家寨村', 'jpg', 10003), 
('330', '宋晓栋', '男', '2002.02.01', '13903519473', '10001579', '10001579@qq.com', '山西省介休市', '介休市宋古乡宋安村', 'jpg', 10003), 
('331', '田佳琪', '男', '2003.08.01', '13903519916', '10003459', '10003459@qq.com', '山西省阳泉市平定县', '供销小区', 'jpg', 10003), 
('332', '王锦涛', '男', '2001.02.01', '13903516288', '10008988', '10008988@qq.com', '山西省阳泉市盂县', '盂县龙泉苑', 'jpg', 10003), 
('333', '王珏麟', '男', '2002.08.01', '13903512693', '10001242', '10001242@qq.com', '山西省阳泉市城区', '城区新华西街南二巷', 'jpg', 10003), 
('334', '王丽丽', '女', '2001.01.01', '13903516003', '10004040', '10004040@qq.com', '山西省临汾市洪洞县', '曲亭镇范村', 'jpg', 10003), 
('335', '王睿阳', '男', '1999.08.01', '13903510931', '10003004', '10003004@qq.com', '山西省晋中市介休市', '介休市裕华路', 'jpg', 10003), 
('336', '魏子超', '男', '2001.03.01', '13903517886', '10001573', '10001573@qq.com', '山西省晋城市泽州县', '泽州县高都镇泊村村', 'jpg', 10003), 
('337', '武冠呈', '男', '2002.11.01', '13903519614', '10005257', '10005257@qq.com', '山西省吕梁市文水县', '文水县下曲镇', 'jpg', 10003), 
('338', '辛春佑', '男', '2002.02.01', '13903519735', '10007550', '10007550@qq.com', '山西省临汾市尧都区', '尧都区水门北街', 'jpg', 10003), 
('339', '闫志洋', '男', '2001.03.01', '13903518234', '10004105', '10004105@qq.com', '山西省临汾市安泽县', '安泽县和谐家园', 'jpg', 10003), 
('340', '杨佳佳', '女', '2002.05.01', '13903512710', '10008835', '10008835@qq.com', '山西省晋城市泽州县', '晋庙铺镇晋庙铺村', 'jpg', 10003), 
('341', '杨紫嫣', '女', '2002.09.01', '13903515969', '10002201', '10002201@qq.com', '河北省定州市', '北城区东方名邸小区', 'jpg', 10003), 
('342', '袁媛', '女', '2001.04.01', '13903514160', '10008196', '10008196@qq.com', '山西省忻州市神池县', '神池县幸福小区', 'jpg', 10003), 
('343', '张承圆', '女', '2002.01.01', '13903515973', '10008201', '10008201@qq.com', '山西省朔州市平鲁区', '朔城区豪德三期', 'jpg', 10003), 
('344', '张佳曼', '女', '2002.02.01', '13903517212', '10000756', '10000756@qq.com', '山西省晋城市泽州县', '泽州县大阳镇四分街村', 'jpg', 10003), 
('345', '张锦波', '男', '2002.09.01', '13903518289', '10008523', '10008523@qq.com', '山西省大同市灵丘县', '灵丘县和之美', 'jpg', 10003), 
('346', '张蒙赐', '男', '2002.01.01', '13903510748', '10009558', '10009558@qq.com', '山西省晋城市阳城县', '阳城县东冶镇古河村', 'jpg', 10003), 
('347', '张文椿', '男', '2001.08.01', '13903515352', '10007648', '10007648@qq.com', '山西省晋中市平遥县', '平遥县襄垣乡府底村', 'jpg', 10003), 
('348', '张雅雅', '女', '2002.02.01', '13903516786', '10007009', '10007009@qq.com', '山西省晋城市高平市', '高平市原村乡窑则头村', 'jpg', 10003), 
('349', '张钰汶', '男', '1999.08.01', '13903510526', '10008656', '10008656@qq.com', '山西省晋中市', '祁县昭馀镇丰泽村', 'jpg', 10003), 
('350', '郑志倩', '女', '2002.03.01', '13903510159', '10007977', '10007977@qq.com', '山西省太原市', '小店区昌盛西街浦东经典家园', 'jpg', 10003), 
('201', '曹璐静', '女', '2003.05.01', '13903512169', '10005612', '10005612@qq.com', '河北邯郸', '大名县埝头乡小龙村', 'jpg', 10002), 
('202', '车凯文', '男', '2002.06.01', '13903511428', '10005480', '10005480@qq.com', '山西吕梁', '柳林县成家庄镇', 'jpg', 10002), 
('203', '陈凯芸', '女', '2002.01.01', '13903515721', '10007650', '10007650@qq.com', '山西晋城', '高平市神农镇庄里村', 'jpg', 10002), 
('204', '陈彦奚', '女', '2001.06.01', '13903517230', '10001348', '10001348@qq.com', '山西晋中', '祁县', 'jpg', 10002), 
('205', '陈亦浓', '男', '2002.02.01', '13903513297', '10000573', '10000573@qq.com', '山西阳泉', '矿区桃源新居', 'jpg', 10002), 
('206', '楚凯鑫', '男', '2002.01.01', '13903511941', '10002050', '10002050@qq.com', '山西临汾', '翼城县唐兴镇上石村', 'jpg', 10002), 
('207', '樊宏伟', '男', '2001.01.01', '13903514334', '10003549', '10003549@qq.com', '山西吕梁', '临县三交镇东坡村', 'jpg', 10002), 
('208', '高璇', '女', '2001.07.01', '13903517090', '10008616', '10008616@qq.com', '山西吕梁', '柳林县', 'jpg', 10002), 
('209', '郭金钰', '男', '2001.11.01', '13903513637', '10004231', '10004231@qq.com', '山西晋城', '阳城县河北镇', 'jpg', 10002), 
('210', '郭丽午', '女', '2001.10.01', '13903517460', '10001660', '10001660@qq.com', '山西忻州', '五台县', 'jpg', 10002), 
('211', '韩雷正', '男', '2002.09.01', '13903518890', '10004746', '10004746@qq.com', '山西晋城', '陵川县附城镇', 'jpg', 10002), 
('212', '韩晓峰', '女', '2000.05.01', '13903519536', '10001988', '10001988@qq.com', '河北张家口', '张北县两面井乡后水泉村', 'jpg', 10002), 
('213', '郝嘉宁', '男', '2001.06.01', '13903516176', '10000526', '10000526@qq.com', '山西侯马', '侯马市南西庄', 'jpg', 10002), 
('214', '侯夏楠', '男', '2002.07.01', '13903513271', '10007017', '10007017@qq.com', '山西长治', '壶关县龙泉镇成才小区', 'jpg', 10002), 
('215', '侯子茜', '女', '2002.02.01', '13903515675', '10009455', '10009455@qq.com', '山西忻州', '原平市福莱小区', 'jpg', 10002), 
('216', '黄河通', '男', '2001.06.01', '13903519535', '10008588', '10008588@qq.com', '山西长子', '尖草坪区龙城小区', 'jpg', 10002), 
('217', '李佳瑾', '男', '2000.07.01', '13903519330', '10004806', '10004806@qq.com', '山西临汾', '襄汾县泽欣花园', 'jpg', 10002), 
('218', '李静', '女', '2002.07.01', '13903511247', '10005091', '10005091@qq.com', '山西运城', '垣曲县英言乡', 'jpg', 10002), 
('219', '李晓燕', '女', '2002.06.01', '13903512294', '10004085', '10004085@qq.com', '山西介休', '介休市', 'jpg', 10002), 
('220', '梁珩榆', '男', '2001.08.01', '13903519049', '10003174', '10003174@qq.com', '山西平遥', '平遥县', 'jpg', 10002), 
('221', '王骞', '男', '2002.05.01', '13903518247', '10007327', '10007327@qq.com', '山西长治', '襄垣县侯堡镇六区', 'jpg', 10002), 
('222', '刘轩', '女', '2002.09.01', '13903511405', '10002641', '10002641@qq.com', '安徽界首', '和顺县', 'jpg', 10002), 
('223', '刘宇琪', '男', '2001.08.01', '13903519210', '10009846', '10009846@qq.com', '山西吕梁', '离石区', 'jpg', 10002), 
('224', '路宇豪', '男', '2003.01.01', '13903516265', '10009882', '10009882@qq.com', '山西吕梁', '文水县', 'jpg', 10002), 
('225', '马亦飞', '男', '2002.02.01', '13903513994', '10002520', '10002520@qq.com', '山西侯马', '山侯马市晋升巷', 'jpg', 10002), 
('226', '穆美玲', '女', '2002.06.01', '13903512586', '10003353', '10003353@qq.com', '山西大同', '云冈区', 'jpg', 10002), 
('227', '任智霖', '男', '2002.04.01', '13903513367', '10001094', '10001094@qq.com', '山西太原', '小店区碧桂园', 'jpg', 10002), 
('228', '师志华', '女', '2002.05.01', '13903514294', '10008525', '10008525@qq.com', '山西运城', '绛县郝庄乡西郝村', 'jpg', 10002), 
('229', '宋朝泽', '男', '2002.08.01', '13903511722', '10009421', '10009421@qq.com', '山西晋城', '泽州县巴公镇来村', 'jpg', 10002), 
('230', '宋欣欣', '女', '2001.07.01', '13903516723', '10006860', '10006860@qq.com', '山西长治', '长子县鲍店镇西王坡村', 'jpg', 10002), 
('231', '王超飞', '男', '2002.05.01', '13903515465', '10005739', '10005739@qq.com', '山西运城', '万荣县荣河镇谢村', 'jpg', 10002), 
('232', '王凡', '男', '2000.02.01', '13903518046', '10001327', '10001327@qq.com', '山西忻州', '忻河曲县', 'jpg', 10002), 
('233', '王浩', '男', '2001.05.01', '13903510929', '10003708', '10003708@qq.com', '内蒙古赤峰', '巴林左旗白音勿拉镇乃力珠嘎查新塔拉村', 'jpg', 10002), 
('234', '王一雯', '女', '2002.06.01', '13903514195', '10001081', '10001081@qq.com', '山西临汾', '尧都区土门镇土门村', 'jpg', 10002), 
('235', '王毅', '男', '2000.07.01', '13903511731', '10005561', '10005561@qq.com', '山西晋中', '平遥县干坑村', 'jpg', 10002), 
('236', '魏佳琦', '男', '2000.08.01', '13903514789', '10006679', '10006679@qq.com', '山西太原', '万柏林区小井峪华峪东区B区', 'jpg', 10002), 
('237', '武宗汉', '男', '2002.09.01', '13903514686', '10006760', '10006760@qq.com', '山西沁源', '沁源县沁河镇北园村', 'jpg', 10002), 
('238', '相卜天', '男', '1999.01.01', '13903516378', '10005337', '10005337@qq.com', '河北新乐', '榆次区通遥巷50号', 'jpg', 10002), 
('239', '闫国锋', '男', '2002.03.01', '13903510119', '10008162', '10008162@qq.com', '山西吕梁', '文水县', 'jpg', 10002), 
('240', '杨佳奇', '男', '1998.04.01', '13903516038', '10008121', '10008121@qq.com', '山西忻州', '原平市闫庄镇', 'jpg', 10002), 
('241', '原炜斌', '男', '2002.07.01', '13903513717', '10008514', '10008514@qq.com', '黑龙江哈尔滨', '尖草坪区龙城花园小区', 'jpg', 10002), 
('242', '张娜娜', '女', '2003.08.01', '13903511675', '10007660', '10007660@qq.com', '山西忻州', '代县新高乡沿村', 'jpg', 10002), 
('243', '张玺', '男', '2001.05.01', '13903514355', '10005401', '10005401@qq.com', '山西运城', '平陆县圣人嘉园', 'jpg', 10002), 
('244', '张馨俪', '女', '2002.02.01', '13903518895', '10004020', '10004020@qq.com', '山西临汾', '尧都区贾得乡', 'jpg', 10002), 
('245', '张子豪', '男', '2001.12.01', '13903513070', '10004477', '10004477@qq.com', '辽宁葫芦岛', '绥中县', 'jpg', 10002), 
('246', '赵辰浩', '男', '2001.04.01', '13903515601', '10003434', '10003434@qq.com', '山西平路', '平陆县', 'jpg', 10002), 
('247', '赵鑫磊', '男', '2001.09.01', '13903519985', '10009961', '10009961@qq.com', '山西晋城', '陵川县杨村镇', 'jpg', 10002), 
('248', '周佩恒', '男', '2001.06.01', '13903513813', '10002423', '10002423@qq.com', '山西临汾', '襄汾县汾城镇', 'jpg', 10002), 
('249', '周子祺', '女', '2001.05.01', '13903513108', '10005361', '10005361@qq.com', '山西太原', '太原市', 'jpg', 10002);
-- 用户表：
CREATE TABLE `用户表_王骞`  (
  `用户名` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `密码` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`用户名`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

INSERT INTO `用户表_王骞` VALUES ('王骞', MD5(CONCAT('王骞',MD5('12345678'))));
-- 同学视图：
create view 同学视图_王骞 
as
select 同学表_王骞.id,学号,姓名,性别,生日,手机号,QQ号,EMail,籍贯,住址,班级id,名称 AS 班级名称,备注 AS 班级备注 
from (同学表_王骞 join 班级表_王骞 
on (同学表_王骞.班级id = 班级表_王骞.id));

img

图1 E-R关系图

2.前端

2.1 前段框架引用文件

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

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

说明 文件名
html文件---(9个) /
登录界面 login_wjy.html
主控界面 index.html
班级信息浏览页面 listCla_wjy.html
同学信息浏览页面 listStu_wjy.html
班级信息管理页面之一(edatagrid) editClass_wjy.html
同学信息管理页面之一(edatagrid) editStudent_wjy.html
班级信息管理页面之二(datagrid--dialog--form) editCla_wjy.html
同学信息管理页面之二(datagrid--dialog--form) editStu_wjy.html
设置密码页面 setPass_wjy.html
js通用程序---增删改对话框处理 /easyui/manager.js
图片文件 /image/main.jpg
php文件---(13个) /php
数据库连接公用程序 conn_wjy.php
登录验证 login _wjy.php
分页、搜索班级信息 listCla_wjy.php
分页、搜索同学信息 listStu_wjy.php
获取同学照片 getPhoto_wjy.php
为列表框获取班级名称信息 getClassNames _wjy.php
添加班级 addClass_wjy.php
修改保存班级 updateClass_wjy.php
删除班级 deleteClass_wjy.php
添加同学 addStudent_wjy.php
修改保存同学 updateStudent_wjy.php
删除同学 deleteStudent_wjy.php
设置密码 setPass_wjy.php

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

Easyui

图2 程序文件调用关系图

2.4 HTML文件

(1)登录页面login_wjy.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF8">
    <title>王骞同学信息管理系统.登录</title>
    <link rel="stylesheet" href="themes/easyui.css">
    <link rel="stylesheet" href="themes/icon.css">
    <link rel="stylesheet" href="themes/color.css">
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></script>
    <script src="easyui/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.wjyzhaojiang.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_wjy.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="themes/default/easyui.css">
    <link rel="stylesheet" href="themes/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"></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_wjy.html"}
                    },{
                        text:"浏览同学信息",
                        attributes:{url:"listStu_wjy.html"}
                    }]
                },{
                    text:"管理系统数据之1",
                    state : "open",
                    children:[{
                        text:"管理班级信息之1",
                        attributes:{url:"editClass_wjy.html"}
                    },{
                        text:"管理同学信息之1",
                        attributes:{url:"editStudent_wjy.html"}
                    }]
                },{
                    text:"管理系统数据之2",
                    state : "open",
                    children:[{
                        text:"管理班级信息之2",
                        attributes:{url:"editCla_wjy.html"}
                    },{
                        text:"管理同学信息之2",
                        attributes:{url:"editStu_wjy.html"}
                    }]
                },{
                    text:"设置登录密码",
                    state : "open",
                    children:[{
                        text:"设置登录密码",
                        attributes:{url:"setPass_wjy.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_wjy.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.wjyzhaojiang.cn/index.html">王骞工作室</a></div>
</body>
</html>
(3) 班级信息浏览页面 listCla_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="themes/easyui.css"/>
    <link rel="stylesheet" href="themes/icon.css"/>

    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></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_wjy.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_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>王骞同学列表</title>
    <link rel="stylesheet" href="themes/easyui.css">
    <link rel="stylesheet" href="themes/icon.css">
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></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_wjy.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_wjy.php?id="+row.id+"'/>";
        }
    }
    //搜索按钮事件
    function doSearch(value){
        $("#datagrid").datagrid("reload",{
            "Search": value
        });
    }
</script>

</body>
</html>>
(5) 班级信息管理页面之一(edatagrid)，editClass_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>王骞的网站</title>
    <link rel="stylesheet" href="themes/easyui.css">
    <link rel="stylesheet" href="themes/icon.css">
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/jquery.edatagrid.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></script>
    <script>
        $(function(){
            $('#dg').edatagrid({
                url: 'php/listCla_wjy.php',
                saveUrl: 'php/addClass_wjy.php',
                updateUrl: 'php/updateClass_wjy.php',
                destroyUrl: 'php/deleteClass_wjy.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_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>王骞的网站</title>
    <link rel="stylesheet" href="themes/easyui.css">
    <link rel="stylesheet" href="themes/icon.css">
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/jquery.edatagrid.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></script>
    <script src="easyui/validatebox.rules.js"></script>
    <script>
        let classnames;
        $.ajax("php/getClassNames_wjy.php",{
            type:'get',
            async: false,
            success:function(data){
                classnames = JSON.parse(data);
            }
        });
        $(function(){
            $('#dg').edatagrid({
                url: 'php/listStu_wjy.php',
                saveUrl: 'php/addStudent_wjy.php',
                updateUrl: 'php/updateStudent_wjy.php',
                destroyUrl: 'php/deleteStudent_wjy.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_wjy.php?id="+row.id+"'/>";
        }
    }
</script>
</body>
</html>
(7) 班级信息管理页面之二(datagrid--dialog--form)，editCla_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="themes/easyui.css"/>
    <link rel="stylesheet" href="themes/icon.css"/>

    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></script>
    <script src="easyui/manager.js"></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_wjy.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_wjy.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_wjy.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_wjy.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_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="themes/easyui.css"/>
    <link rel="stylesheet" href="themes/icon.css"/>

    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js" charset="UTF-8"></script>
    <script src="easyui/validatebox.rules.js" charset="UTF-8"></script>
    <script src="easyui/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_wjy.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_wjy.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_wjy.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_wjy.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_wjy.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_wjy.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_wjy.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_wjy.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>王骞的网站</title>
    <link rel="stylesheet" href="themes/easyui.css">
    <link rel="stylesheet" href="themes/icon.css">
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/md5.js"></script>
    <script src="easyui/easyui-lang-zh_CN.js"></script>
    <script>
    $(function() {
        $("#重置密码").click(function() {
            $.ajax({
                type : "post",
                url : "php/setPass_wjy.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_wjy.html、editCla_wjy.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'});
}

3.后端php

(1) 数据库连接conn_wjy.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_wjy.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_wjy.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_wjy.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_wjy.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 _wjy.php
<?php
   include "conn_wjy.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_wjy.php
<?php
   $mc = $_POST["名称"];
   $bz = $_POST["备注"];
   include 'conn_wjy.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_wjy.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_wjy.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_wjy.php
<?php
   $id = $_POST["id"];
   $mc = $_POST["名称"];
   $bz = $_POST["备注"];

   include 'conn_wjy.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_wjy.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 =  htmlspeciawjyhars($_REQUEST['住址']);
include 'conn_wjy.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_wjy.php
<?php
   $id = intval($_REQUEST['id']);
   include 'conn_wjy.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_wjy.php
<?php
$id = intval($_REQUEST['id']);
include 'conn_wjy.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 _wjy.php
<?php
   header("content-Type: text/html; charset=utf-8");//字符编码设置
   $username = $_POST['用户名'];
   $pwd = $_POST['口令'];
   $mm = md5($username.$pwd);
   include 'conn_wjy.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_wjy.php
<?php
   $id = isset($_GET['id']) ? $_GET['id'] : 500000;
   include "conn_wjy.php";
    $sql = "select 照片, 照片类型 from 同学表_王骞 where id = :id;";
    $stmt = $pdo->prepare($sql);
    $stmt->execute(array(":id" => $id));
    $stmt->bindColumn(2, $ext);
    $stmt->bindColumn(1, $data, PDO::PARAM_LOB);
    $stmt->fetch(PDO::FETCH_BOUND);
   header('Content-Type:image/'.$ext);
   echo $data;
 ?>
(13) 设置密码setPass_wjy.php
<?php
   $username = $_POST['用户名'];
   $oldpwd = $_POST['原密码'];
   $newpwd = $_POST['新密码'];
   $jmm = md5($username.$oldpwd );
   $xmm = md5($username.$newpwd );
   include 'conn_wjy.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;
?>

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

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

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

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

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

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

  SQL语句

返回