1. 程式人生 > >學員管理

學員管理

eat rem 信息管理 gin asp cli oom eps ava

//有表單驗證, 表格格式 , 啟動項, 回饋, 增刪改查。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css"> <link href="bootstrap/css/dashboard.css" rel="stylesheet">

<link rel="stylesheet" href="index.css"> <!--第一個時間插件--> <!--<link rel="stylesheet" href="src/bootstrapDatepickr-1.0.0.css">--> <!--第二個時間插件--> <link rel="stylesheet" href="bootstrap-datetimepicker.css"> <!--時間插件--> <style> .wen{ /* white-space: pre-wrap;*/ margin-left: 280px; } </style> </head> <body> <!--top--> <div class="top"> <div class="container"> <span>學員信息管理</span> <div class="picture"> <div class="dropdown"> <button id="dLabel" class="tx" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <ul class="dropdown-menu" aria-labelledby="dLabel"> <li>個人資料</li> <li>修改密碼</li> <li>退出登錄</li> </ul> </div> </div> </div> </div> <!--下邊的整體--> <div class="bottom"> <!--left--> <div> <!--左邊的標簽頁--> <!-- Nav tabs --> <div class="left1 col-sm-3 col-md-2 sidebar"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active aaaaa"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Boos管理</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">學院管理</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">個人資料</a></li> </ul> </div> <!-- Tab panes --> <div class="tab-content clearfix"> <div role="tabpanel" class="tab-pane active" id="home"> <!--插入右邊的模塊--> <!--左一--> <!--right--> <div class="right1 col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <!--右邊的上邊的導航欄--> <div class="right-top shrink beyong-hidden"> <span>學員管理 / 班級管理</span> <!--註釋掉的是按鈕形式的-添加班級--> <!-- <button style="color: white;float:right;" class="btn append" type="submit">添加班級</button> --> <!--添加班級bootstrap--> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg append" data-toggle="modal" data-target="#myModal">添加班級 </button>

<!-- <button type="button" class="btn btn-primary btn-lg refresh">刷新 </button> --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title append-class-color" id="myModalLabel">添加班級</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">班級名稱</label> <div class="col-sm-10 modal-con"> <input type="email" class="form-control modal-con banjimingcheng" id="inputEmail3" placeholder="" value=""> </div> </div> <!--下拉列表--> <div class="form-group"> <label for="studyobject" class="col-sm-2 control-label modal-body">學習科目</label> <div class="col-sm-10 modal-con"> <select class="form-control modal-con" id="studyobject"> <option>HTML</option> <hr> <option>CSS</option> <option>Javascript</option> <option>PhotoShop</option> <option>seperate word</option> </select> </div> </div> <!--入學時間--> <div class="form-group"> <label for="updatetime" class="col-sm-2 control-label modal-body">入學時間</label> <div class="col-sm-10 modal-con"> <!--<input type="email" class="form-control modal-con" id="inputEmail3" placeholder="">--> <!--time第一次引用的時間插件--> <div class="form-group">

<!--<div class="col-md-4"> <div class="input-group"> <span class="input-group-addon rili" id="basic-addon1"><i class="fa fa-calendar"></i></span> <input type="text" id="calendar" placeholder="27/07/2017" class="form-control timewidth" Readonly> </div> </div>--> <!--第二次引用的時間插件--> <div class=‘input-group date‘ id=‘datetimepicker1‘> <input type=‘text‘ class="form-control" id="updatetime" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <!--第二次引用的時間插件--> </div> <!--time--> </div> </div> <!--學員人數--> <div class="form-group"> <label for="xxx" class="col-sm-2 control-label modal-body">學員人數</label> <div class="col-sm-10 modal-con"> <input type="email" class="form-control modal-con xueyuanrenshu" id="xxx" placeholder="" value=""> </div> </div> <!--班主任--> <div class="form-group"> <label for="banzhuren" class="col-sm-2 control-label modal-body">班主任</label> <div class="col-sm-10 modal-con"> <select class="form-control modal-con" id="banzhuren"> <option>楊老師</option> <option>楊老師2</option> <option>楊老師3</option> <option>楊老師4</option> <option>楊老師5</option> </select> </div> </div> <!--班級介紹--> <div class="form-group"> <label for="banjijieshao" class="col-sm-2 control-label modal-body">班級介紹</label> <div class="col-sm-10 modal-con"> <textarea class="form-control " rows="3" id="banjijieshao"></textarea> <!--<input type="email" class="form-control modal-con" id="inputEmail3" placeholder="">--> </div> </div> </form> <!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary preserve" onclick="save_data(this)">保存</button> </div> </div> </div> </div> <!--往上添加班級bootstrap--> </div>

