這周學習了 UI框架 可以大大減少我們網頁設計的工作量
在layui的官網中 都有很多好看的樣式 和一些 數據表格
只需要我們稍加修改即可使用 還需要下載layui官網的 相關文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>后台管理</title> 9 <link rel="stylesheet" href="./layui/css/layui.css"> 10 </head> 11 <style> 12 body { 13 margin: 10px; 14 } 15 16 .demo-carousel { 17 height: 200px; 18 line-height: 200px; 19 text-align: center; 20 } 21 </style> 22 23 <body> 24 <ul class="layui-nav" lay-filter=""> 25 <li class="layui-nav-item"> 26 <a>學生管理系統</a> 27 </li> 28 <li class="layui-nav-item"> 29 <a href="./login.html">登錄</a> 30 </li> 31 <li class="layui-nav-item"> 32 <a href="./register.html">注冊</a> 33 </li> 34 <li class="layui-nav-item layui-this"> 35 <a href="./homePage.html">后台管理</a> 36 </li> 37 </ul> 38 39 40 <table class="layui-hide" id="demo" lay-filter="test"></table> 41 <select name="" id=""> 42 <option class="op" value="班級">班級</option> 43 <option class="op" value="學生姓名">學生姓名</option> 44 <option class="op" selected value="學號">學號</option> 45 </select> 46 <input type="text" id="check1"> 47 <button id="check" type="button" class="layui-btn">查詢</button> 48 <div id="add"></div> 49 <div id="main" style="width: 600px;height:400px;"></div> 50 51 52 <script type="text/html" id="barDemo"> 53 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> 54 <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a> 55 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> 56 </script> 57 58 59 <script src="./js/jquery-3.4.1.min.js"></script> 60 <script src="./layui/layui.js"></script> 61 <script src="./js/tool.js"></script> 62 <script src="./js/echarts.min.js"></script> 63 <!-- <script src="./js/echarts-gl.js"></script> --> 64 <!-- <script src="./js/echarts-gl.min.js"></script> --> 65 66 <script> 67 let stuData = new Array(); 68 stuData = get("stuData"); 69 console.log(stuData); 70 71 layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () { 72 var laydate = layui.laydate //日期 73 , laypage = layui.laypage //分頁 74 , layer = layui.layer //彈層 75 , table = layui.table //表格 76 , carousel = layui.carousel //輪播 77 , upload = layui.upload //上傳 78 , element = layui.element //元素操作 79 80 layer.msg("歡迎進入學生管理系統！"); 81 82 83 84 //監聽Tab切換 85 element.on('tab(demo)', function (data) { 86 layer.tips('切換了' + data.index + '：' + this.innerHTML, this, { 87 tips: 1 88 }); 89 }); 90 91 92 //第一個實例 93 table.render({ 94 elem: '#demo' 95 , height: 420 96 // , url: './data.json' //數據接口 97 , data: stuData 98 , title: '用戶表' 99 , limit: 10 100 , page: true //開啟分頁 101 , toolbar: 'default' //開啟工具欄，此處顯示默認圖標，可以自定義模板，詳見文檔 102 , totalRow: true //開啟合計行 103 , cols: [[ //表頭 104 { type: 'checkbox', fixed: 'left' } 105 , { field: 'id', title: '學號', width: 80, sort: true, fixed: 'left' } 106 , { field: 'username', title: '學生姓名', width: 130, sort: true } 107 , { field: 'sex', title: '性別', width: 80 } 108 , { field: 'age', title: '年齡', width: 80, sort: true } 109 , { field: 'class', title: '班級', width: 100, sort: true } 110 , { field: 'score', title: '成績', width: 100, sort: true } 111 , { fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barDemo' } 112 ]] 113 , response: { 114 statusCode: 200 //重新規定成功的狀態碼為 200，table 組件默認為 0 115 } 116 , parseData: function (res) { //將原始數據解析成 table 組件所規定的數據 117 return { 118 "code": res.status, //解析接口狀態 119 "msg": res.message, //解析提示文本 120 "count": res.total, //解析數據長度 121 "data": res.rows.item //解析數據列表 122 }; 123 } 124 125 }); 126 127 128 let dataIndex; //全局變量 129 //監聽行工具事件 130 table.on('tool(test)', function (obj) { //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值" 131 var data = obj.data //獲得當前行數據 132 , layEvent = obj.event; //獲得 lay-event 對應的值 133 console.log(data); 134 135 for (let i = 0; i < stuData.length; i++) { 136 if (stuData[i].id == data.id && stuData[i].age == data.age) { 137 dataIndex = i; 138 } 139 } 140 141 142 143 // let dataIndex = event.target.parentNode.parentNode.parentNode.getAttribute("data-index") 144 if (layEvent === 'detail') { 145 layer.msg(` 146 學號：${data.id}<br> 147 學生姓名：${data.username}<br> 148 學生年齡：${data.age}<br> 149 學生班級: ${data.class}<br> 150 學生性別：${data.sex}<br> 151 考試成績: ${data.score} 152 ` 153 ); 154 } else if (layEvent === 'del') { 155 layer.confirm('真的刪除行么', function (index) { 156 console.log(index); 157 obj.del(); //刪除對應行（tr）的DOM結構 158 layer.close(index); 159 //向服務端發送刪除指令 160 stuData.splice(dataIndex, 1); 161 console.log(stuData); 162 save("stuData", stuData); 163 }); 164 } else if (layEvent === 'edit') { 165 let male, female; 166 if (data.sex == "男") { 167 male = "checked"; 168 female = ""; 169 } else { 170 male = ""; 171 female = "checked"; 172 } 173 layer.open({ 174 type: 1, 175 area: ['600px', '360px'], 176 shadeClose: false, //點擊遮罩關閉 177 content: ` 178 \<\div style="padding:15px 10px 0 20px; display:inline-block ">學號\<\/div> 179 <input id="dataID" type="text" value = ${data.id}> <br> 180 \<\div style="padding:15px 10px 0 20px; display:inline-block ">姓名\<\/div> 181 <input id="dataUser" type="text" value = ${data.username}> <br> 182 \<\div style="padding:15px 10px 0 20px; display:inline-block ">性別\<\/div> 183 <input id="dataSex" type="radio" name="sex" value = "男" ${male}>男<input id="dataSex" ${female} type="radio" name="sex" value="女">女 <br> 184 \<\div style="padding:15px 10px 0 20px; display:inline-block ">年齡\<\/div> 185 <input id="dataAge" type="text" value = ${data.age}> <br> 186 \<\div style="padding:15px 10px 0 20px; display:inline-block ">班級\<\/div> 187 <input id="dataClass" type="text" value = ${data.class}> <br> 188 \<\div style="padding:15px 10px 0 20px; display:inline-block ">成績\<\/div> 189 <input id="dataScore" type="text" value = ${data.score}> <br> 190 `, 191 btn: ['確認修改', '取消'] //按鈕 192 }); 193 } 194 }); 195 196 197 $("body").click(function (event) { 198 // console.log(event.target); 199 if (event.target.innerHTML == "確認修改") { 200 // console.log(dataIndex); 201 stuData[dataIndex].id = $("#dataID").val(); 202 stuData[dataIndex].username = $("#dataUser").val(); 203 stuData[dataIndex].sex = $("#dataSex").val(); 204 stuData[dataIndex].age = $("#dataAge").val(); 205 stuData[dataIndex].class = $("#dataClass").val(); 206 stuData[dataIndex].score = $("#dataScore").val(); 207 save("stuData", stuData); 208 window.location.reload(); 209 } else if (event.target.innerHTML == '添加') { 210 // console.log($("input:checked").val()); 211 212 stuData.push({ 213 "id": `${$(".dataID").val()}`, 214 "username": `${$(".dataUser").val()}`, 215 "sex": `${$("input:checked").val()}`, 216 "age": `${$(".dataAge").val()}`, 217 "class": `${$(".dataClass").val()}`, 218 "score": `${$(".dataScore").val()}`, 219 }); 220 save("stuData", stuData); 221 window.location.reload(); 222 } else if (event.target.innerHTML == "查詢") { 223 $(".testp").remove(); 224 if ($(".op:selected").val() == "學生姓名") { 225 for (let i = 0; i < stuData.length; i++) { 226 if (stuData[i].username == $("#check1").val()) { 227 $("<p>", { 228 class: "testp", 229 text: JSON.stringify(stuData[i]), 230 }).appendTo("body"); 231 } 232 } 233 } else if ($(".op:selected").val() == "班級") { 234 for (let i = 0; i < stuData.length; i++) { 235 if (stuData[i].class == $("#check1").val()) { 236 $("<p>", { 237 class: "testp", 238 text: JSON.stringify(stuData[i]), 239 }).appendTo("body"); 240 } 241 } 242 } else if ($(".op:selected").val() == "學號") { 243 for (let i = 0; i < stuData.length; i++) { 244 if (stuData[i].id == $("#check1").val()) { 245 $("<p>", { 246 class: "testp", 247 text: JSON.stringify(stuData[i]), 248 }).appendTo("body"); 249 } 250 } 251 } 252 } 253 254 }); 255 256 257 258 259 260 //監聽頭s工具欄事件 261 table.on('toolbar(test)', function (obj) { 262 var checkStatus = table.checkStatus(obj.config.id) 263 , data = checkStatus.data; //獲取選中的數據 264 console.log(checkStatus); 265 console.log(data); 266 switch (obj.event) { 267 case 'add': 268 layer.open({ 269 type: 1, 270 area: ['600px', '360px'], 271 shadeClose: false, //點擊遮罩關閉 272 content: ` 273 \<\div style="padding:15px 10px 0 20px; display:inline-block ">學號\<\/div> 274 <input class="dataID" type="text"> <br> 275 \<\div style="padding:15px 10px 0 20px; display:inline-block ">姓名\<\/div> 276 <input class="dataUser" type="text"> <br> 277 \<\div style="padding:15px 10px 0 20px; display:inline-block ">性別\<\/div> 278 <input class="dataSex" type="radio" name="sex" value = 男>男 <input id="dataSex" type="radio" name="sex" value="女">女 <br> 279 \<\div style="padding:15px 10px 0 20px; display:inline-block ">年齡\<\/div> 280 <input class="dataAge" type="text"> <br> 281 \<\div style="padding:15px 10px 0 20px; display:inline-block ">班級\<\/div> 282 <input class="dataClass" type="text"> <br> 283 \<\div style="padding:15px 10px 0 20px; display:inline-block ">成績\<\/div> 284 <input class="dataScore" type="text"> <br> 285 `, 286 btn: ["添加", '取消'] //按鈕 287 }); 288 289 // console.log(data); 290 break; 291 case 'update': 292 if (data.length === 0) { 293 layer.msg('請選擇一行'); 294 } else if (data.length > 1) { 295 layer.msg('只能同時編輯一個'); 296 } else { 297 layer.alert('編輯 [id]：' + checkStatus.data[0].id); 298 } 299 break; 300 case 'delete': 301 if (data.length === 0) { 302 layer.msg('請選擇一行'); 303 } else { 304 layer.msg('刪除'); 305 } 306 break; 307 }; 308 }); 309 310 }); 311 312 313 314 /*-----------------------------------echarts------------*/ 315 316 317 // 基於准備好的dom，初始化echarts實例 318 var myChart = echarts.init(document.getElementById('main')); 319 // username = ["zjc", "lgy", "wjy"]; 320 // score = ["58", "70", "70"]; 321 322 // 指定圖表的配置項和數據 323 var option = { 324 title: { 325 text: '學生成績表' 326 }, 327 tooltip: {}, 328 legend: { 329 data: ['成績'] 330 }, 331 xAxis: { 332 // data: [username[0], "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] 333 data: [] 334 }, 335 yAxis: {}, 336 series: [{ 337 name: '成績', 338 type: 'line', //折線圖 條形圖 339 // data: [score[0], 20, 36, 10, 10, 20] 340 data: [] 341 }] 342 }; 343 for (let i = 0; i < stuData.length; i++) { 344 option.xAxis.data.push(stuData[i].username); 345 } 346 for (let i = 0; i < stuData.length; i++) { 347 option.series[0].data.push(stuData[i].score); 348 } 349 // 使用剛指定的配置項和數據顯示圖表。 350 myChart.setOption(option); 351 </script> 352 353 </body> 354 355 </html>
還有兩個登陸注冊界面 通過ajax
局部刷新 然后 才能進入到 學生管理 界面
整個代碼都是在layui的基礎上添加的自己所需要的功能
echarts 就是 制作了一個折線統計圖
增加 刪除 修改 都比較正常
查詢功能做的就比較差 因為直接把代碼顯示到了頁面上面