SpringBoot校园疫情系统

420190144张家榜《软件框架技术》-期末课程设计报告.docx :::warning 建议：

1. 丰富功能
   1. 登录
   2. 加密
   3. 疫情数据API接入
2. 属性和类大写开头 ::: spring web提供了一个自动配置类，叫，WebMvcAutoConfiguration()

springboot项目都是mvc框架，即m-model（实例层，所有对象和数据库都是映射）
http发送请求，都会发送到controller层，controller层去根据请求信息找service层，service实现具体业务，Service层里涉及到数据交互的都要去dao层（或说mapper层）去与数据库进行数据交互。
数据查询会返回到DAO、SERVICE、Controller封装数据返回到前台，前台用themeleaf解析数据，（js实现），
model本意为实体，即对象，是类，类可以分成多个对象（不同的人）

controller层要调用service层的方法（要用service的东西需要注入），所以要写service层类型的属性。
@Autowire用于将标注的属性直接交由spring管理，即自动注入，相当于new。
@RequestMapping快速映射到指定路径
基本的增删改查，直接封装成了函数，可以直接通过函数实现，不用写sql语句。比较复杂的部分在mapper自定义实现
basemapper
@
实体类都做ORM映射，将数据库属性对应代码的属性。自动调用get、set方法取设值。
bean controller service
config跳转、拦截、哪些资源可以访问

根据登录名和密码查询数据库，如果正确那么成功登录
验证码正确判断，限制请求。

P1-9 项目创建、柱、饼、折线图

1. SpringBoot项目创建
   1. 初始依赖选择
      1. Lombol
         1. 帮助生成实体类get/set/toString方法
      2. Spring Web
         1. Web框架需要
      3. Thymeleaf
         1. 模板引擎
      4. JDBC API
         1. SQL方面
         2. 是最底层的和数据交互的标准接口
      5. Mybatis-Plus

2. 创建yml文件

   1. 编写配置可读性强
   2. 编写数据库连接配置

      #--数据库连接配置
      #--数据库为mysql，地址为安装时候默认的3306，时区设置=UTC,安全控制-关闭，编码格式设为UTF-8
      spring:
      datasource:
      url: jdbc:mysql://localhost:3306/nocv?serverTimezone=UTC&useSSL=false&characterEncoding=utf-8   
      username: root
      password: root
      

