大学信息查询系统

成品展示

大学信息系统成品展示.png

大学信息系统地图成品展示.png

前端

主页

主页html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang = "en">
    <meta charset="UTF-8" />
    <meta name = "viewport" content="width = device-width, initial-scale = 1.0" />
    <title>
        数据可视化
    </title>
    <link rel = "stylesheet" href = "css/index.css"/>
    <style>
        /* Add styles for the top navigation bar */
    #navbar {
      background-color: #333;
      overflow: hidden;
    }

    #navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
	
    /* Style the active link */
    #navbar a.active {
      background-color: #ddd;
      color: black;
    }

    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    </style>
    <body>
        <div id="navbar">
            <!-- Link each navigation item to the corresponding pages -->
            <a href="index.html" id="home">主页</a>
            <a href="map.html" id="map">地图</a>
            <a href="university_information.html" id="universities">大学系</a>
            <a href="about.html" id="about">关于</a>
            <a href="log_test.html" id="user_log">用户登录</a>
            <a href="manager_log.html" id="manager_log">管理员登录</a>
        </div>

        <script>
        // 为了让当前页面加载时高亮对应导航标签，获取当前页面的文件名
        const currentPath = window.location.pathname.split('/').pop();
        const currentPage = currentPath.split('.')[0];
    
        // 高亮当前页面对应的导航标签
        const navbarItems = document.querySelectorAll('#navbar a');
        navbarItems.forEach(item => {
            const page = item.getAttribute('href').split('.')[0];
            if (page === currentPage) {
                item.classList.add('active');
            }
        });
        </script>
        <!--页面主体部分-->
        <section class = "mainbox">
            <div class = "column">
                <div class = "panel bar">
                    <h2>各个省份985大学数量排名</h2>
                    <div class = "chart"></div>
                    <div class = "panel-footer"></div>
                </div>
                <div class = "panel bar2">
                    <h2>各个省份211大学数量排名</h2>
                    <div class = "chart"></div>
                    <div class = "panel-footer"></div>
                </div>
                <div class = "panel bar5">
                    <h2>大学热度排行（单位：万）</h2>
                    <div class = "chart"></div>
                    <div class = "panel-footer"></div>
                </div> 
                
            </div>
            <div class = "column">
                <!--no模块制作-->
                <div class = "no">

                    <div class = "no-hd">
                        <ul>
                            <li>9400000</li>
                            <li>1.67%</li>
                            <li>4.75%</li>
                        </ul>
                    </div>
                    
                    <div class = "no-bd">
                        <ul>
                            <li>近几年平均高考人数</li>
                            <li>985录取率</li>
                            <li>211录取率</li>
                        </ul>
                    </div>
                </div>
                <!-- 地图模块-->
                <div class = "map">
                    <div class = "map1"></div>
                    <div class = "map2"></div>
                    <div class = "map3"></div>
                    <div class="chart"></div>
                </div>
            </div>
            <div class = "column">
                <div class = "panel bar3">
                    <h2>近四年各省文科一本分数线</h2>
                    <div class = "chart"></div>
                    <div class = "panel-footer"></div>
                </div>
                <div class = "panel bar4">
                    <h2>近四年各省理科一本分数线</h2>
                    <div class = "chart"></div>
                    <div class = "panel-footer"></div>
                </div>
                <div class = "panel pie">
                    <h2>各种类高校占比</h2>
                    <div class = "chart"></div>
                    <div class = "panel-footer"></div>
                </div> 
            </div>
        </section>
        <script src = "js/flexible.js"></script>
        <script src = "js/echarts.min.js"></script>
        <script src = "js/china.js"></script>
        <script src = "js/index.js"></script>
    </body> 
</html>

