这周学习了 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 就是 制作了一个折线统计图
增加 删除 修改 都比较正常
查询功能做的就比较差 因为直接把代码显示到了页面上面
原文地址：https://www.cnblogs.com/ATnTention/p/11631999.html
时间： 2024-10-29 18:00:12