3. pom,xml引入依赖

   1. mybatisPlus（不同版本影响代码）

      <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.1.1</version>
      </dependency>
      

   2. mysql连接 ```sql

      mysql mysql-connector-java 8.0.28

4. 创建包和前端模板文件，数据库数据导入，echarts依赖引入与index编写
   1. 包
      1. controller
         1. 浏览器请求会被controller拦截，根据请求信息作出对应动作
      2. service
      3. dao
      4. entiry
         1. 实体类，与数据库实体类作ORM映射
   2. templates
      1. 新建index.html
   3. 数据库导入疫情地图数据
```sql
CREATE DATABASE nocv;
use nocv;
DROP TABLE IF EXISTS nocv_data;
CREATE TABLE nocv_data (
 id decimal(11) PRIMARY KEY,
 name varchar(255) DEFAULT NULL,
 value decimal(11) DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=35nocv DEFAULT CHARSET=utf8;
INSERT INTO nocv_data(id,name,value)
VALUES
(1,'澳门', 91),
(2,'香港', 334801),
(3,'台湾', 3295076),
(4,'新疆', 1008),
(5,'宁夏', 122),
(6,'青海', 147),
(7,'甘肃', 681),
(8,'陕西', 3310),
(9,'西藏', 1),
(10,'云南', 2164),
(11,'贵州', 185),
(12,'四川', 2363),
(13,'重庆', 721),
(14,'海南', 288),
(15,'广西', 1649),
(16,'广东', 7371),
(17,'湖南', 1400),
(18,'湖北', 68401),
(19,'河南', 3183),
(20,'山东', 2748),
(21,'江西', 1384),
(22,'福建', 3379),
(23,'安徽', 1065),
(24,'浙江', 3147),
(25,'江苏', 2363),
(26,'上海', 63177),
(27,'黑龙江', 2987),
(28,'吉林', 40295),
(29,'辽宁', 1718),
(30,'内蒙古',2079),
(31,'山西', 423),
(32,'河北', 2007),
(33,'天津', 1988),
(34,'北京', 3651);

1. echarts引入

   1. 文件下载
      1. github

   2. 找地图图表模板

      window.dataList = [
      {name: '澳门', value: 18},
      {name: '香港', value: 273},
      {name: '台湾', value: 153},
      {name: '新疆', value: 76},
      {name: '宁夏', value: 75},
      {name: '青海', value: 18},
      {name: '甘肃', value: 134},
      {name: '陕西', value: 248},
      {name: '西藏', value: 1},
      {name: '云南', value: 176},
      {name: '贵州', value: 146},
      {name: '四川', value: 543},
      {name: '重庆', value: 576},
      {name: '海南', value: 168},
      {name: '广西', value: 254},
      {name: '广东', value: 1407},
      {name: '湖南', value: 1018},
      {name: '湖北', value: 67800},
      {name: '河南', value: 1273},
      {name: '山东', value: 765},
      {name: '江西', value: 936},
      {name: '福建', value: 307},
      {name: '安徽', value: 990},
      {name: '浙江', value: 1237},
      {name: '江苏', value: 633},
      {name: '上海', value: 394},
      {name: '黑龙江', value: 484},
      {name: '吉林', value: 93},
      {name: '辽宁', value: 126},
      {name: '内蒙古', value: 75},
      {name: '山西', value: 133},
      {name: '河北', value: 319},
      {name: '天津', value: 137},
      {name: '北京', value: 512}
      ];
      option = {
      tooltip: {
      triggerOn: "click",
      formatter: function(e, t, n) {
         return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
      }
      }, 
      toolbox: {
         show: true,
         orient: 'vertical',
         left: 'right',
         top: 'center',
         feature: {
             dataView: {readOnly: false},
             restore: {},
             saveAsImage: {}
         }
      }, // 提供下载工具
      visualMap: {
      min: 0,
      max: 100000,
      left: 26,
      bottom: 40,
      showLabel: !0,
      text: ["高", "低"],
      pieces: [{
         gt: 10000,
         label: "> 10000人",
         color: "#7f1100"
      }, {
         gte: 1000,
         lte: 10000,
         label: "1000 - 10000人",
         color: "#ff5428"
      }, {
         gte: 100,
         lt: 1000,
         label: "100 - 1000人",
         color: "#ff8c71"
      }, {
         gt: 10,
         lt: 100,
         label: "10 - 100人",
         color: "#ffd768"
      }, {
         gt: 1,
         lt: 10,
         label: "1 - 10人",
         color: "#ffffff"
      }],
      show: !0
      },
      geo: {
      map: "china",
      roam: !1,
      scaleLimit: {
         min: 1,
         max: 2
      },
      zoom: 1.23,
      top: 120,
      label: {
         normal: {
             show: !0,
             fontSize: "14",
             color: "rgba(0,0,0,0.7)"
         }
      },
      itemStyle: {
         normal: {
             //shadowBlur: 50,
             //shadowColor: 'rgba(0, 0, 0, 0.2)',
             borderColor: "rgba(0, 0, 0, 0.2)"
         },
         emphasis: {
             areaColor: "#f2d5ad",
             shadowOffsetX: 0,
             shadowOffsetY: 0,
             borderWidth: 0
         }
      }
      },
      series: [{
      name: "确诊病例",
      type: "map",
      geoIndex: 0,
      data: window.dataList
      }]
      };
      

   3. 根据echarts官网使用手册和地图模板代码编写index.html ```html <!DOCTYPE html>

      ```

   1. 搭建mybatisplus框架
      1. controller包下新建类indexController ```java package com.demo.controller;

   import org.springframework.stereotype.Controller;

   @Controller public class indexController {

   }

   
      2. entity包下新建
   ```java
   package com.demo.entity;
   import com.baomidou.mybatisplus.annotation.TableName;
   import lombok.Data;
   
   @Data
   @TableName("nocv_data")    //映射的表名为nocv_data
   public class nocvData {
       //private Integer id;//前台只展示name和value，id暂时不用
       private String name;
       private Integer value;
   
       //类上方通过lombok引入和补丁安装，用@data注解省略get、set方法和toString()方法
   
   }
   

   1. dao包下新建 ```java package com.demo.dao;

   import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.demo.entity.nocvData;

   //dao层继承Mybatisplus的basemapper，传入泛型——nocvData实体类 public interface indexMapper extends BaseMapper{

   }

   
      4. service包下新建
      5. 主程序类编写注解，@MapperScan
   ```java
   @MapperScan("com.demo.EpidemicSystem.dao")
   

   

   1. service包下新建类indexService_Impl和接口indexService ```java package com.demo.service;

   import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.demo.dao.indexMapper; import com.demo.entity.nocvData;

   //实现类实现indexService public class indexService_Impl extends ServiceImpl implements indexService{

   }

   ```java
   package com.demo.service;
   
   import com.baomidou.mybatisplus.extension.service.IService;
   import com.demo.entity.nocvData;
   
   //dao层继承Mybatisplus的basemapper，传入泛型——nocvData实体类
   public interface indexService extends IService<nocvData>{
   
   }
   

   1. 框架搭建好后写程序
      1. indexcontroller ```java package com.demo.controller;

   import java.util.List;

   import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;

   import com.demo.entity.nocvData; import com.demo.service.indexService;

   @Controller public class indexController {

   //注入indexService，有增删改查的属性、动作可用
   @Autowired
   private indexService indexService;
   
   //映射路径/query
   @RequestMapping("/query")
   //查询data————数据多用集合装，所以用list，
   public List<nocvData> queryData(){
       //indexService里有获取所有数据的list动作，将获取的list放入list
       List<nocvData> list = indexService.list();
       return list;
   
   }
   

   }

   
   6. 编写前台发送请求数据的ajax请求域数据渲染
      1. 清空index.html疫情地图的数据![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655670442786-421dbe7f-d587-4498-98df-bcf0b20aa07d.png#clientId=u71725495-95c0-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=390&id=u0c47bd4e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=487&originWidth=565&originalType=binary&ratio=1&rotation=0&showTitle=false&size=38521&status=done&style=none&taskId=u43aae4ce-e353-4577-868e-1b965ad796b&title=&width=452)
      2. 启动查看，数据被清空![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655670702509-9d86001d-192b-4f15-9f6e-d7a8987f07df.png#clientId=u79188f1f-1ec6-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=722&id=u8d7772f5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=902&originWidth=1920&originalType=binary&ratio=1&rotation=0&showTitle=false&size=190969&status=done&style=none&taskId=u85f69602-f0ce-47b5-99d0-abd7c36cab7&title=&width=1536)
      3. 编写ajax
   ```html
   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <!-- 引入刚刚下载的 ECharts 文件 -->
       <script src="echarts.min.js"></script>
       <script src="china.js"></script>
       <script src="jquery.min.js"></script>
     </head>
     <body>
       <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
       <div id="main" style="width: 1600px;height:900px;"></div>
       <script type="text/javascript">
   
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
         /* 原该处定义了指定图表的配置项和数
         window.dataList = [];*/
         //定义数组，存放之后ajax渲染的数据
         var dataList = [];
   option = {
       tooltip: {
           triggerOn: "click",
           formatter: function(e, t, n) {
               return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
           }
       }, 
       toolbox: {
               show: true,
               orient: 'vertical',
               left: 'right',
               top: 'center',
               feature: {
                   dataView: {readOnly: false},
                   restore: {},
                   saveAsImage: {}
               }
           }, // 提供下载工具
       visualMap: {
           min: 0,
           max: 100000,
           left: 26,
           bottom: 40,
           showLabel: !0,
           text: ["高", "低"],
           pieces: [{
               gt: 10000,
               label: "> 10000人",
               color: "#7f1100"
           }, {
               gte: 1000,
               lte: 10000,
               label: "1000 - 10000人",
               color: "#ff5428"
           }, {
               gte: 100,
               lt: 1000,
               label: "100 - 1000人",
               color: "#ff8c71"
           }, {
               gt: 10,
               lt: 100,
               label: "10 - 100人",
               color: "#ffd768"
           }, {
               gt: 1,
               lt: 10,
               label: "1 - 10人",
               color: "#ffffff"
           }],
           show: !0
       },
       geo: {
           map: "china",
           roam: !1,
           scaleLimit: {
               min: 1,
               max: 2
           },
           zoom: 1.23,
           top: 120,
           label: {
               normal: {
                   show: !0,
                   fontSize: "14",
                   color: "rgba(0,0,0,0.7)"
               }
           },
           itemStyle: {
               normal: {
                   //shadowBlur: 50,
                   //shadowColor: 'rgba(0, 0, 0, 0.2)',
                   borderColor: "rgba(0, 0, 0, 0.2)"
               },
               emphasis: {
                   areaColor: "#f2d5ad",
                   shadowOffsetX: 0,
                   shadowOffsetY: 0,
                   borderWidth: 0
               }
           }
       }/*,
       原该处渲染数据，删掉，自己在ajax请求里写series渲染后台传的数据
           series: [{
           name: "确诊病例",
           type: "map",
           geoIndex: 0,
           data: window.dataList
       }]*/
   };
       //发送ajax请求
       $.ajax({
           url:"/query",    //发送到indexController类定义的/query
           dataType:"json",    //返回的数据类型为json
           success:function(data) {//调用成功之后success回调函数接受数据集合data
               for(let i in data){    //for循环让i放入data
                   dataList[i] = data[i];    //让data的每一项数据给dataList
               }
               //ajax成功之后编写mychart语法框架需要的series(z)
               myChart.setOption({
                   series:[
                       {
                            name: "确诊病例",
                             type: "map",
                             geoIndex: 0,
                             data: dataList
                       }
                   ]
               })
           }
       });
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
       </script>
     </body>
   </html>
   

   1. indexController添加注解@ResponseBody//将数据转换成json格式

      echarts图表已经有了代码框架，我们只需复制对应图的代码到前端文件里，然后编写一个向后台发送请求获取数据，把数据放到前端echars图表代码的data里即可将后台数据库的数据渲染到图表上。

   先做前端，能显示出来，再做后端。

   1. 饼状图显示

      1. 复制之前的index，命名为pie.html
      2. 将之前地图的option替换成饼图的option

      3. 然后注释掉pie.html里ajax的数据渲染，让其先以默认的数据进行展示，看看能否正常展示

         <!DOCTYPE html>
         <html>
         <head>
         <meta charset="utf-8" />
         <!-- 引入刚刚下载的 ECharts 文件 -->
         <script src="echarts.min.js"></script>
         <script src="china.js"></script>
         <script src="jquery.min.js"></script>
         </head>
         <body>
         <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
         <div id="main" style="width: 1600px;height:900px;"></div>
         <script type="text/javascript">
         
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
         /* 原该处定义了指定图表的配置项和数
         window.dataList = [];*/
         //定义数组，存放之后ajax渲染的数据
         var dataList = [];
         option = {
           title: {
             text: 'Referer of a Website',
             subtext: 'Fake Data',
             left: 'center'
           },
           tooltip: {
             trigger: 'item'
           },
           legend: {
             orient: 'vertical',
             left: 'left'
           },
           series: [
             {
               name: 'Access From',
               type: 'pie',
               radius: '50%',
               data: [
                 { value: 1048, name: 'Search Engine' },
                 { value: 735, name: 'Direct' },
                 { value: 580, name: 'Email' },
                 { value: 484, name: 'Union Ads' },
                 { value: 300, name: 'Video Ads' }
               ],
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }
           ]
         };
         //发送ajax请求
         /*$.ajax({
         url:"/query",    //发送到indexController类定义的/query
         dataType:"json",    //返回的数据类型为json
         success:function(data) {//调用成功之后success回调函数接受数据集合data
         for(let i in data){    //for循环让i放入data
         dataList[i] = data[i];    //让data的每一项数据给dataList
         }
         //ajax成功之后编写mychart语法框架需要的series(z)
         myChart.setOption({
         series:[
         {
         name: "确诊病例",
         type: "map",
         geoIndex: 0,
         data: dataList
         }
         ]
         })
         }
         });
         */
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         </script>
         </body>
         </html>
         

      4. 在indexController编写跳转pie页面 ```java package com.demo.controller;

   import java.util.List;

   import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController;

   import com.demo.entity.nocvData; import com.demo.service.indexService;

   @Controller public class indexController {

   //注入indexService，有增删改查的属性、动作可用
   @Autowired
   private indexService indexService;
   
   //映射路径/query
   @RequestMapping("/query")
   //查询data————数据多用集合装，所以用list，
   @ResponseBody//将数据转换成json格式
   public List<nocvData> queryData(){
       //indexService里有获取所有数据的list动作，将获取的list放入list
       List<nocvData> list = indexService.list();
       return list;
   }
   
   //跳转pie页面
   @RequestMapping("/toPie")        //映射路径/toPie
   public String toPie() {
       return "pie";        //跳转到pie.html
   }
   

   }

   
      5. 测试显示无问题——进行ajax数据渲染，编写controller映射
   ```java
   package com.demo.controller;
   
   import java.util.List;
   
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.stereotype.Controller;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.ResponseBody;
   import org.springframework.web.bind.annotation.RestController;
   
   import com.demo.entity.nocvData;
   import com.demo.service.indexService;
   
   @Controller
   public class indexController {
   
       //注入indexService，有增删改查的属性、动作可用
       @Autowired
       private indexService indexService;
   
       //映射路径/query
       @RequestMapping("/query")
       //查询data————数据多用集合装，所以用List
       @ResponseBody//将数据转换成json格式
       public List<nocvData> queryData(){
           //indexService里有获取所有数据的list动作，将获取的数据放入list
           List<nocvData> list = indexService.list();
           return list;
       }
   
       //跳转pie页面
       @RequestMapping("/toPie")        //映射路径/toPie
       public String toPie() {
           return "pie";        //跳转到pie.html
       }
   
       /*
       分组聚合(类别展示时候)
       select count(*) from goods group by type
       */
   
       //映射路径/toPie
       @RequestMapping("/toPie")
       //查询data————数据多用集合装，所以用list，
       @ResponseBody//将数据转换成json格式
       public List<nocvData> queryPieData(){
           //indexService里有获取所有数据的list动作，将获取的list放入list
           List<nocvData> list = indexService.list();
           return list;
       }
   
   }
   

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <!-- 引入刚刚下载的 ECharts 文件 -->
       <script src="echarts.min.js"></script>
       <script src="china.js"></script>
       <script src="jquery.min.js"></script>
     </head>
     <body>
       <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
       <div id="main" style="width: 1600px;height:900px;"></div>
       <script type="text/javascript">
   
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
         /* 原该处定义了指定图表的配置项和数
         window.dataList = [];*/
         //定义数组，存放之后ajax渲染的数据
         var dataList = [];
   option = {
     title: {
       text: 'Referer of a Website',
       subtext: 'Fake Data',
       left: 'center'
     },
     tooltip: {
       trigger: 'item'
     },
     legend: {
       orient: 'vertical',
       left: 'left'
     }
   };
       //发送ajax请求
       $.ajax({
           url:"/queryPie",    //发送到indexController类定义的/queryPie
           dataType:"json",    //返回的数据类型为json
           success:function(data) {//调用成功之后success回调函数接受数据集合data
               for(let i in data){    //for循环让i放入data
                   dataList[i] = data[i];    //让data的每一项数据给dataList
               }
               //ajax成功之后编写mychart语法框架需要的series(z)
               myChart.setOption({
                   series: [
                               {
                                     name: '中国疫情数据',
                                      type: 'pie',
                                     radius: '50%',
                                     data: dataList,
                                     emphasis: {
                                       itemStyle: {
                                             shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                    }
                                                 }
                               }
                           ]
                   })
               }
           });
   
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
       </script>
     </body>
   </html>
   

   1. 柱状图显示

      1. 复制之前的index，命名为bar.html
      2. 将之前地图的option替换成柱状图图的option

      3. 然后注释掉bar.html里ajax的数据渲染，让其先以默认的数据进行展示，看看能否正常展示 ```html <!DOCTYPE html>

         
            4. 在indexController编写跳转pie页面
         ```java
         package com.demo.controller;
         
         import java.util.List;
         
         import org.springframework.beans.factory.annotation.Autowired;
         import org.springframework.stereotype.Controller;
         import org.springframework.web.bind.annotation.RequestMapping;
         import org.springframework.web.bind.annotation.ResponseBody;
         import org.springframework.web.bind.annotation.RestController;
         
         import com.demo.entity.nocvData;
         import com.demo.service.indexService;
         
         @Controller
         public class indexController {
         
             //注入indexService，有增删改查的属性、动作可用
             @Autowired
             private indexService indexService;
         
             //映射路径/query
             @RequestMapping("/query")
             //查询data————数据多用集合装，所以用List
             @ResponseBody//将数据转换成json格式
             public List<nocvData> queryData(){
                 //indexService里有获取所有数据的list动作，将获取的数据放入list
                 List<nocvData> list = indexService.list();
                 return list;
             }
         
             //跳转pie页面
             @RequestMapping("/toPie")        //映射路径/toPie
             public String toPie() {
                 return "pie";        //跳转到pie.html
             }
         
             /*
              饼状图的应用场景：分组聚合(类别展示时候)
              select count(*) from goods group by type
              */
         
             //映射路径/queryPie
             @RequestMapping("/queryPie")
             //查询data————数据多用集合装，所以用list，
             @ResponseBody//将数据转换成json格式
             public List<nocvData> queryPieData(){
                 //indexService里有获取所有数据的list动作，将获取的list放入list
                 List<nocvData> list = indexService.list();
                 return list;
             }
         
             //跳转Bar页面
                 @RequestMapping("/toBar")        //映射路径/toBar
                 public String toBar() {
                     return "bar";        //跳转到bar.html
                 }
         }
         

         1. 测试显示无问题——进行ajax数据渲染，编写controller映射 ```java package com.demo.controller;

         import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;

         import org.apache.ibatis.scripting.xmltags.ForEachSqlNode; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController;

         import com.demo.entity.nocvData; import com.demo.service.indexService;

         @Controller public class indexController {

         //————————————————————————————————————————主页、中国地图——————————————————————————————————————————————————————————————
         //注入indexService，有增删改查的属性、动作可用
         @Autowired
         private indexService indexService;
         
         
         //映射路径/query
         @RequestMapping("/query")
         //查询data————数据多用集合装，所以用List
         @ResponseBody//将数据转换成json格式
         public List<nocvData> queryData(){
             //indexService里有获取所有数据的list动作，将获取的数据放入list
             List<nocvData> list = indexService.list();
             return list;
         }
         
         
         //————————————————————————————————————————饼状图——————————————————————————————————————————————————————————————
         //跳转pie页面
         @RequestMapping("/toPie")        //映射路径/toPie
         public String toPie() {
             return "pie";        //跳转到pie.html
         }
         
         /*
          饼状图的应用场景：分组聚合(类别展示时候)
          select count(*) from goods group by type
          */
         
         
         
         //映射路径/queryPie
         @RequestMapping("/queryPie")
         //查询data————数据多用集合装，所以用list，
         @ResponseBody//将数据转换成json格式
         public List<nocvData> queryPieData(){
             //indexService里有获取所有数据的list动作，将获取的list放入list
             List<nocvData> list = indexService.list();
             return list;
         }
         //————————————————————————————————————————柱状图——————————————————————————————————————————————————————————————
         //跳转Bar页面
         @RequestMapping("/toBar")        //映射路径/toBar
         public String toBar() {
             return "bar";        //跳转到bar.html
         }
         //映射路径/queryBar
         @RequestMapping("/queryBar")
         //查询data————数据多用集合装，所以用list，
         @ResponseBody//将数据转换成json格式
         public Map<String, List<Object>> queryBarData(){
         //1. 所有城市数据：数值
         List<nocvData> list = indexService.list();
         //2. 所有城市名数据
         List<String> cityList = new ArrayList<>();    //建立一个cityList以存放下面获取的全部城市名
         for(nocvData data : list) {
             cityList.add(data.getName());    //循环便利获取城市名
         }
         //3. 所有疫情数值数据
         List<Integer> dataList = new ArrayList<>();
         for(nocvData data : list) {
             dataList.add(data.getValue());
         }
         //4.创建Map容器
         Map map = new HashMap();
         map.put("cityList",cityList);
         map.put("dataList",dataList);
             return map;
         }
         

         }

         ```html
         <!DOCTYPE html>
         <html>
           <head>
             <meta charset="utf-8" />
             <!-- 引入刚刚下载的 ECharts 文件 -->
             <script src="echarts.min.js"></script>
             <script src="china.js"></script>
             <script src="jquery.min.js"></script>
           </head>
           <body>
             <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
             <div id="main" style="width: 700px;height:900px;"></div>
             <script type="text/javascript">
         
               // 基于准备好的dom，初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));
               /* 原该处定义了指定图表的配置项和数
               window.dataList = [];*/
               //定义数组，存放之后ajax渲染的数据
               var dataList = [];
         
         option = {
           title: {
             text: '中国各地区疫情累计确诊人数'
           },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'shadow'
             }
           },
           legend: {},
           grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
           },
           xAxis: {
             type: 'value',
             boundaryGap: [0, 0.01]
           }
         };
             //发送ajax请求
             $.ajax({
                 url:"/queryBar",    //发送到indexController类定义的/queryBar
                 dataType:"json",    //返回的数据类型为json
                 success:function(data) {
                     //调用成功之后success回调函数接受数据集合dat
                     //data的值是map里面存放《cityList[],dataList[]》，即data:map《cityList[],dataList[]》
                     //ajax成功之后编写mychart语法框架需要的series和yAxis（系列——数值，y轴坐标数据--城市名）
                     myChart.setOption({
                          yAxis: {
                                     type: 'category',
                                     data: data.cityList,
                                   },
                          series: [
                                    {
                                       name: '2022',
                                       type: 'bar',
                                       data: data.dataList,
                                     }
                                   ]
                     })
                 }
             });
         
               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
             </script>
           </body>
         </html>
         

         

         1. 折线图显示一周内的数据变化（确诊、疑似、累计）
            1. 根据折线图模板代码新建表 ``sql use nocv; CREATE TABLEline_trend(idINT(10) NOT NULL,confirmINT(10) NULL DEFAULT NULL,isolationINT(10) NULL DEFAULT NULL,cureINT(10) NULL DEFAULT NULL,deadINT(10) NULL DEFAULT NULL,similarINT(10) NULL DEFAULT NULL,create_TimeDATETIME NULL DEFAULT NULL, PRIMARY KEY (id) USING BTREE ) COLLATE='utf8mb4_0900_ai_ci' ENGINE=InnoDB ; INSERT INTOline_trend(id,confirm,isolation,cure,dead,similar,create_Time`) VALUES (1, 786, 456, 79, 53, 123, ‘2022-06-13 21:27:46’), (2, 633, 322, 56, 48, 99, ‘2022-06-14 21:29:10’), (3, 555, 300, 40, 43, 87, ‘2022-06-15 21:29:10’), (4, 450, 288, 32, 40, 80, ‘2022-06-16 21:29:17’), (5, 423, 270, 40, 37, 75, ‘2022-06-17 22:00:06’), (6, 324, 150, 55, 26, 44, ‘2022-06-18 21:29:28’), (7, 150, 140, 60, 12, 33, ‘2022-06-19 21:29:31’);

         
            2. 创建entity类LineTrend
         ```java
         package com.demo.entity;
         
         import com.baomidou.mybatisplus.annotation.TableName;
         
         import lombok.Data;
         import net.sf.jsqlparser.expression.DateTimeLiteralExpression.DateTime;
         
         @Data        //lombok的Data注解自动生成get/set/toString
         @TableName("line_trend")    //映射数据库中表名为line_trend的表
         public class lineTrend {
             private Integer id;
             private Integer confirm;
             private Integer isolation;
             private Integer cure;
             private Integer dead;
             private Integer similar;
             private DateTime create_Time;
         }
         

         1. 复制之前的html创建line.html(折线图页面),把echarts的折线图示例代码复制过来html里替换旧的option

            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="utf-8" />
            <!-- 引入刚刚下载的 ECharts 文件 -->
            <script src="echarts.min.js"></script>
            <script src="china.js"></script>
            <script src="jquery.min.js"></script>
            </head>
            <body>
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 700px;height:900px;"></div>
            <script type="text/javascript">
            
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            /* 原该处定义了指定图表的配置项和数
            window.dataList = [];*/
            //定义数组，存放之后ajax渲染的数据
            var dataList = [];
            option = {
              title: {
                text: 'Stacked Line'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['确诊人数', '隔离人数', '治愈人数', '死亡人数', '疑似人数']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '确诊人数',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: '隔离人数',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: '治愈人数',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: '死亡人数',
                  type: 'line',
                  stack: 'Total',
                  data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                  name: '疑似人数',
                  type: 'line',
                  stack: 'Total',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
              ]
            };
            //发送ajax请求
            /*$.ajax({
            url:"/queryPie",    //发送到indexController类定义的/queryPie
            dataType:"json",    //返回的数据类型为json
            success:function(data) {//调用成功之后success回调函数接受数据集合data
            for(let i in data){    //for循环让i放入data
            dataList[i] = data[i];    //让data的每一项数据给dataList
            }
            //ajax成功之后编写mychart语法框架需要的series(z)
            myChart.setOption({
            series: [
            {
            name: '中国各地区疫情累计确诊人数',
            type: 'pie',
            radius: '50%',
            data: dataList,
            emphasis: {
            itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
            }
            }
            ]
            })
            }
            });
            */    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            </script>
            </body>
            </html>
            

         2. 编写indexController内跳映射测试能否正常显示示例折线图 ```java package com.demo.controller;

         import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;

         import org.apache.ibatis.scripting.xmltags.ForEachSqlNode; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController;

         import com.demo.entity.nocvData; import com.demo.service.indexService;

         @Controller public class indexController {

         //————————————————————————————————————————主页、中国地图——————————————————————————————————————————————————————————————
         //注入indexService，有增删改查的属性、动作可用
         @Autowired
         private indexService indexService;
         
         
         //映射路径/query
         @RequestMapping("/query")
         //查询data————数据多用集合装，所以用List
         @ResponseBody//将数据转换成json格式
         public List<nocvData> queryData(){
             //indexService里有获取所有数据的list动作，将获取的数据放入list
             List<nocvData> list = indexService.list();
             return list;
         }
         
         
         //————————————————————————————————————————饼状图——————————————————————————————————————————————————————————————
         //跳转pie页面
         @RequestMapping("/toPie")        //映射路径/toPie
         public String toPie() {
             return "pie";        //跳转到pie.html
         }
         
         /*
         饼状图的应用场景：分组聚合(类别展示时候)
         select count(*) from goods group by type
         */
         
         
         
         //映射路径/queryPie
         @RequestMapping("/queryPie")
         //查询data————数据多用集合装，所以用list，
         @ResponseBody//将数据转换成json格式
         public List<nocvData> queryPieData(){
             //indexService里有获取所有数据的list动作，将获取的list放入list
             List<nocvData> list = indexService.list();
             return list;
         }
         //————————————————————————————————————————柱状图——————————————————————————————————————————————————————————————
         //跳转Bar页面
         @RequestMapping("/toBar")        //映射路径/toBar
         public String toBar() {
             return "bar";        //跳转到bar.html
         }
         //映射路径/queryBar
         @RequestMapping("/queryBar")
         //查询data————数据多用集合装，所以用list，
         @ResponseBody//将数据转换成json格式
         public Map<String, List<Object>> queryBarData(){
             //1. 所有城市数据：数值
             List<nocvData> list = indexService.list();
             //2. 所有城市名数据
             List<String> cityList = new ArrayList<>();    //建立一个cityList以存放下面获取的全部城市名
             for(nocvData data : list) {
                 cityList.add(data.getName());    //循环便利获取城市名
             }
             //3. 所有疫情数值数据
             List<Integer> dataList = new ArrayList<>();
             for(nocvData data : list) {
                 dataList.add(data.getValue());
             }
             //4.创建Map容器
             Map map = new HashMap();
             map.put("cityList",cityList);
             map.put("dataList",dataList);
             return map;
         }
         
         //————————————————————————————————————————折线图——————————————————————————————————————————————————————————————
         //跳转line页面
         @RequestMapping("/toLine")        //映射路径/toLine
         public String toLine() {
             return "line";        //跳转到line.html
         }
         

         }

         ![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655733033621-d07bad82-8881-4aa9-980c-d45c2ac96c9f.png#clientId=uf74c9acb-b540-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=794&id=u2e87739a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=794&originWidth=639&originalType=binary&ratio=1&rotation=0&showTitle=false&size=72505&status=done&style=none&taskId=uf1bc4c40-eb1a-400c-8e03-38d57da865f&title=&width=639)
         
            5. 可以则去indexController编写映射数据库的数据的方法
         ```java
         package com.demo.controller;
         
         import java.util.ArrayList;
         import java.util.HashMap;
         import java.util.List;
         import java.util.Map;
         
         import org.apache.ibatis.scripting.xmltags.ForEachSqlNode;
         import org.springframework.beans.factory.annotation.Autowired;
         import org.springframework.stereotype.Controller;
         import org.springframework.web.bind.annotation.RequestMapping;
         import org.springframework.web.bind.annotation.ResponseBody;
         import org.springframework.web.bind.annotation.RestController;
         
         import com.demo.entity.lineTrend;
         import com.demo.entity.nocvData;
         import com.demo.service.indexService;
         
         @Controller
         public class indexController {
         
             //————————————————————————————————————————主页、中国地图——————————————————————————————————————————————————————————————
             //注入indexService，有增删改查的属性、动作可用
             @Autowired
             private indexService indexService;
         
         
             //映射路径/query
             @RequestMapping("/query")
             //查询data————数据多用集合装，所以用List
             @ResponseBody//将数据转换成json格式
             public List<nocvData> queryData(){
                 //indexService里有获取所有数据的list动作，将获取的数据放入list
                 List<nocvData> list = indexService.list();
                 return list;
             }
         
         
             //————————————————————————————————————————饼状图——————————————————————————————————————————————————————————————
             //跳转pie页面
             @RequestMapping("/toPie")        //映射路径/toPie
             public String toPie() {
                 return "pie";        //跳转到pie.html
             }
         
             /*
              饼状图的应用场景：分组聚合(类别展示时候)
              select count(*) from goods group by type
              */
         
         
         
             //映射路径/queryPie
             @RequestMapping("/queryPie")
             //查询data————数据多用集合装，所以用list，
             @ResponseBody//将数据转换成json格式
             public List<nocvData> queryPieData(){
                 //indexService里有获取所有数据的list动作，将获取的list放入list
                 List<nocvData> list = indexService.list();
                 return list;
             }
             //————————————————————————————————————————柱状图——————————————————————————————————————————————————————————————
             //跳转Bar页面
             @RequestMapping("/toBar")        //映射路径/toBar
             public String toBar() {
                 return "bar";        //跳转到bar.html
             }
             //映射路径/queryBar
             @RequestMapping("/queryBar")
             //查询data————数据多用集合装，所以用list，
             @ResponseBody//将数据转换成json格式
             public Map<String, List<Object>> queryBarData(){
             //1. 所有城市数据：数值
             List<nocvData> list = indexService.list();
             //2. 所有城市名数据
             List<String> cityList = new ArrayList<>();    //建立一个cityList以存放下面获取的全部城市名
             for(nocvData data : list) {
                 cityList.add(data.getName());    //循环便利获取城市名
             }
             //3. 所有疫情数值数据
             List<Integer> dataList = new ArrayList<>();
             for(nocvData data : list) {
                 dataList.add(data.getValue());
             }
             //4.创建Map容器
             Map map = new HashMap();
             map.put("cityList",cityList);
             map.put("dataList",dataList);
                 return map;
             }
         
             //————————————————————————————————————————折线图——————————————————————————————————————————————————————————————
                 //跳转line页面
                 @RequestMapping("/toLine")        //映射路径/toLine
                 public String toLine() {
                     return "line";        //跳转到line.html
                 }
                 //映射路径/queryLine
                 @RequestMapping("/queryLine")
                 //查询data————数据多用集合装，所以用list，
                 @ResponseBody//将数据转换成json格式
                 public Map<String,List<Object>> queryLineData(){
                     //1. 近7天查询所有的数据（查询7天那么就需要自定义查询代码了，不能运用mybatisplus的list方法）
                         //用List（集合）类型(<E>为列表中的元素类型（格式），为实体类中编写的类型（格式）)的list7来封装获取到的对应类型（确诊、隔离、治愈、死亡、疑似）的7天数据
                     List<lineTrend> list7 = indexService.findSevenData();    //findSevenData方法需去定义
                     //2. 封装所有的确诊人数（折线图有五种类型，七天）
                 }
         }
         

         1. 因为需要查询7天数据，不能使用mybatisplus提供的基础查询list方法，需要自定义方法。
            1. 去service层的indexService编写查询7天数据的服务方法 ```java package com.demo.service;

         import java.util.List;

         import com.baomidou.mybatisplus.extension.service.IService; import com.demo.entity.lineTrend; import com.demo.entity.nocvData;

         //dao层继承Mybatisplus的basemapper，传入泛型——nocvData实体类 public interface indexService extends IService{

         List<lineTrend> findSevenData();
         

         }

         
               2. 去service层的indexService_Impl实现查询7天数据的服务方法
         > indexService是接口，接口需要编写实现类实现。
         > 所以去之前写的实现类indexService_Impl里重写所实现类中的方法
         > findSevenData()
         
         ```java
         package com.demo.service;
         
         import java.util.List;
         
         import org.springframework.beans.factory.annotation.Autowired;
         import org.springframework.stereotype.Service;
         
         import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
         import com.demo.dao.indexMapper;
         import com.demo.entity.lineTrend;
         import com.demo.entity.nocvData;
         
         @Service    //标注为服务，给spring管理
         //实现类实现indexService继承ServiceImpl<mapper,T>
         public class indexService_Impl extends ServiceImpl<indexMapper, nocvData> implements indexService{
         
             //要使用indexMapper中的findSevenData方法，首先需要定义
             @Autowired
             private indexMapper IndexMapper;
         
             //实现类需要重写所实现类中的方法
             @Override
             public List<lineTrend> findSevenData() {
                 // TODO Auto-generated method stub
                 //List集合类型的list封装findSevenData方法获取的数据，数据类型为lineTrend
         
                 //这里用了DAO层写的IndexMapper接口的findSevenData方法
                 //Service层专注于业务逻辑的实现，其中需要的数据库操作，都需要去DAO（数据访问层）实现
                 List<lineTrend> list = IndexMapper.findSevenData();
                 return list;
             }
         
         
         }
         

           3. Service层有关数据访问的操作需要去DAO层写实现接口![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655786884218-af4e9285-60df-48e7-b077-0a0ab92cebe2.png#clientId=u8b70b16e-6633-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=221&id=u44635fab&margin=%5Bobject%20Object%5D&name=image.png&originHeight=276&originWidth=885&originalType=binary&ratio=1&rotation=0&showTitle=false&size=48182&status=done&style=none&taskId=u62660764-91be-4c47-a4f2-7b6b7fc3ca1&title=&width=708)
         

         package com.demo.dao;
         
         import java.util.List;
         
         import org.apache.ibatis.annotations.Select;
         
         import com.baomidou.mybatisplus.core.mapper.BaseMapper;
         import com.demo.entity.lineTrend;
         import com.demo.entity.nocvData;
         
         //DAO层继承Mybatisplus的basemapper，传入泛型——nocvData实体类
         //DAO层为数据访问层，用于封装对数据库访问的操作。
         public interface indexMapper extends BaseMapper<nocvData>{
         
             /*
              * indexMapper是一个接口，需要实现类去实现
              * 接口：只有方法定义，不能有实现。不过jdk1.8可以有默认实现
              * 三种方式：
              * 1. 编写实现类，实现接口业务逻辑
              * 2. xml 写mybatisplus的实现
              * 3. 通过@select注解实现
              */
             //注解写查询7天数据业务，从line_trend表中获取符合条件（倒序-7条（或者说7天内））的数据
             @Select("select * from line_trend order by create_Time DESC limit 7")
             List<lineTrend> findSevenData();    
         
         }
         

           4. 补充controller层的代码，将后台处理好的数据返回给前台
         

         package com.demo.controller;
         
         import java.util.ArrayList;
         import java.util.HashMap;
         import java.util.List;
         import java.util.Map;
         
         import org.apache.ibatis.scripting.xmltags.ForEachSqlNode;
         import org.springframework.beans.factory.annotation.Autowired;
         import org.springframework.stereotype.Controller;
         import org.springframework.web.bind.annotation.RequestMapping;
         import org.springframework.web.bind.annotation.ResponseBody;
         import org.springframework.web.bind.annotation.RestController;
         
         import com.demo.entity.lineTrend;
         import com.demo.entity.nocvData;
         import com.demo.service.indexService;
         
         @Controller
         public class indexController {
         
             //————————————————————————————————————————主页、中国地图——————————————————————————————————————————————————————————————
             //注入indexService，有增删改查的属性、动作可用
             @Autowired
             private indexService IndexService;
         
         
             //映射路径/query
             @RequestMapping("/query")
             //查询data————数据多用集合装，所以用List
             @ResponseBody//将数据转换成json格式
             public List<nocvData> queryData(){
                 //indexService里有获取所有数据的list动作，将获取的数据放入list
                 List<nocvData> list = IndexService.list();
                 return list;
             }
         
         
             //————————————————————————————————————————饼状图——————————————————————————————————————————————————————————————
             //跳转pie页面
             @RequestMapping("/toPie")        //映射路径/toPie
             public String toPie() {
                 return "pie";        //跳转到pie.html
             }
         
             /*
              饼状图的应用场景：分组聚合(类别展示时候)
              select count(*) from goods group by type
              */
         
         
         
             //映射路径/queryPie
             @RequestMapping("/queryPie")
             //查询data————数据多用集合装，所以用list，
             @ResponseBody//将数据转换成json格式
             public List<nocvData> queryPieData(){
                 //indexService里有获取所有数据的list动作，将获取的list放入list
                 List<nocvData> list = IndexService.list();
                 return list;
             }
             //————————————————————————————————————————柱状图——————————————————————————————————————————————————————————————
             //跳转Bar页面
             @RequestMapping("/toBar")        //映射路径/toBar
             public String toBar() {
                 return "bar";        //跳转到bar.html
             }
             //映射路径/queryBar
             @RequestMapping("/queryBar")
             //查询data————数据多用集合装，所以用list，
             @ResponseBody//将数据转换成json格式
             public Map<String, List<Object>> queryBarData(){
             //1. 所有城市数据：数值
             List<nocvData> list = IndexService.list();
             //2. 所有城市名数据
             List<String> cityList = new ArrayList<>();    //建立一个cityList以存放下面获取的全部城市名
             for(nocvData data : list) {
                 cityList.add(data.getName());    //循环便利获取城市名
             }
             //3. 所有疫情数值数据
             List<Integer> dataList = new ArrayList<>();
             for(nocvData data : list) {
                 dataList.add(data.getValue());
             }
             //4.创建Map容器
             Map map = new HashMap();
             map.put("cityList",cityList);
             map.put("dataList",dataList);
                 return map;
             }
         
             //————————————————————————————————————————折线图——————————————————————————————————————————————————————————————
                 //跳转line页面
                 @RequestMapping("/toLine")        //映射路径/toLine
                 public String toLine() {
                     return "line";        //跳转到line.html
                 }
                 //映射路径/queryLine
                 @RequestMapping("/queryLine")
                 //查询data————数据多用集合装，所以用list，
                 @ResponseBody//将数据转换成json格式
                 public Map<String,List<Object>> queryLineData(){
                     //1. 近7天查询所有的数据（查询7天那么就需要自定义查询代码了，不能运用mybatisplus的list方法）
                         //用List（集合）类型(<E>为列表中的元素类型（格式），为实体类中编写的类型（格式）)的list7来封装获取到的对应类型（确诊、隔离、治愈、死亡、疑似）的7天数据
                     List<lineTrend> list7Day = IndexService.findSevenData();    //findSevenData方法需去service定义
                     //2. 封装所有的确诊人数（折线图有五种类型，七天）
                     List<Integer> confirmList = new ArrayList<>();
                     //3. 封装所有的隔离人数（折线图有五种类型，七天）
                     List<Integer> isolationList = new ArrayList<>();
                     //4. 封装所有的治愈人数（折线图有五种类型，七天）
                     List<Integer> cureList = new ArrayList<>();
                     //5. 封装所有的死亡人数（折线图有五种类型，七天）
                     List<Integer> deadList = new ArrayList<>();
                     //6. 封装所有的疑似人数（折线图有五种类型，七天）
                     List<Integer> similarList = new ArrayList<>();
                     //
                     for (lineTrend data : list7Day) {
                         confirmList.add(data.getConfirm());
                         isolationList.add(data.getIsolation());
                         cureList.add(data.getCure());
                         deadList.add(data.getDead());
                         similarList.add(data.getSimilar());
                     }
                     //7.返回数据的格式容器Map
                     Map map = new HashMap();
                     map.put("confirmList", confirmList);
                     map.put("isolationList", isolationList);
                     map.put("cureList", cureList);
                     map.put("deadList", deadList);
                     map.put("similarList", similarList);
         
                     return map;//返回获取的各类型7天数据到前台
                 }
         }
         

         1. 后台写完逻辑后则去line.html编写ajax发送请求映射数据库的数据渲染到前端的代码（去掉option中echarts模板代码里的原series系列数据，替换成我们后台传过来的数据（在ajax请求中写setOption重写series实现））。lengend的name与series的name要对应

            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="utf-8" />
            <!-- 引入刚刚下载的 ECharts 文件 -->
            <script src="echarts.min.js"></script>
            <script src="china.js"></script>
            <script src="jquery.min.js"></script>
            </head>
            <body>
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 700px;height:900px;"></div>
            <script type="text/javascript">
            
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            /* 原该处定义了指定图表的配置项和数
            window.dataList = [];*/
            //定义数组，存放之后ajax渲染的数据
            var dataList = [];
            option = {
              title: {
                text: 'Stacked Line'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['确诊人数', '隔离人数', '治愈人数', '死亡人数', '疑似人数']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              }
            };
            //发送ajax请求
            $.ajax({
              url:"/queryLine",    //发送到indexController类定义的/queryPie
              dataType:"json",    //返回的数据类型为json
              success:function(data) {//调用成功之后success回调函数接受数据集合data
                //ajax成功之后编写mychart语法框架需要的series(z)
                myChart.setOption({
            
                  series: [
                    {
                      name: '确诊人数',
                      type: 'line',
                      stack: 'Total',
                      data: data.confirmList
                    },
                    {
                      name: '隔离人数',
                      type: 'line',
                      stack: 'Total',
                      data: data.isolationList
                    },
                    {
                      name: '治愈人数',
                      type: 'line',
                      stack: 'Total',
                      data: data.cureList
                    },
                    {
                      name: '死亡人数',
                      type: 'line',
                      stack: 'Total',
                      data: data.deadList
                    },
                    {
                      name: '疑似人数',
                      type: 'line',
                      stack: 'Total',
                      data: data.similarList
                    }
                  ]
                })
              }
            });
            
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            </script>
            </body>
            </html>
            

         2. 保存运行，输入映射路径/toLine，折线图正常显示后台处理返回的数据

         

         1. 新增对应数据库表中的数据，可以发现折线图能够实时变化

            P10 引入Laiyu前端UI框架

         1. Laiyu官网下载框架
            1. 示例代码
            2. static文件夹分组，导入layui，重写index引用echarts路径
               1. 

         2. 重写index的echarts引用路径（pie、line、bar也要），同时引入示例代码的各部分

            1. head
            2. layui.js

            3. 模板body内代码 ```html <!DOCTYPE html>

               layout demo

               • nav 1
               • nav 2
               • nav 3
               • nav groups

                 menu 11

                 menu 22

                 menu 33

               • tester

                 Your Profile

                 Settings

                 Sign out
            • menu group 1

              menu 1

              menu 2

              menu 3

              the links

            • menu group 2

              list 1

              list 2

              超链接

            • click menu item
            • the links
            内容主体区域。记得修改 layui.css 和 js 的路径

            底部固定区域

            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 1600px;height:900px;"></div>
            <script type="text/javascript">
            
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              /* 原该处定义了指定图表的配置项和数
              window.dataList = [];*/
              //定义数组，存放之后ajax渲染的数据
              var dataList = [];
            

            option = { tooltip: { triggerOn: “click”, formatter: function(e, t, n) { return ‘.5’ == e.value ? e.name + “：有疑似病例” : e.seriesName + “
            “ + e.name + “：” + e.value } }, toolbox: { show: true, orient: ‘vertical’, left: ‘right’, top: ‘center’, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, // 提供下载工具 visualMap: { min: 0, max: 100000, left: 26, bottom: 40, showLabel: !0, text: [“高”, “低”], pieces: [{ gt: 10000, label: “> 10000人”, color: “#7f1100” }, { gte: 1000, lte: 10000, label: “1000 - 10000人”, color: “#ff5428” }, { gte: 100, lt: 1000, label: “100 - 1000人”, color: “#ff8c71” }, { gt: 10, lt: 100, label: “10 - 100人”, color: “#ffd768” }, { gt: 1, lt: 10, label: “1 - 10人”, color: “#ffffff” }], show: !0 }, geo: { map: “china”, roam: !1, scaleLimit: { min: 1, max: 2 }, zoom: 1.23, top: 120, label: { normal: { show: !0, fontSize: “14”, color: “rgba(0,0,0,0.7)” } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: ‘rgba(0, 0, 0, 0.2)’, borderColor: “rgba(0, 0, 0, 0.2)” }, emphasis: { areaColor: “#f2d5ad”, shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } }/, 原该处渲染数据，删掉，自己在ajax请求里写series渲染后台传的数据 series: [{ name: “确诊病例”, type: “map”, geoIndex: 0, data: window.dataList }]/ }; //发送ajax请求 $.ajax({ url:”/query”, //发送到indexController类定义的/query dataType:”json”, //返回的数据类型为json success:function(data) {//调用成功之后success回调函数接受数据集合data for(let i in data){ //for循环让i放入data dataList[i] = data[i]; //让data的每一项数据给dataList } //ajax成功之后编写mychart语法框架需要的series(z) myChart.setOption({ series:[ { name: “确诊病例”, type: “map”, geoIndex: 0, data: dataList } ] }) } }); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

            
               4. 运行显示![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655800388014-980d12bc-383e-4366-8b4f-f97210715d53.png#clientId=u86f4c555-1572-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=722&id=u30d7213b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=902&originWidth=1920&originalType=binary&ratio=1&rotation=0&showTitle=false&size=218110&status=done&style=none&taskId=u3197c4cf-968d-43df-8504-c99e3d4936d&title=&width=1536)
               5. 编辑具体的界面选项文本和跳转
            ```html
            <!DOCTYPE html>
            <html>
              <head>
                 <!-- 引入layui的head -->
                  <meta charset="utf-8">
                  <title>Layui</title>
                  <meta name="renderer" content="webkit">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                    <script th:src="@{/echarts/echarts.min.js}"></script>
                    <script th:src="@{/echarts/china.js}"></script>
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
              <body>
                  <!-- 引入layui的body部分-->
                <div class="layui-layout layui-layout-admin">
                  <div class="layui-header">
                <div class="layui-logo layui-hide-xs layui-bg-black">中国疫情地图数据展示</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                  <!-- 移动端显示 -->
                  <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                  </li>
            
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
                  <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                      <dd><a href="">menu 11</a></dd>
                      <dd><a href="">menu 22</a></dd>
                      <dd><a href="">menu 33</a></dd>
                    </dl>
                  </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                  <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                      tester
                    </a>
                    <dl class="layui-nav-child">
                      <dd><a href="">Your Profile</a></dd>
                      <dd><a href="">Settings</a></dd>
                      <dd><a href="">Sign out</a></dd>
                    </dl>
                  </li>
                  <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                      <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                  </li>
                </ul>
              </div>
            
              <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                  <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                  <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                      <a class="" href="javascript:;">中国疫情数据可视化展示</a>
                      <dl class="layui-nav-child">
                        <dd><a href="/">中国疫情地图</a></dd>
                        <dd><a href="/toPie">中国疫情饼图</a></dd>
                        <dd><a href="/toBar">中国疫情柱状图</a></dd>
                        <dd><a href="/toLine">中国疫情折线</a></dd>
                        <dd><a href="">the links</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item">
                      <a href="javascript:;">menu group 2</a>
                      <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                    <li class="layui-nav-item"><a href="">the links</a></li>
                  </ul>
                </div>
              </div>
            
              <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
              </div>
            
              <div class="layui-footer">
                <!-- 底部固定区域 -->
                底部固定区域
              </div>
            </div>
            <script src="./layui/layui.js"></script>
            <script>
            //JS 
            layui.use(['element', 'layer', 'util'], function(){
              var element = layui.element
              ,layer = layui.layer
              ,util = layui.util
              ,$ = layui.$;
            
              //头部事件
              util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function(othis){
                  layer.msg('展开左侧菜单的操作', {icon: 0});
                }
                ,menuRight: function(){
                  layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                  });
                }
              });
            
            });
            </script>
            
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width: 1600px;height:900px;"></div>
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
            option = {
                tooltip: {
                    triggerOn: "click",
                    formatter: function(e, t, n) {
                        return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                    }
                }, 
                toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    }, // 提供下载工具
                visualMap: {
                    min: 0,
                    max: 100000,
                    left: 26,
                    bottom: 40,
                    showLabel: !0,
                    text: ["高", "低"],
                    pieces: [{
                        gt: 10000,
                        label: "> 10000人",
                        color: "#7f1100"
                    }, {
                        gte: 1000,
                        lte: 10000,
                        label: "1000 - 10000人",
                        color: "#ff5428"
                    }, {
                        gte: 100,
                        lt: 1000,
                        label: "100 - 1000人",
                        color: "#ff8c71"
                    }, {
                        gt: 10,
                        lt: 100,
                        label: "10 - 100人",
                        color: "#ffd768"
                    }, {
                        gt: 1,
                        lt: 10,
                        label: "1 - 10人",
                        color: "#ffffff"
                    }],
                    show: !0
                },
                geo: {
                    map: "china",
                    roam: !1,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.23,
                    top: 120,
                    label: {
                        normal: {
                            show: !0,
                            fontSize: "14",
                            color: "rgba(0,0,0,0.7)"
                        }
                    },
                    itemStyle: {
                        normal: {
                            //shadowBlur: 50,
                            //shadowColor: 'rgba(0, 0, 0, 0.2)',
                            borderColor: "rgba(0, 0, 0, 0.2)"
                        },
                        emphasis: {
                            areaColor: "#f2d5ad",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                }/*,
                原该处渲染数据，删掉，自己在ajax请求里写series渲染后台传的数据
                    series: [{
                    name: "确诊病例",
                    type: "map",
                    geoIndex: 0,
                    data: window.dataList
                }]*/
            };
                //发送ajax请求
                $.ajax({
                    url:"/query",    //发送到indexController类定义的/query
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {//调用成功之后success回调函数接受数据集合data
                        for(let i in data){    //for循环让i放入data
                            dataList[i] = data[i];    //让data的每一项数据给dataList
                        }
                        //ajax成功之后编写mychart语法框架需要的series(z)
                        myChart.setOption({
                            series:[
                                {
                                     name: "确诊病例",
                                      type: "map",
                                      geoIndex: 0,
                                      data: dataList
                                }
                            ]
                        })
                    }
                });
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

            1. 创建公共区域（菜单）commonmenu.index
               1. 将导航栏（菜单）抽取出来，方便在各页面引用
                  1. 把原index里layui的body里的界面部分抽出给commonmenu.index(删掉下面多余的一条js引用语句)

            

              2. 将index的layui的head部分抽出给commonmenu.index
            

            <!DOCTYPE html>
            <html>
              <head>
                 <!-- 引入layui的head -->
                  <meta charset="utf-8">
                  <title>Layui</title>
                  <meta name="renderer" content="webkit">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            
              </head>
              <body>
            
                        <!-- 引入layui的body部分-->
               <div class="layui-layout layui-layout-admin">
                  <div class="layui-header">
                    <div class="layui-logo layui-hide-xs layui-bg-black">中国疫情地图数据展示</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                  <!-- 移动端显示 -->
                  <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                  </li>
            
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
                  <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                      <dd><a href="">menu 11</a></dd>
                      <dd><a href="">menu 22</a></dd>
                      <dd><a href="">menu 33</a></dd>
                    </dl>
                  </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                  <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                      tester
                    </a>
                    <dl class="layui-nav-child">
                      <dd><a href="">Your Profile</a></dd>
                      <dd><a href="">Settings</a></dd>
                      <dd><a href="">Sign out</a></dd>
                    </dl>
                  </li>
                  <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                      <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                  </li>
                </ul>
              </div>
            
              <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                  <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                  <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                      <a class="" href="javascript:;">中国疫情数据可视化展示</a>
                      <dl class="layui-nav-child">
                        <dd><a href="/">中国疫情地图</a></dd>
                        <dd><a href="/toPie">中国疫情饼图</a></dd>
                        <dd><a href="/toBar">中国疫情柱状图</a></dd>
                        <dd><a href="/toLine">中国疫情折线</a></dd>
                        <dd><a href="">the links</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item">
                      <a href="javascript:;">menu group 2</a>
                      <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                    <li class="layui-nav-item"><a href="">the links</a></li>
                  </ul>
                </div>
              </div>
            
              <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
              </div>
            
              <div class="layui-footer">
                <!-- 底部固定区域 -->
                底部固定区域
              </div>
            </div>
            
            
            
              </body>
            </html>
            

            <!DOCTYPE html>
            <html>
              <head>
            
                  <meta charset="utf-8">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                    <script th:src="@{/echarts/echarts.min.js}"></script>
                    <script th:src="@{/echarts/china.js}"></script>
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
              <body>
            
            
            
            <script>
            //JS 
            layui.use(['element', 'layer', 'util'], function(){
              var element = layui.element
              ,layer = layui.layer
              ,util = layui.util
              ,$ = layui.$;
            
              //头部事件
              util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function(othis){
                  layer.msg('展开左侧菜单的操作', {icon: 0});
                }
                ,menuRight: function(){
                  layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                  });
                }
              });
            
            });
            </script>
            
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width: 1600px;height:900px;"></div>
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
            option = {
                tooltip: {
                    triggerOn: "click",
                    formatter: function(e, t, n) {
                        return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                    }
                }, 
                toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    }, // 提供下载工具
                visualMap: {
                    min: 0,
                    max: 100000,
                    left: 26,
                    bottom: 40,
                    showLabel: !0,
                    text: ["高", "低"],
                    pieces: [{
                        gt: 10000,
                        label: "> 10000人",
                        color: "#7f1100"
                    }, {
                        gte: 1000,
                        lte: 10000,
                        label: "1000 - 10000人",
                        color: "#ff5428"
                    }, {
                        gte: 100,
                        lt: 1000,
                        label: "100 - 1000人",
                        color: "#ff8c71"
                    }, {
                        gt: 10,
                        lt: 100,
                        label: "10 - 100人",
                        color: "#ffd768"
                    }, {
                        gt: 1,
                        lt: 10,
                        label: "1 - 10人",
                        color: "#ffffff"
                    }],
                    show: !0
                },
                geo: {
                    map: "china",
                    roam: !1,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.23,
                    top: 120,
                    label: {
                        normal: {
                            show: !0,
                            fontSize: "14",
                            color: "rgba(0,0,0,0.7)"
                        }
                    },
                    itemStyle: {
                        normal: {
                            //shadowBlur: 50,
                            //shadowColor: 'rgba(0, 0, 0, 0.2)',
                            borderColor: "rgba(0, 0, 0, 0.2)"
                        },
                        emphasis: {
                            areaColor: "#f2d5ad",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                }/*,
                原该处渲染数据，删掉，自己在ajax请求里写series渲染后台传的数据
                    series: [{
                    name: "确诊病例",
                    type: "map",
                    geoIndex: 0,
                    data: window.dataList
                }]*/
            };
                //发送ajax请求
                $.ajax({
                    url:"/query",    //发送到indexController类定义的/query
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {//调用成功之后success回调函数接受数据集合data
                        for(let i in data){    //for循环让i放入data
                            dataList[i] = data[i];    //让data的每一项数据给dataList
                        }
                        //ajax成功之后编写mychart语法框架需要的series(z)
                        myChart.setOption({
                            series:[
                                {
                                     name: "确诊病例",
                                      type: "map",
                                      geoIndex: 0,
                                      data: dataList
                                }
                            ]
                        })
                    }
                });
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

              3. 通过themeleft语法的th:fragment将导航栏模块化
            

            

            1. 在index页面引入menu模块（通过themeleft的th:include）

            

            1. 将图表区域放入模块区域内 ```html <!DOCTYPE html>

            <script type="text/javascript">
            
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              /* 原该处定义了指定图表的配置项和数
              window.dataList = [];*/
              //定义数组，存放之后ajax渲染的数据
              var dataList = [];
            

            option = { tooltip: { triggerOn: “click”, formatter: function(e, t, n) { return ‘.5’ == e.value ? e.name + “：有疑似病例” : e.seriesName + “
            “ + e.name + “：” + e.value } }, toolbox: { show: true, orient: ‘vertical’, left: ‘right’, top: ‘center’, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, // 提供下载工具 visualMap: { min: 0, max: 100000, left: 26, bottom: 40, showLabel: !0, text: [“高”, “低”], pieces: [{ gt: 10000, label: “> 10000人”, color: “#7f1100” }, { gte: 1000, lte: 10000, label: “1000 - 10000人”, color: “#ff5428” }, { gte: 100, lt: 1000, label: “100 - 1000人”, color: “#ff8c71” }, { gt: 10, lt: 100, label: “10 - 100人”, color: “#ffd768” }, { gt: 1, lt: 10, label: “1 - 10人”, color: “#ffffff” }], show: !0 }, geo: { map: “china”, roam: !1, scaleLimit: { min: 1, max: 2 }, zoom: 1.23, top: 120, label: { normal: { show: !0, fontSize: “14”, color: “rgba(0,0,0,0.7)” } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: ‘rgba(0, 0, 0, 0.2)’, borderColor: “rgba(0, 0, 0, 0.2)” }, emphasis: { areaColor: “#f2d5ad”, shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } }/, 原该处渲染数据，删掉，自己在ajax请求里写series渲染后台传的数据 series: [{ name: “确诊病例”, type: “map”, geoIndex: 0, data: window.dataList }]/ }; //发送ajax请求 $.ajax({ url:”/query”, //发送到indexController类定义的/query dataType:”json”, //返回的数据类型为json success:function(data) {//调用成功之后success回调函数接受数据集合data for(let i in data){ //for循环让i放入data dataList[i] = data[i]; //让data的每一项数据给dataList } //ajax成功之后编写mychart语法框架需要的series(z) myChart.setOption({ series:[ { name: “确诊病例”, type: “map”, geoIndex: 0, data: dataList } ] }) } }); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

            ```html
            <!DOCTYPE html>
            <html>
              <head>
                 <!-- 引入layui的head -->
                  <meta charset="utf-8">
                  <title>Layui</title>
                  <meta name="renderer" content="webkit">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            
              </head>
              <body>
            
                        <!-- 引入layui的body部分-->
               <div th:fragment="menu" class="layui-layout layui-layout-admin">
                     <div class="layui-header">
                    <div class="layui-logo layui-hide-xs layui-bg-black">中国疫情地图数据展示</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                  <!-- 移动端显示 -->
                  <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                  </li>
            
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
                  <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                      <dd><a href="">menu 11</a></dd>
                      <dd><a href="">menu 22</a></dd>
                      <dd><a href="">menu 33</a></dd>
                    </dl>
                  </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                  <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                      tester
                    </a>
                    <dl class="layui-nav-child">
                      <dd><a href="">Your Profile</a></dd>
                      <dd><a href="">Settings</a></dd>
                      <dd><a href="">Sign out</a></dd>
                    </dl>
                  </li>
                  <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                      <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                  </li>
                </ul>
              </div>
            
              <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                  <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                  <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                      <a class="" href="javascript:;">中国疫情数据可视化展示</a>
                      <dl class="layui-nav-child">
                        <dd><a href="/">中国疫情地图</a></dd>
                        <dd><a href="/toPie">中国疫情饼图</a></dd>
                        <dd><a href="/toBar">中国疫情柱状图</a></dd>
                        <dd><a href="/toLine">中国疫情折线</a></dd>
                        <dd><a href="">the links</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item">
                      <a href="javascript:;">menu group 2</a>
                      <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                    <li class="layui-nav-item"><a href="">the links</a></li>
                  </ul>
                </div>
              </div>
            
              <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
              </div>
            
              <div class="layui-footer">
                <!-- 底部固定区域 -->
                底部固定区域
              </div>
            </div>
            
            
            
              </body>
            </html>
            

            1. 将commonmenu.html的layui示例代码内容主体区域放到index.html里，并将echarts图表生成区域置入其中 ```html <!DOCTYPE html>

            <script type="text/javascript">
            
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              /* 原该处定义了指定图表的配置项和数
              window.dataList = [];*/
              //定义数组，存放之后ajax渲染的数据
              var dataList = [];
            

            option = { tooltip: { triggerOn: “click”, formatter: function(e, t, n) { return ‘.5’ == e.value ? e.name + “：有疑似病例” : e.seriesName + “
            “ + e.name + “：” + e.value } }, toolbox: { show: true, orient: ‘vertical’, left: ‘right’, top: ‘center’, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, // 提供下载工具 visualMap: { min: 0, max: 100000, left: 26, bottom: 40, showLabel: !0, text: [“高”, “低”], pieces: [{ gt: 10000, label: “> 10000人”, color: “#7f1100” }, { gte: 1000, lte: 10000, label: “1000 - 10000人”, color: “#ff5428” }, { gte: 100, lt: 1000, label: “100 - 1000人”, color: “#ff8c71” }, { gt: 10, lt: 100, label: “10 - 100人”, color: “#ffd768” }, { gt: 1, lt: 10, label: “1 - 10人”, color: “#ffffff” }], show: !0 }, geo: { map: “china”, roam: !1, scaleLimit: { min: 1, max: 2 }, zoom: 1.23, top: 120, label: { normal: { show: !0, fontSize: “14”, color: “rgba(0,0,0,0.7)” } }, itemStyle: { normal: { //shadowBlur: 50, //shadowColor: ‘rgba(0, 0, 0, 0.2)’, borderColor: “rgba(0, 0, 0, 0.2)” }, emphasis: { areaColor: “#f2d5ad”, shadowOffsetX: 0, shadowOffsetY: 0, borderWidth: 0 } } }/, 原该处渲染数据，删掉，自己在ajax请求里写series渲染后台传的数据 series: [{ name: “确诊病例”, type: “map”, geoIndex: 0, data: window.dataList }]/ }; //发送ajax请求 $.ajax({ url:”/query”, //发送到indexController类定义的/query dataType:”json”, //返回的数据类型为json success:function(data) {//调用成功之后success回调函数接受数据集合data for(let i in data){ //for循环让i放入data dataList[i] = data[i]; //让data的每一项数据给dataList } //ajax成功之后编写mychart语法框架需要的series(z) myChart.setOption({ series:[ { name: “确诊病例”, type: “map”, geoIndex: 0, data: dataList } ] }) } }); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

            
               5. 将模板和主体内容区域复制给bar、line、pie
            ```html
            <!DOCTYPE html>
            <html>
            <head>
            
                  <meta charset="utf-8">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                    <script th:src="@{/echarts/echarts.min.js}"></script>
                    <script th:src="@{/echarts/china.js}"></script>
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
            <body>
            <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            <div class="layui-body">
                <!-- 内容主体区域 -->
                 <div style="padding: 15px;">
                     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width: 500px;height:700px;"></div>
                 </div>
            </div>
            
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
            
            option = {
              title: {
                text: '中国各地区疫情累计确诊人数'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {},
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
              }
            };
                //发送ajax请求
                $.ajax({
                    url:"/queryBar",    //发送到indexController类定义的/queryBar
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {
                        //调用成功之后success回调函数接受数据集合dat
                        //data的值是map里面存放《cityList[],dataList[]》，即data:map《cityList[],dataList[]》
                        //ajax成功之后编写mychart语法框架需要的series和yAxis（系列——数值，y轴坐标数据--城市名）
                        myChart.setOption({
                             yAxis: {
                                        type: 'category',
                                        data: data.cityList,
                                      },
                             series: [
                                       {
                                          name: '2022',
                                          type: 'bar',
                                          data: data.dataList,
                                        }
                                      ]
                        })
                    }
                });
            
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

            <!DOCTYPE html>
            <html>
             <head>
            
                  <meta charset="utf-8">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                    <script th:src="@{/echarts/echarts.min.js}"></script>
                    <script th:src="@{/echarts/china.js}"></script>
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
            <body>
            <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            <div class="layui-body">
                <!-- 内容主体区域 -->
                 <div style="padding: 15px;">
                     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width: 500px;height:700px;"></div>
                 </div>
            </div>
            
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
            option = {
              title: {
                text: 'Stacked Line'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['确诊人数', '隔离人数', '治愈人数', '死亡人数', '疑似人数']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              }
            };
                //发送ajax请求
                $.ajax({
                    url:"/queryLine",    //发送到indexController类定义的/queryPie
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {//调用成功之后success回调函数接受数据集合data
                        //ajax成功之后编写mychart语法框架需要的series(z)
                        myChart.setOption({
            
                                  series: [
                                    {
                                      name: '确诊人数',
                                      type: 'line',
                                      stack: 'Total',
                                      data: data.confirmList
                                    },
                                    {
                                      name: '隔离人数',
                                      type: 'line',
                                      stack: 'Total',
                                      data: data.isolationList
                                    },
                                    {
                                      name: '治愈人数',
                                      type: 'line',
                                      stack: 'Total',
                                      data: data.cureList
                                    },
                                    {
                                      name: '死亡人数',
                                      type: 'line',
                                      stack: 'Total',
                                      data: data.deadList
                                    },
                                    {
                                      name: '疑似人数',
                                      type: 'line',
                                      stack: 'Total',
                                      data: data.similarList
                                    }
                                  ]
                            })
                        }
                    });
            
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

            <!DOCTYPE html>
            <html>
            <head>
            
                  <meta charset="utf-8">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                    <script th:src="@{/echarts/echarts.min.js}"></script>
                    <script th:src="@{/echarts/china.js}"></script>
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
            <body>
            <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            <div class="layui-body">
                <!-- 内容主体区域 -->
                 <div style="padding: 15px;">
                     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width: 500px;height:700px;"></div>
                 </div>
            </div>
            
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
            option = {
              title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              }
            };
                //发送ajax请求
                $.ajax({
                    url:"/queryPie",    //发送到indexController类定义的/queryPie
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {//调用成功之后success回调函数接受数据集合data
                        for(let i in data){    //for循环让i放入data
                            dataList[i] = data[i];    //让data的每一项数据给dataList
                        }
                        //ajax成功之后编写mychart语法框架需要的series(z)
                        myChart.setOption({
                            series: [
                                        {
                                              name: '中国各地区疫情累计确诊人数',
                                               type: 'pie',
                                              radius: '50%',
                                              data: dataList,
                                              emphasis: {
                                                itemStyle: {
                                                      shadowBlur: 10,
                                                     shadowOffsetX: 0,
                                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                             }
                                                          }
                                        }
                                    ]
                            })
                        }
                    });
            
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

            P 11 全球疫情数据显示、后台数据查库

            1. 全球疫情地图增加

               1. 复制index成global
               2. 将全球疫情地图的图表代码复制替换option处
               3. 注释掉ajax

               4. 引入全球疫情地图所需的world.js ```html <!DOCTYPE html>

            <script type="text/javascript">
            
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('main'));
              /* 原该处定义了指定图表的配置项和数
              window.dataList = [];*/
              //定义数组，存放之后ajax渲染的数据
              var dataList = [];
            

            option = { title: { text: ‘新型冠状病毒肺炎疫情地图’, subtext: ‘累计确诊人数（截止至北京时间2020-06-09 08:30）’, left: ‘center’, top: ‘top’ }, tooltip: { trigger: ‘item’, formatter: function(params) { var value = params.value + ‘’; return params.seriesName + ‘
            ‘ + params.name + ‘ : ‘ + value+’人’; } }, toolbox: { show: true, orient: ‘vertical’, left: ‘right’, top: ‘center’, feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, visualMap: { min: 0, max: 2200000, text: [‘High’, ‘Low’], realtime: false, calculable: true, color: [‘orangered’, ‘yellow’, ‘lightskyblue’] }, series: [{ name: ‘新型冠状病毒肺炎疫情地图’, type: ‘map’, mapType: ‘world’, roam: true, itemStyle: { emphasis: { label: { show: true } } }, data: [{ name: ‘United States’, value: 2025441 }, { name: ‘China’, value: 84635 }, { name: ‘Brazil’, value: 691758 }, { name: ‘Russia’, value: 476043 }, { name: ‘United Kingdom’, value: 288827 }, { name: ‘Spain’, value: 288797 }, { name: ‘India’, value: 265869 }, { name: ‘Italy’, value: 235278 }, { name: ‘Peru’, value: 196515 }, { name: ‘France’, value: 191313 }, { name: ‘Germany’, value: 186109 }, { name: ‘Iran’, value: 173832 }, { name: ‘Turkey’, value: 171121 }, { name: ‘Chile’, value: 138846 }, { name: ‘Mexico’, value: 117103 }, { name: ‘Saudi Arabia’, value: 105283 }, { name: ‘Pakistan’, value: 103671 }, { name: ‘Canada’, value: 97498 }, { name: ‘Qatar’, value: 70158 }, { name: ‘Bengal’, value: 68504 }, { name: ‘Belgium’, value: 59348 }, { name: ‘South Africa’, value: 50879 }, { name: ‘Belarus’, value: 49453 }, { name: ‘Netherlands’, value: 47945 }, { name: ‘Sweden’, value: 45133 }, { name: ‘Ecuador’, value: 43378 }, { name: ‘UAE’, value: 39376 }, { name: ‘Colombia’, value: 39364 }, { name: ‘Singapore’, value: 38296 }, { name: ‘Egypt’, value: 35444 }, { name: ‘Portugal’, value: 34885 }, { name: ‘Kuwait’, value: 32510 }, { name: ‘Indonesia’, value: 32033 }, { name: ‘Switzerland’, value: 30972 }, { name: ‘Ukraine’, value: 28077 }, { name: ‘Poland’, value: 27160 }, { name: ‘Ireland’, value: 25207 }, { name: ‘Argentina’, value: 22794 }, { name: ‘Philippines’, value: 22474 }, { name: ‘Afghanistan’, value: 20917 }, { name: ‘Romania’, value: 20604 }, { name: ‘Dominica’, value: 20126 }, { name: ‘Israel’, value: 18032 }, { name: ‘Oman’, value: 17486 }, { name: ‘Japan’, value: 17060 }, { name: ‘Austria’, value: 16968 }, { name: ‘Panama’, value: 16425 }, { name: ‘Bahrain’, value: 15417 }, { name: ‘Bolivia’, value: 13643 }, { name: ‘Iraq’, value: 13481 }, { name: ‘Armenia’, value: 13325 }, { name: ‘Kazakhstan’, value: 12859 }, { name: ‘Nigeria’, value: 12486 }, { name: ‘Denmark’, value: 12162 }, { name: ‘Serbia’, value: 11896 }, { name: ‘Korea’, value: 11814 }, { name: ‘Algeria’, value: 10265 }, { name: ‘Ghana’, value: 9910 }, { name: ‘Moldova’, value: 9807 }, { name: ‘Czech Republic’, value: 9670 }, { name: ‘Norway’, value: 8561 }, { name: ‘Malaysia’, value: 8329 }, { name: ‘Morocco’, value: 8302 }, { name: ‘Cameroon’, value: 8060 }, { name: ‘Azerbaijan’, value: 7876 }, { name: ‘Australia’, value: 7265 }, { name: ‘Guatemala’, value: 7055 }, { name: ‘Finland’, value: 7001 }, { name: ‘Honduras’, value: 6327 }, { name: ‘Sudan’, value: 6081 }, { name: ‘Tajikistan’, value: 4609 }, { name: ‘Uzbekistan’, value: 4440 }, { name: ‘Senegal’, value: 4427 }, { name: ‘Djibouti’, value: 4278 }, { name: ‘Guinea’, value: 4117 }, { name: ‘Congo (DRC)’, value: 4106 }, { name: ‘Luxembourg’, value: 4040 }, { name: ‘Hungary’, value: 4014 }, { name: ‘Ivory Coast’, value: 3881 }, { name: ‘Nepal’, value: 3762 }, { name: ‘Haiti’, value: 3334 }, { name: ‘North Macedonia’, value: 3152 }, { name: ‘Thailand’, value: 3119 }, { name: ‘Salvador’, value: 3104 }, { name: ‘Gabon’, value: 3101 }, { name: ‘Greece’, value: 3049 }, { name: ‘Kenya’, value: 2872 }, { name: ‘Bulgaria’, value: 2727 }, { name: ‘Bosnia and Herzegovina’, value: 2704 }, { name: ‘Venezuela’, value: 2377 }, { name: ‘Somalia’, value: 2368 }, { name: ‘Croatia’, value: 2247 }, { name: ‘Cuba’, value: 2200 }, { name: ‘Ethiopia’, value: 2156 }, { name: ‘Kyrgyzstan’, value: 2032 }, { name: ‘Estonia’, value: 1940 }, { name: ‘Maldives’, value: 1916 }, { name: ‘Sri Lanka’, value: 1857 }, { name: ‘Central African Republic’, value: 1850 }, { name: ‘Iceland’, value: 1807 }, { name: ‘Lithuania’, value: 1720 }, { name: ‘Mali’, value: 1547 }, { name: ‘Slovakia’, value: 1530 }, { name: ‘new Zealand’, value: 1504 }, { name: ‘Slovenia’, value: 1485 }, { name: ‘Guinea-Bissau’, value: 1368 }, { name: ‘Lebanon’, value: 1350 }, { name: ‘Costa rica’, value: 1342 }, { name: ‘Equatorial Guinea’, value: 1306 }, { name: ‘Albania’, value: 1263 }, { name: ‘Zambia’, value: 1200 }, { name: ‘Paraguay’, value: 1145 }, { name: ‘Nicaragua’, value: 1118 }, { name: ‘Madagascar’, value: 1094 }, { name: ‘Latvia’, value: 1088 }, { name: ‘Tunisia’, value: 1087 }, { name: ‘Mauritania’, value: 1049 }, { name: ‘Sierra Leone’, value: 1001 }, { name: ‘Niger’, value: 973 }, { name: ‘Cyprus’, value: 970 }, { name: ‘Burkina Faso’, value: 890 }, { name: ‘Andorra’, value: 852 }, { name: ‘Uruguay’, value: 845 }, { name: ‘Chad’, value: 839 }, { name: ‘Jordan’, value: 831 }, { name: ‘Georgia’, value: 812 }, { name: ‘Diamond Cruise’, value: 712 }, { name: ‘San Marino’, value: 687 }, { name: ‘Republic of Congo)’, value: 683 }, { name: ‘Uganda’, value: 646 }, { name: ‘Malta’, value: 630 }, { name: ‘Jamaica’, value: 598 }, { name: ‘Cape verde’, value: 567 }, { name: ‘Tanzania’, value: 509 }, { name: ‘Togo’, value: 497 }, { name: ‘Yemen’, value: 484 }, { name: ‘Palestine’, value: 473 }, { name: ‘Rwanda’, value: 451 }, { name: ‘Malawi’, value: 443 }, { name: ‘Mozambique’, value: 433 }, { name: ‘Liberia’, value: 370 }, { name: ‘Swaziland’, value: 340 }, { name: ‘Mauritius’, value: 337 }, { name: ‘Vietnam’, value: 332 }, { name: ‘Montenegro’, value: 324 }, { name: ‘Benin’, value: 288 }, { name: ‘Zimbabwe’, value: 287 }, { name: ‘Libya’, value: 270 }, { name: ‘Myanmar’, value: 244 }, { name: ‘Mongolia’, value: 194 }, { name: ‘Guyana’, value: 154 }, { name: ‘Syria’, value: 144 }, { name: ‘Brunei’, value: 141 }, { name: ‘Comoros’, value: 141 }, { name: ‘Suriname’, value: 128 }, { name: ‘Cambodia’, value: 126 }, { name: ‘Trinidad and Tobago’, value: 117 }, { name: ‘Bahamas’, value: 103 }, { name: ‘Monaco’, value: 99 }, { name: ‘Angola’, value: 92 }, { name: ‘Barbados’, value: 92 }, { name: ‘Burundi’, value: 83 }, { name: ‘Principality of Liechtenstein’, value: 82 }, { name: ‘Bhutan’, value: 59 }, { name: ‘Botswana’, value: 42 }, { name: ‘Eritrea’, value: 39 }, { name: ‘Martinique’, value: 37 }, { name: ‘Namibia’, value: 31 }, { name: ‘Gambia’, value: 28 }, { name: ‘Saint Vincent and the Grenadines’, value: 27 }, { name: ‘Antigua and Barbuda’, value: 26 }, { name: ‘East Timor’, value: 24 }, { name: ‘Grenada’, value: 23 }, { name: ‘Santa lucia’, value: 19 }, { name: ‘Laos’, value: 19 }, { name: ‘Belize’, value: 19 }, { name: ‘Dominica’, value: 18 }, { name: ‘Fiji’, value: 18 }, { name: ‘Saint Kitts and Nevis’, value: 15 }, { name: ‘Vatican’, value: 12 }, { name: ‘Seychelles’, value: 11 }, { name: ‘Papua New Guinea’, value: 8 }, { name: ‘Lesotho’, value: 4 }

                ]
            }]
            

            }; //发送ajax请求 /$.ajax({ url:”/query”, //发送到indexController类定义的/query dataType:”json”, //返回的数据类型为json success:function(data) {//调用成功之后success回调函数接受数据集合data for(let i in data){ //for循环让i放入data dataList[i] = data[i]; //让data的每一项数据给dataList } //ajax成功之后编写mychart语法框架需要的series(z) myChart.setOption({ series:[ { name: “确诊病例”, type: “map”, geoIndex: 0, data: dataList } ] }) } });/ // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

            
            2. controller层编写跳转映射，commonmenu选项添加全球地图跳转，测试图表是否正常显示
            ```java
            package com.demo.controller;
            
            import java.util.ArrayList;
            import java.util.HashMap;
            import java.util.List;
            import java.util.Map;
            
            import org.apache.ibatis.scripting.xmltags.ForEachSqlNode;
            import org.springframework.beans.factory.annotation.Autowired;
            import org.springframework.stereotype.Controller;
            import org.springframework.web.bind.annotation.RequestMapping;
            import org.springframework.web.bind.annotation.ResponseBody;
            import org.springframework.web.bind.annotation.RestController;
            
            import com.demo.entity.lineTrend;
            import com.demo.entity.nocvData;
            import com.demo.service.indexService;
            
            @Controller
            public class indexController {
            
                //————————————————————————————————————————主页、中国地图——————————————————————————————————————————————————————————————
                //注入indexService，有增删改查的属性、动作可用
                @Autowired
                private indexService IndexService;
            
            
                //映射路径/query
                @RequestMapping("/query")
                //查询data————数据多用集合装，所以用List
                @ResponseBody//将数据转换成json格式
                public List<nocvData> queryData(){
                    //indexService里有获取所有数据的list动作，将获取的数据放入list
                    List<nocvData> list = IndexService.list();
                    return list;
                }
            
            
                //————————————————————————————————————————饼状图——————————————————————————————————————————————————————————————
                //跳转pie页面
                @RequestMapping("/toPie")        //映射路径/toPie
                public String toPie() {
                    return "pie";        //跳转到pie.html
                }
            
                /*
                 饼状图的应用场景：分组聚合(类别展示时候)
                 select count(*) from goods group by type
                 */
            
            
            
                //映射路径/queryPie
                @RequestMapping("/queryPie")
                //查询data————数据多用集合装，所以用list，
                @ResponseBody//将数据转换成json格式
                public List<nocvData> queryPieData(){
                    //indexService里有获取所有数据的list动作，将获取的list放入list
                    List<nocvData> list = IndexService.list();
                    return list;
                }
                //————————————————————————————————————————柱状图——————————————————————————————————————————————————————————————
                //跳转Bar页面
                @RequestMapping("/toBar")        //映射路径/toBar
                public String toBar() {
                    return "bar";        //跳转到bar.html
                }
                //映射路径/queryBar
                @RequestMapping("/queryBar")
                //查询data————数据多用集合装，所以用list，
                @ResponseBody//将数据转换成json格式
                public Map<String, List<Object>> queryBarData(){
                //1. 所有城市数据：数值
                List<nocvData> list = IndexService.list();
                //2. 所有城市名数据
                List<String> cityList = new ArrayList<>();    //建立一个cityList以存放下面获取的全部城市名
                for(nocvData data : list) {
                    cityList.add(data.getName());    //循环便利获取城市名
                }
                //3. 所有疫情数值数据
                List<Integer> dataList = new ArrayList<>();
                for(nocvData data : list) {
                    dataList.add(data.getValue());
                }
                //4.创建Map容器
                Map map = new HashMap();
                map.put("cityList",cityList);
                map.put("dataList",dataList);
                    return map;
                }
            
                //————————————————————————————————————————折线图——————————————————————————————————————————————————————————————
                    //跳转line页面
                    @RequestMapping("/toLine")        //映射路径/toLine
                    public String toLine() {
                        return "line";        //跳转到line.html
                    }
                    //映射路径/queryLine
                    @RequestMapping("/queryLine")
                    //查询data————数据多用集合装，所以用list，
                    @ResponseBody//将数据转换成json格式
                    public Map<String,List<Object>> queryLineData(){
                        //1. 近7天查询所有的数据（查询7天那么就需要自定义查询代码了，不能运用mybatisplus的list方法）
                            //用List（集合）类型(<E>为列表中的元素类型（格式），为实体类中编写的类型（格式）)的list7来封装获取到的对应类型（确诊、隔离、治愈、死亡、疑似）的7天数据
                        List<lineTrend> list7Day = IndexService.findSevenData();    //findSevenData方法需去service定义
                        //2. 封装所有的确诊人数（折线图有五种类型，七天）
                        List<Integer> confirmList = new ArrayList<>();
                        //3. 封装所有的隔离人数（折线图有五种类型，七天）
                        List<Integer> isolationList = new ArrayList<>();
                        //4. 封装所有的治愈人数（折线图有五种类型，七天）
                        List<Integer> cureList = new ArrayList<>();
                        //5. 封装所有的死亡人数（折线图有五种类型，七天）
                        List<Integer> deadList = new ArrayList<>();
                        //6. 封装所有的疑似人数（折线图有五种类型，七天）
                        List<Integer> similarList = new ArrayList<>();
                        //
                        for (lineTrend data : list7Day) {
                            confirmList.add(data.getConfirm());
                            isolationList.add(data.getIsolation());
                            cureList.add(data.getCure());
                            deadList.add(data.getDead());
                            similarList.add(data.getSimilar());
                        }
                        //7.返回数据的格式容器Map
                        Map map = new HashMap();
                        map.put("confirmList", confirmList);
                        map.put("isolationList", isolationList);
                        map.put("cureList", cureList);
                        map.put("deadList", deadList);
                        map.put("similarList", similarList);
            
                        return map;//返回获取的各类型7天数据到前台
                    }
            
                    //————————————————————————————————————————全球疫情地图——————————————————————————————————————————————————————————————
                            //跳转global页面
                            @RequestMapping("/toGlobal")        //映射路径/toGlobal
                            public String toGlobal() {
                                return "global";        //跳转到global.html
                            }
            
            }
            

            <!DOCTYPE html>
            <html>
              <head>
            
                  <meta charset="utf-8">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                    <script th:src="@{/echarts/echarts.min.js}"></script>
                    <script th:src="@{/echarts/china.js}"></script>
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                    <script th:src="@{/echarts/world.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
            <body>
            <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            <div class="layui-body">
                <!-- 内容主体区域 -->
                 <div style="padding: 15px;">
                     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width: 500px;height:700px;"></div>
                 </div>
            </div>
            
            <script>
            //JS 
            layui.use(['element', 'layer', 'util'], function(){
              var element = layui.element
              ,layer = layui.layer
              ,util = layui.util
              ,$ = layui.$;
            
              //头部事件
              util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function(othis){
                  layer.msg('展开左侧菜单的操作', {icon: 0});
                }
                ,menuRight: function(){
                  layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                  });
                }
              });
            
            });
            </script>
            
            
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
            option = {
                title: {
                    text: '新型冠状病毒肺炎疫情地图',
                    subtext: '累计确诊人数（截止至北京时间2020-06-09 08:30）',
                    left: 'center',
                    top: 'top'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        var value = params.value + '';
                        return params.seriesName + '<br/>' + params.name + ' : ' + value+'人';
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 0,
                    max: 2200000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    color: ['orangered', 'yellow', 'lightskyblue']
                },
                series: [{
                    name: '新型冠状病毒肺炎疫情地图',
                    type: 'map',
                    mapType: 'world',
                    roam: true,
                    itemStyle: {
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{
                            name: 'United States',
                            value: 2025441
                        },
                        {
                            name: 'China',
                            value: 84635
                        },
                        {
                            name: 'Brazil',
                            value: 691758
                        },
                        {
                            name: 'Russia',
                            value: 476043
                        },
                        {
                            name: 'United Kingdom',
                            value: 288827
                        },
                        {
                            name: 'Spain',
                            value: 288797
                        },
                        {
                            name: 'India',
                            value: 265869
                        },
                        {
                            name: 'Italy',
                            value: 235278
                        },
                        {
                            name: 'Peru',
                            value: 196515
                        },
                        {
                            name: 'France',
                            value: 191313
                        },
                        {
                            name: 'Germany',
                            value: 186109
                        },
                        {
                            name: 'Iran',
                            value: 173832
                        },
                        {
                            name: 'Turkey',
                            value: 171121
                        },
                        {
                            name: 'Chile',
                            value: 138846
                        },
                        {
                            name: 'Mexico',
                            value: 117103
                        },
                        {
                            name: 'Saudi Arabia',
                            value: 105283
                        },
                        {
                            name: 'Pakistan',
                            value: 103671
                        },
                        {
                            name: 'Canada',
                            value: 97498
                        },
                        {
                            name: 'Qatar',
                            value: 70158
                        },
                        {
                            name: 'Bengal',
                            value: 68504
                        },
                        {
                            name: 'Belgium',
                            value: 59348
                        },
                        {
                            name: 'South Africa',
                            value: 50879
                        },
                        {
                            name: 'Belarus',
                            value: 49453
                        },
                        {
                            name: 'Netherlands',
                            value: 47945
                        },
                        {
                            name: 'Sweden',
                            value: 45133
                        },
                        {
                            name: 'Ecuador',
                            value: 43378
                        },
                        {
                            name: 'UAE',
                            value: 39376
                        },
                        {
                            name: 'Colombia',
                            value: 39364
                        },
                        {
                            name: 'Singapore',
                            value: 38296
                        },
                        {
                            name: 'Egypt',
                            value: 35444
                        },
                        {
                            name: 'Portugal',
                            value: 34885
                        },
                        {
                            name: 'Kuwait',
                            value: 32510
                        },
                        {
                            name: 'Indonesia',
                            value: 32033
                        },
                        {
                            name: 'Switzerland',
                            value: 30972
                        },
                        {
                            name: 'Ukraine',
                            value: 28077
                        },
                        {
                            name: 'Poland',
                            value: 27160
                        },
                        {
                            name: 'Ireland',
                            value: 25207
                        },
                        {
                            name: 'Argentina',
                            value: 22794
                        },
                        {
                            name: 'Philippines',
                            value: 22474
                        },
                        {
                            name: 'Afghanistan',
                            value: 20917
                        },
                        {
                            name: 'Romania',
                            value: 20604
                        },
                        {
                            name: 'Dominica',
                            value: 20126
                        },
                        {
                            name: 'Israel',
                            value: 18032
                        },
                        {
                            name: 'Oman',
                            value: 17486
                        },
                        {
                            name: 'Japan',
                            value: 17060
                        },
                        {
                            name: 'Austria',
                            value: 16968
                        },
                        {
                            name: 'Panama',
                            value: 16425
                        },
                        {
                            name: 'Bahrain',
                            value: 15417
                        },
                        {
                            name: 'Bolivia',
                            value: 13643
                        },
                        {
                            name: 'Iraq',
                            value: 13481
                        },
                        {
                            name: 'Armenia',
                            value: 13325
                        },
                        {
                            name: 'Kazakhstan',
                            value: 12859
                        },
                        {
                            name: 'Nigeria',
                            value: 12486
                        },
                        {
                            name: 'Denmark',
                            value: 12162
                        },
                        {
                            name: 'Serbia',
                            value: 11896
                        },
                        {
                            name: 'Korea',
                            value: 11814
                        },
                        {
                            name: 'Algeria',
                            value: 10265
                        },
                        {
                            name: 'Ghana',
                            value: 9910
                        },
                        {
                            name: 'Moldova',
                            value: 9807
                        },
                        {
                            name: 'Czech Republic',
                            value: 9670
                        },
                        {
                            name: 'Norway',
                            value: 8561
                        },
                        {
                            name: 'Malaysia',
                            value: 8329
                        },
                        {
                            name: 'Morocco',
                            value: 8302
                        },
                        {
                            name: 'Cameroon',
                            value: 8060
                        },
                        {
                            name: 'Azerbaijan',
                            value: 7876
                        },
                        {
                            name: 'Australia',
                            value: 7265
                        },
                        {
                            name: 'Guatemala',
                            value: 7055
                        },
                        {
                            name: 'Finland',
                            value: 7001
                        },
                        {
                            name: 'Honduras',
                            value: 6327
                        },
                        {
                            name: 'Sudan',
                            value: 6081
                        },
                        {
                            name: 'Tajikistan',
                            value: 4609
                        },
                        {
                            name: 'Uzbekistan',
                            value: 4440
                        },
                        {
                            name: 'Senegal',
                            value: 4427
                        },
                        {
                            name: 'Djibouti',
                            value: 4278
                        },
                        {
                            name: 'Guinea',
                            value: 4117
                        },
                        {
                            name: 'Congo (DRC)',
                            value: 4106
                        },
                        {
                            name: 'Luxembourg',
                            value: 4040
                        },
                        {
                            name: 'Hungary',
                            value: 4014
                        },
                        {
                            name: 'Ivory Coast',
                            value: 3881
                        },
                        {
                            name: 'Nepal',
                            value: 3762
                        },
                        {
                            name: 'Haiti',
                            value: 3334
                        },
                        {
                            name: 'North Macedonia',
                            value: 3152
                        },
                        {
                            name: 'Thailand',
                            value: 3119
                        },
                        {
                            name: 'Salvador',
                            value: 3104
                        },
                        {
                            name: 'Gabon',
                            value: 3101
                        },
                        {
                            name: 'Greece',
                            value: 3049
                        },
                        {
                            name: 'Kenya',
                            value: 2872
                        },
                        {
                            name: 'Bulgaria',
                            value: 2727
                        },
                        {
                            name: 'Bosnia and Herzegovina',
                            value: 2704
                        },
                        {
                            name: 'Venezuela',
                            value: 2377
                        },
                        {
                            name: 'Somalia',
                            value: 2368
                        },
                        {
                            name: 'Croatia',
                            value: 2247
                        },
                        {
                            name: 'Cuba',
                            value: 2200
                        },
                        {
                            name: 'Ethiopia',
                            value: 2156
                        },
                        {
                            name: 'Kyrgyzstan',
                            value: 2032
                        },
                        {
                            name: 'Estonia',
                            value: 1940
                        },
                        {
                            name: 'Maldives',
                            value: 1916
                        },
                        {
                            name: 'Sri Lanka',
                            value: 1857
                        },
                        {
                            name: 'Central African Republic',
                            value: 1850
                        },
                        {
                            name: 'Iceland',
                            value: 1807
                        },
                        {
                            name: 'Lithuania',
                            value: 1720
                        },
                        {
                            name: 'Mali',
                            value: 1547
                        },
                        {
                            name: 'Slovakia',
                            value: 1530
                        },
                        {
                            name: 'new Zealand',
                            value: 1504
                        },
                        {
                            name: 'Slovenia',
                            value: 1485
                        },
                        {
                            name: 'Guinea-Bissau',
                            value: 1368
                        },
                        {
                            name: 'Lebanon',
                            value: 1350
                        },
                        {
                            name: 'Costa rica',
                            value: 1342
                        },
                        {
                            name: 'Equatorial Guinea',
                            value: 1306
                        },
                        {
                            name: 'Albania',
                            value: 1263
                        },
                        {
                            name: 'Zambia',
                            value: 1200
                        },
                        {
                            name: 'Paraguay',
                            value: 1145
                        },
                        {
                            name: 'Nicaragua',
                            value: 1118
                        },
                        {
                            name: 'Madagascar',
                            value: 1094
                        },
                        {
                            name: 'Latvia',
                            value: 1088
                        },
                        {
                            name: 'Tunisia',
                            value: 1087
                        },
                        {
                            name: 'Mauritania',
                            value: 1049
                        },
                        {
                            name: 'Sierra Leone',
                            value: 1001
                        },
                        {
                            name: 'Niger',
                            value: 973
                        },
                        {
                            name: 'Cyprus',
                            value: 970
                        },
                        {
                            name: 'Burkina Faso',
                            value: 890
                        },
                        {
                            name: 'Andorra',
                            value: 852
                        },
                        {
                            name: 'Uruguay',
                            value: 845
                        },
                        {
                            name: 'Chad',
                            value: 839
                        },
                        {
                            name: 'Jordan',
                            value: 831
                        },
                        {
                            name: 'Georgia',
                            value: 812
                        },
                        {
                            name: 'Diamond Cruise',
                            value: 712
                        },
                        {
                            name: 'San Marino',
                            value: 687
                        },
                        {
                            name: 'Republic of Congo)',
                            value: 683
                        },
                        {
                            name: 'Uganda',
                            value: 646
                        },
                        {
                            name: 'Malta',
                            value: 630
                        },
                        {
                            name: 'Jamaica',
                            value: 598
                        },
                        {
                            name: 'Cape verde',
                            value: 567
                        },
                        {
                            name: 'Tanzania',
                            value: 509
                        },
                        {
                            name: 'Togo',
                            value: 497
                        },
                        {
                            name: 'Yemen',
                            value: 484
                        },
                        {
                            name: 'Palestine',
                            value: 473
                        },
                        {
                            name: 'Rwanda',
                            value: 451
                        },
                        {
                            name: 'Malawi',
                            value: 443
                        },
                        {
                            name: 'Mozambique',
                            value: 433
                        },
                        {
                            name: 'Liberia',
                            value: 370
                        },
                        {
                            name: 'Swaziland',
                            value: 340
                        },
                        {
                            name: 'Mauritius',
                            value: 337
                        },
                        {
                            name: 'Vietnam',
                            value: 332
                        },
                        {
                            name: 'Montenegro',
                            value: 324
                        },
                        {
                            name: 'Benin',
                            value: 288
                        },
                        {
                            name: 'Zimbabwe',
                            value: 287
                        },
                        {
                            name: 'Libya',
                            value: 270
                        },
                        {
                            name: 'Myanmar',
                            value: 244
                        },
                        {
                            name: 'Mongolia',
                            value: 194
                        },
                        {
                            name: 'Guyana',
                            value: 154
                        },
                        {
                            name: 'Syria',
                            value: 144
                        },
                        {
                            name: 'Brunei',
                            value: 141
                        },
                        {
                            name: 'Comoros',
                            value: 141
                        },
                        {
                            name: 'Suriname',
                            value: 128
                        },
                        {
                            name: 'Cambodia',
                            value: 126
                        },
                        {
                            name: 'Trinidad and Tobago',
                            value: 117
                        },
                        {
                            name: 'Bahamas',
                            value: 103
                        },
                        {
                            name: 'Monaco',
                            value: 99
                        },
                        {
                            name: 'Angola',
                            value: 92
                        },
                        {
                            name: 'Barbados',
                            value: 92
                        },
                        {
                            name: 'Burundi',
                            value: 83
                        },
                        {
                            name: 'Principality of Liechtenstein',
                            value: 82
                        },
                        {
                            name: 'Bhutan',
                            value: 59
                        },
                        {
                            name: 'Botswana',
                            value: 42
                        },
                        {
                            name: 'Eritrea',
                            value: 39
                        },
                        {
                            name: 'Martinique',
                            value: 37
                        },
                        {
                            name: 'Namibia',
                            value: 31
                        },
                        {
                            name: 'Gambia',
                            value: 28
                        },
                        {
                            name: 'Saint Vincent and the Grenadines',
                            value: 27
                        },
                        {
                            name: 'Antigua and Barbuda',
                            value: 26
                        },
                        {
                            name: 'East Timor',
                            value: 24
                        },
                        {
                            name: 'Grenada',
                            value: 23
                        },
                        {
                            name: 'Santa lucia',
                            value: 19
                        },
                        {
                            name: 'Laos',
                            value: 19
                        },
                        {
                            name: 'Belize',
                            value: 19
                        },
                        {
                            name: 'Dominica',
                            value: 18
                        },
                        {
                            name: 'Fiji',
                            value: 18
                        },
                        {
                            name: 'Saint Kitts and Nevis',
                            value: 15
                        },
                        {
                            name: 'Vatican',
                            value: 12
                        },
                        {
                            name: 'Seychelles',
                            value: 11
                        },
                        {
                            name: 'Papua New Guinea',
                            value: 8
                        },
                        {
                            name: 'Lesotho',
                            value: 4
                        }
            
                    ]
                }]
            };
                //发送ajax请求
                /*$.ajax({
                    url:"/query",    //发送到indexController类定义的/query
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {//调用成功之后success回调函数接受数据集合data
                        for(let i in data){    //for循环让i放入data
                            dataList[i] = data[i];    //让data的每一项数据给dataList
                        }
                        //ajax成功之后编写mychart语法框架需要的series(z)
                        myChart.setOption({
                            series:[
                                {
                                     name: "确诊病例",
                                      type: "map",
                                      geoIndex: 0,
                                      data: dataList
                                }
                            ]
                        })
                    }
                });*/
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

            

            1. 编写框架
               1. 全球疫情的数据表创建 ``html use nocv; CREATE TABLEnocv_global_data(idDECIMAL(11,0) NOT NULL,nameVARCHAR(255) NULL DEFAULT NULL COLLATE 'utf8_general_ci',valueDECIMAL(11,0) NULL DEFAULT NULL, PRIMARY KEY (id`) USING BTREE ) COLLATE=’utf8_general_ci’ ENGINE=InnoDB ROW_FORMAT=DYNAMIC ; INSERT INTO nocv_global_data VALUES (1, ‘United States’,691758), (2, ‘China’,666666666), (3, ‘Brazil’,691758), (4, ‘Russia’,666666666), (5, ‘United Kingdom’,288827), (6, ‘Spain’,288797);

            
               2. 复制旧，编写新entity层实体类，映射全球疫情数据表
            ```java
            package com.demo.entity;
            import com.baomidou.mybatisplus.annotation.TableName;
            import lombok.Data;
            
            @Data
            @TableName("nocv_global_data")    //映射的表名为nocv_data
            public class nocvGlobalData {
                //private Integer id;//前台只展示name和value，id暂时不用
                private String name;
                private Integer value;
            
                //类上方通过lombok引入和补丁安装，用@data注解省略get、set方法和toString()方法
            
            }
            

            1. dao或者说mapper层写接口GlobalDataMapper，继承BaseMapper :::warning 不太懂 ::: ```java package com.demo.dao;

            import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.demo.entity.nocvGlobalData;

            //DAO层继承Mybatisplus的basemapper，传入泛型——nocvGlobalData实体类 //DAO层为数据访问层，用于封装对数据库访问的操作。 public interface GlobalDataMapper extends BaseMapper{

            }

            
               3. service层编写接口继承IService，然后编写该接口的实现类去实现，并继承IService的实现类
            ```java
            package com.demo.service;
            
            import com.baomidou.mybatisplus.extension.service.IService;
            import com.demo.entity.nocvGlobalData;
            
            //继承Mybatisplus的IService,获取增删改查动作
            public interface globalService extends  IService<nocvGlobalData>{
            
            }
            

            package com.demo.service;
            
            import org.springframework.stereotype.Service;
            
            import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
            import com.demo.dao.GlobalDataMapper;
            import com.demo.entity.nocvGlobalData;
            
            @Service    //标注为服务，给spring管理
            //实现类实现indexService继承ServiceImpl<mapper,T>,ServiceImpl是globalService继承的IService的实现类
            public class globalService_Impl extends ServiceImpl<GlobalDataMapper, nocvGlobalData> implements globalService{
            
            }
            

            1. 编写专属于全球疫情的controller ```java package com.demo.controller;

            import java.util.List;

            import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;

            import com.demo.entity.nocvGlobalData; import com.demo.service.globalService; import com.demo.service.indexService;

            @Controller public class globalController { //注入globalService，有增删改查的属性、动作可用 @Autowired private globalService GlobalService;

            //————————————————————————————————————————全球疫情地图——————————————————————————————————————————————————————————————
            //跳转global页面
            @RequestMapping("/toGlobal")        //映射路径/toGlobal
            public String toGlobal() {
                return "global";        //跳转到global.html
            }
            
            //映射路径/queryGlobal
            @RequestMapping("/queryGlobal")
            //查询data————数据多用集合装，所以用list，
            @ResponseBody//将数据转换成json格式
            public List<nocvGlobalData> queryGlobalData(){
                //indexService里有获取所有数据的list动作，将获取的数据放入list
                List<nocvGlobalData> list = GlobalService.list();
                return list;
            }
            

            }

            
               5. 去掉global.html中原有的data数据和series系列部分。在ajax中重新设置，将后台的数据渲染
            ```html
            <!DOCTYPE html>
            <html>
              <head>
            
                <meta charset="utf-8">
            
                <!-- 引入刚刚下载的 ECharts 文件（thymeleft语法引入） -->
                <script th:src="@{/echarts/echarts.min.js}"></script>
                <script th:src="@{/echarts/china.js}"></script>
                <script th:src="@{/echarts/jquery.min.js}"></script>
                <script th:src="@{/echarts/world.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
              </head>
              <body>
                <!--layui公共模块-->
                <div th:include="commonmenu :: menu"></div>
            
                <div class="layui-body">
                  <!-- 内容主体区域 -->
                  <div style="padding: 15px;">
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width: 500px;height:700px;"></div>
                  </div>
                </div>
            
                <script>
                  //JS 
                  layui.use(['element', 'layer', 'util'], function(){
                    var element = layui.element
                    ,layer = layui.layer
                    ,util = layui.util
                    ,$ = layui.$;
            
                    //头部事件
                    util.event('lay-header-event', {
                      //左侧菜单事件
                      menuLeft: function(othis){
                        layer.msg('展开左侧菜单的操作', {icon: 0});
                      }
                      ,menuRight: function(){
                        layer.open({
                          type: 1
                          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                          ,area: ['260px', '100%']
                          ,offset: 'rt' //右上角
                          ,anim: 5
                          ,shadeClose: true
                        });
                      }
                    });
            
                  });
                </script>
            
            
                <script type="text/javascript">
            
                  // 基于准备好的dom，初始化echarts实例
                  var myChart = echarts.init(document.getElementById('main'));
                  /* 原该处定义了指定图表的配置项和数
                  window.dataList = [];*/
                  //定义数组，存放之后ajax渲染的数据
                  var dataList = [];
                  option = {
                    title: {
                      text: '新型冠状病毒肺炎疫情地图',
                      subtext: '累计确诊人数（截止至北京时间2020-06-09 08:30）',
                      left: 'center',
                      top: 'top'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: function(params) {
                        var value = params.value + '';
                        return params.seriesName + '<br/>' + params.name + ' : ' + value+'人';
                      }
                    },
                    toolbox: {
                      show: true,
                      orient: 'vertical',
                      left: 'right',
                      top: 'center',
                      feature: {
                        dataView: {
                          readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                      }
                    },
                    visualMap: {
                      min: 0,
                      max: 2200000,
                      text: ['High', 'Low'],
                      realtime: false,
                      calculable: true,
                      color: ['orangered', 'yellow', 'lightskyblue']
                    }
                  };
                  //发送ajax请求
                  $.ajax({
                    url:"/queryGlobal",    //发送到indexController类定义的/query
                    dataType:"json",    //返回的数据类型为json
                    success:function(data) {//调用成功之后success回调函数接受数据集合data
                      for(let i in data){    //for循环让i放入data
                        dataList[i] = data[i];    //让data的每一项数据给dataList
                      }
                      //ajax成功之后编写mychart语法框架需要的series(z)
                      myChart.setOption({
                        series: [{
                          name: '新型冠状病毒肺炎疫情地图',
                          type: 'map',
                          mapType: 'world',
                          roam: true,
                          itemStyle: {
                            emphasis: {
                              label: {
                                show: true
                              }
                            }
                          },
                          data: dataList
                        }]
                      });
                    }
                  });
                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
                </script>
              </body>
            </html>
            

            1. 运行测试效果，正常显示数据库数据

            :::warning 遇到问题：

            • 地图的数据无法正常显示数据库表中的数据
              • 图表示例代码只允许特定的英文国家名称，数据库表中数据用中文无效 :::

                P 13 引入分页查询显示所有数据

            1. templates新建admin包（在其中放置有关增删改查的）
               1. 新建chinadatamanger.html
                  1. 引入示例代码 ```html <!DOCTYPE html>
            • 演示说明
            • 日期
            • 分页
            • 上传
            • 滑块

            在这里，你将以最直观的形式体验 layui！

            在编辑器中可以执行 layui 相关的一切代码

            你也可以点击左侧导航针对性地试验我们提供的示例

            如果最左侧的导航的高度超出了你的屏幕

            你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可

            

            点击上传，或将文件拖拽到此处

            ---

            当前版本：layui v{{ layui.v }}

            ``` 2. 引入依赖 3. 引入以前的公共模块，主体内容区域 4. 把layui定义的table表部分替换主体内容区域的echarts定义区域部分 5. 删除无用的demo至引入依赖行 6. 编写commonmenu的按钮跳转/toChinaManage 7. 编写数据管理的跳转页面controller ```html
            ``` ```html
            logo

            • nav 1
            • nav 2
            • nav 3
            • nav groups

              menu 11

              menu 22

              menu 33

            • tester

              Your Profile

              Settings

              Sign out

            • 中国疫情数据可视化展示

              中国疫情地图

              中国疫情饼图

              中国疫情柱状图

              中国疫情折线

              全球疫情地图

            • 疫情数据管理

              中国疫情数据管理

              list 2

              超链接

            • click menu item
            • the links

            底部固定区域
            ``` ```java package com.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class chinaDataAdminController { //跳转页面 @RequestMapping("/toChinaManage") public String toChinaData() { return "admin/chinadatamanage"; //跳转到admin里的chinadatamanager页面 } } ```  8. 运行点击疫情数据管理选项跳转到 2. 搭建增删改查框架 1. config包 1. MybatisPlusConfig（增删改查插件） ```java package com.demo.config; import org.springframework.boot.autoconfigure.condition.ConditionalOnClass; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; //MybatisPlus的分页插件 //交由spring管理 @Configuration //此插件会用就行，不用理解 @ConditionalOnClass(value = {PaginationInterceptor.class}) public class MybatisPlusConfig { //交由Spring管理，自动分页 @Bean public PaginationInterceptor paginationInterceptor() { return new PaginationInterceptor(); } } ``` 2. vo层（视图返回包） 1. DataView（数据返回实体），返回layui去解析数据实体 1. （要让返回layui示例显示的表格格式，要写一个统一的返回数据体） ```java package com.demo.vo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor //全参构造函数 @NoArgsConstructor //无参构造函数 public class DataView { private Integer code = 0; //状态码 private String msg = ""; //返回信息 private Long count = 0L; //消息条数 private Object data; //返回数据 //公开赋值的构造函数 public DataView(long count,Object data) { this.count = count; this.data = data; } //只给数据赋值的构造函数 public DataView(Object data) { this.data = data; } } ``` P14 编写后台，带有模糊，分页查询所有数据 1. 查询数据controller ```java package com.demo.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.demo.entity.nocvData; import com.demo.service.indexService; import com.demo.vo.DataView; import com.demo.vo.NocvDataVo; @Controller public class chinaDataAdminController { @Autowired private indexService Indexservice; //跳转页面 @RequestMapping("/toChinaManage") public String toChinaData() { return "admin/chinadatamanage"; //跳转到admin里的chinadatamanager页面 } //模糊查询，带分页 @RequestMapping("/listDataByPage") public DataView listDataByPage(NocvDataVo nocvDataVo) { //1. 创建分页对象 当前页和每页总数 IPage page = new Page<>(nocvDataVo.getPage(), nocvDataVo.getLimit()); //2. 创建模糊查询条件 mybatisplus的querywrapper查询 QueryWrapper queryWrapper = new QueryWrapper<>(); queryWrapper.like(!nocvDataVo.getName().equals(""),"name",nocvDataVo.getName()); //3. 疫情数据确诊最多的排在最上面 queryWrapper.orderByDesc("value"); //4. 查询数据库 Indexservice.page(page,queryWrapper); //5. 返回数据封装 DataView dataView = new DataView(page.getTotal(),page.getRecords()); return dataView; } } ``` 2. 页数和每页总数 ```java package com.demo.vo; import com.demo.entity.nocvData; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class NocvDataVo extends nocvData{ private Integer page; private Integer limit; } ``` 3. 前台删减无用的 ```html

            <style>
              body{margin: 10px;}
              .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
            </style>
            

            <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            
            <div class="layui-body">
              <!-- 内容主体区域 -->
              <div style="padding: 15px;">
                <table class="layui-hide" id="demo" lay-filter="test"></table>
              </div>
            </div>
            
            
            
            <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
            </script>
            
            <script>
              layui.config({
                version: '1632428048355' //为了更新 js 缓存，可忽略
              });
            
              //加载模块  
              layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                //得到各种内置组件
                var layer = layui.layer //弹层
                ,laypage = layui.laypage //分页
                ,laydate = layui.laydate //日期
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element //元素操作
                ,slider = layui.slider //滑块
                ,dropdown = layui.dropdown //下拉菜单
            
                //向世界问个好
                layer.msg('Hello World');
            
                //监听Tab切换
                element.on('tab(demo)', function(data){
                  layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                    tips: 1
                  });
                });
            
                //执行一个 table 实例
                table.render({
                  elem: '#demo'
                  ,height: 420
                  ,url: '/listDataByPage' //数据接口
                  ,title: '用户表'
                  ,page: true //开启分页
                  ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                  ,totalRow: true //开启合计行
                  ,cols: [ [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                    ,{field: 'name', title: '省份名称', width:80}
                    ,{field: 'value', title: '确诊人数', width:80, sort: true}
                    ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
                  ] ]
                });
            
                //监听头工具栏事件
                table.on('toolbar(test)', function(obj){
                  var checkStatus = table.checkStatus(obj.config.id)
                  ,data = checkStatus.data; //获取选中的数据
                  switch(obj.event){
                    case 'add':
                      layer.msg('添加');
                      break;
                    case 'update':
                      if(data.length === 0){
                        layer.msg('请选择一行');
                      } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                      } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                      }
                      break;
                    case 'delete':
                      if(data.length === 0){
                        layer.msg('请选择一行');
                      } else {
                        layer.msg('删除');
                      }
                      break;
                  };
                });
            
                //监听行工具事件
                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                  var data = obj.data //获得当前行数据
                  ,layEvent = obj.event; //获得 lay-event 对应的值
                  if(layEvent === 'detail'){
                    layer.msg('查看操作');
                  } else if(layEvent === 'more'){
                    //下拉菜单
                    dropdown.render({
                      elem: this //触发事件的 DOM 对象
                      ,show: true //外部事件触发即显示
                      ,data: [{
                        title: '编辑'
                        ,id: 'edit'
                      },{
                        title: '删除'
                        ,id: 'del'
                      }]
                      ,click: function(menudata){
                        if(menudata.id === 'del'){
                          layer.confirm('真的删除行么', function(index){
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index);
                            //向服务端发送删除指令
                          });
                        } else if(menudata.id === 'edit'){
                          layer.msg('编辑操作，当前行 ID:'+ data.id);
                        }
                      }
                      ,align: 'right' //右对齐弹出（v2.6.8 新增）
                      ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                    })
                  }
                });
            
                //执行一个轮播实例
                carousel.render({
                  elem: '#test1'
                  ,width: '100%' //设置容器宽度
                  ,height: 200
                  ,arrow: 'none' //不显示箭头
                  ,anim: 'fade' //切换动画方式
                });
            
                //将日期直接嵌套在指定容器中
                var dateIns = laydate.render({
                  elem: '#laydateDemo'
                  ,position: 'static'
                  ,calendar: true //是否开启公历重要节日
                  ,mark: { //标记重要日子
                    '0-10-14': '生日'
                    ,'2020-01-18': '小年'
                    ,'2020-01-24': '除夕'
                    ,'2020-01-25': '春节'
                    ,'2020-02-01': '上班'
                  } 
                  ,done: function(value, date, endDate){
                    if(date.year == 2017 && date.month == 11 && date.date == 30){
                      dateIns.hint('一不小心就月底了呢');
                    }
                  }
                  ,change: function(value, date, endDate){
                    layer.msg(value)
                  }
                });
            
                //分页
                laypage.render({
                  elem: 'pageDemo' //分页容器的id
                  ,count: 1000 //数据总数
                  ,limit: 10 //每页显示的数据条数
                  ,skin: '#1E9FFF' //自定义选中色值
                  //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                  ,jump: function(obj, first){
                    if(!first){
                      layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                  }
                });
            
                //上传
                upload.render({
                  elem: '#uploadDemo'
                  ,url: '' //此处配置你自己的上传接口即可
                  ,done: function(res){
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                    console.log(res)
                  }
                  ,before: function(){
                    layer.msg('上传中', {icon: 16, time: 0});
                  }
                });
            
                //滑块
                var sliderInst = slider.render({
                  elem: '#sliderDemo'
                  ,input: true //输入框
                });
            
                //底部信息
                var footerTpl = lay('#footer')[0].innerHTML;
                lay('#footer').html(layui.laytpl(footerTpl).render({}))
                  .removeClass('layui-hide');
              });
            </script>
            <script src="/res/static/tongji/baidu.js"></script>
            

            
            4. 运行显示出数据、同时分页正常![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655833406275-c6af84a9-0d0a-4187-b953-97b0aa958cdb.png#clientId=ud87fb5d5-a694-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=712&id=uc1984bf0&margin=%5Bobject%20Object%5D&name=image.png&originHeight=890&originWidth=1147&originalType=binary&ratio=1&rotation=0&showTitle=false&size=50677&status=done&style=none&taskId=u6bb71e34-2c0c-4d1f-a45f-7a477e39424&title=&width=917.6)
            
            :::warning
            遇到的问题：运行显示数据返回code错误
            
            - 检查发现DataView未初始化赋值0
               - 在DataView定义其=0即可
            - 其他发现
               - MybatisPlusConfig里没有视频中的PaginationInterceptor
                  - mybatisplus版本过高，与视频中的版本不同，该代码高版本被其他取代
            
            不太懂分页逻辑
            :::
            
            <a name="QXIja"></a>
            # P 15 完成删除疫情数据
            
            1. 解开nocvData的id注释，让其显示在表格中
            ```java
            package com.demo.entity;
            import com.baomidou.mybatisplus.annotation.TableName;
            import lombok.Data;
            
            @Data
            @TableName("nocv_data")    //映射的表名为nocv_data
            public class nocvData {
                private Integer id;
                private String name;
                private Integer value;
            
                //类上方通过lombok引入和补丁安装，用@data注解省略get、set方法和toString()方法
            
            }
            

            1. 调整表格行间距，美化

            

            1. 改示例按钮代码为更好看的按钮 ```java编辑 删除

            
            4. 将更新的两个按钮-”编辑“-”删除”添加事件绑定![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655888580672-8c7f54ac-2fe0-4917-85c0-9ee28aeeed83.png#clientId=ud87fb5d5-a694-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=374&id=u566b1434&margin=%5Bobject%20Object%5D&name=image.png&originHeight=468&originWidth=761&originalType=binary&ratio=1&rotation=0&showTitle=false&size=38379&status=done&style=none&taskId=u0dbcf18c-0946-4626-9ebf-dc70973edd4&title=&width=608.8)
            5. 定义一个tableIns![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655886093503-082ce03a-7744-416e-a9f1-6563a8ec1e34.png#clientId=ud87fb5d5-a694-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=446&id=u64b4e85f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=558&originWidth=422&originalType=binary&ratio=1&rotation=0&showTitle=false&size=38407&status=done&style=none&taskId=uff340e3b-3717-4e61-a510-b834b316e8f&title=&width=337.6)
            6. 删除之前代码里——点击查看之后，显示“更新”、“删除”的部分，改成点击删除后直接显示是否删除的提示框。添加ajax删除请求指令到确认按钮下，并设置传入和返回值，成功后调用tableIns让其重新加载。发送删除指令完成之后关闭删除指令
            ```java
            <!DOCTYPE html>
            <html>
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                <!-- 引入echarts的jquery.min.js（thymeleft语法引入） -->
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
            
              <style>
                body{margin: 10px;}
                .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
              </style>
            </head>
            <body>
            
             <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            
            <div class="layui-body">
                <!-- 内容主体区域 -->
                 <div style="padding: 15px;">
                     <table class="layui-hide" id="demo" lay-filter="test"></table>
                 </div>
            </div>
            
            
            
            <script type="text/html" id="barDemo">
            
            <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-radius"><i
                    class="layui-icon layui-icon-edit"></i>编辑
            </button>
            <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
                    class="layui-icon layui-icon-delete"></i>删除
            </button>
            
            
            </script>
            
            <script>
            layui.config({
              version: '1632428048355' //为了更新 js 缓存，可忽略
            });
            
            //加载模块  
            layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
              //得到各种内置组件
              var layer = layui.layer //弹层
              ,laypage = layui.laypage //分页
              ,laydate = layui.laydate //日期
              ,table = layui.table //表格
              ,carousel = layui.carousel //轮播
              ,upload = layui.upload //上传
              ,element = layui.element //元素操作
              ,slider = layui.slider //滑块
              ,dropdown = layui.dropdown //下拉菜单
            
              //向世界问个好
              layer.msg('Hello World');
            
              //监听Tab切换
              element.on('tab(demo)', function(data){
                layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                  tips: 1
                });
              });
            
              //执行一个 table 实例
              tableIns = table.render({
                elem: '#demo'
                ,height: 420
                ,url: '/listDataByPage' //数据接口
                ,title: '用户表'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,totalRow: true //开启合计行
                ,cols: [ [ //表头
                  {type: 'checkbox', fixed: 'left'}
                  ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                  ,{field: 'name', title: '省份名称', width:150}
                  ,{field: 'value', title: '确诊人数', width:150, sort: true}
                  ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
                ] ]
              });
            
              //监听头工具栏事件
              table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                  case 'add':
                    layer.msg('添加');
                  break;
                  case 'update':
                    if(data.length === 0){
                      layer.msg('请选择一行');
                    } else if(data.length > 1){
                      layer.msg('只能同时编辑一个');
                    } else {
                      layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                  break;
                  case 'delete':
                    if(data.length === 0){
                      layer.msg('请选择一行');
                    } else {
                      layer.msg('删除');
                    }
                  break;
                };
              });
            
              //监听行工具事件
              table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'update'){
                    //更新的逻辑代码
                  layer.msg('查看操作');
                } else if(layEvent === 'delete'){
                     layer.confirm('真的删除行么', function(index){
                          obj.del(); //删除对应行（tr）的DOM结构
            
                          //向服务端发送删除指令
                          //发送ajax请求，请求地址发送删除指令，传入id为obj.id,返回值为res
                          $.post("/china/deleteById",{id:obj.id},function(res){
                                if(res.code == 200){
                                    //返回码200-成功，让表格重新加载。实时变化
                                    tableIns.reload({
                                        where:"",
                                    }
                                );
                            }
                        })
                        //发送完毕后
                        layer.close(index);
                     });
                    }
              });
            
              //执行一个轮播实例
              carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height: 200
                ,arrow: 'none' //不显示箭头
                ,anim: 'fade' //切换动画方式
              });
            
              //将日期直接嵌套在指定容器中
              var dateIns = laydate.render({
                elem: '#laydateDemo'
                ,position: 'static'
                ,calendar: true //是否开启公历重要节日
                ,mark: { //标记重要日子
                  '0-10-14': '生日'
                  ,'2020-01-18': '小年'
                  ,'2020-01-24': '除夕'
                  ,'2020-01-25': '春节'
                  ,'2020-02-01': '上班'
                } 
                ,done: function(value, date, endDate){
                  if(date.year == 2017 && date.month == 11 && date.date == 30){
                    dateIns.hint('一不小心就月底了呢');
                  }
                }
                ,change: function(value, date, endDate){
                  layer.msg(value)
                }
              });
            
              //分页
              laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 1000 //数据总数
                ,limit: 10 //每页显示的数据条数
                ,skin: '#1E9FFF' //自定义选中色值
                //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                ,jump: function(obj, first){
                  if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                  }
                }
              });
            
              //上传
              upload.render({
                elem: '#uploadDemo'
                ,url: '' //此处配置你自己的上传接口即可
                ,done: function(res){
                  layer.msg('上传成功');
                  layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                  console.log(res)
                }
                ,before: function(){
                  layer.msg('上传中', {icon: 16, time: 0});
                }
              });
            
              //滑块
              var sliderInst = slider.render({
                elem: '#sliderDemo'
                ,input: true //输入框
              });
            
              //底部信息
              var footerTpl = lay('#footer')[0].innerHTML;
              lay('#footer').html(layui.laytpl(footerTpl).render({}))
              .removeClass('layui-hide');
            });
            </script>
            <script src="/res/static/tongji/baidu.js"></script>
            </body>
            </html>
            

            1. 去controller层去编写根据ID删除的 ```java package com.demo.controller;

            import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;

            import com.demo.service.indexService; import com.demo.vo.DataView;

            @Controller @RequestMapping(“/china”) //第一个请求映射地址 public class chinaController {

            @Autowired
            private indexService IndexService;
            

            //———删除数据ID———— @RequestMapping(“/deleteById”) //第二个请求映射地址 @ResponseBody //封装成json public DataView deleteById(Integer id) { IndexService.removeById(id); DataView dataView = new DataView(); dataView.setCode(200); dataView.setMsg(“删除中国地图数据成功”); return dataView; } }

            
            8. 前台页面增加jquery和tableIns定义（便于之后执行事件之后重新加载表）
            
            ![image.png](https://cdn.nlark.com/yuque/0/2022/png/22384052/1655890168085-266c5533-80fa-41df-88ea-ba421a478aad.png#clientId=ud87fb5d5-a694-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=488&id=u0d671b5d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=610&originWidth=612&originalType=binary&ratio=1&rotation=0&showTitle=false&size=48753&status=done&style=none&taskId=u7e2f979d-61d9-43f7-a103-edc4a707411&title=&width=489.6)
            
            8. 调整前台页面错误
               1. 把删除选项事件里，发送ajax请求时传入的id为obj.data.id(即当前对象的id)
               2. 调整发送消息的动作，让删除指令发送之后就进行消息发送，然后最终关闭删除指令
            ```java
            <!DOCTYPE html>
            <html>
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                <!-- 引入echarts的jquery.min.js（thymeleft语法引入） -->
                    <script th:src="@{/echarts/jquery.min.js}"></script>
                <!-- 引入layui的js和css文件（thymeleft语法引入） -->
                    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
            
              <style>
                body{margin: 10px;}
                .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
              </style>
            </head>
            <body>
            
             <!--layui公共模块-->
            <div th:include="commonmenu :: menu"></div>
            
            
            <div class="layui-body">
                <!-- 内容主体区域 -->
                 <div style="padding: 15px;">
                     <table class="layui-hide" id="demo" lay-filter="test"></table>
                 </div>
            </div>
            
            
            
            <script type="text/html" id="barDemo">
            
            <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-btn-radius"><i
                    class="layui-icon layui-icon-edit"></i>编辑
            </button>
            <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
                    class="layui-icon layui-icon-delete"></i>删除
            </button>
            
            
            </script>
            
            <script>
            layui.config({
              version: '1632428048355' //为了更新 js 缓存，可忽略
            });
            
             定义数据表
             var tableIns;
            
            //加载模块  
            layui.use(['jquery'],function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
              //得到各种内置组件
              var layer = layui.layer //弹层
              ,$ = layui.jquery
              ,laypage = layui.laypage //分页
              ,laydate = layui.laydate //日期
              ,table = layui.table //表格
              ,carousel = layui.carousel //轮播
              ,upload = layui.upload //上传
              ,element = layui.element //元素操作
              ,slider = layui.slider //滑块
              ,dropdown = layui.dropdown //下拉菜单
            
              //向世界问个好
              layer.msg('Hello World');
            
              //监听Tab切换
              element.on('tab(demo)', function(data){
                layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                  tips: 1
                });
              });
            
              //执行一个 table 实例
              tableIns = table.render({
                elem: '#demo'
                ,height: 420
                ,url: '/listDataByPage' //数据接口
                ,title: '用户表'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,totalRow: true //开启合计行
                ,cols: [ [ //表头
                  {type: 'checkbox', fixed: 'left'}
                  ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                  ,{field: 'name', title: '省份名称', width:150}
                  ,{field: 'value', title: '确诊人数', width:150, sort: true}
                  ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
                ] ]
              });
            
              //监听头工具栏事件
              table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                  case 'add':
                    layer.msg('添加');
                  break;
                  case 'update':
                    if(data.length === 0){
                      layer.msg('请选择一行');
                    } else if(data.length > 1){
                      layer.msg('只能同时编辑一个');
                    } else {
                      layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                  break;
                  case 'delete':
                    if(data.length === 0){
                      layer.msg('请选择一行');
                    } else {
                      layer.msg('删除');
                    }
                  break;
                };
              });
            
              //删除和编辑  监听行工具事件
              table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'update'){
                    //更新的逻辑代码
                  layer.msg('查看操作');
                } else if(layEvent === 'delete'){
                     layer.confirm('真的删除行么', function(index){
                          obj.del(); //删除对应行（tr）的DOM结构
            
                          //向服务端发送删除指令
                          //发送ajax请求，请求地址发送删除指令，传入id为当前对象（obj.data）的id,返回值为res
                          $.post("/china/deleteById",{id:obj.data.id},function(res){
                                if(res.code == 200){
                                    //返回码200-成功，让表格重新加载。实时变化
                                    tableIns.reload({
                                        where:"",
                                    }
                                );
                            }
                            //发送完毕后，发送消息
                            layer.msg(res.msg);
                        })
                        //最终，发送消息关闭删除指令
                        layer.close(index);
                     });
                    }
              });
            
              //执行一个轮播实例
              carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height: 200
                ,arrow: 'none' //不显示箭头
                ,anim: 'fade' //切换动画方式
              });
            
              //将日期直接嵌套在指定容器中
              var dateIns = laydate.render({
                elem: '#laydateDemo'
                ,position: 'static'
                ,calendar: true //是否开启公历重要节日
                ,mark: { //标记重要日子
                  '0-10-14': '生日'
                  ,'2020-01-18': '小年'
                  ,'2020-01-24': '除夕'
                  ,'2020-01-25': '春节'
                  ,'2020-02-01': '上班'
                } 
                ,done: function(value, date, endDate){
                  if(date.year == 2017 && date.month == 11 && date.date == 30){
                    dateIns.hint('一不小心就月底了呢');
                  }
                }
                ,change: function(value, date, endDate){
                  layer.msg(value)
                }
              });
            
              //分页
              laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 1000 //数据总数
                ,limit: 10 //每页显示的数据条数
                ,skin: '#1E9FFF' //自定义选中色值
                //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                ,jump: function(obj, first){
                  if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                  }
                }
              });
            
              //上传
              upload.render({
                elem: '#uploadDemo'
                ,url: '' //此处配置你自己的上传接口即可
                ,done: function(res){
                  layer.msg('上传成功');
                  layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                  console.log(res)
                }
                ,before: function(){
                  layer.msg('上传中', {icon: 16, time: 0});
                }
              });
            
              //滑块
              var sliderInst = slider.render({
                elem: '#sliderDemo'
                ,input: true //输入框
              });
            
              //底部信息
              var footerTpl = lay('#footer')[0].innerHTML;
              lay('#footer').html(layui.laytpl(footerTpl).render({}))
              .removeClass('layui-hide');
            });
            </script>
            <script src="/res/static/tongji/baidu.js"></script>
            </body>
            </html>
            

            1. 运行后点击删除按钮，删除成功，表重新加载，同时数据库中对应数据被删除

            

            P16 添加模糊查询搜索框完成模糊查询

            1. layui官网找到合适的示例代码，或编写合适的

            放入chinadatamanage里面的对应table表的上方

            <fieldset class="layui-elem-field layui-field-title" style="margin-top:15px;">
                      <legend>搜索条件</legend>
            </fieldset>
            <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">省份名称</label>
                      <div class="layui-input-inline">
                          <input type="text" name="goodsname" id="goodsname" class="layui-input input-radius"
                                 placeholder="请输入商品名称">
                      </div>
                  </div>
                  <div class="layui-inline" style="...">
                      <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch"><i
                              class="layui-icon layui-icon-search layui-icon-normal"></i>查询
                      </button>
                      <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                              class="layui-icon layui-icon-refresh"></i><span>重置</span>
                      </button>
                   </div>
                  </div>
              </form>
            

            

            1. 将示例页面代码的轮播、日期嵌入、滑块、底部信息删除
            2. 使用layui的提交需要在加载模块定义form模块

            

            1. 写模糊查询，修改示例代码查询按钮里原”name”和’id”位置的值改成数据表中对应的字段name和id ```html <!DOCTYPE html>

                <script th:src="@{/echarts/jquery.min.js}"></script>
               

                <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
                <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
               
            搜索条件

            省份名称

            查询 重置
            ``` 5. 把chinaController的删除代码复制到chinaDataAdminController并删除chinaController（因为之前没看到，多建了类，应该把中国疫情数据相关增删改查的放在一个类下） # p17 集成弹窗完成前台新增疫情数据 1. 在查询重置按钮右边新增按钮——”添加“  2. 去layui找示例按钮代码，更换添加按钮 ```html 添加 ``` 3. 去layui找页面层（弹出窗口）代码 1. 编写模态窗代码，下面粘贴页面层 ```html //模态窗 //页面层 //函数，开启弹窗 function openAddLayer(){ //打开弹层，{弹层的内容，样式} layer.open({ type: 1, skin: 'layui-layer-rim', //加上边框 content: $("#addOrUpdateDiv"), area: ['520px', '540px'], //宽高 }) } ``` 4. 按钮的事件添加——add，lay-filter ```html 添加 ``` 5. 注释掉不用的头工具栏事件， ```html //监听头工具栏事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id) ,data = checkStatus.data; //获取选中的数据 switch(obj.event){ case 'add': layer.msg('添加'); break; /* case 'update': if(data.length === 0){ layer.msg('请选择一行'); } else if(data.length > 1){ layer.msg('只能同时编辑一个'); } else { layer.alert('编辑 [id]：'+ checkStatus.data[0].id); } break; case 'delete': if(data.length === 0){ layer.msg('请选择一行'); } else { layer.msg('删除'); } break;*/ }; }); ``` 6. 删除旧的按钮（因为发现示例代码已经有了） ```html
            搜索条件
            省份名称

            查询 重置
            ``` 7. 去编辑示例代码中新增、修改和批量删除部分（监听头工具栏）的事件 1. 用之前定义的弹出层去替换原本的提示语 2. 解除事件注释 ```html //监听头工具栏事件 新增、修改和批量删除 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id) ,data = checkStatus.data; //获取选中的数据 switch(obj.event){ case 'add': //layer.msg('添加'); 用定义的弹出层替换该提示 openAddLayer(); break; case 'update': if(data.length === 0){ layer.msg('请选择一行'); } else if(data.length > 1){ layer.msg('只能同时编辑一个'); } else { layer.alert('编辑 [id]：'+ checkStatus.data[0].id); } break; case 'delete': if(data.length === 0){ layer.msg('请选择一行'); } else { layer.msg('删除'); } break; }; }); ``` ```html

            <div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
            <form action="" method="post" id="searchFrm2" lay-filter="searchFrm" class="layui-form">
                 <div class="layui-form-item">
                  <div class="layui-inline">
                        <label class="layui-form-label">省份名称</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="name"  class="layui-input input-radius"
                                         placeholder="请输入省份名称">
                        </div>
                  </div>
                  <div class="layui-inline">
                        <label class="layui-form-label">确诊数量</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="value"  class="layui-input input-radius"
                                         placeholder="请输入确诊数量">
                        </div>
                  </div>
                 <div class="layui-inline" style="padding-left: 10% ">
                       <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doAdd"><i
                               class="layui-icon layui-icon-search layui-icon-normal"></i>新增
                      </button>
                      <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                              class="layui-icon layui-icon-refresh"></i><span>重置</span>
                      </button>
                   </div>
                 </div>
            </form>
            </div>
            

            搜索条件

            省份名称

            查询 重置

            
            
            ``` # P18 完成弹窗点击事件发送新增请求 1. 重用chinadatamanage里”模糊查询“的语句，去编写“新增数据”的请求 1. alert测试绑定事件是否有问题 ```html //新增数据 -请求 //from.on进行提交事件（进行）,定义函数传入data form.on("submit(doAdd)", function(data){ //查询之后让表格所有数据重新渲染 alert("99999"); //如果查询失败，返回flase return false; }) ``` 2. 发送ajax请求-新增数据 ```html //新增数据 -请求 //from.on进行提交事件（进行）,定义函数传入data form.on("submit(doAdd)", function(data){ $.post("/china/addChina",data.field,function (res){ if(res.code == 200){ tableIns.reload(); } layer.msg(res.msg); lay.close(); }) return false; }) ``` 2. 定义mainIndex 3. 完成html编写 ```html

            <div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
            <form action="" method="post" id="searchFrm2" lay-filter="searchFrm" class="layui-form">
                 <div class="layui-form-item">
                  <div class="layui-inline">
                        <label class="layui-form-label">省份名称</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="name"  class="layui-input input-radius"
                                         placeholder="请输入省份名称">
                        </div>
                  </div>
                  <div class="layui-inline">
                        <label class="layui-form-label">确诊数量</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="value"  class="layui-input input-radius"
                                         placeholder="请输入确诊数量">
                        </div>
                  </div>
                 <div class="layui-inline" style="padding-left: 10% ">
                       <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doAdd"><i
                               class="layui-icon layui-icon-search layui-icon-normal"></i>新增
                      </button>
                      <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                              class="layui-icon layui-icon-refresh"></i><span>重置</span>
                      </button>
                   </div>
                 </div>
            </form>
            </div>
            

            搜索条件

            省份名称

            查询 重置

            
            
            ``` 3. controller层 ```html package com.demo.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.demo.entity.nocvData; import com.demo.service.indexService; import com.demo.vo.DataView; import com.demo.vo.NocvDataVo; @Controller public class chinaDataAdminController { @Autowired private indexService IndexService; //跳转页面 @RequestMapping("/toChinaManage") public String toChinaData() { return "admin/chinadatamanage"; //跳转到admin里的chinadatamanager页面 } //模糊查询，带分页 @RequestMapping("/listDataByPage") @ResponseBody public DataView listDataByPage(NocvDataVo nocvDataVo) { //1. 创建分页对象 当前页 每页总数 IPage page = new Page<>(nocvDataVo.getPage(), nocvDataVo.getLimit()); //2. 创建模糊查询条件 QueryWrapper queryWrapper = new QueryWrapper<>(); queryWrapper.like(!(nocvDataVo.getName() == null),"name",nocvDataVo.getName()); //3. 疫情数据确诊最多的排在最上面 queryWrapper.orderByDesc("value"); //4. 查询数据库 IndexService.page(page,queryWrapper); //5. 返回数据封装 DataView dataView = new DataView(page.getTotal(),page.getRecords()); return dataView; } //------删除数据ID-------- @RequestMapping("/china/deleteById") //第二个请求映射地址 @ResponseBody //封装成json public DataView deleteById(Integer id) { IndexService.removeById(id); DataView dataView = new DataView(); dataView.setCode(200); dataView.setMsg("删除中国地图数据成功"); return dataView; } /* * 新增或者修改id,根据id是否有值判断 * id：nocvData有值则修改，没有值就是新增 * update nocv_data set name = "" where id = ? */ @RequestMapping("/china/addChina") //第二个请求映射地址 @ResponseBody //封装成json public DataView addChina(nocvData NocvData) { //save的返回结果是是否成功，布尔值 boolean save = IndexService.save(NocvData); DataView dataView = new DataView(); //如果save==true，说明成功，设置状态码200返回成功信息，返回视图重新渲染,否则失败 if(save) { dataView.setCode(200); dataView.setMsg("新增中国地图数据成功！"); return dataView; } dataView.setCode(100); dataView.setMsg("新增中国地图数据失败！"); return dataView; } } ``` 4. 实体类nocvData标注主键自增 ```html package com.demo.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; @Data @TableName("nocv_data") //映射的表名为nocv_data public class nocvData { //标注id字段为自增 @TableId(value = "id", type = IdType.AUTO) private Integer id; private String name; private Integer value; //类上方通过lombok引入和补丁安装，用@data注解省略get、set方法和toString()方法 } ``` 5. 数据库的id字段需要自增 6. 运行测试，可正常添加新记录，数据库表中的记录也会随之添加 # P19 更新操作， ```html

            <div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
            <form action="" method="post" id="searchFrm2" lay-filter="searchFrm2" class="layui-form">
                 <div class="layui-form-item">
                  <div class="layui-inline">
                        <label class="layui-form-label">省份名称</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="name" id = "chinaname" lay-verify="required" class="layui-input input-radius"
                                         placeholder="请输入省份名称">
                        </div>
                  </div>
                  <div class="layui-inline">
                        <label class="layui-form-label">确诊数量</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="value" id = "chinavalue" lay-verify="required" class="layui-input input-radius"
                                         placeholder="请输入确诊数量">
                        </div>
                  </div>
                 <div class="layui-inline" style="padding-left: 10% ">
                       <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit=""  lay-filter="doAdd"><i
                               class="layui-icon layui-icon-search layui-icon-normal"></i>新增或修改
                      </button>
                      <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                              class="layui-icon layui-icon-refresh"></i><span>重置</span>
                      </button>
                   </div>
                 </div>
            </form>
            </div>
            

            搜索条件

            省份名称

            查询 重置

            
            
            ``` ```html
            logo

            • nav 1
            • nav 2
            • nav 3
            • nav groups

              menu 11

              menu 22

              menu 33

            • tester

              Your Profile

              Settings

              Sign out

            • 中国疫情数据可视化展示

              中国疫情地图

              中国疫情饼图

              中国疫情柱状图

              中国疫情折线

              全球疫情地图

            • 疫情数据管理

              中国疫情数据管理

              list 2

              超链接

            • click menu item
            • the links

            底部固定区域
            ``` 逻辑，第一次是查库，显示数据，第二次才修改 1. 修改bug-更新之后是添加不是修改的bug 1. 在新增或修改的form表单添加 ```html

            <div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
            <form action="" method="post" id="searchFrm2" lay-filter="searchFrm2" class="layui-form">
                 <div class="layui-form-item">
                  <div class="layui-inline">
                        <label class="layui-form-label">省份名称</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="name" id = "chinaname" lay-verify="required" class="layui-input input-radius"
                                         placeholder="请输入省份名称">
                        </div>
                  </div>
                  <div class="layui-inline">
                        <label class="layui-form-label">确诊数量</label>
                        <div class="layui-input-inline">
                                  <input type="text" name="value" id = "chinavalue" lay-verify="required" class="layui-input input-radius"
                                         placeholder="请输入确诊数量">
                        </div>
                  </div>
                 <div class="layui-inline" style="padding-left: 10% ">
                       <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius" lay-submit=""  lay-filter="doAdd"><i
                               class="layui-icon layui-icon-search layui-icon-normal"></i>新增或修改
                      </button>
                      <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                              class="layui-icon layui-icon-refresh"></i><span>重置</span>
                      </button>
                   </div>
                 </div>
                 <input type="hidden" name="id">
            </form>
            </div>
            

            搜索条件

            省份名称

            查询 重置

            
            

            
            
            新增和更新共用同一个弹窗，更新时data.field是有值的，新增是没有值的，根据这个来判断是新增还是更新<br />？
            
            
            
            ```html
            <!DOCTYPE html>
            <html>
              <head>
                 <!-- 引入layui的head -->
                  <meta charset="utf-8">
                  <title>Layui</title>
                  <meta name="renderer" content="webkit">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            
              </head>
              <body>
            
                        <!-- 引入layui的body部分-->
               <div th:fragment="menu" class="layui-layout layui-layout-admin">
                     <div class="layui-header">
                    <div class="layui-logo layui-hide-xs layui-bg-black">logo</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                  <!-- 移动端显示 -->
                  <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                  </li>
            
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
                  <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
                  <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                      <dd><a href="">menu 11</a></dd>
                      <dd><a href="">menu 22</a></dd>
                      <dd><a href="">menu 33</a></dd>
                    </dl>
                  </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                  <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                      <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                      tester
                    </a>
                    <dl class="layui-nav-child">
                      <dd><a href="">Your Profile</a></dd>
                      <dd><a href="">Settings</a></dd>
                      <dd><a href="">Sign out</a></dd>
                    </dl>
                  </li>
                  <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                      <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                  </li>
                </ul>
              </div>
            
              <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                  <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                  <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                      <a class="" href="javascript:;">中国疫情数据可视化展示</a>
                      <dl class="layui-nav-child">
                        <dd><a href="/">中国疫情地图</a></dd>
                        <dd><a href="/toPie">中国疫情饼图</a></dd>
                        <dd><a href="/toBar">中国疫情柱状图</a></dd>
                        <dd><a href="/toLine">中国疫情折线</a></dd>
                        <dd><a href="/toGlobal">全球疫情地图</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item">
                      <a href="javascript:;">疫情数据管理</a>
                      <dl class="layui-nav-child">
                        <dd><a href="/toChinaManage">中国疫情数据管理</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                    <li class="layui-nav-item"><a href="">the links</a></li>
                  </ul>
                </div>
              </div>
            
            
            
              <div class="layui-footer">
                <!-- 底部固定区域 -->
                底部固定区域
              </div>
            </div>
            
            
            
              </body>
            </html>