作者水平低，如有错误，恳请指正！谢谢！！！！！

目录

一、数据源

二、所需工具

三、项目框架搭建

3.1新建springboot项目

3.1.1进入官网

3.1.2创建项目

四、后端代码编写

4.1根据需求修改pom.xml

4.2配置数据源

4.3创建目录结构

4.4后端编写代码

4.4.1entity类

4.4.2dao

4.4.3service

4.4.4controller

4.5测试

五、前端代码编写

5.1准备

5.2创建包

 5.3代码编写

5.3.1配置静态资源访问

5.3.2在templates目录下创建HTML文件

5.4测试

---

成果展示：

一、数据源

1）可以使用自己的Mysql数据库；

2）使用我提供的数据。（免费下载）

gmall_report用于可视化的SQL文件-MySQL文档类资源-CSDN下载

二、所需工具

mysql

idea

jdk1.8

Maven

三、项目框架搭建

3.1新建SpringBoot项目

创建springboot项目有二种方式：

1）在IDEA中创建

2）在官网上创建

我喜欢在官网创建

3.1.1进入官网

官网地址（记得收藏）：

https://start.spring.io/

3.1.2创建项目

​

 注：

1）注意红色框框的地方，选择你想要的版本和与你的计算机相应的配置；

2）在1.处点击添加相关依赖；

3）在2.处点击生成初始代码并下载。

下面给出我的配置信息：

​

 项目下载后解压，然后用IDEA打开解压后的项目。

四、后端代码编写

4.1根据需求修改pom.xml

我的pom.xml：

   4.0.0         org.springframework.boot      spring-boot-starter-parent      2.7.1             com.example   demo   0.0.1-SNAPSHOT   demo   Demo project for Spring Boot         1.8                     org.springframework.boot         spring-boot-starter-WEB                     org.mybatis.spring.boot         mybatis-spring-boot-starter         2.2.2                     com.baomidou         mybatis-plus-boot-starter         3.1.2                     org.springframework.boot         spring-boot-devtools         runtime         true                     mysql         mysql-connector-java                     org.projectlombok         lombok         true         1.18.4                     org.springframework.boot         spring-boot-starter-test         test                     org.springframework.boot         spring-boot-starter-thymeleaf                                       org.springframework.boot            spring-boot-maven-plugin                                                                  org.projectlombok                     lombok                                                               1）

4.2配置数据源

1）重命名或者复制，把application.properties变为application.yml

​

2） 在application.yml中添加内容：

spring:  datasource:    driver-class-name: com.mysql.cj.jdbc.Driver    url: jdbc:mysql://192.168.17.XXX:3306/gmall_report?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL    username: root    passWord: 123456

注：要按照实际情况修改内容。

（1）192.168.17.XXX是我的MySQL所在计算机的IP地址，要修改成你的；

（2）3306:是端口号；

（3）gmall_report是用到的数据库名；

（4）root是MySQL的用户名，123456是用户相应的密码；

4.3创建目录结构

按照下图创建你的包，使其目录和下图一样。

​

4.4后端编写代码

想要从MySQL中提取数据，要编写entity，dao，servier，controller类或者接口，强烈建议一张一张表的编写，方便梳理。

本文用到的表有：Goods，ads_area_topic，ads_order_day_count，ads_product_sale_topN，ads_user_action_count

4.4.1entity类

在entity包下面创建java类，如下图；

​

（1） AreaTopicEntity

import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import java.io.Serializable;@Data@TableName("ads_area_topic")public class AreaTopicEntity implements Serializable {    private static final long serialVersionUID = 2L;    @TableId    private String dt;    private String id;    private String provinceName;    private String regionName;    private String orderDayAmount;    private String paymentDayAmount;    private String areaCode;}

 注：

1）ads_area_topic是用到的mysql表名；

2）dt ,       id,        provinceName,        regionDayAmouth,         orderDayAmount,       paymentDayAmount,        areaCode;是ads_area_topic表的列名；

（2）GoodEntity 

import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import java.io.Serializable;@Data@TableName("goods")public class GoodEntity implements Serializable {    private static final long serialVersionUID = 1L;   @TableId    private Long id;   private String name;   private Integer num;}

