这周学习了 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>
View Code

还有两个登陆注册界面 通过ajax

局部刷新 然后 才能进入到 学生管理 界面 

整个代码都是在layui的基础上添加的自己所需要的功能

echarts 就是 制作了一个折线统计图 

增加 删除 修改 都比较正常 

查询功能做的就比较差 因为直接把代码显示到了页面上面