springboot+Highcharts

框架搭建
1.开发软件
后台开发:IDEA
后台测试:Postman;
数据库 : Navicat
2.技术要点
前端: HTML
后端: Spring Boot
数据库:MySql
功能实现
1.去 Highcharts官网上下载资源包
链接: Highcharts官网.
需要highcharts.js这个文件

2.创建SpringBoot项目:
使用Idea点击file,选择New Project,选择Spring InitInitializr,自行配置项目的基础配置;

3.在pom.xml文件中导入依赖:


    
        org.springframework.boot
        spring-boot-starter-jdbc
    
    
        org.springframework.boot
        spring-boot-starter-web
    
    
        org.mybatis.spring.boot
        mybatis-spring-boot-starter
        2.1.1
    

    
        mysql
        mysql-connector-java
        runtime
    
    
        org.projectlombok
        lombok
        true
    
    
        org.springframework.boot
        spring-boot-starter-test
        test
        
            
                org.junit.vintage
                junit-vintage-engine
            
        
    

    
        com.thetransactioncompany
        cors-filter
        2.5
    
    
        com.alibaba
        fastjson
        1.2.47
    

4.在resource文件夹下编写application.yml配置文件:
server.port=8080
server.servlet.context-path=/
#thymleaf模板引擎
spring.thymeleaf.prefix=classpath:resources/
spring.thymeleaf.suffix=.html

spring.datasource.url=jdbc:mysql://localhost:3306/highcharts?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root
5.实体类:
@Data
public class BrowserShare {
/**
* 投资人
/
private String name;
/
*
* 占有股份
*/
private Float share;
}
6.dao层:
@Mapper
public interface BrowserShareMapper {
@Select(“select * from BrowserShare”)
List getAllUser();
}
7.service层
@Service
public class BrowserShareServiceImpl implements BrowserShareService{
@Resource
private BrowserShareMapper browserShareMapper;
@Override
public List getAllUser() {
return browserShareMapper.getAllUser();
}
}
8.Controller层
@RestController
public class BrowserShareController {
@Resource
private BrowserShareService browserShareService;
@RequestMapping(value = “/list”)
public List getAllStudent(){
List list=browserShareService.getAllUser();
return list;
}

}
9.编写前台
springboot+Highcharts_第1张图片
把下载好的js文件和jquery文件放html里面去
springboot+Highcharts_第2张图片
springboot+Highcharts_第3张图片
springboot+Highcharts_第4张图片
10.完成
springboot+Highcharts_第5张图片

你可能感兴趣的:(springboot+Highcharts)