<!--添加的表格bootstrap--> <div class="table-responsive shrink tbackground"> <table class="table table-bordered table-hover table-striped success tb"> <thead class="active"> <th>#</th> <th>班級名稱</th> <th>學習科目</th> <th>入學日期</th> <th>學員人數</th> <th>班主任</th> <th>操作</th> </thead> <tbody class="tbodytbody"> <tr class="big" id="‘+(parseInt(this.parentNode.id)+1)+‘"> </tbody> </table> <!--表格下邊的灰線--> <div class="gray-line"></div> <!--默認分頁用bootstrap寫的--> <nav aria-label="Page navigation"> <ul class="pagination anniu"> <!-- <li><a href="javascript:;">1</a></li> --> </ul> </nav>

</div> </div> <!--左一--> </div>

<div role="tabpanel" class="tab-pane" id="profile"> <!--左二--> <!--right--> <div class="right1 col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="zuoerbackground"> <!--右邊的上邊的導航欄--> <div class="right-top shrink beyong-hidden"> <span>學員管理 / 班級管理</span> <!--註釋掉的是按鈕形式的-添加班級--> <!--<button style="color: white;float:right;" class="btn append" type="submit">添加班級</button>--> <!--添加班級bootstrap--> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg append" data-toggle="modal" data-target="#myModal">添加班級 </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title append-class-color" id="myModalLabel">添加班級</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">學院名稱</label> <div class="col-sm-10 modal-con"> <input type="email" class="form-control modal-con" id="inputEmail3" placeholder=""> </div> </div> <!--下拉列表--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">學院教程</label> <div class="col-sm-10 modal-con"> <select class="form-control modal-con"> <option>H5</option> <option></option> <option>PS</option> <option></option> <option>VUE</option> <option></option> <option>PhotoShop</option> <option></option> <option>seperate word</option> <option></option> </select> </div> </div> <!--入學時間--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">入學時間</label> <div class="col-sm-10 modal-con"> <!--<input type="email" class="form-control modal-con" id="inputEmail3" placeholder="">--> <!--time--> <div class="form-group"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon rili" id="basic-addon1"><i class="fa fa-calendar"></i></span> <input type="text" id="calendar" placeholder="27/07/2017" class="form-control timewidth" Readonly> </div> </div> </div> <!--time--> </div> </div> <!--學員人數--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">學員人數</label> <div class="col-sm-10 modal-con"> <input type="email" class="form-control modal-con" id="inputEmail3" placeholder=""> </div> </div> <!--班主任--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">班主任</label> <div class="col-sm-10 modal-con"> <select class="form-control modal-con"> <option>楊老師</option> <option>楊老師2</option> <option>楊老師3</option> <option>楊老師4</option> <option>楊老師5</option> </select> </div> </div> <!--班級介紹--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">班級介紹</label> <div class="col-sm-10 modal-con"> <textarea class="form-control " rows="3"></textarea> <!--<input type="email" class="form-control modal-con" id="inputEmail3" placeholder="">--> </div> </div> </form> ___________________________________________________________ </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> <!--往上添加班級bootstrap--> </div>