（3）OrderDayCountEntity

import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import java.io.Serializable;@Data@TableName("ads_order_daycount")public class OrderDayCountEntity implements Serializable {    private static final Long serialVersionUID = 1L;    @TableId    private String dt;    private String orderCount;    private String orderAmount;    private String orderUsers;}

（4）ProductSaleTopNEntity

import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import java.io.Serializable;@Data@TableName("ads_product_sale_topN")public class ProductSaleTopNEntity implements Serializable {    private static final Long serialVersionUID = 1L;    @TableId    private String dt;    private String skuId;    private String paymentAmount;}

（5）UserActionCountEntity

import com.baomidou.mybatisplus.annotation.TableField;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;import javax.print.DocFlavor;import java.io.Serializable;@Data@TableName("ads_user_action_convert_day")public class UserActionCountEntity implements Serializable {    private static final Long serialVersionUID = 1L;    @TableField    private String dt;    private String homeCount;    private String goodDetailCount;    private String home2goodDetailConvertRatio;    private String cartCount;    private String goodDetail2cartConvertRatio;    private String orderCount;    private String cart2orderConvertRatio;    private String paymentAmount;    private String order2paymentConvertRatio;}

4.4.2dao

按照下图在dao包下面创建java接口文件；

​

 （1）AreaTopicDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.AreaTopicEntity;import org.apache.ibatis.annotations.Mapper;@Mapperpublic interface AreaTopicDao extends BaseMapper {}

（2）GoodDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.GoodEntity;import org.apache.ibatis.annotations.Mapper;@Mapperpublic interface GoodDao extends BaseMapper {}

（3）OrderDayCountDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.OrderDayCountEntity;import org.apache.ibatis.annotations.Mapper;@Mapperpublic interface OrderDayCountDao extends BaseMapper {}

（4）ProductSaleTopNDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.ProductSaleTopNEntity;import org.apache.ibatis.annotations.Mapper;@Mapperpublic interface ProductSaleTopNDao extends BaseMapper {}

（5）UserActionCountDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.example.demo.entity.UserActionCountEntity;import org.apache.ibatis.annotations.Mapper;@Mapperpublic interface UserActionCountDao extends BaseMapper {}

4.4.3service

1）在service包下创建一个impl包；

2）按照下图的布局在service和impl包下面创建java类和java接口文件

​

（1）AreaTopicService

import com.baomidou.mybatisplus.extension.service.IService;import com.example.demo.entity.AreaTopicEntity;public interface AreaTopicService extends IService {}

（1.1） AreaTopicServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.demo.dao.AreaTopicDao;import com.example.demo.entity.AreaTopicEntity;import com.example.demo.service.AreaTopicService;import org.springframework.stereotype.Service;@Service("areatopicService")public class AreaTopicServiceImpl extends ServiceImpl implements AreaTopicService {}

（2）GoodService

import com.baomidou.mybatisplus.extension.service.IService;import com.example.demo.entity.GoodEntity;public interface GoodService extends IService {}

（2.1）GoodServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.demo.dao.GoodDao;import com.example.demo.entity.GoodEntity;import com.example.demo.service.GoodService;import org.springframework.stereotype.Service;@Service("goodService")public class GoodServiceImpl extends ServiceImpl implements GoodService {}

（3）OrderDayCountService

import com.baomidou.mybatisplus.extension.service.IService;import com.example.demo.entity.OrderDayCountEntity;public interface OrderDayCountService extends IService {}

（3.1）OrderDayCountServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.demo.dao.OrderDayCountDao;import com.example.demo.entity.OrderDayCountEntity;import com.example.demo.service.OrderDayCountService;import org.springframework.stereotype.Service;@Service("orderdaycountService")public class OrderDayCountServiceImpl extends ServiceImpl implements OrderDayCountService {}

（4）ProductSaleTopNService

import com.baomidou.mybatisplus.extension.service.IService;import com.example.demo.entity.ProductSaleTopNEntity;public interface ProductSaleTopNService extends IService {}

