spring-boot 加 thymeleaf 加 echats

简介

     Java maven项目，spring boot + mybatis + thymeleaf + Echarts。

---

实现目标

1. 可以访问html。
2. 数据可以带入html。
3. 数据可以在Echarts中使用。

实现步骤

1.引入依赖

    
        2.1.1.RELEASE
        5.1.3.RELEASE
    
    
        
        
            
            org.springframework.boot
            spring-boot-dependencies
            ${spring-boot-version}
            pom
            import
        

        
            org.springframework.boot
            spring-boot-starter-web
            ${spring-boot-version}
            
                
                    org.springframework.boot
                    spring-boot-starter-tomcat
                
                
                    org.springframework.boot
                    spring-boot-starter-logging
                
            
        
        
            org.springframework.boot
            spring-boot-starter-jetty
            ${spring-boot-version}
        
        
            org.springframework.boot
            spring-boot-autoconfigure
            ${spring-boot-version}
        

        
            org.springframework.boot
            spring-boot-starter-log4j2
            ${spring-boot-version}
        

        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.3.2
        


        
        
            com.alibaba
            fastjson
            1.2.31
        


        
        
            com.alibaba
            druid
            1.0.15
        
        
        
            mysql
            mysql-connector-java
            5.1.30
        
        
            org.springframework.boot
            spring-boot-starter-aop
            ${spring-boot-version}
        

        
        
        
            log4j
            log4j
            1.2.17
        


        
        
            org.apache.httpcomponents
            httpclient
            4.5.2
        

        
            org.apache.httpcomponents
            httpmime
            4.5.2
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
            ${spring-boot-version}
        

        
        
            org.springframework.boot
            spring-boot-starter-test
            ${spring-boot-version}
            test
        
        
            junit
            junit
            4.12
            
            test
        
        
            org.skyscreamer
            jsonassert
            1.5.0
            test
        
        
            org.springframework
            spring-test
            ${spring-framework}
            test
        
    

注意：打包时候需要把前端文件打包进去。如果产生无法打包问题，填入如下代码

  
        
            
                    src/main/resources/static

                ${project.build.directory}/classes/static
            
            
                src/main/resources/templates

                ${project.build.directory}/classes/templates
            
       

2.编写后端接口

此处自由发挥即可，注意传给前端的参数。本例中传入的是list

 @RequestMapping(value = "count",method = RequestMethod.GET)
    public ModelAndView count(){
       return new ModelAndView("interface/countNumber","interfaceList",operationLogService.getInterfaceCount());
    }

3.前端接收参数

默认路径如下：

resource/static/css，resource/static/js，resource/templates/自定义（与代码中return对应，本例中interface）/html页面名称

页面代码

    
    
    
    
    
    




    

        接口数据查看
    



    

        

            
                列表
            
        
        
柱状图
    
    

        

            

                

                
模块
                
接口描述
                
请求次数