時(shí)間：2023-09-19 11:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-19 11:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
Web技術(shù)——簡(jiǎn)易班級(jí)管理系統(tǒng)（實(shí)現(xiàn)）：上一篇寫(xiě)了好多相關(guān)的設(shè)計(jì)思想和具體設(shè)計(jì)方式，接下來(lái)就寫(xiě)寫(xiě)怎樣實(shí)現(xiàn)它。自己動(dòng)手做一個(gè)小web系統(tǒng)，想想還有點(diǎn)小激動(dòng)。雖然菜，但是不試試怎么會(huì)有進(jìn)步呢？或者說(shuō)，直接“舶來(lái)”也能得到好成績(jī)，有必要自己寫(xiě)嗎？仁者見(jiàn)仁智者見(jiàn)智，筆者雖然菜，還是希望和大家一起努力進(jìn)步，畢竟以后得靠coding吃飯（瑟瑟發(fā)抖）........
在線咨詢(xún)
<!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">管理員主頁(yè)</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>班級(jí)信息</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="請(qǐng)輸入班級(jí)名稱(chēng)"> <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>班級(jí)成員欄</h4> </div> <div class="input-group" style="max-width: 500px"> <input type="text" class="form-control" id="search_user_key" placeholder="請(qǐng)輸入搜索關(guān)鍵詞"> <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">修改班級(jí)信息</h4> </div> <div class="modal-body"> <form role="form" class="form-signin"> <div class="form-group"> <label for="recipient-name" class="control-label">班級(jí)名稱(chēng)：</label> <input type="text" placeholder="年份+班級(jí)描述" 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">添加新班級(jí)</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">班級(jí)名稱(chēng)：</label> <input type="text" placeholder="年份+班級(jí)描述" class="form-control" id="addClassTitle"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</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>您將永久刪除該班級(jí)!!</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">班級(jí)編號(hào)：</label> <input type="text" class="form-control" id="addClassNum"> </div> <div class="form-group"> <label for="message-text" class="control-label">成員編號(hào):</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">關(guān)閉</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="#">版權(quán)所有</a> </footer></div><!-- /.container --></body></html>2. 班級(jí)管理頁(yè)面代碼（jquery+ajax）/*獲得當(dāng)前班級(jí)的成員信息*/function GetUserNext(){ $('#ShowClassMate').html("<h4>"+localStorage.getItem('classNo')+"->成員信息</h4>"); /*獲得直接下標(biāo)label名*/ $.ajax({ url: '/get_user_by_class', //這里是route到服務(wù)器端的功能名稱(chēng) data:{ Id:localStorage.getItem('classId') //獲取html頁(yè)面上ID叫classId的元素 }, type: 'POST', success: function (res) { //成功后服務(wù)器端查數(shù)據(jù)庫(kù)返回的數(shù)據(jù) var userObj = JSON.parse(res); $('#list_user').empty(); $('#list_User_Temp').tmpl(userObj).appendTo('#list_user'); //顯示在html頁(yè)面對(duì)應(yīng)的元素位置 }, error: function (error) { console.log(error); } });}/*第一次獲得當(dāng)前班級(jí)的成員信息*/function GetUserFirst(elem){ localStorage.setItem('classId', $(elem).attr('class-id')); localStorage.setItem('classNo', $(elem).children().text()); GetUserNext();}/*復(fù)選框選擇搜索信息*/function SearchUser(){ $('#list_user').empty(); //清空當(dāng)前列表 if($('#search_by_name').prop('checked')){ //如果選中則將查詢(xún)結(jié)果插入列表 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); } });}/*確認(rèn)刪除框*/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 '該用戶已經(jīng)存在于該班級(jí)中!';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行，在此只截取了一小部分，詳見(jiàn)工程）# 返回root管理員主頁(yè)@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'未授權(quán)訪問(wèn)！')# root權(quán)限的管理員添加普通管理員功能，不成功時(shí)需要返回錯(cuò)誤信息@app.route('/create_manager', methods=['POST'])def create_manager(): try: if session.get('manager'): # 檢測(cè)會(huì)話是否有效 account = request.form['Account'] password = request.form['Password'] conn = mysql.connect() cursor = conn.cursor() # 連接數(shù)據(jù)庫(kù)，獲得數(shù)據(jù)指針 hash_psd = generate_password_hash(password) cursor.callproc('sp_createManager', (account, hash_psd)) data = cursor.fetchall() # 獲取數(shù)據(jù)庫(kù)返回信息 if len(data) == 0: conn.commit() return json.dumps({'status': 'OK'}) else: return json.dumps({'status': '管理員已經(jīng)存在！'}) else: return render_template('error.html', error=u'未授權(quán)訪問(wèn)！') except Exception as e: print e return render_template('error.html', error=str(e)) finally: cursor.close() conn.close()# 管理員登錄功能，登陸失敗時(shí)返回錯(cuò)誤信息@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'賬號(hào)或密碼錯(cuò)誤！') else: return render_template('error.html', error=u'未授權(quán)訪問(wèn)！') 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 初步編碼設(shè)計(jì)-- -- 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.一些常用的增刪查改模塊（特別要注意的是在刪除記錄時(shí)會(huì)出現(xiàn)的連帶刪除的情況，否則會(huì)出現(xiàn)錯(cuò)誤）---- 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 '用戶已經(jīng)存在!';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; --連帶班級(jí)刪除公告delete from tb_userclass where class_id = p_id; --連帶刪除班級(jí)成員END;;DELIMITER ;---- Create getUser_byid Procedure（查詢(xún)模塊）--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. 改進(jìn)后的編碼設(shè)計(jì)（具體完整的腳本詳見(jiàn)Allproc.sql)關(guān)鍵詞：系統(tǒng),實(shí)現(xiàn),管理,技術(shù),簡(jiǎn)易,班級(jí)
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