主页js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
//所有的图基于立即执行函数调用
// 柱状图模块1--各个省份985大学数量排名
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  var mydata = [
		{name: '北京',value: 8 },{name: '天津',value: 1 },
		{name: '上海',value: 4 },{name: '重庆',value: 1 },
		{name: '河北',value: 0 },{name: '河南',value: 0 },
		{name: '云南',value: 0 },{name: '辽宁',value: 2 },
		{name: '黑龙江',value: 1 },{name: '湖南',value: 3 },
		{name: '安徽',value: 1 },{name: '山东',value: 2 },
		{name: '新疆',value: 0 },{name: '江苏',value: 2 },
		{name: '浙江',value: 1 },{name: '江西',value: 0 },
		{name: '湖北',value: 2 },{name: '广西',value: 0 },
		{name: '甘肃',value: 1 },{name: '山西',value: 0 },
		{name: '内蒙古',value: 0 },{name: '陕西',value: 3 },
		{name: '吉林',value: 1 },{name: '福建',value: 1 },
		{name: '贵州',value: 0 },{name: '广东',value: 2 },
		{name: '青海',value: 0 },{name: '西藏',value: 0 },
		{name: '四川',value: 2 },{name: '宁夏',value: 0 },
		{name: '海南',value: 0 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  //2 指定配置项和数据
  var option = {
    color: ["#FCF3CF"],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' //line
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "20%",
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['北京','天津','上海','重庆',
        '河北','河南','云南','辽宁','黑龙江',
        '湖南','安徽','山东','新疆','江苏',
        '浙江','江西','湖北','广西','甘肃',
        '山西','内蒙古','陕西','吉林','福建',
        '贵州','广东','青海','西藏','四川',
        '宁夏','海南','台湾','香港','澳门'],
        axisTick: {
          alignWithLabel: true
        },
          // 设置x轴标签文字样式
          // x轴的文字颜色和大小
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        //  x轴样式不显示
        axisLine: {
          show: false
          // 如果想要设置单独的线条样式 
          // lineStyle: {
          //    color: "rgba(255,255,255,.1)",
          //    width: 1,
          //    type: "solid"
        }

      }
    ],
    yAxis: [
      { 
        type: 'value',
          // 设置y轴标签文字样式
          // y轴的文字颜色和大小
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          },
          axisLine: {
            // 如果想要设置单独的线条样式 
             lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
          }
          },
          // y 轴分隔线样式
          splitLine: {
            lineStyle: {
            color: "rgba(255,255,255,.1)"
            }
          }
      }
    ],
    dataZoom: [{
      left: "8%",
      right: "8%",
      textStyle: {
        color: "rgba(255, 255, 255,.6)"
      }
    }],
    series: [
      {
        name: '985_数量',
        type: 'bar',
        barWidth: '35%',
        data: mydata,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();
// 柱状图模块2--各个省份211大学数量排名
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  var mydata = [
		{name: '北京',value: 26 },{name: '天津',value: 3 },
		{name: '上海',value: 10 },{name: '重庆',value: 2 },
		{name: '河北',value: 0 },{name: '河南',value: 0 },
		{name: '云南',value: 1 },{name: '辽宁',value: 4 },
		{name: '黑龙江',value: 4 },{name: '湖南',value: 4 },
		{name: '安徽',value: 3 },{name: '山东',value: 3 },
		{name: '新疆',value: 2 },{name: '江苏',value: 11 },
		{name: '浙江',value: 1 },{name: '江西',value: 1 },
		{name: '湖北',value: 7 },{name: '广西',value: 1 },
		{name: '甘肃',value: 1 },{name: '山西',value: 1 },
		{name: '内蒙古',value: 1 },{name: '陕西',value: 8 },
		{name: '吉林',value: 3 },{name: '福建',value: 2 },
		{name: '贵州',value: 1 },{name: '广东',value: 4 },
		{name: '青海',value: 1 },{name: '西藏',value: 1 },
		{name: '四川',value: 5 },{name: '宁夏',value: 1 },
		{name: '海南',value: 1 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  //2 指定配置项和数据
  var option = {
    color: ["#F9E79F"],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' //line
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "20%",
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['北京','天津','上海','重庆',
        '河北','河南','云南','辽宁','黑龙江',
        '湖南','安徽','山东','新疆','江苏',
        '浙江','江西','湖北','广西','甘肃',
        '山西','内蒙古','陕西','吉林','福建',
        '贵州','广东','青海','西藏','四川',
        '宁夏','海南','台湾','香港','澳门'],
        axisTick: {
          alignWithLabel: true
        },
          // 设置x轴标签文字样式
          // x轴的文字颜色和大小
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        //  x轴样式不显示
        axisLine: {
          show: false
          // 如果想要设置单独的线条样式 
          // lineStyle: {
          //    color: "rgba(255,255,255,.1)",
          //    width: 1,
          //    type: "solid"
        }

      }
    ],
    yAxis: [
      { 
        type: 'value',
          // 设置y轴标签文字样式
          // y轴的文字颜色和大小
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          },
          axisLine: {
            // 如果想要设置单独的线条样式 
             lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
          }
          },
          // y 轴分隔线样式
          splitLine: {
            lineStyle: {
            color: "rgba(255,255,255,.1)"
            }
          }
      }
    ],
    dataZoom: [{
      left: "8%",
      right: "8%",
      textStyle: {
        color: "rgba(255, 255, 255,.6)"
      }
    }],
    series: [
      {
        name: '211_数量',
        type: 'bar',
        barWidth: '35%',
        data: mydata,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();

// 柱状图模块3--近四年各省文科一本分数线
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".bar3 .chart"));
  var mydata_2019 = [
		{name: '北京',value: 480 },{name: '天津',value: 428 },
		{name: '上海',value: 403 },{name: '重庆',value: 545 },
		{name: '河北',value: 549 },{name: '河南',value: 536 },
		{name: '云南',value: 560 },{name: '辽宁',value: 482 },
		{name: '黑龙江',value: 500 },{name: '湖南',value: 553 },
		{name: '安徽',value: 550 },{name: '山东',value: 503 },
		{name: '新疆',value: 510 },{name: '江苏',value: 339 },
		{name: '浙江',value: 595 },{name: '江西',value: 560 },
		{name: '湖北',value: 542 },{name: '广西',value: 521 },
		{name: '甘肃',value: 519 },{name: '山西',value: 542 },
		{name: '内蒙古',value: 522 },{name: '陕西',value: 518 },
		{name: '吉林',value: 544 },{name: '福建',value:550 },
		{name: '贵州',value: 542 },{name: '广东',value: 455 },
		{name: '青海',value: 488 },{name: '西藏',value: 420 },
		{name: '四川',value: 540 },{name: '宁夏',value: 538 },
		{name: '海南',value: 593 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  var mydata_2020 = [
		{name: '北京',value: 436 },{name: '天津',value: 476 },
		{name: '上海',value: 400},{name: '重庆',value: 536 },
		{name: '河北',value: 465 },{name: '河南',value: 556 },
		{name: '云南',value: 555 },{name: '辽宁',value: 472 },
		{name: '黑龙江',value: 547 },{name: '湖南',value: 550 },
		{name: '安徽',value: 541 },{name: '山东',value: 449 },
		{name: '新疆',value: 482 },{name: '江苏',value: 343 },
		{name: '浙江',value: 594 },{name: '江西',value: 547 },
		{name: '湖北',value: 532 },{name: '广西',value: 532 },
		{name: '甘肃',value: 520 },{name: '山西',value: 542 },
		{name: '内蒙古',value: 520 },{name: '陕西',value: 512 },
		{name: '吉林',value: 543 },{name: '福建',value: 465 },
		{name: '贵州',value: 548 },{name: '广东',value: 430 },
		{name: '青海',value: 439 },{name: '西藏',value: 335 },
		{name: '四川',value: 527 },{name: '宁夏',value: 523 },
		{name: '海南',value: 463 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  var mydata_2021 = [
		{name: '北京',value: 400 },{name: '天津',value: 463 },
		{name: '上海',value: 400 },{name: '重庆',value: 456 },
		{name: '河北',value: 454 },{name: '河南',value: 558 },
		{name: '云南',value: 565 },{name: '辽宁',value: 456 },
		{name: '黑龙江',value: 472 },{name: '湖南',value: 466 },
		{name: '安徽',value: 560 },{name: '山东',value: 444 },
		{name: '新疆',value: 466 },{name: '江苏',value: 476 },
		{name: '浙江',value: 495 },{name: '江西',value: 559 },
		{name: '湖北',value: 463 },{name: '广西',value: 530 },
		{name: '甘肃',value: 502 },{name: '山西',value: 543 },
		{name: '内蒙古',value: 488 },{name: '陕西',value: 499},
		{name: '吉林',value: 519 },{name: '福建',value: 467 },
		{name: '贵州',value: 556 },{name: '广东',value: 448 },
		{name: '青海',value: 405 },{name: '西藏',value: 448 },
		{name: '四川',value: 541 },{name: '宁夏',value: 505 },
		{name: '海南',value: 466 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  var mydata_2022 = [
		{name: '北京',value: 425 },{name: '天津',value: 463 },
		{name: '上海',value: 400 },{name: '重庆',value: 415 },
		{name: '河北',value: 443 },{name: '河南',value: 527 },
		{name: '云南',value: 575 },{name: '辽宁',value: 404 },
		{name: '黑龙江',value: 463 },{name: '湖南',value: 451 },
		{name: '安徽',value: 523 },{name: '山东',value: 437 },
		{name: '新疆',value: 443 },{name: '江苏',value: 471 },
		{name: '浙江',value: 497 },{name: '江西',value: 529 },
		{name: '湖北',value: 435 },{name: '广西',value: 532 },
		{name: '甘肃',value: 485 },{name: '山西',value: 517 },
		{name: '内蒙古',value: 459 },{name: '陕西',value: 484 },
		{name: '吉林',value: 511 },{name: '福建',value: 468 },
		{name: '贵州',value: 549 },{name: '广东',value: 437 },
		{name: '青海',value: 409 },{name: '西藏',value: 430 },
		{name: '四川',value: 538 },{name: '宁夏',value: 487 },
		{name: '海南',value: 471 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  //2 指定配置项和数据
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' //line
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "20%",
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['北京','天津','上海','重庆',
        '河北','河南','云南','辽宁','黑龙江',
        '湖南','安徽','山东','新疆','江苏',
        '浙江','江西','湖北','广西','甘肃',
        '山西','内蒙古','陕西','吉林','福建',
        '贵州','广东','青海','西藏','四川',
        '宁夏','海南','台湾','香港','澳门'],
      axisTick: {
          alignWithLabel: true
        },
          // 设置x轴标签文字样式
          // x轴的文字颜色和大小
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        //  x轴样式不显示
        axisLine: {
          show: false
          // 如果想要设置单独的线条样式 
          // lineStyle: {
          //    color: "rgba(255,255,255,.1)",
          //    width: 1,
          //    type: "solid"
        }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
      axisLine: {
        // 如果想要设置单独的线条样式 
         lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
      }
      },
      // y 轴分隔线样式
      splitLine: {
        lineStyle: {
        color: "rgba(255,255,255,.1)"
        }
      }
    },
    dataZoom: [{
      left: "8%",
      right: "8%",
      textStyle: {
        color: "rgba(255, 255, 255,.6)"
      }
    }],
    series: [
      {
        color:'#FFEBCD',
        type: 'bar',
        name: '2019',
        data: mydata_2019,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
      {
        color:'#d5d6d2',
        type: 'bar',
        name: '2020',
        data: mydata_2020,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
      {
        color:'#ffffff',
        type: 'bar',
        name: '2021',
        data: mydata_2021,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
      {
        color:'#3a5199',
        type: 'bar',
        name: '2022',
        data: mydata_2022,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();

// 柱状图模块4--近四年各省理科一本分数线
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".bar4 .chart"));
  var mydata_2019 = [
		{name: '北京',value: 423 },{name: '天津',value: 400 },
		{name: '上海',value: 403 },{name: '重庆',value: 525 },
		{name: '河北',value: 502 },{name: '河南',value: 502 },
		{name: '云南',value: 535 },{name: '辽宁',value: 369 },
		{name: '黑龙江',value: 477 },{name: '湖南',value: 500 },
		{name: '安徽',value: 496 },{name: '山东',value: 443 },
		{name: '新疆',value: 450 },{name: '江苏',value: 345 },
		{name: '浙江',value: 595 },{name: '江西',value: 535 },
		{name: '湖北',value: 505 },{name: '广西',value: 509 },
		{name: '甘肃',value: 470 },{name: '山西',value: 507 },
		{name: '内蒙古',value: 477 },{name: '陕西',value: 468 },
		{name: '吉林',value: 530 },{name: '福建',value: 493 },
		{name: '贵州',value: 470 },{name: '广东',value: 390 },
		{name: '青海',value: 407 },{name: '西藏',value: 425 },
		{name: '四川',value: 547 },{name: '宁夏',value: 457 },
		{name: '海南',value: 539 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  var mydata_2020 = [
		{name: '北京',value: 436 },{name: '天津',value: 476 },
		{name: '上海',value: 400 },{name: '重庆',value: 500 },
		{name: '河北',value: 415 },{name: '河南',value: 544 },
		{name: '云南',value: 535 },{name: '辽宁',value: 359 },
		{name: '黑龙江',value: 455 },{name: '湖南',value: 507 },
		{name: '安徽',value: 515 },{name: '山东',value: 449 },
		{name: '新疆',value: 431 },{name: '江苏',value: 347 },
		{name: '浙江',value: 594 },{name: '江西',value: 535 },
		{name: '湖北',value: 521 },{name: '广西',value: 496 },
		{name: '甘肃',value: 458 },{name: '山西',value: 537 },
		{name: '内蒙古',value: 452 },{name: '陕西',value: 451 },
		{name: '吉林',value: 517 },{name: '福建',value: 402 },
		{name: '贵州',value: 480 },{name: '广东',value: 410 },
		{name: '青海',value: 352 },{name: '西藏',value: 480 },
		{name: '四川',value: 529 },{name: '宁夏',value: 434 },
		{name: '海南',value: 463 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  var mydata_2021 = [
		{name: '北京',value: 400 },{name: '天津',value: 463 },
		{name: '上海',value: 400 },{name: '重庆',value: 446 },
		{name: '河北',value: 412 },{name: '河南',value: 518 },
		{name: '云南',value: 520 },{name: '辽宁',value: 336 },
		{name: '黑龙江',value: 415 },{name: '湖南',value: 434 },
		{name: '安徽',value: 488 },{name: '山东',value: 444 },
		{name: '新疆',value: 405 },{name: '江苏',value: 417 },
		{name: '浙江',value: 495 },{name: '江西',value: 519 },
		{name: '湖北',value: 397 },{name: '广西',value: 487 },
		{name: '甘肃',value: 440 },{name: '山西',value: 505 },
		{name: '内蒙古',value: 418 },{name: '陕西',value: 443 },
		{name: '吉林',value: 482 },{name: '福建',value: 423 },
		{name: '贵州',value: 456 },{name: '广东',value: 432 },
		{name: '青海',value: 330 },{name: '西藏',value: 415 },
		{name: '四川',value: 521 },{name: '宁夏',value: 412 },
		{name: '海南',value: 466 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  var mydata_2022 = [
		{name: '北京',value: 425 },{name: '天津',value: 463 },
		{name: '上海',value: 400 },{name: '重庆',value: 411 },
		{name: '河北',value: 430 },{name: '河南',value: 509 },
		{name: '云南',value: 515 },{name: '辽宁',value: 362 },
		{name: '黑龙江',value: 429 },{name: '湖南',value: 414 },
		{name: '安徽',value: 491 },{name: '山东',value: 437 },
		{name: '新疆',value: 400 },{name: '江苏',value: 429 },
		{name: '浙江',value: 497 },{name: '江西',value: 509 },
		{name: '湖北',value: 409 },{name: '广西',value: 475 },
		{name: '甘肃',value: 442 },{name: '山西',value: 498 },
		{name: '内蒙古',value: 427 },{name: '陕西',value: 449 },
		{name: '吉林',value: 488 },{name: '福建',value: 428 },
		{name: '贵州',value: 451 },{name: '广东',value: 445 },
		{name: '青海',value: 335 },{name: '西藏',value: 400 },
		{name: '四川',value: 515 },{name: '宁夏',value: 412 },
		{name: '海南',value: 471 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
  //2 指定配置项和数据
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' //line
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "20%",
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['北京','天津','上海','重庆',
        '河北','河南','云南','辽宁','黑龙江',
        '湖南','安徽','山东','新疆','江苏',
        '浙江','江西','湖北','广西','甘肃',
        '山西','内蒙古','陕西','吉林','福建',
        '贵州','广东','青海','西藏','四川',
        '宁夏','海南','台湾','香港','澳门'],
      axisTick: {
          alignWithLabel: true
        },
          // 设置x轴标签文字样式
          // x轴的文字颜色和大小
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        //  x轴样式不显示
        axisLine: {
          show: false
          // 如果想要设置单独的线条样式 
          // lineStyle: {
          //    color: "rgba(255,255,255,.1)",
          //    width: 1,
          //    type: "solid"
        }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
      axisLine: {
        // 如果想要设置单独的线条样式 
         lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid"
      }
      },
      // y 轴分隔线样式
      splitLine: {
        lineStyle: {
        color: "rgba(255,255,255,.1)"
        }
      }
    },
    dataZoom: [{
      left: "8%",
      right: "8%",
      textStyle: {
        color: "rgba(255, 255, 255,.6)"
      }
    }],
    series: [
      {
        color:'#FFEBCD',
        type: 'bar',
        name: '2019',
        data: mydata_2019,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
      {
        color:'#d5d6d2',
        type: 'bar',
        name: '2020',
        data: mydata_2020,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
      {
        color:'#ffffff',
        type: 'bar',
        name: '2021',
        data: mydata_2021,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      },
      {
        color:'#3a5199',
        type: 'bar',
        name: '2022',
        data: mydata_2022,
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();

//横向柱状图--大学热度图
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".bar5 .chart"));
  //2 指定配置项和数据
  var option = {
    color: ["#F7DC6F"],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
      left: "15%",
      top: "10px",
      right: "5%",
      bottom: "5%",
      containLabel: true
    },
    //相当于上面的 x y 刚好相反
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        // 设置y轴标签文字样式
          // y轴的文字颜色和大小
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          },
          axisLine: {
            // 如果想要设置单独的线条样式 
             lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
          }
          },
          // y 轴分隔线样式
          splitLine: {
            lineStyle: {
            color: "rgba(255,255,255,.1)"
            }
          }

    },
    yAxis: {
        type: 'category',
        data: ['北京大学','清华大学','中山大学','武汉大学','四川大学','厦门大学'],
        axisTick: {
          alignWithLabel: true
        },
          // 设置x轴标签文字样式
          // x轴的文字颜色和大小
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        //  x轴样式不显示
        axisLine: {
          show: false
          // 如果想要设置单独的线条样式 
          // lineStyle: {
          //    color: "rgba(255,255,255,.1)",
          //    width: 1,
          //    type: "solid"
        }

    },
    dataZoom: [{
      yAxisIndex: 0,
      left: "2%" ,
      top: "8%",
      textStyle: {
        color: "rgba(255, 255, 255,.6)"
      }
    }],
    series: [
        {
            name: '热度',
            type: 'bar',
            data: [2327 , 2373 , 2527 , 2617 , 3302 , 4113],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
        }
    ]
  };
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();

//饼形图
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  //2 指定配置项和数据
  var option = {
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    calculable : true,
    legend:{
      bottom: 0 ,
      itemWidth: 10,
      itemHeight: 10,
      textStyle:{
        color: "rgba(255,255,255,.5)",
        fontSize: "11"
      }
    },
    series : [
        {
            name:'高校数量以及占比',
            type:'pie',
            radius: ['10%', '60%'],
            center : ['50%', '42%'],
            roseType : 'radius',
            // 图形的文字标签
            label:{
              fontSize: 10
            },
            lableLine:{
              length: 5, //length链接图形的线条
              length2: 8  //length2链接文字的线条
            },
            data:[
                {value:9, name:'C9联盟'},
                {value:23, name:'副部级985工程大学'},
                {value:7, name:'985工程大学'},
                {value:47, name:'教育直属的211工程大学'},
                {value:29, name:'地方211工程大学'},
                {value:35, name:'省部级共建高校'},
                //{value:1000, name:'省属高校'},
                //{value:100000, name:'非省属高校'}
            ]
        }
    ]
  };
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();

//地图--各省份985 211大学数量
(function(){
  //1 实例化对象
  var myChart = echarts.init(document.querySelector(".map .chart"));
  //2 指定配置项和数据
  var mydata = [
		{name: '北京',value: 35 },{name: '天津',value: 4 },
		{name: '上海',value: 14 },{name: '重庆',value: 3 },
		{name: '河北',value: 1 },{name: '河南',value: 1 },
		{name: '云南',value: 1 },{name: '辽宁',value: 6 },
		{name: '黑龙江',value: 5 },{name: '湖南',value: 7 },
		{name: '安徽',value: 4 },{name: '山东',value: 5 },
		{name: '新疆',value: 2 },{name: '江苏',value: 13 },
		{name: '浙江',value: 2 },{name: '江西',value: 1 },
		{name: '湖北',value: 9 },{name: '广西',value: 1 },
		{name: '甘肃',value: 2 },{name: '山西',value: 1 },
		{name: '内蒙古',value: 1 },{name: '陕西',value: 12 },
		{name: '吉林',value: 4 },{name: '福建',value: 3 },
		{name: '贵州',value: 1 },{name: '广东',value: 6 },
		{name: '青海',value: 1 },{name: '西藏',value: 1 },
		{name: '四川',value: 6 },{name: '宁夏',value: 1 },
		{name: '海南',value: 1 },{name: '台湾',value: 0 },
		{name: '香港',value: 0 },{name: '澳门',value: 0 }
	];
 
	var option = {
		//backgroundColor: '#FFFFFF',
		title: {
			text: '全国985 211高校分布地图',
			//subtext: '纯属虚构',
			x:'center',
      top: "10%",
      textStyle:{
        color:"#FFFFFF"
      }
		},
		tooltip : {
			trigger: 'item',
		},
		visualMap: {
			show : true,
			x: 'left',
			y: 'bottom',
			splitList: [ 
				{start: 10, end: 40},{start: 6, end: 9},
				{start: 4, end: 5},{start: 2, end: 3},
				{start: 1, end: 1},{start: 0, end: 0},
			],
      textStyle:{
        color: "#FFFFFF"
      },
			  //color: ['#1E90FF', '#00BFFF', '#00FFFF','#AFEEEE', '#E1FFFF', '#F0FFFF'],
        color: ['rgba(30,144,255,0.6)', 'rgba(0,191,255,0.6)', 
                'rgba(0,255,255,0.6)','rgba(175,238,238,0.6)',
                 'rgba(225,255,255,0.6)', 'rgba(240,255,255,0.6)'],
		},
		series: [{
			name: '985+211大学数量',
			type: 'map',
			mapType: 'china', 
			roam: true,
      //字体颜色
			label: {
				normal: {
					show: false
				},
				emphasis: {
					show: true,
          color: "#fff"
				}
			},
      //数据区域底色（省份）
      itemStyle: {
        emphasis: {
            areaColor: 'rgba(80,227,194,0.6)'
        }
      },
			data:mydata
		}]
	};
  //3 把配置项给实例对象
  myChart.setOption(option);
  //4 图表自适应屏幕
  window.addEventListener('resize',function(){
    myChart.resize();
  });
})();

大学地图显示

需要注意的是：此地图模块用的是国外的folium库 所以访问时需要魔法上网一下 并且生成的时候我用的是ipython+jupyter再生成的html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>

    <style>
    #navbar {
      background-color: #333;
      overflow: hidden;
      position: absolute; /* Change the position to 'fixed' or 'absolute' as needed */
      top: 0; /* Set the top position as needed */
      width: 100%; /* Set the width to 100% to span the full width of the viewport */
      z-index: 10
     }
    #navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    #navbar a.active {
      background-color: #ddd;
      color: black;
    }
    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    </style>

    <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #search_results { position: absolute; top:90px; width: 335px; text-align: center;z-index: 10 }
    #map-container { position: absolute; top: 45px; bottom: 0; right: 0; left: 0;z-index: 1}
    #map {width: 100%; height: 100%; }
    #search-container { position: absolute; top: 50px; width: 500px; text-align: center; padding: 10px; z-index: 10}
    
    </style>

    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_a6bdd25be76282e6bf097ce16eb2a4d9 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
                .leaflet-container { font-size: 1rem; }
            </style>
        
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
</head>
<body>
    <div id="navbar">
    <!-- Link each navigation item to the corresponding pages -->
    <a href="index.html" id="home">主页</a>
    <a href="map.html" id="map2">地图</a>
    <a href="university_information.html" id="universities">大学系</a>
    <a href="about.html" id="about">关于</a>
    <a href="log_test.html" id="user_log">用户登录</a>
    <a href="manager_log.html" id="manager_log">管理员登录</a>
    </div>
    <div id="map-container">
        <div class="folium-map" id="map_a6bdd25be76282e6bf097ce16eb2a4d9"></div>
    </div>
    <div id="search-container">
        <input type="text" id="search_input" placeholder="通过popup内容搜索">
        <button onclick="search()">搜索</button>
	<button onclick="toggleMarkers()">Toggle Markers</button>
    </div>
    <div id="search_results">
    <input type="text" id="result-textbox" readonly>
    </div>
</body>

<script>
    
    
            var map_a6bdd25be76282e6bf097ce16eb2a4d9 = L.map(
                "map_a6bdd25be76282e6bf097ce16eb2a4d9",
                {
                    center: [38.0, 104.0],
                    crs: L.CRS.EPSG3857,
                    zoom: 3.5,
                    zoomControl: "False",
                    preferCanvas: false,
                }
            );

            

        
    
            var tile_layer_5ceed7b4814c451bcacd1acc61f054db = L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "Data by \u0026copy; \u003ca target=\"_blank\" href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca target=\"_blank\" href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var rectangle_6348cb5231899e9f6c79e698c39eef90 = L.rectangle(
                [[16.0, 73.0], [55.0, 135.0]],
                {"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "blue", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 1.0, "smoothFactor": 1.0, "stroke": true, "weight": 3}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            L.Control.geocoder(
                {"collapsed": false, "defaultMarkGeocode": true, "position": "topright"}
            ).on('markgeocode', function(e) {
                map_a6bdd25be76282e6bf097ce16eb2a4d9.setView(e.geocode.center, 11);
            }).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);

        
    
            var marker_1de67fb8e884dc316e3e27e6a2047791 = L.marker(
                [30.562814, 104.005145],
                {}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var icon_dea144a1a434a17a7b5621caef2d1aeb = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "cloud", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
            );
            marker_1de67fb8e884dc316e3e27e6a2047791.setIcon(icon_dea144a1a434a17a7b5621caef2d1aeb);
        
    
        var popup_eaeccea3800bc62f4d8038a0e1553488 = L.popup({"maxWidth": "100%"});

        
            
                var html_91de92ae293f60e1538b0f32691d9b61 = $(`<div id="html_91de92ae293f60e1538b0f32691d9b61" style="width: 100.0%; height: 100.0%;">     <a href="university_information.html?university=四川大学" target="_blank">查看详细大学信息</a> </div>`)[0];
                popup_eaeccea3800bc62f4d8038a0e1553488.setContent(html_91de92ae293f60e1538b0f32691d9b61);
            
        

        marker_1de67fb8e884dc316e3e27e6a2047791.bindPopup(popup_eaeccea3800bc62f4d8038a0e1553488)
        ;

        
    
    
            marker_1de67fb8e884dc316e3e27e6a2047791.bindTooltip(
                `<div>
                     welcome 四川大学!
                 </div>`,
                {"sticky": true}
            );


            //！！！！！！！！！！！！！！！！！
            var marker_359e1f12860d069f8586901cf1bc5ea4 = L.marker(
                [39.998877, 116.316833],
                {}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var icon_9566b8084d9562f2b55b9155a2f2b842 = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "cloud", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
            );
            marker_359e1f12860d069f8586901cf1bc5ea4.setIcon(icon_9566b8084d9562f2b55b9155a2f2b842);
        
    
        var popup_96fdccfe030161e258a3279bfc669f35 = L.popup({"maxWidth": "100%"});

        
            
                var html_31e4a19de9dbe1adb047497271835470 = $(`<div id="html_31e4a19de9dbe1adb047497271835470" style="width: 100.0%; height: 100.0%;">     <a href="university_information.html?university=北京大学" target="_blank">北京大学详细页面</a> </div>`)[0];
                popup_96fdccfe030161e258a3279bfc669f35.setContent(html_31e4a19de9dbe1adb047497271835470);
            
        

        marker_359e1f12860d069f8586901cf1bc5ea4.bindPopup(popup_96fdccfe030161e258a3279bfc669f35)
        ;

        
    
    
            marker_359e1f12860d069f8586901cf1bc5ea4.bindTooltip(
                `<div>
                     welcome 北京大学!
                 </div>`,
                {"sticky": true}
            );
                 


            var marker_ddcc54f050eeeff3a1cffadebf6c0c6b = L.marker(
                [40.009645, 116.333374],
                {}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var icon_77d37fc48514a159983c79526d871f24 = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "cloud", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
            );
            marker_ddcc54f050eeeff3a1cffadebf6c0c6b.setIcon(icon_77d37fc48514a159983c79526d871f24);
        
    
        var popup_db9787d6fb0e8eb7cbe7f2ef78bc38bc = L.popup({"maxWidth": "100%"});

        
            
                var html_916866df0e02236781345c93ef6ef745 = $(`<div id="html_916866df0e02236781345c93ef6ef745" style="width: 100.0%; height: 100.0%;">     <a href="university_information.html?university=清华大学" target="_blank">清华大学详细页面</a> </div>`)[0];
                popup_db9787d6fb0e8eb7cbe7f2ef78bc38bc.setContent(html_916866df0e02236781345c93ef6ef745);
            
        

        marker_ddcc54f050eeeff3a1cffadebf6c0c6b.bindPopup(popup_db9787d6fb0e8eb7cbe7f2ef78bc38bc)
        ;

        
    
    
            marker_ddcc54f050eeeff3a1cffadebf6c0c6b.bindTooltip(
                `<div>
                     welcome 清华大学!
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_46914ad1c9a9bcc44cd75e647fbadaa0 = L.marker(
                [30.308304, 120.092406],
                {}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var icon_0a8d7c1c0ada700ec000096f4fe4c118 = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "cloud", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
            );
            marker_46914ad1c9a9bcc44cd75e647fbadaa0.setIcon(icon_0a8d7c1c0ada700ec000096f4fe4c118);
        
    
        var popup_48311b2129400d57f8e16aab253b90fd = L.popup({"maxWidth": "100%"});

        
            
                var html_d57fdc401b4112ddb62b561d7dbc2d6f = $(`<div id="html_d57fdc401b4112ddb62b561d7dbc2d6f" style="width: 100.0%; height: 100.0%;">     <a href="university_information.html?university=浙江大学" target="_blank">浙江大学详细页面</a> </div>`)[0];
                popup_48311b2129400d57f8e16aab253b90fd.setContent(html_d57fdc401b4112ddb62b561d7dbc2d6f);
            
        

        marker_46914ad1c9a9bcc44cd75e647fbadaa0.bindPopup(popup_48311b2129400d57f8e16aab253b90fd)
        ;

        
    
    
            marker_46914ad1c9a9bcc44cd75e647fbadaa0.bindTooltip(
                `<div>
                     welcome 浙江大学!
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_90ca359d6abf385d03807c0533f46663 = L.marker(
                [31.301911, 121.510771],
                {}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var icon_3b3ef85358c5e4d26280e1c0bfbdf893 = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "cloud", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
            );
            marker_90ca359d6abf385d03807c0533f46663.setIcon(icon_3b3ef85358c5e4d26280e1c0bfbdf893);
        
    
        var popup_5adb6eb13aa0dbb8485f2cb844f010bb = L.popup({"maxWidth": "100%"});

        
            
                var html_585059f344a841af4b9f910b03dbf1e6 = $(`<div id="html_585059f344a841af4b9f910b03dbf1e6" style="width: 100.0%; height: 100.0%;">     <a href="university_information.html?university=复旦大学" target="_blank">复旦大学详细页面</a> </div>`)[0];
                popup_5adb6eb13aa0dbb8485f2cb844f010bb.setContent(html_585059f344a841af4b9f910b03dbf1e6);
            
        

        marker_90ca359d6abf385d03807c0533f46663.bindPopup(popup_5adb6eb13aa0dbb8485f2cb844f010bb)
        ;

        
    
    
            marker_90ca359d6abf385d03807c0533f46663.bindTooltip(
                `<div>
                     welcome 复旦大学!
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_8542e0d015f45971878c195dbea5991a = L.marker(
                [30.543803, 114.37293],
                {}
            ).addTo(map_a6bdd25be76282e6bf097ce16eb2a4d9);
        
    
            var icon_a8d2338808e6259af1ea41d51318dfbd = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "cloud", "iconColor": "white", "markerColor": "blue", "prefix": "glyphicon"}
            );
            marker_8542e0d015f45971878c195dbea5991a.setIcon(icon_a8d2338808e6259af1ea41d51318dfbd);
        
    
        var popup_4bf5b7ca9b346bd9499d7c4fdf100bc7 = L.popup({"maxWidth": "100%"});

        
            
                var html_7a75b01ab11775e474449f8891249096 = $(`<div id="html_7a75b01ab11775e474449f8891249096" style="width: 100.0%; height: 100.0%;">     <a href="university_information.html?university=武汉大学" target="_blank">武汉大学详细页面</a> </div>`)[0];
                popup_4bf5b7ca9b346bd9499d7c4fdf100bc7.setContent(html_7a75b01ab11775e474449f8891249096);
            
        

        marker_8542e0d015f45971878c195dbea5991a.bindPopup(popup_4bf5b7ca9b346bd9499d7c4fdf100bc7)
        ;

        
    
    
            marker_8542e0d015f45971878c195dbea5991a.bindTooltip(
                `<div>
                     welcome 武汉大学!
                 </div>`,
                {"sticky": true}
            );
            //！！！！！！！！！！！！！！！！！！
        // 搜索功能
	const universityMapping = {
  	'四川大学': marker_1de67fb8e884dc316e3e27e6a2047791,
  	'清华大学': marker_ddcc54f050eeeff3a1cffadebf6c0c6b,
  	'北京大学': marker_359e1f12860d069f8586901cf1bc5ea4,
  	'浙江大学': marker_46914ad1c9a9bcc44cd75e647fbadaa0,
  	'复旦大学': marker_90ca359d6abf385d03807c0533f46663,
  	'武汉大学': marker_8542e0d015f45971878c195dbea5991a
	};

    function search() {
        var university = document.getElementById("search_input").value;
        var marker = null;

        // Loop through all markers on the map
	// 循环访问所有的坐标点集
        // 定义检索映射并返回对应对象值的函数
  	var marker = universityMapping[university];
  	if (marker) {
	    map_a6bdd25be76282e6bf097ce16eb2a4d9.setView(marker.getLatLng(), 11);
            marker.openPopup();
            // document.getElementById("search_results").innerText = "";
		// 获取文本框元素
  		var textBox = document.getElementById("result-textbox");
  		// 更新文本框的内容
  		textBox.value = "";
  		// 修改文本框的样式，将其显示出来
	    	//textBox.style.display = "block";
  	} else {
    		document.getElementById("result-textbox").value = "没有找到相关的坐标点。";
		
  	}	
        
    }
// 切换坐标点的可见性
function toggleMarkers() {
        if (map_a6bdd25be76282e6bf097ce16eb2a4d9.hasLayer(marker_1de67fb8e884dc316e3e27e6a2047791)) {
            map_a6bdd25be76282e6bf097ce16eb2a4d9.removeLayer(marker_1de67fb8e884dc316e3e27e6a2047791);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.removeLayer(marker_ddcc54f050eeeff3a1cffadebf6c0c6b);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.removeLayer(marker_359e1f12860d069f8586901cf1bc5ea4);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.removeLayer(marker_46914ad1c9a9bcc44cd75e647fbadaa0);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.removeLayer(marker_90ca359d6abf385d03807c0533f46663);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.removeLayer(marker_8542e0d015f45971878c195dbea5991a);
            
        } else {
            map_a6bdd25be76282e6bf097ce16eb2a4d9.addLayer(marker_1de67fb8e884dc316e3e27e6a2047791);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.addLayer(marker_ddcc54f050eeeff3a1cffadebf6c0c6b);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.addLayer(marker_359e1f12860d069f8586901cf1bc5ea4);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.addLayer(marker_46914ad1c9a9bcc44cd75e647fbadaa0);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.addLayer(marker_90ca359d6abf385d03807c0533f46663);
            map_a6bdd25be76282e6bf097ce16eb2a4d9.addLayer(marker_8542e0d015f45971878c195dbea5991a);
        }
}




// 为了让当前页面加载时高亮对应导航标签，获取当前页面的文件名
    const currentPath = window.location.pathname.split('/').pop();
    const currentPage = currentPath.split('.')[0];
    
    // 高亮当前页面对应的导航标签
    const navbarItems = document.querySelectorAll('#navbar a');
    navbarItems.forEach(item => {
      const page = item.getAttribute('href').split('.')[0];
      if (page === currentPage) {
        item.classList.add('active');
      }
    });


</script>
</html>

大学信息展示界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset="UTF-8">
  <title>大学信息展示</title>
  <link rel = "stylesheet" href = "css/cebianlan.css"/>
  <style>
    /* 样式化容器 */
    body{
    background-color: #edf8fa;
    line-height: 1.15;
    }
    #sidebar {
      float: left;
      width: 220px;
      height: 100%; /* Set the height to limit the sidebar size */
      overflow-y: auto; /* Enable vertical scrolling */
      background-color: rgb(251, 252, 242);
      padding: 10px;
      opacity: 0.8;
    }

    /* 样式化大学列表项 */
    .university-item {
      cursor: pointer;
      margin-bottom: 5px;
    }

    /* 样式化选中的大学列表项 */
    .active {
      font-weight: bold;
      background-color: #ddd; /* 添加一个背景色，标识被选择的大学项 */
    }

     /*样式化信息展示区域*/
     #content {
       margin-left: 300px; 
       width: 600px;      /*Sets the width of the container to 600 pixels ！height 自适应 */
      padding: 10px;
      border: 1px solid #000; /* Adds a black border with a width of 1 pixel */
      background-color:#f0f0f0;
    }
    
    /* Add styles for the top navigation bar */
    #navbar {
      background-color: #333;
      overflow: hidden;
    }

    #navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
	
    /* Style the active link */
    #navbar a.active {
      background-color: #ddd;
      color: black;
    }

    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
  /* Position the content area to the right and add padding */
  #search_content {
    margin-right: 0;
    float: right;
    width: 220px;
    padding: 10px;
    background-color: rgb(251, 252, 242);
  }
  #universityImage {
    display: block;
    max-width: 100%; /* Set a maximum width */
    max-height: 200px; /* Set a maximum height */
    margin: auto;
  }
  #symbol{
    width: 5rem;
    height: 5rem;
    position: absolute;
    background: url(../images/patrick.jpg);
    background-size: 100% 100%;
    right: 0%;
    bottom: 0;
    opacity: .3;
  }
  </style>
</head>
<body>
    <div id="navbar">
    <!-- Link each navigation item to the corresponding pages -->
    <a href="index.html" id="home">主页</a>
    <a href="map.html" id="map">地图</a>
    <a href="university_information.html" id="universities">大学系</a>
    <a href="about.html" id="about">关于</a>
    <a href="log_test.html" id="user_log">用户登录</a>
    <a href="manager_log.html" id="manager_log">管理员登录</a>
  </div>
	
  <!-- Move the search input to the right side -->
  <section class = "mainbox">
    <div class = "column">
      <div id="sidebar">
        <h3>大学列表</h3>
      </div>
    </div>
    <div class = "column">

      <div class = "panel">
        <h2 id="universityName"></h2>
        <img id="universityImage" src="" alt="大学图片">
        <p id="universityInfo"></p>
      </div>
      <div class = "panel line">
        <h2>升学率(%)</h2>
        <div class = "chart"></div>
        <div class = "panel-footer"></div>
    </div>
    <div class = "panel bar">
      <h2>就业率(%)</h2>
      <div class = "chart"></div>
      <div class = "panel-footer"></div>
    </div>
    </div>

    <div class = "column">
      <div id="search_content">
        <h4>大学检索</h4>
        <input type="text" id="searchInput" placeholder="搜索大学...">
        <div id="universityDropdown"></div>
      </div>
    </div>
    <div id="symbol"></div>
  </section>
</body>
<script src = "js/echarts.min.js"></script>
<script src = "js/jquery.js"></script>
<script src = "js/flexible.js"></script>
<!-- <script src = "index.js"></script> -->
  <script>
    let universities = [];
    var test_data = [];
    var test_data2 = [];
    $.ajax({
        type:"post",
        // url:"data/data.txt",
        url:"http://localhost:8081/universities/read",
        async: false, //同步或异步
        data:{
          //传出的数据
        },
        // 请求成功调用的函数
      success:function(data){
        // universities = JSON.parse(data);
        universities = data;
        console.log(universities);
        // 获取侧边栏元素
    const sidebar = document.getElementById('sidebar');


// Function to handle the page load and display the selected university (if available)
document.addEventListener('DOMContentLoaded', () => {
  const universityQueryParam = getQueryParam('university');
  console.log(universityQueryParam);
  if(universityQueryParam){ 
    showUniversityInfo(universityQueryParam);// 地图坐标点跳转大学
  }
  else{
    const firstUniversity = universities[0].name; // Get the first university
    showUniversityInfo(firstUniversity);
  }
});

function getQueryParam(key) {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  return urlParams.get(key);
}// Function to parse the query parameters from the URL



// Function to display university information
function showUniversityInfo(university) {
  const universityNameElement = document.getElementById('universityName');
  const universityImageElement = document.getElementById('universityImage');
  const universityInfoElement = document.getElementById('universityInfo');

  const selectedUniversity = universities.find(u => u.name === university || !u.name);

  if (selectedUniversity) {//添加必要的空项检测
    universityNameElement.textContent = selectedUniversity.name || university;
    universityImageElement.src = selectedUniversity.image || '';
    universityInfoElement.textContent = selectedUniversity.description || '';
    test_data = JSON.parse(selectedUniversity.valuelist);
    //test_data = selectedUniversity.values;
    test_data2 = JSON.parse(selectedUniversity.valuelist2);
    chart_build(test_data);
    chart2_build(test_data2);
    //console.log(test_data);
    
  }
  
  const universityItems = document.querySelectorAll('.university-item');
  universityItems.forEach(item => {
    item.classList.remove('active');
  });

  const selectedUniversityItem = document.querySelector(`.university-item[data-university="${university}"]`);
  if (selectedUniversityItem) {
    selectedUniversityItem.classList.add('active');
  }
}


// Function to generate university list items in the sidebar
function generateUniversityList() {
const sidebar = document.getElementById('sidebar');

universities.forEach(university => {
const universityItem = document.createElement('div');
universityItem.classList.add('university-item');
universityItem.dataset.university = university.name || '';
universityItem.textContent = university.name || '未命名大学';
sidebar.appendChild(universityItem);
});
}

// Generate the university list
generateUniversityList();

document.getElementById('sidebar').addEventListener('click', (event) => {
const target = event.target;
if (target.classList.contains('university-item')) {
const university = target.dataset.university;
showUniversityInfo(university);

}
});


// 为了让当前页面加载时高亮对应导航标签，获取当前页面的文件名
const currentPath = window.location.pathname.split('/').pop();
const currentPage = currentPath.split('.')[0];

// 高亮当前页面对应的导航标签
const navbarItems = document.querySelectorAll('#navbar a');
navbarItems.forEach(item => {
  const page = item.getAttribute('href').split('.')[0];
  if (page === currentPage) {
    item.classList.add('active');
  }
});

//右侧检索框	
// Get the search input and dropdown elements
const searchInput = document.getElementById('searchInput');
const universityDropdown = document.getElementById('universityDropdown');

// Add an input event listener to the search input for live search
searchInput.addEventListener('input', handleSearch);

// Function to handle the search input
function handleSearch() {
const searchTerm = searchInput.value.trim();
if (searchTerm === '') {
clearDropdown();
return;
}
const matchingUniversities = universities.filter(university =>
(university.name && university.name.includes(searchTerm)) ||
(!university.name && university.description && university.description.includes(searchTerm))
);

displayUniversityDropdown(matchingUniversities);
}   

// Function to display the search dropdown
function displayUniversityDropdown(matchingUniversities) {
const dropdownContent = matchingUniversities
.map(university => `<div class="dropdown-item">${university.name || '未命名大学'}</div>`)
.join('');

universityDropdown.innerHTML = dropdownContent;

const dropdownItems = document.querySelectorAll('.dropdown-item');
dropdownItems.forEach(item => {
item.addEventListener('click', handleDropdownItemClick);
});
}

// Function to handle search dropdown item click
function handleDropdownItemClick(event) {
const universityName = event.target.textContent;
showUniversityInfo(universityName);
clearDropdown();
}

// Function to clear the search dropdown
function clearDropdown() {
universityDropdown.innerHTML = '';
}

// // Event listeners
// document.addEventListener('DOMContentLoaded', () => {
// const firstUniversity = universities[0].name || '';
// showUniversityInfo(firstUniversity);
// });

// document.getElementById('sidebar').addEventListener('click', (event) => {
// const target = event.target;
// if (target.classList.contains('university-item')) {
// const university = target.dataset.university;
// showUniversityInfo(university);
// }
// });

searchInput.addEventListener('input', handleSearch);
      }
    });
    
    
  </script>
  <script>
    //构建图表函数
    function chart_build(test_data){
      var myChart = echarts.init(document.querySelector(".line .chart"));
  var mydata = test_data;
  var option = {
    color:["#02a6b5"],
    tooltip:{
      trigger: 'axis',
      axisPointer: {
        type: 'line' //shadow
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "5%",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2019', '2020', '2021', '2022']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: mydata,
        type: 'line'
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize',function(){
    myChart.resize();
  })
    }
  </script>
  <script>
    //构建图表函数
    function chart2_build(test_data2){
      var myChart2 = echarts.init(document.querySelector(".bar .chart"));
      var mydata2 = test_data2;
      var option2 = {
    color:["#02a6b5"],
    tooltip:{
      trigger: 'axis',
      axisPointer: {
        type: 'line' //shadow
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "5%",
      bottom: "10%",
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2019', '2020', '2021', '2022']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: mydata2,
        barWidth: '35%',
        type: 'bar',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 10
        }
      }
    ]
  };
  myChart2.setOption(option2);
  window.addEventListener('resize',function(){
    myChart2.resize();
  })
    }
  </script>
</html>

关于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel = "stylesheet" href = "css/about.css"/>
<style>
  /* Add styles for the top navigation bar */
  #navbar {
    background-color: #333;
    overflow: hidden;
  }

  #navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Style the active link */
  #navbar a.active {
    background-color: #ddd;
    color: black;
  }

  #navbar a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style the container for the image and text */
  #image-container {
    text-align: center;
    padding: 20px;
    position: relative;
  }

  /* Style the text */
  #image-container p {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 150px;
    font-family: Comic Sans MS;
  }

  #footer {
    color: black;
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-top:auto;
    /* top: 200%; */
    left: 50%;
    transform: translateX(-50%);
    width: 99%;
    font-size: 10px;
    font-family: Comic Sans MS;
  }
  #development-container {
    
    font-size: .25rem;
    margin-left: 10%;
    /* font-family: STKaiti; */
  }
  #developer-container {
    
    font-size: .25rem;
    margin-left: 15%;
    font-family: Comic Sans MS;
    /* font-family: STKaiti; */
  }
  #log-container{
    font-size: .25rem;
    margin-left: 10%;
    /* font-family: STKaiti; */
  }
</style>
<body>
  <div id="navbar">
    <!-- Link each navigation item to the corresponding pages -->
    <a href="index.html" id="home">主页</a>
    <a href="map.html" id="map">地图</a>
    <a href="university_information.html" id="universities">大学系</a>
    <a href="about.html" id="about">关于</a>
    <a href="log_test.html" id="user_log">用户登录</a>
    <a href="manager_log.html" id="manager_log">管理员登录</a>
  </div>
  <!-- Image and Text Container -->
  <div id="image-container">
    <img src="images/about_background.jpg" alt="Forward Image" width=100% height="800px">
    <p id="text">forward</p>
  </div>
  <!-- Introduction Text Module -->
  <section class = "mainbox">
    <div class = "column">
    <div class = "panel">
      <h2>网站开发介绍</h2>
      <div id="development-container"></div>
    </div>
      <div class = "panel">
        <h2>开发日志与说明</h2>
        <div id="log-container"></div>
      </div>
    </div>
    <div class = "column">
      <div class = "panel">
        <h2>网站开发人员介绍</h2>
        <div id="developer-container"></div>
      </div>
    </div>
  </section>
  <!-- Footer Section -->
  <div id="footer">
    <p>@double_patrick</p>
    <p>version: 1.0.0||last_modified: 2023-07-05</p>
  </div>
</body>
<script src = "js/flexible.js"></script>
<script src = "js/jquery.js"></script>
<script>
  // 使用JavaScript加载描述内容
  const development_description_url = "data/development_description.txt";
  fetch(development_description_url)
    .then(response => response.text())
    .then(text => {
      const descriptionContainer = document.getElementById('development-container');
      descriptionContainer.innerHTML = text;
    });
</script>
<script>
  // 使用JavaScript加载描述内容
  const developer_description_url = "data/developer_description.txt";
  fetch(developer_description_url)
    .then(response => response.text())
    .then(text => {
      const descriptionContainer = document.getElementById('developer-container');
      descriptionContainer.innerHTML = text;
    });
</script>
<script>
  // 使用JavaScript加载描述内容
  const log_description_url = "data/log_description.txt";
  fetch(log_description_url)
    .then(response => response.text())
    .then(text => {
      const descriptionContainer = document.getElementById('log-container');
      descriptionContainer.innerHTML = text;
    });
</script>
<script>
  // 为了让当前页面加载时高亮对应导航标签，获取当前页面的文件名
  const currentPath = window.location.pathname.split('/').pop();
  const currentPage = currentPath.split('.')[0];

  // 高亮当前页面对应的导航标签
  const navbarItems = document.querySelectorAll('#navbar a');
  navbarItems.forEach(item => {
    const page = item.getAttribute('href').split('.')[0];
    if (page === currentPage) {
      item.classList.add('active');
    }
  });
</script>
</html>

用户登录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>Document</title>
    <style>
        /* Add styles for the top navigation bar */
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
      background-color: #333;
      overflow: hidden;
    }

    #navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
	
    /* Style the active link */
    #navbar a.active {
      background-color: #ddd;
      color: black;
    }

    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('/images/about_background.jpg') no-repeat;
            background-size: 100% 100%;
        }
        
        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }
        
        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }
        
        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }
        
        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }
        
        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }
        
        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }
        
        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }
        
        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }
        
        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }
        
        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>
</head>
<body>
   
    <div id="navbar">
        <!-- Link each navigation item to the corresponding pages -->
        <a href="index.html" id="home">主页</a>
        <a href="map.html" id="map">地图</a>
        <a href="university_information.html" id="universities">大学系</a>
        <a href="about.html" id="about">关于</a>
        <a href="log_test.html" id="user_log">用户登录</a>
        <a href="manager_log.html" id="manager_log">管理员登录</a>
    </div>
    <div class="form-wrapper">
        <div class="header">
            login
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
            </div>
            <div class="border-wrapper">
                <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
            </div>
        </div>
        <div class="action">
            <div class="btn" onclick="login()">login</div>
            <div class="btn" onclick="register()">register</div> <!-- Added registration button -->
        </div>
        <div class="icon-wrapper">
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-qq"></i>
            <i class="iconfont icon-git"></i>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script>
        function login() {
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();

            $.ajax({
                type: "post",
                url: "http://localhost:8081/user/login",
                data: {
                    uname: username,
                    password: password
                },
                success: function(data) {
                    if (data.code === "0") {
                    // Login successful, redirect to another page
                    window.location.href = "user_data_show.html?username="+ encodeURIComponent(username);
                    alert(data.msg);
                } else {
                    // Login unsuccessful, display error message
                    alert(data.msg);
                }
                }
            });
        }
        function register() {
            // Redirect to registration page
            window.location.href = "register.html";
        }
    </script>
    <script>
        // 为了让当前页面加载时高亮对应导航标签，获取当前页面的文件名
        const currentPath = window.location.pathname.split('/').pop();
        const currentPage = currentPath.split('.')[0];
      
        // 高亮当前页面对应的导航标签
        const navbarItems = document.querySelectorAll('#navbar a');
        navbarItems.forEach(item => {
          const page = item.getAttribute('href').split('.')[0];
          if (page === currentPage) {
            item.classList.add('active');
          }
        });
      </script>
</body>
</html>

用户注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('/images/about_background.jpg') no-repeat;
            background-size: 100% 100%;
        }
        
        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }
        
        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }
        
        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }
        
        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }
        
        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }
        
        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }
        
        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }
        
        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }
        
        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }
        
        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>
</head>
<body>
    <div class="form-wrapper">
        <div class="header">
            register
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
            </div>
            <div class="border-wrapper">
                <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
            </div>
        </div>
        <div class="action">
            <div class="btn" onclick="validation()">register</div> <!-- Added registration button -->
        </div>
        <div class="icon-wrapper">
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-qq"></i>
            <i class="iconfont icon-git"></i>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script>

        function validation() {
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();
            var passdata = {
                    "uname": username,
                    "password": password
                }
                console.log(passdata);
            $.ajax({
                type: "post",
                url: "http://localhost:8081/user/register",
                contentType: "application/json; charset=utf-8", 
                dataType:'json',//json 返回值类型
                data: JSON.stringify(passdata),//转化为json字符串
                success: function(data) {
                    if (data.code === "0") {
                    // Login successful, redirect to another page
                    //window.location.href = "log_test.html";
                    alert(data.msg);
                } else {
                    // Login unsuccessful, display error message
                    alert(data.msg);
                }
                }
            });
        }
    </script>
</body>
</html>

管理员登录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>Document</title>
    <style>
        /* Add styles for the top navigation bar */
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
      background-color: #333;
      overflow: hidden;
    }

    #navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
	
    /* Style the active link */
    #navbar a.active {
      background-color: #ddd;
      color: black;
    }

    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('/images/about_background.jpg') no-repeat;
            background-size: 100% 100%;
        }
        
        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }
        
        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }
        
        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }
        
        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }
        
        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }
        
        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }
        
        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }
        
        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }
        
        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }
        
        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>
</head>
<body>
    <div id="navbar">
        <!-- Link each navigation item to the corresponding pages -->
        <a href="index.html" id="home">主页</a>
        <a href="map.html" id="map">地图</a>
        <a href="university_information.html" id="universities">大学系</a>
        <a href="about.html" id="about">关于</a>
        <a href="log_test.html" id="user_log">用户登录</a>
        <a href="manager_log.html" id="manager_log">管理员登录</a>
    </div>
    <div class="form-wrapper">
        <div class="header">
            manager_login
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
            </div>
            <div class="border-wrapper">
                <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
            </div>
        </div>
        <div class="action">
            <div class="btn" onclick="login()">login</div>
            <div class="btn" onclick="register()">register</div> <!-- Added registration button -->
        </div>
        <div class="icon-wrapper">
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-qq"></i>
            <i class="iconfont icon-git"></i>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script>
        function login() {
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();

            $.ajax({
                type: "post",
                url: "http://localhost:8081/user/login",
                data: {
                    uname: username,
                    password: password
                },
                success: function(data) {
                    if (data.code === "0") {
                    // Login successful, redirect to another page
                    window.location.href = "managerUI.html";
                    alert(data.msg);
                } else {
                    // Login unsuccessful, display error message
                    alert(data.msg);
                }
                }
            });
        }
        function register() {
            // Redirect to registration page
            window.location.href = "register.html";
        }
    </script>
    <script>
        // 为了让当前页面加载时高亮对应导航标签，获取当前页面的文件名
        const currentPath = window.location.pathname.split('/').pop();
        const currentPage = currentPath.split('.')[0];
      
        // 高亮当前页面对应的导航标签
        const navbarItems = document.querySelectorAll('#navbar a');
        navbarItems.forEach(item => {
          const page = item.getAttribute('href').split('.')[0];
          if (page === currentPage) {
            item.classList.add('active');
          }
        });
      </script>
</body>
</html>

用户信息展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>用户信息和模拟填报志愿</title>
  <style>
    .container {
      width: 600px;
      margin: 20px auto;
    }
    html {
      height: 100%;
    }
    body{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: url('/images/about_background.jpg') no-repeat;
      background-size: 100% 100%;
    }
    h2 {
      margin-top: 0;
    }

    label {
      font-weight: bold;
    }

    input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }

    button {
      padding: 5px 10px;
    }

    #confirmation {
      margin-top: 20px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="container">
    <h2>用户信息</h2>
    <label for="name">名字:</label>
    <span id="name">Loading...</span>

    <br>

    <label for="gender">性别:</label>
    <span id="gender">Loading...</span>

    <br>

    <label for="age">年龄:</label>
    <span id="age">Loading...</span>

    <br>

    <label for="email">邮箱:</label>
    <span id="email">Loading...</span>

    <br>

    <label for="province">省份:</label>
    <span id="province">Loading...</span>
  </div>

  <div class="container">
    <a href="edit_information.html"><button>修改全部信息</button></a>
  </div>

  <div class="container">
    <h2>模拟填报志愿</h2>
    <label for="university">心仪大学:</label>
    <input type="text" id="university">

    <label for="score">高考分数:</label>
    <input type="text" id="score">

    <label for="major">心仪专业:</label>
    <input type="text" id="major">

    <br>

    <button onclick="displayConfirmation()">确定</button>

    <div id="confirmation"></div>
  </div>

  <script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username); // Output the username to the console

    $(document).ready(function() {
      // Retrieve user information from the backend using Ajax POST request
      $.ajax({
        url: 'http://localhost:8081/userinformation/read', // Replace with your backend endpoint URL
        type: 'POST',
        dataType: 'json',
        data:{
          name: username
        },
        success: function(data) {
          // Update user information in the HTML
          $('#name').text(data.name);
          $('#gender').text(data.sex);
          $('#age').text(data.age);
          $('#email').text(data.mail);
          $('#province').text(data.province);
        },
        error: function() {
          console.log('Failed to retrieve user information.');
        }
      });
    });

    function displayConfirmation() {
      var university = $('#university').val();
      var score = $('#score').val();
      var major = $('#major').val();



      // Send score to the backend
  $.ajax({
    url: 'http://localhost:8081/universities/write', // Replace with your backend endpoint URL
    type: 'POST',
    dataType: 'json',
    data: {
      score: score
    },
    success: function(response) {
      console.log('Score submitted successfully:', response);
      // Handle the response from the backend if needed
      var confirmationMessage = "推荐大学为" + response.name + "，推荐专业为" + major + "。" + "理由如下："+response.description;
      $('#confirmation').text(confirmationMessage);
    },
    error: function() {
      console.log('Failed to submit the score to the backend.');
    }
  });
    }
  </script>
</body>
</html>

管理员界面展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>列表显示示例</title>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            /* align-items: center; */
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('/images/about_background.jpg') no-repeat;
            background-size: 100% 100%;
        }
        .container {
            text-align: center;
        }
        .table {
            background-color: rgb(243, 238, 238,.5);
            width: 800px;
            margin: 0 auto;
            padding: 30px;
        }
        h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        th, td {
            width: 200px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        //添加按钮
        // Function to handle add button click
        function addUniverInformation() {
                // Redirect to the add page for university information
                window.location.href = "add_university.html";
            }

            function addUserInformation() {
                // Redirect to the add page for user information
                window.location.href = "add_user.html";
            }
        //添加按钮
    </script>
    <script>
        $(document).ready(function() {

            // Function to handle delete button click
    function deleteUniverInformation(name) {
        // Perform AJAX request to delete the user information
        $.ajax({
            type: "post",
            url: "http://localhost:8081/universities/delete",
            data: { name: name }, // Pass the name as a parameter to the backend
            success: function(response) {
                // Handle the response from the backend, if needed
                console.log(response);
            }
        });
    }

    // Function to handle edit button click
    function editUniverInformation(name) {
        // Redirect to a new page for editing with the name as a parameter
        // window.location.href = "edit_page.html?name=" + encodeURIComponent(name);
        window.location.href = "manager_change_university.html";
    }
            //user 和 university 反过来了！！注意读取数据~~写的时候没注意
            // 加载用户信息列表
            $.ajax({
                type: "post",
                url: "http://localhost:8081/universities/read",  // 服务器端获取用户信息的脚本
                success: function(response) {
                    var userInfoList = response;

                    // 将用户信息列表添加到表格中
                    var userInfoTable = $('#userInfoTable');
                    for (var i = 0; i < userInfoList.length; i++) {
                        var row = $('<tr><td>' + userInfoList[i].name + '</td><td>' 
                                    + userInfoList[i].image + '</td><td>'+ userInfoList[i].valuelist 
                                    +'</td><td>'+ userInfoList[i].valuelist2 + '</td><td>'
                                    + '<button type="button" class="deleteBtn">删除</button>'
                                    + '<button type="button" class="editBtn">修改</button>'
                                    + '</td></tr>');
                        userInfoTable.append(row);
                        // Add click event listener to the delete button
        row.find('.deleteBtn').click(function() {
            var name = $(this).closest('tr').find('td:first').text();
            deleteUniverInformation(name);
        });

        // Add click event listener to the edit button
        row.find('.editBtn').click(function() {
            var name = $(this).closest('tr').find('td:first').text();
            editUniverInformation(name);
        });
                    }
                }
            });
    function deleteUserInformation(name) {
        // Perform AJAX request to delete the user information
        $.ajax({
            type: "post",
            url: "http://localhost:8081/userinformation/delete",
            async: false, //虽然这里不是异步的错误 但得考虑可能有这种情况 改成同步好一点
            data: { name: name }, // Pass the name as a parameter to the backend
            success: function(response) {
                // Handle the response from the backend, if needed
                console.log(response);
                location.reload();
            },
            error: function(error){
                console.log(response);
                location.reload();
            }
            
        });
    }

    // Function to handle edit button click
    function editUserInformation(name) {
        // Redirect to a new page for editing with the name as a parameter
        // window.location.href = "edit_page.html?name=" + encodeURIComponent(name);
        window.location.href = "edit_information.html";
    }
            // 加载大学信息列表
            $.ajax({
                type: "post",
                url: "http://localhost:8081/userinformation/readall",  // 服务器端获取大学信息的脚本
                success: function(response) {
                    var universityInfoList = response;

                    // 将大学信息列表添加到表格中
                    var universityInfoTable = $('#universityInfoTable');
                    for (var i = 0; i < universityInfoList.length; i++) {
                        var row = $('<tr><td>' + universityInfoList[i].name + '</td><td>' 
                                    + universityInfoList[i].sex + '</td><td>'+ universityInfoList[i].age 
                                    +'</td><td>'+ universityInfoList[i].mail +'</td><td>'+ universityInfoList[i].province + '</td><td>'
                                    + '<button type="button" class="deleteBtn">删除</button>'
                                    + '<button type="button" class="editBtn">修改</button>'
                                    + '</td></tr>');
                        universityInfoTable.append(row);
                                        // Add click event listener to the delete button
        row.find('.deleteBtn').click(function() {
            var name = $(this).closest('tr').find('td:first').text();
            deleteUserInformation(name);
        });

        // Add click event listener to the edit button
        row.find('.editBtn').click(function() {
            var name = $(this).closest('tr').find('td:first').text();
            editUserInformation(name);
        });
                    }
                }
            });
            
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="table">
            <h2>大学信息列表</h2>
            <table id="userInfoTable">
                <tr>
                    <th>大学名称</th>
                    <th>图片url</th>
                    <th>valuelist</th>
                    <th>valuelist2</th>
                    <th>操作</th> <!-- Add a new column for buttons -->
                </tr>
            </table>
            <button id="addUniverBtn" type="button" onclick = "addUniverInformation()">添加大学信息</button>
        </div>
        <div class="table">
            <h2>用户信息列表</h2>
            <table id="universityInfoTable">
                <tr>
                    <th>名字</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>省份</th>
                    <th>操作</th> <!-- Add a new column for buttons -->
                </tr>
            </table>
            <!-- <button id="addUserBtn" type="button" onclick = "addUserInformation()">添加用户信息</button> -->
        </div>
    </div>
</body>
</html>

管理员修改大学信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>管理员修改用户信息</title>
  <style>
    .container {
      width: 400px;
      margin: 20px auto;
    }
    html {
      height: 100%;
    }
    body{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: url('/images/about_background.jpg') no-repeat;
      background-size: 100% 100%;
    }
    h2 {
      margin-top: 0;
    }

    label {
      font-weight: bold;
    }

    input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }

    .button {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
    }
    .button:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

    #confirmation {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>修改大学信息</h2>
    <form id="editForm">
      <label for="name">大学名字:</label>
      <input type="text" id="nameInput" name="username" required>
      <br>

      <label for="gender">描述</label>
      <input type="text" id="genderInput" name="usersex" required>

      <br>

      <label for="age">imagesurl:</label>
      <input type="text" id="ageInput" name="userage" required>

      <br>

      <label for="email">values:</label>
      <input type="text" id="emailInput" name="usermail" required>

      <br>

      <label for="province">values2:</label>
      <input type="text" id="provinceInput" name="userprovince" required>

      <br>

      <!-- <button type="submit">保存</button> -->
      <div class="button" onclick="save()">save</div>
    </form>
  </div>

  <script src="js/jquery.js"></script>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
<script>
    function save() {
      //event.preventDefault();

      // Retrieve user input

      var newName = $('input[name="username"]').val();
      var newGender = $('input[name="usersex"]').val();
      var newAge = $('input[name="userage"]').val();
      var newEmail = $('input[name="usermail"]').val();
      var newProvince = $('input[name="userprovince"]').val();
      // Create JSON object
      var userdata = {
                    "name": newName,
                    "description": newGender,
                    "image": newAge,
                    "valuelist": newEmail,
                    "valuelist2": newProvince
      }
      
      console.log(userdata);

      // Send data to the backend
      $.ajax({
        type: "post",
        url: "http://localhost:8081/universities/update",
        contentType: "application/json; charset=utf-8", 
        dataType:'json',//json 返回值类型
        data: userdata,//转化为json字符串

        success: function(response) {
          // Handle success response from the backend
          $("#confirmation").text("修改成功");
          window.location.href = "managerUI.html"; // Replace with the URL of the success page
          console.log(response);
        },
        error: function(error) {
          // Handle error response from the backend
          $("#confirmation").text("修改失败");
          console.error(error);
        }
      });
    }

</script>

</body>
</html>

管理员新增大学

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>管理员修改用户信息</title>
  <style>
    .container {
      width: 400px;
      margin: 20px auto;
    }
    html {
      height: 100%;
    }
    body{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: url('/images/about_background.jpg') no-repeat;
      background-size: 100% 100%;
    }
    h2 {
      margin-top: 0;
    }

    label {
      font-weight: bold;
    }

    input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }

    .button {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
    }
    .button:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

    #confirmation {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>新增大学</h2>
    <form id="editForm">
      <label for="name">大学名字:</label>
      <input type="text" id="nameInput" name="username" required>
      <br>

      <label for="gender">描述</label>
      <input type="text" id="genderInput" name="usersex" required>

      <br>

      <label for="age">imagesurl:</label>
      <input type="text" id="ageInput" name="userage" required>

      <br>

      <label for="email">values:</label>
      <input type="text" id="emailInput" name="usermail" required>

      <br>

      <label for="province">values2:</label>
      <input type="text" id="provinceInput" name="userprovince" required>

      <br>

      <!-- <button type="submit">保存</button> -->
      <div class="button" onclick="save()">save</div>
    </form>
  </div>

  <script src="js/jquery.js"></script>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
<script>
    function save() {
      //event.preventDefault();

      // Retrieve user input

      var newName = $('input[name="username"]').val();
      var newGender = $('input[name="usersex"]').val();
      var newAge = $('input[name="userage"]').val();
      var newEmail = $('input[name="usermail"]').val();
      var newProvince = $('input[name="userprovince"]').val();
      // Create JSON object
      var userdata = {
                    "name": newName,
                    "description": newGender,
                    "image": newAge,
                    "valuelist": newEmail,
                    "valuelist2": newProvince
      }
      
      console.log(userdata);

      // Send data to the backend
      $.ajax({
        type: "post",
        url: "http://localhost:8081/universities/add",
        contentType: "application/json; charset=utf-8", 
        dataType:'text',//json 返回值类型
        data: JSON.stringify(userdata),//转化为json字符串
        success: function(response) {
          // Handle success response from the backend
          //$("#confirmation").text("修改成功");
          window.location.href = "managerUI.html"; // Replace with the URL of the success page
          console.log(response);
        },
        error: function(error) {
          // Handle error response from the backend
          $("#confirmation").text("修改失败");
          console.error(error);
        }
      });
    }

</script>

</body>
</html>

用户编辑信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>修改用户信息</title>
  <style>
    .container {
      width: 400px;
      margin: 20px auto;
    }
    html {
      height: 100%;
    }
    body{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: url('/images/about_background.jpg') no-repeat;
      background-size: 100% 100%;
    }
    h2 {
      margin-top: 0;
    }

    label {
      font-weight: bold;
    }

    input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }

    .button {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
    }
    .button:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

    #confirmation {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>修改用户信息</h2>
    <form id="editForm">
      <label for="name">名字:</label>
      <input type="text" id="nameInput" name="username" required>
      <br>

      <label for="gender">性别:</label>
      <input type="text" id="genderInput" name="usersex" required>

      <br>

      <label for="age">年龄:</label>
      <input type="text" id="ageInput" name="userage" required>

      <br>

      <label for="email">邮箱:</label>
      <input type="text" id="emailInput" name="usermail" required>

      <br>

      <label for="province">省份:</label>
      <input type="text" id="provinceInput" name="userprovince" required>

      <br>

      <!-- <button type="submit">保存</button> -->
      <div class="button" onclick="save()">save</div>
    </form>
  </div>

  <script src="js/jquery.js"></script>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
<script>
    function save() {
      //event.preventDefault();

      // Retrieve user input

      var newName = $('input[name="username"]').val();
      var newGender = $('input[name="usersex"]').val();
      var newAge = $('input[name="userage"]').val();
      var newEmail = $('input[name="usermail"]').val();
      var newProvince = $('input[name="userprovince"]').val();
      // Create JSON object
      var userdata = {
                    name: newName,
                    sex: newGender,
                    age: newAge,
                    mail: newEmail,
                    province: newProvince
      }
      
      console.log(userdata);

      // Send data to the backend
      $.ajax({
        type: "post",
        url: "http://localhost:8081/userinformation/write",
        // contentType: "application/json; charset=utf-8", 
        //dataType:'json',//json 返回值类型
        data: userdata,//转化为json字符串

        success: function(response) {
          // Handle success response from the backend
          $("#confirmation").text("修改成功");
          window.location.href = "log_test.html"; // Replace with the URL of the success page
          console.log(response);
        },
        error: function(error) {
          // Handle error response from the backend
          $("#confirmation").text("修改失败");
          console.error(error);
        }
      });
    }

</script>

</body>
</html>

需要引入的js文件

flexible.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

需要引入的css文件

about.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* Style the introduction text module */
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  /* margin: 0 auto;  */
  padding: 0.125rem 0.125rem 0;
  margin: 0.25rem 20px;
}
.mainbox .column {
  flex: 7;
}
.mainbox .column:nth-child(2) {
  flex: 3;
}
.mainbox .panel {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  background-color: #f0f0f0;
  padding: 0 0.1875rem 0.5rem;
  margin: 0 0.25rem 1.25rem 0.25rem;
}
.mainbox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.mainbox .panel::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainbox .panel h2 {
  height: 0.6rem;
  color: #02a6b5;
  line-height: 0.6rem;
  text-align: center;
  font-weight: 400;
}

cebianlan.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}
.mainbox .column {
  flex: 3;
}
.mainbox .column:nth-child(2) {
  overflow: hidden;
  flex: 6;
  margin: 0 0.125rem 0.1875rem;
}
.mainbox .panel {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
}
.mainbox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.mainbox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainbox .panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainbox .panel h2 {
  height: 0.6rem;
  color: #02a6b5;
  line-height: 0.6rem;
  text-align: center;
  font-weight: 400;
}
.mainbox .panel .chart {
  height: 3rem;
}

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
body {
  background: url(../images/bg.jpg);
  line-height: 1.15;
}
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}
.mainbox .column {
  flex: 3;
}
.mainbox .column:nth-child(2) {
  overflow: hidden;
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
}
.mainbox .panel {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
}
.mainbox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.mainbox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainbox .panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.mainbox .panel h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-weight: 400;
}
.mainbox .panel .chart {
  height: 3rem;
}
.no {
  background-color: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}
.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.no .no-hd::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.no .no-hd::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.no .no-hd ul {
  display: flex;
}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  line-height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  text-align: center;
  font-family: "electronicFont";
}
.no .no-hd ul li:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.no .no-hd ul li:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.3125rem;
  line-height: 0.5rem;
  padding-top: 0.125rem;
}
.map {
  position: relative;
  height: 10.125rem;
}
.map .map1 {
  width: 6.475rem;
  height: 6.475rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/map.png);
  background-size: 100% 100%;
  opacity: 0.3;
}
.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.0375rem;
  height: 8.0375rem;
  background: url(../images/lbx.png);
  background-size: 100% 100%;
  animation: rotate1 15s linear infinite;
}
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.075rem;
  height: 7.075rem;
  background: url(../images/jt.png);
  background-size: 100% 100%;
  animation: rotate2 15s linear infinite;
}
.map .chart {
  position: absolute;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 10.125rem;
}
@keyframes rotate1 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  form {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

需要引入的data信息

development_description.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h3>主页：</h3>
<p>七个数据表 ---- js/index.js制作设计(包括数据与格式)</p>
<p>格式框架 ---- css/index.css</p>
<p>相关绘图 ---- images</p>

<h3>地图：</h3>
<p>地图模块 ---- 基于国外的一个地图资源，通过 script 链接调用</p>
<p>地图相关函数 ---- folium库，通过 script 链接调用</p>
<p>包括：地图的放大缩小，地图的移动查询等功能</p>
<p>新增地图函数 ---- 通过 script 脚本自创实现</p>
<p>包括：查找坐标大学，遮盖坐标大学，点击坐标大学跳转到对应大学界面，矩形框标注特定区域等功能</p>

<h3>大学系：</h3>
<p>格式框架 ---- css/cebianlan.css</p>
<p>相关功能 ---- 通过 script 脚本自创实现</p>
<p>包括：大学侧边栏提示，主体信息显示，检索框搜索等功能</p>

<h3>关于：</h3>
<p>开发网站信息</p>
<p>开发者信息</p>
<p>日志信息</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h3>开发工具或库</h3>
<p>网站基本实现: html+js+css+python（jupyter）+echarts+springboot+开源模块实现</p>
<p>图表构建（柱状图（纵横向），折线图，南丁格尔玫瑰图，）---echarts工具+开源模板</p>
<p>特殊图表：地图---echarts+china.js中国地理绘图(通过采样点实现)</p>
<p>map模块绘制: 利用python-jupyter基于folium库实现了在开源世界地图模块上的一些功能</p>
<p>编码：vscode+.html+idea</p>
<h3>开发时间</h3>
<p>于大二上实训时期开发，大约历时20天（包含相关学习以及实际操作）</p>
<h3>经验总结</h3>
<p>1>通过script引用的资源---src = "js/echarts.min.js"最好置于/body之外，否则有可能不能按需调用</p>
<p>2>页面设计最好先将页面容器化，分出各个模块，再在模块里面放入自己想要显示的内容，这样可以避免不必要的层级不清晰的问题</p>
<p>3>父容器relative---子容器absolute</p>
<p>4>写一个html页面最好把html文本，css样式，js功能分开来写</p>
<p>5>spring_boot框架部署的时候：&nbsp;&nbsp;一定要注意版本号匹配的问题，包括jdk&nbsp;&nbsp;maven&nbsp;&nbsp;spring_boot&nbsp;&nbsp;idea</p>
<p>本次配置：&nbsp;&nbsp;jdk_8(1.8)&nbsp;&nbsp;idea_2021&nbsp;&nbsp;spring_boot_2.x.x&nbsp;&nbsp;maven用idea_2021自带版本(自己下载的maven出现了很多版本不匹配的问题)</p>
<p>注意：&nbsp;&nbsp;spring_boot_3.x.x之后只支持jdk_17之后的&nbsp;&nbsp;idea_2018似乎无法识别maven_3.6.3&nbsp;&nbsp;maven_3.9.3</p>
<p>7>前后端交互：ajax与fetch</p>
<p>8>~~~university_information里面的调用逻辑很值得仔细理解~~~</p>

总结：
这里省略了一些背景图片和js工具文件的信息 自行网上下载即可（后期可能考虑上传到github上最近太忙了） 需要注意的是此结构是按照原生标准html开发结构来的 html css js data images 都单独在文件夹 不能乱放 不然路径会出问题

后端（springboot）

大学信息展示后端.png

细节代码就不具体展示了 这个后端比较简单 需要的话后期也会考虑上传github
这里展示几个重要的代码节点

解决跨域访问问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.example.demo_user_log.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")    //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置
                        .allowedOriginPatterns("*")    //开放哪些ip、端口、域名的访问权限 SpringBoot2.4.0以后allowedOrigins被allowedOriginPatterns代替
                        .allowCredentials(true)  //是否允许发送Cookie信息
                        .allowedMethods("GET", "POST", "PUT", "DELETE")     //开放哪些Http方法，允许跨域访问
                        .allowedHeaders("*")     //允许HTTP请求中的携带哪些Header信息
                        .exposedHeaders("*");   //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
            }
        };
    }
}

大学controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package com.example.demo_user_log.controller;

import com.example.demo_user_log.domain.Universities;
import com.example.demo_user_log.service.UniversitiesService;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import javax.annotation.Resource;

@RestController
@RequestMapping("/universities")
public class UniversitiesController {
    @Resource
    private UniversitiesService UniversitiesService;
    @PostMapping("/read")
    public List<Universities> readController(){
        List<Universities> list = UniversitiesService.ReadService();

        return list;
    }
    @PostMapping("/write")
    public Universities writeController(@RequestParam int score){
        Universities universities = UniversitiesService.WriteService(score);
        return universities;
    }
    @PostMapping("/delete")
    public String deleteController(@RequestParam String name){
       return UniversitiesService.deleteOne(name);

    }
    @PostMapping("/add")
    public String addController(@RequestBody Universities newUniversities){
        //System.out.println(newUniversities.getValues());
        return UniversitiesService.addOne(newUniversities);
//        return  "1";
    }
    @PostMapping("/update")
    public String updateController(@RequestBody Universities newUniversities){
        return UniversitiesService.updateOne(newUniversities);
    }

}

大学对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
package com.example.demo_user_log.domain;

import javax.persistence.*;

@Table(name = "universities")
@Entity
public class Universities {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long unid;

    public long getUnid() {
        return unid;
    }

    public void setUnid(long unid) {
        this.unid = unid;
    }

    private String name;
    private String description;
    private String image;
    private String valuelist;
    private String valuelist2;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public String getValuelist() {
        return valuelist;
    }

    public void setValuelist(String valuelist) {
        this.valuelist = valuelist;
    }

    public String getValuelist2() {
        return valuelist2;
    }

    public void setValuelist2(String valueslist2) {
        this.valuelist2 = valueslist2;
    }
}

大学dao

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.example.demo_user_log.repository;

import com.example.demo_user_log.domain.Universities;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import javax.naming.Name;

@Repository
public interface UniversitiesDao extends JpaRepository<Universities, Long> {
    Universities findByName(String name); //通过用户名name查找用户，注意要按照JPA的格式使用驼峰命名法
    //调用findAll方法简单实现查询全部数据资源
    @Modifying
    @Transactional
    void deleteByName(String name);
}



大学service接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.example.demo_user_log.service;

import com.example.demo_user_log.domain.Universities;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public interface UniversitiesService {
    /**
        读取数据
     * @return
     */
    List<Universities> ReadService();
    Universities WriteService(int score);
    String deleteOne(String name);
    String addOne(Universities universities);
    String updateOne(Universities universities);
}


大学接口实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package com.example.demo_user_log.service.serviceImpl;


import com.example.demo_user_log.domain.Universities;
import com.example.demo_user_log.domain.UserInformation;
import com.example.demo_user_log.repository.UserInformationDao;
import com.example.demo_user_log.service.UserInformationService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;

@Service
public class UserInformationServiceImpl implements UserInformationService{
    @Resource
    private UserInformationDao userInformationDao;

    @Override
    public UserInformation ReadOne(String name) {

        return userInformationDao.findByName(name);
    }
    @Override
    public String Update(String name,String sex,String age,String mail,String province){
        UserInformation userInformation = userInformationDao.findByName(name);
        if(userInformation != null){
            userInformation.setSex(sex);
            userInformation.setAge(age);
            userInformation.setMail(mail);
            userInformation.setProvince(province);
            userInformationDao.save(userInformation);
            return "success";
        }
        return "error";
    }
    @Override
    public List<UserInformation> ReadAllService(){
        List<UserInformation> list = new ArrayList<>();
        list = userInformationDao.findAll();
        return list;
    }
    @Override
    public String deleteOne(String name){
        userInformationDao.deleteByName(name);
        return "success";
    }
}

统一返回消息体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package com.example.demo_user_log.utils;


public class Result<T> {
    private String code;
    private String msg;
    private T data;

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public Result() {
    }

    public Result(T data) {
        this.data = data;
    }

    public static Result success() {
        Result result = new Result<>();
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }

    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>(data);
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }

    public static <T> Result<T> success(T data,String msg) {
        Result<T> result = new Result<>(data);
        result.setCode("0");
        result.setMsg(msg);
        return result;
    }

    public static Result error(String code, String msg) {
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
}

数据库 mysql实现

大学信息展示数据库.png