前言
本次综合课程设计作业主要分为三个部分:一,项目介绍。二,代码以及大数据echarts可视化。三,答辩记录回答情况。
一,项目介绍
1.项目背景及简介
2.Linux虚拟机发展历史
3. 负责 搜集分析数据
A:PPT制作,分析数据导入数据库。 B:内容信息搜集以及部分echarts C:Springboot后端 D:登录界面和主页面
4. 登录页面及其可视化
5. 总结
收获
通过本次培训,我们组各个成员都从中收获了很多,通过十天的培训,我们都从中学到了html+css+js+springboot,领悟了不少的代码编程思维,完成了自己的项目。
团队协调
了解了如何进行团队开发与分工和团结协作。知道怎样分工能很好的利 用时间,因为小组成员学习能力不同,基础不一,所以会在某些环节起到争执,还有项目时间很紧张,大家都在努力的做项目,甚至熬夜通宵,但都通过我们的不断探索与讨论,以及通过大家的努力,也解决了部分问题。
二,代码以及大数据echarts可视化
1.过滤未登录
}
})
}
$(function(){//在页面加载的时候进行调用
let data = sessionStorage.getItem( "user");
if(data==null ll data == ""){
alert("未登录,请登录")
window.location.href="login.html";
}//过滤未登功能
})
</script>
2.主页面样式和背景图
<style>
*{
margin: 0px;
padding :0px;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
background-image: url( "images/main.pn.g" );
/*设置图片大小*/
background-size: 100%100%;
}
3.划分区域
}
.leftUp{
width : 35%;
height: 400px;
float: left;
}
.centerUp{
width: 30%;
height: 250px;
float: left;color: #8b8282;
font-family:楷体;
font-size: 45px;
/*字体居中样式*/
line-height: 150px;
text-align: center;
}
.rightUp{
width: 35%;
height: 400px;
float: left;
}
}
.leftDownf
width: 35%;
height : 450px;
float : left;
position : relative;
top :-430p×;
}
.centerDown{
width : 30%;
height: 200px ;
float : left;
position : relative ;
top:-200px;
color: #8b8282;
font-family:楷体;
font-size: 35px;
/☆字体居中样式*f
line-height : 300px;
text-align: center;
}
.rightDown{
width : 35%;
height : 450px;
float : left;
position : relative;
top:-430px;
4.创建五个按钮:代码以及可视化
5.击杀榜数据代码以及可视化
function leftUp(){
$.ajax({
url: " /index/kills",
dataType : "json" ,
success:function(res){
console.log(res);
let x=[];//表示横坐标轴数组
let v=[];//纵坐标周的数组
for(let i=0 ; i<res.length; i++){
x.push(res[i].team)
y.push(res[i].sum)
}
/ /1、初始echarts图标
let myEcharts= echarts.init(document.getElementById("leftUp"));
/ /2、设置echarts选项
let option = {
title : {
text: 'LOL击杀榜',
subtext: '官网数据'
},
legend : {
data: ['击杀次数'J]
},
×Axis : [
{
type : 'category ' ,
boundaryGap : false,
data : x
}
6.ban选英雄数据的代码以及可视化
7.牺牲榜的数据可视化
8.队伍数据榜数据可视化
function rightDown(){
$.ajax({
url: " /index/teams",
dataType : "json" ,
success:function(res) {
console.log(res);
let x = [];//表示横坐标轴数组
let y = [];//纵坐标周的数组
for (let i = 0; i < res.length; i++) {
x.push(res[i].team)
y.push(res[i].sum)
}
//1、初始e charts图标
let myEcharts = echarts.init(document.getElementById("rightDown").
/ /2、设置echarts选项
let option = {
title: {
text: 'LOL队伍数据榜',
subtext: '官网数据'
},
legend: {
data:[ '比赛场次'〕
},
xAxis: [
{
type : 'category ' ,
boundaryGap: false,
axisLabel:{
三,答辩记录回答情况参考。
A:这次作业的具体实现:从用前后端分离开发技术,前端使用了html、css、js、jquery和echarts图表可视化;后端使用了springboot框架。
B:我是负责整个后端SpringBoot框架的搭建,也就是最后整合各个模块,展示最后的页面成果。既然是整合的工作,就免不了有许多的错误,通过老师视频的讲解,以及对MVC和SpringBoot框架的理解,理解了各个模块,知道页面是怎么跳转的,是怎么从数据库中获取数据的,慢慢进行debug,最后成功运行项目,感到非常高兴。整个过程中需要许多的耐心,包括前几天的老师实训内容都是进行各种环境的配置,知道环境配置的重要性。一旦出错,整个项目就运行不起来。
C:这次实训中主要问题是我学习新知识的效率比较慢,有的新知识开始接触时比较难以理解,所以速度有些跟不上。有的地方较难的代码也没有深入理解它的具体含义,导致使用时只能生搬硬套,不能灵活运用。所以在最后写项目收集数据并分析数据时因为格式还有代码与原来不一样,出现了较多改动,又由于理解不深入,所以一直出现了许多bug。所以需要下来之后多看几遍老师讲的内容,并查找资料仔细理解它的含义和用法,深入理解后才能熟练运用,也就能明白bug出现的原因。