（4.1）ProductSaleTopNServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.demo.dao.ProductSaleTopNDao;import com.example.demo.entity.ProductSaleTopNEntity;import com.example.demo.service.ProductSaleTopNService;import org.springframework.stereotype.Service;@Service("productsaletopNService")public class ProductSaleTopNServiceImpl extends ServiceImpl implements ProductSaleTopNService {}

（5）UserActionCountService

import com.baomidou.mybatisplus.extension.service.IService;import com.example.demo.entity.UserActionCountEntity;public interface UserActionCountService extends IService {}

（5.1）UserActionCountServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;import com.example.demo.dao.UserActionCountDao;import com.example.demo.entity.UserActionCountEntity;import com.example.demo.service.UserActionCountService;import org.springframework.stereotype.Service;@Service("useractioncountService")public class UserActionCountServiceImpl extends ServiceImpl implements UserActionCountService {}

4.4.4controller

按照下图的布局在controller包下面创建java类文件；

​

（1）AreaTopicController

import com.example.demo.entity.AreaTopicEntity;import com.example.demo.service.AreaTopicService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController@RequestMapping("areatopic")public class AreaTopicController {    @Autowired    private AreaTopicService areaTopicService;    @RequestMapping("list")    public List list(){        return areaTopicService.list();    }}

（2） GoodController

import com.example.demo.entity.GoodEntity;import com.example.demo.service.GoodService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController@RequestMapping("goods")public class GoodController {    @Autowired    private GoodService goodService;    @RequestMapping("list")    public List list() {        return goodService.list();    }}

（3）OrderDayCountController

import com.example.demo.entity.OrderDayCountEntity;import com.example.demo.service.OrderDayCountService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController@RequestMapping("orderdaycount")public class OrderDayCountController {    @Autowired    private OrderDayCountService orderdaycountService;    @RequestMapping("list")    public List list(){        return orderdaycountService.list();    }}

（4）ProductSaleTopNController

import com.example.demo.entity.ProductSaleTopNEntity;import com.example.demo.service.ProductSaleTopNService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController@RequestMapping("productsaletopN")public class ProductSaleTopNController {    @Autowired    private ProductSaleTopNService productSaleTopNService;    @RequestMapping("list")    public List list(){        return productSaleTopNService.list();    }}

（5）UserActionCountController

import com.example.demo.entity.UserActionCountEntity;import com.example.demo.service.UserActionCountService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController@RequestMapping("useractioncount")public class UserActionCountController {    @Autowired    private UserActionCountService userActionCountService;    @RequestMapping("list")    public List list(){        return userActionCountService.list();    }}

4.5测试

1）点击启动项目

​

 2）启动成功样式

​

 3）进入浏览器，测试接口

Http://localhost:8080/areatopic/listhttp://localhost:8080/goods/listhttp://localhost:8080/orderdaycount/listhttp://localhost:8080/productsaletopN/listhttp://localhost:8080/useractioncount/list

​

​

 注：

注意查看数据，都出现数据说明上面的代码没有问题！ 

如果有数据为空，先检查mysql数据库的数据有没有问题，没有问题再检查相应的entity的代码；

注意，如果数据库表的列名中有下划线，entity中下划线的后一位要用大写，不能用下划线；

比如：

id_user --------->idUser

gmall_ip_use -------------->gmallIpUse

五、前端代码编写

5.1准备

下载echarts.min.js，Jquery-3.5.1.min.js.china.js

1)通过以下官网可以找到：

下载 - Apache ECharts

Download jQuery | jQuery

jquery下载所有版本（实时更新）

2)知道大家下载麻烦，我已经准备了好了，内含用到的CSS!免费下载哦！

echarts，jQuery文件-Javascript文档类资源-CSDN下载

5.2创建包

按照下面结构创建相应的文件和文件夹；

​

 5.3代码编写

5.3.1配置静态资源访问

在properties.yml中添加

resources:  web:    resources:      static-locations: classpath:/templates/, classpath:/static/

5.3.2在templates目录下创建html文件

k.html

pie.html

index.html

line.html

map.html

bar.html

bar-trend.html

bar-negative.html

endindex.html

                        
来源地址：https://blog.csdn.net/qq_55906442/article/details/125683834