<!--添加的表格bootstrap--> <div class="table-responsive shrink tbackground"> <table class="table table-bordered table-hover table-striped success tb"> <thead class="active"> <th>#</th> <th>學院名稱</th> <th>教學大綱</th> <th>學習時間</th> <th>教師人數</th> <th>任課教師</th> <th>操作</th> </thead> <tbody> <tr class="big"> <th id="1">1</th> <td>百杉教育</td> <td>Javascript</td> <td>四個月</td> <th>12</th> <td>楊老師</td> <td style="width: 160px"> <!--編輯--> <!--編輯--> <button style="margin-right:5px;color: white;" class="btn" type="submit">編輯</button> <button style="margin-right:5px;color: white;" class="btn deletedelete" type="submit" onclick="remove_item(this)">刪除</button> </td> </tr> <tr> <th id="2">2</th> <td>百杉教育</td> <td>PhotoShop</td> <td>五個月</td> <th>12</th> <td>於老師</td> <td style="width: 160px"> <!--編輯--> <!--編輯--> <button style="margin-right:5px;color: white;" class="btn" type="submit">編輯</button> <button style="margin-right:5px;color: white;" class="btn" type="submit" onclick="remove_item(this)">刪除</button></td> </tr> <tr> <th id="3">3</th> <td>百杉教育</td> <td>css樣式表</td> <td>六個月</td> <th>12</th> <td>遲老師</td> <td style="width: 160px"> <!--編輯--> <!--編輯--> <button style="margin-right:5px;color: white;" class="btn" type="submit">編輯</button> <button style="margin-right:5px;color: white;" class="btn" type="submit" onclick="remove_item(this)">刪除</button></td> </tr> <tr> <th>4</th> <td>百杉教育</td> <td>VR</td> <td>好多月</td> <th>12</th> <td>殷老師</td> <td style="width: 160px"> <!--編輯--> <button type="submit" class="btn" data-toggle="modal" data-target="#myModal" style="margin-right:5px;color: white;">編輯</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title append-class-color" id="myModalLabel">添加班級</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">班級名稱</label> <div class="col-sm-10 modal-con"> <input type="email" class="form-control modal-con" id="inputEmail3" placeholder=""> </div> </div> <!--下拉列表--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">學習科目</label> <div class="col-sm-10 modal-con"> <select class="form-control modal-con"> <option>HTML</option> <option></option> <option>CSS</option> <option></option> <option>Javascript</option> <option></option> <option>PhotoShop</option> <option></option> <option>seperate word</option> <option></option> </select> </div> </div> <!--入學時間--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">入學時間</label> <div class="col-sm-10 modal-con"> <!--<input type="email" class="form-control modal-con" id="inputEmail3" placeholder="">--> <!--time--> <div class="form-group"> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon rili" id="basic-addon1"><i class="fa fa-calendar"></i></span> <input type="text" id="calendar" placeholder="27/07/2017" class="form-control timewidth" Readonly> </div> </div> </div> <!--time--> </div> </div> <!--學員人數--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">學員人數</label> <div class="col-sm-10 modal-con"> <input type="email" class="form-control modal-con" id="inputEmail3" placeholder=""> </div> </div> <!--班主任--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">班主任</label> <div class="col-sm-10 modal-con"> <select class="form-control modal-con"> <option>楊老師</option> <option>楊老師2</option> <option>楊老師3</option> <option>楊老師4</option> <option>楊老師5</option> </select> </div> </div> <!--班級介紹--> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label modal-body">班級介紹</label> <div class="col-sm-10 modal-con"> <textarea class="form-control " rows="3"></textarea> <!--<input type="email" class="form-control modal-con" id="inputEmail3" placeholder="">--> </div> </div> </form> <!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> <!--編輯--> <!--<button style="margin-right:5px;color: white;" class="btn" type="submit">編輯</button>--> <button style="margin-right:5px;color: white;" class="btn" type="submit" onclick="remove_item(this)">刪除</button></td> </tr> </tbody> </table> <!--表格下邊的灰線--> <div class="gray-line"></div> <!--註釋掉的是用button寫的按鈕--> <!--按鈕組--> <!-- <div class="btn-group anniu" role="group" aria-label="..."> <div type="button" class="btn btn-default" role="group"><</div> <div type="button" class="btn btn-default" role="group">1</div> <div type="button" class="btn btn-default" role="group">2</div> <div type="button" class="btn btn-default" role="group">3</div> <div type="button" class="btn btn-default" role="group">></div> </div> </div>--> <!--默認分頁用bootstrap寫的--> <nav aria-label="Page navigation"> <ul class="pagination anniu"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>

