1、idea创建springboot项目,看图文指引。
这篇博客是参考另一篇博客的文章做的,有些改动。
博客地址:参考文章
一直到这个地方,看图中所选择。
2、创建完之后,加入下列依赖。可以吧自己本来的都删掉。
新手注意,是全部添加到标签的里面。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.40</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.10</version>
</dependency>
然后把application.properties文件改成application.yml
里面放入如下代码。
spring:
thymeleaf:
prefix: classpath:/templates/ #th模板运行路径
suffix: .html
mode: HTML5
encoding: UTF-8
cache: false
resources:
chain:
strategy:
content:
enabled: true
paths: /**
static-locations: classpath:/templates/ #页面运行路径
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/nei1?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
password: liumei520
username: root
server:
port: 8080
password:这里是密码
username:这里是数据库用户名
3306/这里是数据库
3、接下来大家按我图片新建后台的包
然后附上后台代码,自行copy,爆红现象Alt+回车自己导包。
entity实体类代码:
Table1
package com.xitao.tubiao3.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "table1")
public class Table1 implements Serializable {
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "num")
private Integer num;
}
Table2
package com.xitao.tubiao3.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "table2")
public class Table2 implements Serializable {
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "value")
private Integer value;
}
mapper包代码:
Table1Mapper接口
package com.xitao.tubiao3.mapper;
import com.xitao.tubiao3.entity.Table1;
import org.springframework.data.jpa.repository.JpaRepository;
public interface Table1Mapper extends JpaRepository<Table1,Integer> {
}
Table2Mapper接口
package com.xitao.tubiao3.mapper;
import com.xitao.tubiao3.entity.Table2;
import org.springframework.data.jpa.repository.JpaRepository;
public interface Table2Mapper extends JpaRepository<Table2,Integer> {
}
service包:
Table1Service接口
package com.xitao.tubiao3.service;
import com.xitao.tubiao3.entity.Table1;
import java.util.List;
public interface Table1Service {
public List<Table1> cha1();
}
Table2Service接口
package com.xitao.tubiao3.service;
import com.xitao.tubiao3.entity.Table2;
import java.util.List;
public interface Table2Service {
public List<Table2> cha2();
}
Table1ServiceImpl类
package com.xitao.tubiao3.service.impl;
import com.xitao.tubiao3.entity.Table1;
import com.xitao.tubiao3.mapper.Table1Mapper;
import com.xitao.tubiao3.service.Table1Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.transaction.Transactional;
import java.util.List;
@Service
@Transactional
public class Table1ServiceImpl implements Table1Service {
@Autowired
private Table1Mapper table1Mapper;
@Override
public List<Table1> cha1() {
return table1Mapper.findAll();
}
}
Table2ServiceImpl类
package com.xitao.tubiao3.service.impl;
import com.xitao.tubiao3.entity.Table2;
import com.xitao.tubiao3.mapper.Table2Mapper;
import com.xitao.tubiao3.service.Table2Service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.transaction.Transactional;
import java.util.List;
@Service
@Transactional
public class Table2ServiceImpl implements Table2Service {
@Autowired
private Table2Mapper table2Mapper;
@Override
public List<Table2> cha2() {
return table2Mapper.findAll();
}
}
controller包:
Table1Controller类
package com.xitao.tubiao3.controller;
import com.xitao.tubiao3.entity.Table1;
import com.xitao.tubiao3.service.impl.Table1ServiceImpl;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
public class Table1Controller {
@Resource
private Table1ServiceImpl table1Service;
@RequestMapping("/firstApi")
public List<Table1> findAll(){
return table1Service.cha1();
}
}
Table2Controller类
package com.xitao.tubiao3.controller;
import com.xitao.tubiao3.entity.Table2;
import com.xitao.tubiao3.service.impl.Table2ServiceImpl;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@RestController
public class Table2Contoller {
@Resource
private Table2ServiceImpl table2Service;
@RequestMapping("/lastApi")
public List<Table2> findAll(){
return table2Service.cha2();
}
}
4、前端,在resources资源文件夹里面新建templates文件夹
附上前端页面代码:
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var option;
var arr1=[];
var arr2=[];
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
// 指定图表的配置项和数据
$.get("../lastApi",function(result){
arr1=result;
$.each(result,function (index,item) {
arr1.push(item.name);
arr2.push(item.name);
})
option={
title : {
text: '网络游戏热度统计',
subtext: '游戏获得的票数',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: arr2
},
series : [
{
name: '票数数',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:arr1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
})
// 使用刚指定的配置项和数据显示图表。
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var option;
var arr1=[];
var arr2=[];
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
// 指定图表的配置项和数据
$.get("../firstApi",function (result) {
$.each(result,function (index,item) {
arr1.push(item.name);
arr2.push(item.num);
})
option = {
title: {
text: '长沙市市长竞选榜'
},
tooltip: {},
legend: {
data:['票数']
},
xAxis: {
data: arr1
},
yAxis: {},
series: [{
name: '票数',
type: 'bar',
data: arr2
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
})
</script>
</body>
</html>
5、运行查看效果。
demo.html
test.html
浏览器路径就是http://localhost:8080/加上页面路径
6、当然,数据库是不可或缺的,我就是操作中也出过一个数据库的bug,接下来附上数据库图片
table1
table2
按如上操作是可以运行出来的,也许实际操作中有些小问题,可以私信问我。细心仔细,都能运行出来。