这周学习了 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=" 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: '学号', 80, sort: true, fixed: 'left' } 106 , { field: 'username', title: '学生姓名', 130, sort: true } 107 , { field: 'sex', title: '性别', 80 } 108 , { field: 'age', title: '年龄', 80, sort: true } 109 , { field: 'class', title: '班级', 100, sort: true } 110 , { field: 'score', title: '成绩', 100, sort: true } 111 , { fixed: 'right', title: '操作', 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 就是 制作了一个折线统计图
增加 删除 修改 都比较正常
查询功能做的就比较差 因为直接把代码显示到了页面上面