硬核！华为内部首发Spring Boot核心笔记，应用可视化，一目了然

今日分享开始啦，请大家多多指教~

一、项目需求

可视化男女生人数比例

可视化报到未报到人数比例

可视化各学院学生人数比例

可视化各学院男女生人数比例

可视化生源地比例

二、实现步骤

（一）安装插件

1、Lombok插件

2、MyBatisX插件

（二）准备数据库

1、下载数据库脚本 - lzy_student.sql

2、创建数据库 - lzy_student

3、运行数据库脚本

4、查看数据表记录

（三）创建Spring Boot项目 - WelcomeFreshmenECharts

在pom.xml文件里添加Lombok与Druid依赖

（四）创建实体类

为了更好地解决问题，将实体类分为两种：一种是针对数据库的实体类，实体属性与表字段完全一一对应；一种是针对业务需求的实体类，除了与表字段对应的实体属性，还可以根据业务需求添加新属性，甚至没有与表字段对应的属性，全部是根据业务需求设置的实体属性。

1、针对数据库的实体类

（1）创建学生实体类 - Student

在net.hw.echarts包里创建bean子包，在子包里创建Student类

@Data、@AllArgsConstructor与@NoArgsConstructor是Lombok注解，用于生成getters、setters、全参构造方法和无参构造方法

为了提高性数据访问性能，在映射器配置文件里要采用二级缓存，要求实体类必须序列化，因此要实现Serializable接口

2、创建针对业务需求的实体类

（1）创建学生业务实体类 - StudentBiz

在net.hw.echarts包里创建biz子包，在子包里创建StudentBiz类

大家可以看到，学生业务实体类StudentBiz只是比学生实体类Student多了一个count属性，用于存放学生人数。

（2）创建数据业务实体类 - DataBiz

后台控制返回给前台的JSON数据，格式：{msg: "获取成功", status: "200", data: [{name: "男", value: 300}, {name: "女", value: 240}]}

在net.hw.echarts.biz包里创建DataBiz类

（3）创建映射业务实体类 - MapBiz

查看ECharts饼图数据源格式，列表里每个map有两个键：name与value

在net.hw.echarts.biz包里创建MapBiz类

（五）创建学生映射器接口

在net.hw.echarts包里创建mapper子包，在子包里创建StudentMapper接口

（六）配置应用属性文件 - application.properties

将application.properties重命名为application.yml

（七）创建学生映射器配置文件 - StudentMapper.xml

在resources目录里创建mapper子目录，然后在子目录里创建StudentMapper.xml

（八）创建学生服务类 - StudentService

在net.hw.echarts包里创建service子包，在子包里创建StudentService类

（九）添加脚本静态资源

1、下载脚本资源

（1）china.js

（2）echarts.min.js

（3）jquery.min.js

2、将脚本资源放到static目录

（十）创建控制器

1、创建数据控制器 - DataController

（1）按性别获取学生人数信息

创建getByGender()方法

启动应用，测试结果

访问http://localhost:8080/data/getByGender

（2）按学院性别获取学生人数信息

创建getBySchoolGender()方法

重启应用，访问http://localhost:8080/data/getBySchoolGender

（3）按报到与否获取学生人数信息

创建getBySign()方法

重启应用，访问http://localhost:8080/data/getBySign

（4）按学院报到获取学生人数信息

创建getBySchoolSign()方法

重启应用，访问http://localhost:8080/data/getBySchoolSign

（5）按生源地获取学生人数信息

创建getByProvince()方法

重启应用，访问http://localhost:8080/data/getByProvince

2、创建视图控制器 - ViewController

（十一）创建可视化页面

1、按性别可视化学生人数

创建gender.html页面

重启应用，访问http://localhost:8080/view/getByGender

2、按学院性别可视化学生人数

创建school_gender.html页面

重启应用，访问http://localhost:8080/view/getBySchoolGender

3、按报到与否可视化学生人数

创建sign.html页面

重启应用，访问http://localhost:8080/view/getBySign

4、按学院可视化报到与未报到人数

创建school_sign.html页面

重启应用，访问http://localhost:8080/view/getBySchoolSign

5、按生源地可视化学生人数

创建province.html页面

重启应用，访问http://localhost:8080/view/getByProvince

今日份分享已结束，请大家多多包涵和指点！