</div> </div> <!--左二--> </div> <div role="tabpanel" class="tab-pane" id="messages"> </div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div>

</div> <!--隔開--> </div>

<script src="jquery-3.2.1.js"></script> <script src="bootstrap-datetimepicker.js"></script> <!--<script src="jquery.js"></script>--> <script src="new.js"></script>

<script src="doc.js"></script> <script src="bootstrap/js/bootstrap.js"></script> <script>

</script>

<!--第二個時間插件-->



<!--<script src="src/jquery-1.7.2.min.js"></script> <script src="src/bootstrap.min.js"></script> <script src="dist/bootstrapDatepickr-1.0.0.min.js"></script>-->

</body> </html> //外副css .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ zoom:1; } .top{ width: 100%; height: 60px; background: black; position: fixed; z-index: 999; top: 0; } .top>.container>span{ line-height: 60px; font-size: 20px; color: white; } .picture{ float: right; line-height: 60px; width: 50px; height: 50px; } .picture img{ width: 100%; height: 100%; border-radius: 50%; } .left1{ height: 600px; background: gray; padding: 0; } #menu a{ color: white; padding: 10px 10px 10px 48px; } #menu a:hover{ background-color: gray; } li{ list-style: none;
} .left1 li{ padding-top: 25px; color: lavenderblush; font-size: 20px; } .right1{ background: oldlace; height: 100%; margin-top: 60px; padding-bottom: 175px; min-height: 600px; }
.right-top{ width: 100%; height: 50px; line-height: 50px; color: lavenderblush; } .shrink{ width: 90%; margin: auto; margin-bottom: 7px; } .append{ float: right; display: block; margin: 2px 0 50px 0; width: 200px; } .shrink span{ color: black; } .tb{ background: white; width: 98%; margin: auto; margin-top: 10px; } .anniu{ float: right; display: block; margin-bottom: 10px; margin-top: 10px; margin-right: 20px;
} .tbackground{ background: white; } .gray-line{ border: 1px solid silver; width: 98%; margin: auto; display: block; margin-top: 10px; }
.append-class-color{ color: black; } @media screen and (max-width:420px){ .append{ width: 100px; } } .beyong-hidden{ overflow: hidden; } .tx{ width: 60px; height: 60px; border-radius: 50%; background: url("touxiang.jpg")no-repeat center center; } .open{ border-radius: 50%; }
/*添加班級中的屬性*/ /*.modal-body span{ margin-left: 120px; } .modal-body select{ width: 250px; height: 30px; margin-left: 20px; } .modal-body input{ width: 250px; height: 30px; margin-left: 20px; }*/
.modal-body{ /*margin-left: 5px;*/ color: black; } .modal-con{ margin-top: 8px; } #zuoerbackground{ background: lightcyan; } #zuosanbackground{ background: seashell; } /*編輯*/ .editor_value{ width: 107px; } .active{ width: 100%; } /*.aaaaa{ border-left: 3px solid deepskyblue; }*/ 外副js
var express = require(‘express‘); var app = express(); var fs = require("fs"); var bodyParser = require(‘body-parser‘);

// parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json())

app.use(express.static(‘xueyuanguanli1‘));

