java controller接口通过map传参 java传参用map还是对象

转载

mob6454cc68959c 2024-06-11 14:28:02

文章标签 java ajax 数据折线图 文章分类 Java 后端开发

需求：通过查询数据库，统计每个省份的用户数量，以折线图的形式展示

整理思路：

1 数据以折线图的形式展示在页面上，需要将每个省份的人数通过ajax传递到页面

2 如何将数据响应回页面呢？通过SQL语句查询以省份分组获取数据

3 那查询之后的数据该用什么存储呢？首先想到的是另外定义一个DTO包含省份，数量两个属性刚好对应查询结果，这样写似乎也挺好的

java controller接口通过map传参 java传参用map还是对象_ajax

然而吾有一问：如果有很多个类似的查询需求呢？难道要每一个查询都创建一个DTO吗？创建出来的DTO只有收参的时候使用一次，这样是不是在浪费各种资源！！！！

emmm 说得有道理，

mybatis提供了通过Map收参的机制

今天就来用Map直接取代对象形式的收参
注意事项：

如果使用Map 返回值必须是List
Map的 json 格式和对象是一样的

使用

创建dao接口书写查询方法
书写SQL，返回类型为map 获取省份以及每个省份的人数

3.页面展示时只需要每个省份的人数，所以我将人数取出来在响应回页面，当然也可以将查询得到的map响应回页面，然后在页面获取map中的人数数据

查询的时候给数据书写的别名为value 在此处通过map.get()方法获取value的值存储到List集合中

java controller接口通过map传参 java传参用map还是对象_java_02

打印一下获取到的map是不是我想要的看到了才放心（截取一部分数据）

java controller接口通过map传参 java传参用map还是对象_ajax_03

4. 通过controller层调用业务层方法将数据响应回页面`

java controller接口通过map传参 java传参用map还是对象_数据_04

5. 书写折线图相关页面代码

先书写一个div块

<div id="proCount" style="width:900px;height:300px;"></div>

借助ajax发送请求获取数据

var ProChart = echarts.init(document.getElementById("proCount"));
       $.ajax({
           url:"${pageContext.request.contextPath}/user/getProCount",
           type:"post",
           dataType:"json",
           success:function(result) {
               //指定图标的配置项和数据
               console.log(result)
               var option = {
                   //图标标题
                   title: {
                       text: "持明法洲各省份人数"
                   },
                   //工具栏  暂时没有用到
                   tooltip: {},
                   //数据所代表的含义
                   legend: {
                       data: ['数量']
                   },
                   //X轴 坐标的名称
                   xAxis: {
                       data: ['云南', '内蒙古', '北京', '台湾', '吉林', '四川', '天津', '宁夏', '安徽', '山东',
                           '山西', '广东', '广西', '新疆'
                           , '江苏', '江西', '河北', '河南', '浙江', '海南', '湖北', '湖南', '澳门', '甘肃', '福建'
                           , '西藏', '贵州', '辽宁', '重庆', '陕西', '青海', '香港', '黑龙江']
                   },
                   //y轴单位程度根据代码自动生成
                   yAxis: {},
                   //给X轴赋值
                   series: [{
                       name: '数量',
                       //line  为折线图  bar为柱状图  pie为饼状图
                       type: 'line',
                       data: result
                   }]
               };
               ProChart.setOption(option);
           }
       });