时间：2023-09-19 11:00:01 | 来源：网站运营
时间：2023-09-19 11:00:01 来源：网站运营
Web技术——简易班级管理系统（实现）：上一篇写了好多相关的设计思想和具体设计方式，接下来就写写怎样实现它。自己动手做一个小web系统，想想还有点小激动。虽然菜，但是不试试怎么会有进步呢？或者说，直接“舶来”也能得到好成绩，有必要自己写吗？仁者见仁智者见智，笔者虽然菜，还是希望和大家一起努力进步，毕竟以后得靠coding吃饭（瑟瑟发抖）........
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Manage_Classmate</title> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="../static/css/dashboard.css" rel="stylesheet"> <link href="../static/css/signin.css" rel="stylesheet"> <script src="../static/js/jquery-3.1.1.min.js"></script> <script src="../static/js/bootstrap.min.js"></script> <script src="../static/js/magclass.js"></script> <script src="../static/js/maguser.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script></head><body><nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">find your class</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/show_manager_home">管理员主页</a></li> <li><a href="/show_manage_class">公告管理</a></li> <li class="active"><a href="#">成员管理</a></li> <li><a href="/manager_logout">退出</a> </li> </ul> </div> </div></nav><div class="container-fluid"> <div class="row"> <div class="col-sm-4 col-md-3 sidebar"> <div class="row placeholder"> <label>班级信息</label> <div class="pull-right action-buttons"> <button type="button" onclick="AddClassShow()"><span class="glyphicon glyphicon-plus">添加</span></button> </div> </div> <div class="row input-group"> <input type="text" class="form-control" id="search_class_key" placeholder="请输入班级名称"> <span class="input-group-btn"> <button class="btn btn-primary" type="button" onclick="SearchClass()" id="btnSearchMemo"><span class="glyphicon glyphicon-search"></span></button> </span> </div> <div class="nav nav-sidebar"> <div class="row"> <div class="panel-body"> <ul id="list_class" class="list-group"> </ul> </div> </div> </div> </div> </div> <script id="list_Class_Temp" type="text/x-jQuery-tmpl"> <li class="list-group-item"> <div class="checkbox" > <a class-id=${Id} onclick="GetUserFirst(this)"><label id="LabelClassTitle">${Title}</label></a> </div> <div class="pull-right action-buttons"> <a class-id=${Id} onclick="EditClass(this)" ><span class="glyphicon glyphicon-pencil"></span></a> <a class-id=${Id} onclick="ConfirmDeleteClass(this)"><span class="glyphicon glyphicon-trash"></span></a> </div> </li> </script> <script id="list_User_Temp" type="text/x-jQuery-tmpl"> <li class="list-group-item"> <div class="checkbox"> <label>${Name}</label> <label>${Sex}</label> <label>${Loc}</label> <label>${Email}</label> </div> <div class="pull-right action-buttons"> <a u-id=${Id} onclick="ConfirmDeleteUser(this)"><span class="glyphicon glyphicon-trash"></span></a> </div> </li> </script> <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main"> <div class="row placeholder" id="ShowClassMate"> <h4>班级成员栏</h4> </div> <div class="input-group" style="max-width: 500px"> <input type="text" class="form-control" id="search_user_key" placeholder="请输入搜索关键词"> <span class="input-group-btn" id="search_title"> <button class="btn btn-primary" type="button" onclick="SearchUser()" ><span class="glyphicon glyphicon-search"></span></button> </span> </div> <div class="row placeholder" style="margin-left: 10px"> <label class="checkbox-inline"> <input type="checkbox" id="search_by_name" value="1">按姓名查找 </label> <label class="checkbox-inline"> <input type="checkbox" id="search_by_sex" value="2">按性别查找 </label> <label class="checkbox-inline"> <input type="checkbox" id="search_by_mail" value="4">按邮箱查找 </label> <label class="checkbox-inline"> <input type="checkbox" id="search_by_loc" value="3">按居住地查找 </label> </div> <div class="row"> <div class="panel-body" style="max-width: 1000px"> <ul id="list_user" class="list-group"> </ul> </div> </div> </div></div><div class="modal fade" id="editClassDlg" tabindex="-1" role="dialog" aria-labelledby="editClassDlgLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="editClassDlgLabel">修改班级信息</h4> </div> <div class="modal-body"> <form role="form" class="form-signin"> <div class="form-group"> <label for="recipient-name" class="control-label">班级名称：</label> <input type="text" placeholder="年份+班级描述" class="form-control" id="editClassTitle"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" id="btnUpdateClass" class="btn btn-primary">更新</button> </div> </div> </div></div><div class="modal fade" id="addClassDlg" tabindex="-1" role="dialog" aria-labelledby="addClassLabel" aria-hidden="true"> <div class="modal-dialog" style="max-width: 500px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="addClassLabel">添加新班级</h4> </div> <div class="modal-body"> <form role="form" class="form-signin"> <div class="form-group"class="form-signin"> <label for="recipient-name" class="control-label">班级名称：</label> <input type="text" placeholder="年份+班级描述" class="form-control" id="addClassTitle"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" onclick="AddClass()" class="btn btn-primary">添加</button> </div> </div> </div></div><div class="modal fade" id="deleteClassDlg" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" style="text-align:center;"> <h4 class="modal-title" style="color:red;" id="deleteModalLabel"><b>您将永久删除该班级!!</b></h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" onclick="DeleteClass()">删除</button> </div> </div> </div></div><div class="modal fade" id="addUserDlg" tabindex="-1" role="dialog" aria-labelledby="addUserLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="addUserLabel">添加新成员</h4> </div> <div class="modal-body"> <form role="form" class="form-signin"> <div class="form-group"class="form-signin"> <label for="recipient-name" class="control-label">班级编号：</label> <input type="text" class="form-control" id="addClassNum"> </div> <div class="form-group"> <label for="message-text" class="control-label">成员编号:</label> <textarea class="form-control" id="addUserNum"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" onclick="AddUser()" class="btn btn-primary">添加</button> </div> </div> </div></div><div class="modal fade" id="deleteUserDlg" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" style="text-align:center;"> <h4 class="modal-title" style="color:red;" id="deleteModalLabel"><b>您将永久删除该班成员!!</b></h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" onclick="DeleteUser()">删除</button> </div> </div> </div></div><div class="container"> <footer> <p class="pull-right"><a href="#">返回顶部</a></p> <p align="center">© 2017 Designed by SiyinKong, Inc. · <a href="#">版权所有</a> </footer></div><!-- /.container --></body></html>2. 班级管理页面代码（jquery+ajax）/*获得当前班级的成员信息*/function GetUserNext(){ $('#ShowClassMate').html("<h4>"+localStorage.getItem('classNo')+"->成员信息</h4>"); /*获得直接下标label名*/ $.ajax({ url: '/get_user_by_class', //这里是route到服务器端的功能名称 data:{ Id:localStorage.getItem('classId') //获取html页面上ID叫classId的元素 }, type: 'POST', success: function (res) { //成功后服务器端查数据库返回的数据 var userObj = JSON.parse(res); $('#list_user').empty(); $('#list_User_Temp').tmpl(userObj).appendTo('#list_user'); //显示在html页面对应的元素位置 }, error: function (error) { console.log(error); } });}/*第一次获得当前班级的成员信息*/function GetUserFirst(elem){ localStorage.setItem('classId', $(elem).attr('class-id')); localStorage.setItem('classNo', $(elem).children().text()); GetUserNext();}/*复选框选择搜索信息*/function SearchUser(){ $('#list_user').empty(); //清空当前列表 if($('#search_by_name').prop('checked')){ //如果选中则将查询结果插入列表 SearchUserByName(); } if($('#search_by_sex').prop('checked')){ SearchUserBySex(); } if($('#search_by_loc').prop('checked')){ SearchUserByLoc(); } if($('#search_by_mail').prop('checked')){ SearchUserByEmail(); }}/*模糊按姓名查找获得成员信息集合*/function SearchUserByName() { $.ajax({ url: '/search_user_by_name', data: { Id:localStorage.getItem('classId'), keyword: $('#search_user_key').val() }, type: 'POST', success: function (res) { var userObj = JSON.parse(res); $('#list_User_Temp').tmpl(userObj).appendTo('#list_user'); }, error: function (error) { console.log(error); } });}/*模糊按性别查找获得成员信息集合*/function SearchUserBySex() { $.ajax({ url: '/search_user_by_sex', data: { Id:localStorage.getItem('classId'), keyword: $('#search_user_key').val() }, type: 'POST', success: function (res) { var userObj = JSON.parse(res); $('#list_User_Temp').tmpl(userObj).appendTo('#list_user'); }, error: function (error) { console.log(error); } });}/*模糊按居住地查找获得成员信息集合*/function SearchUserByLoc() { $.ajax({ url: '/search_user_by_loc', data: { Id:localStorage.getItem('classId'), keyword: $('#search_user_key').val() }, type: 'POST', success: function (res) { var userObj = JSON.parse(res); $('#list_User_Temp').tmpl(userObj).appendTo('#list_user'); }, error: function (error) { console.log(error); } });}/*精确按电子邮箱查找获得成员信息集合*/function SearchUserByEmail() { $.ajax({ url: '/search_user_by_email', data: { Id:localStorage.getItem('classId'), keyword: $('#search_user_key').val() }, type: 'POST', success: function (res) { var userObj = JSON.parse(res); $('#list_User_Temp').tmpl(userObj).appendTo('#list_user'); }, error: function (error) { console.log(error); } });}/*确认删除框*/function ConfirmDeleteUser(elem) { localStorage.setItem('deleteId', $(elem).attr('u-id')); $('#deleteUserDlg').modal();}/*删除本条备忘录*/function DeleteUser() { $.ajax({ url: '/delete_user_from_class', data: { Uid:localStorage.getItem('deleteId'), Cid:localStorage.getItem('classId') }, type: 'POST', success: function(res) { $('#deleteUserDlg').modal('hide'); var result = JSON.parse(res); if(result.status=='OK'){ GetUserNext(); } else{ alert(result.status); } }, error: function(error) { console.log(error); } });}---- Create addClassmate Procedure--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_addClassmate`(IN p_uid bigint(20),IN p_cid bigint(20))BEGINif (select exists(select 1 from tb_userclass where p_uid = user_id and p_cid = class_id)) THENselect '该用户已经存在于该班级中!';ELSEinsert into tb_userclass(user_id,class_id)values(p_uid,p_cid);END IF;END;;DELIMITER ;---- Create deleteUser_fromClass Procedure--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_deleteUser_fromClass`(IN p_uid bigint(20),IN p_cid bigint(20))BEGINdelete from tb_userclass where user_id = p_uid and class_id=p_cid;END;;DELIMITER ;---- Create getUser_byclass Procedure--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_getUser_byclass`(IN p_class_id bigint(20))BEGINselect user_id,user_name,user_sex,user_loc,user_mail from tb_user where user_id in (select user_id from tb_userclass where class_id = p_class_id);END;;DELIMITER ;---- Create updateMemo Procedure--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_updateMemo`(IN p_id bigint(20),IN p_title VARCHAR(40),IN p_desc VARCHAR(1000),IN p_userid bigint(20))BEGINupdate tb_memo set memo_title=p_title,memo_desc=p_desc,memo_user_id=p_userid,memo_date=NOW()where memo_id = p_id;END;;DELIMITER ;2.2 Python核心代码（python代码大概有1100行，在此只截取了一小部分，详见工程）# 返回root管理员主页@app.route('/show_manager_home')def show_manager_home(): m = session.get('manager') if m is 1: return render_template('root_maghome.html') elif m > 0: return render_template('ord_maghome.html') else: return render_template('error.html', error=u'未授权访问！')# root权限的管理员添加普通管理员功能，不成功时需要返回错误信息@app.route('/create_manager', methods=['POST'])def create_manager(): try: if session.get('manager'): # 检测会话是否有效 account = request.form['Account'] password = request.form['Password'] conn = mysql.connect() cursor = conn.cursor() # 连接数据库，获得数据指针 hash_psd = generate_password_hash(password) cursor.callproc('sp_createManager', (account, hash_psd)) data = cursor.fetchall() # 获取数据库返回信息 if len(data) == 0: conn.commit() return json.dumps({'status': 'OK'}) else: return json.dumps({'status': '管理员已经存在！'}) else: return render_template('error.html', error=u'未授权访问！') except Exception as e: print e return render_template('error.html', error=str(e)) finally: cursor.close() conn.close()# 管理员登录功能，登陆失败时返回错误信息@app.route('/manager_validate_login', methods=['POST'])def manager_validate_login(): try: account = request.form['inputAccount'] password = request.form['inputPassword'] conn = mysql.connect() cursor = conn.cursor() cursor.callproc('sp_validateManagerlogin', (account,)) data = cursor.fetchall() if len(data) > 0: if check_password_hash(str(data[0][1]), password): session['manager'] = data[0][0] return redirect('/show_manager_home') else: return render_template('error.html', error=u'账号或密码错误！') else: return render_template('error.html', error=u'未授权访问！') except Exception as e: print e return render_template('error.html', error=str(e)) finally: cursor.close() conn.close()/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8 */;/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;/*!40103 SET TIME_ZONE='+00:00' */;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;3.1 初步编码设计-- -- Table structure for table `tb_manager`-- DROP TABLE IF EXISTS `tb_manager`;CREATE TABLE `tb_manager` ( `manager_id` bigint(20) NOT NULL AUTO_INCREMENT, `manager_account` varchar(40) DEFAULT NULL, `manager_level` varchar(10) DEFAULT NULL, `manager_password` varchar(256) DEFAULT NULL, PRIMARY KEY(`manager_id`) ) ENGINE = InnoDB AUTO_INCREMENT = 1 DEFAULT CHARSET = utf8;2.一些常用的增删查改模块（特别要注意的是在删除记录时会出现的连带删除的情况，否则会出现错误）---- Create User Procedure（新增模块）--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_createUser`(IN p_account VARCHAR(40),IN p_password VARCHAR(256))BEGINif (select exists(select 1 from tb_user where user_account = p_account)) THENselect '用户已经存在!';ELSEinsert into tb_user(user_account,user_password)values(p_account,p_password);END IF;END;;DELIMITER ;---- Create deleteClass Procedure（删除模块，注意连带删除的情况）--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_deleteClass`(IN p_id bigint(20))BEGINdelete from tb_class where class_id = p_id;delete from tb_notice where no_class_id = p_id; --连带班级删除公告delete from tb_userclass where class_id = p_id; --连带删除班级成员END;;DELIMITER ;---- Create getUser_byid Procedure（查询模块）--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_getUser_byid`(IN p_id bigint(20))BEGINselect user_name,user_sex,user_loc,user_mail from tb_user where user_id = p_id;END;;DELIMITER ;---- Create updateClass_byid Procedure（修改模块，修改特定信息即可）--DELIMITER ;;CREATE DEFINER = `root`@`localhost` PROCEDURE `sp_updateClass_byid`(IN p_id bigint(20),IN p_title VARCHAR(40))BEGINupdate tb_class set class_title=p_title where class_id = p_id;END;;DELIMITER ;3. 改进后的编码设计（具体完整的脚本详见Allproc.sql)关键词：系统,实现,管理,技术,简易,班级