var Class = require("./class").Class;
//分頁 app.get("/list_class", function(req, res) { var pageSize = parseInt(req.query["pageSize"]); var pageNo = parseInt(req.query["pageNo"]); var dbquery = Class.find({}); dbquery.skip(pageSize * pageNo); //跳過多少條 dbquery.limit(pageSize); //頁數 dbquery.find({}, function(err, list) { Class.count({}, function(arr, total) { if (err) { res.json({ status: 500, message: "查詢錯誤" }); } else { res.json({ status: 200, total: total, pageSize: pageSize, pageNo: pageNo, list: list, }) } }) }) }); //刪除 app.delete("/class", function(req, res) { var index = req.query["index"] //查詢id console.log(index) var wherestr = { "_id": index } Class.remove(wherestr, function(err) { if (err) { res.json({ code: -1, message: "刪除失敗" }) } else { res.json({ code: 1, message: "刪除成功" }) } }) });
//添加 app.post("/class2", function(req, res) { var data = req.body; var c1 = new Class(data); c1.save(function(err) { if (err) { res.json({ code: -1, message: "添加失敗" }) } else { res.json({ code: 1, message: "添加成功" }) }
});
});
//編輯 app.put("/class1", function(req, res) { var data = req.body;
// console.log(data) var index = req.query["index"] // console.log(index); var wherestr = { "_id": index } // var updatestr = new Class(data) // delete updatestr._id
var updatestr = data
console.log(updatestr) Class.update(wherestr, updatestr, function(err) { if (err) { res.json({ code: -1, message: "編輯失敗" }) } else { res.json({ code: 1, message: "編輯成功" }) } })
});


console.log("listen to ") app.listen(8081); var doc ={ byid : function(id){ return document.getElementById(id); }, bytag : function(tagname){ return document.getElementsByTagName(tagname); }, byclass : function(cname){ return document.getElementsByClassName(cname); }, q:function(selector){ return document.querySelector(selector); }, qall:function(selector){ return document.querySelectorAll(selector); }, create:function(tag){ return document.createElement(tag); }, insert:function(newel,where){ return where.parentNode.insertBefore(newel,where); }, replace:function(newel,where){ return where.parentNode.replaceChild(newel,where); }, remove:function(el){ return el.parentNode.removeChild(el); }, saveData : function(name,data){ if(typeof data == "object"){ data = JSON.stringify(data); } localStorage.setItem(name,data); }, getData : function(name){ var data = localStorage.getItem(name); try { data = JSON.parse(data); } catch (error) {}
return data; } }
附加jq庫 啟動項 var express = require(‘express‘); var app = express(); var fs = require("fs"); var bodyParser = require(‘body-parser‘)

// parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json())

app.use(express.static(‘xueyuanguanli1‘)); //查詢 app.get("/list_class",function(req,res){ //讀取文件 var data = fs.readFileSync(‘index.json‘); //把文件內容轉換為json對象 var jsondata = JSON.parse(data); res.json( // status:200, //json數據 jsondata ); }); //刪除 app.delete("/class",function(req,res){ var index = req.query["index"]//獲取url的查詢參數串 //讀取文件 var data = fs.readFileSync(‘index.json‘); //把文件內容轉換為json對象 var jsondata = JSON.parse(data); // console.log(jsondata) jsondata.splice(parseInt(index),1); fs.writeFileSync(‘index.json‘,JSON.stringify(jsondata)) res.json({ status:200, message:"刪除成功" }); });
//添加 app.post("/class2",function(req,res){ var data = req.body; // console.log(data) // data.date = new Date(); //讀取文件 var datastr = fs.readFileSync(‘index.json‘); //把文件內容轉換為json對象 // console.log(typeof datastr) var jsondata = JSON.parse(datastr); jsondata.push(data); // console.log(jsondata) fs.writeFileSync(‘index.json‘,JSON.stringify(jsondata)) res.json({ status:200, message:"添加成功" }); });
//編輯 app.put("/class1",function(req,res){ var index = req.query["index"]; console.log(index); var data = req.body; console.log(data) // data.date = new Date(); //讀取文件 var datastr = fs.readFileSync(‘index.json‘); //把文件內容轉換為json對象 var jsondata = JSON.parse(datastr);
jsondata.splice(parseInt(index),1,data); console.log(jsondata) fs.writeFileSync(‘index.json‘,JSON.stringify(jsondata)) res.json({ status:200, message:"修改成功" }); });


console.log("listen to ") app.listen(8081);

學員管理