89：第七章：开发前台首页、作家个人展示页、粉丝等功能：10：【前台，作家中心：粉丝比例柱状图、饼状图；粉丝地域分布】（前端图表使用Echarts实现；）

说明：

（1）本篇博客内容比较简单；只有一点：论及早掌握前端的重要性~~~

目录

零：本篇博客，内容说明；

一：开发【查询男性粉丝数、女性粉丝数，接口】；

1.在【api】接口工程的MyFansControllerApi接口中，定义一个接口；

2.在【user】用户服务的MyFansController类中，去实现这个接口；

3.在【user】用户服务的MyFansService接口中，定义一个查询男女粉丝数量的方法；

4.在【user】用户服务的MyFansServiceImpl类中，去实现查询男女粉丝数量的方法；

5.效果；

二：开发【粉丝地域分布数，接口】；

1.在【api】接口工程的MyFansControllerApi接口中，定义一个接口；

2.在【user】用户服务的MyFansController类中，去实现这个接口；

3.在【user】用户服务的MyFansService接口中，定义一个查询男女粉丝数量的方法；

4.在【user】用户服务的MyFansServiceImpl类中，去实现查询男女粉丝数量的方法；

5.效果；

---

零：本篇博客，内容说明；

我们开发好后，其长这样：

（1）为了实现这些效果，前端采用的是Echarts插件；（以前是百度的，后来百度捐赠给了Apache基金会）

（2）在【监听器四：综合案例：请求流量分析（重要！！！）】、【百度开源的绘图JS组件：Echarts组件（本篇博客仅仅是简介，入门级别）】中对Echarts作过入门级介绍；

本项目中，前端使用Echarts的基本套路：

……………………………………………………

……………………………………………………

……………………………………………………

然后，我们需要做的，就是开发对应的接口，查询出数据，交给前端去渲染：

……………………………………………………

---

一：开发【查询男性粉丝数、女性粉丝数，接口】；

1.在【api】接口工程的MyFansControllerApi接口中，定义一个接口；

    /**
     * 查询男性粉丝数量、女性粉丝数量；
     * @param writerId
     * @return
     */
    @ApiOperation(value = "查询男女粉丝数量", notes = "查询男女粉丝数量", httpMethod = "POST")
    @PostMapping("/queryRatio")
    public GraceJSONResult queryRatio(@RequestParam String writerId);

说明：

（1）需要和前端保持一致；

2.在【user】用户服务的MyFansController类中，去实现这个接口；

    /**
     * 查询男性粉丝数量、女性粉丝数量；
     * @param writerId
     * @return
     */
    @Override
    public GraceJSONResult queryRatio(String writerId) {
 
        //调用service层方法，分别查询男女粉丝数量
        int manCounts = myFansService.queryFansCount(writerId, Sex.man);
        int womanCounts = myFansService.queryFansCount(writerId, Sex.woman);
 
        //根据前端对返回数据格式的要求，创建FansCountsVO对象
        FansCountsVO fansCountsVO = new FansCountsVO();
        fansCountsVO.setManCounts(manCounts);
        fansCountsVO.setWomanCounts(womanCounts);
 
        return GraceJSONResult.ok(fansCountsVO);
    }

说明：

（1）为了满足前端对返回数据的要求，我们创建了FansCountsVO实体类，来包装返回给前端的数据；

3.在【user】用户服务的MyFansService接口中，定义一个查询男女粉丝数量的方法；

    /**
     * 查询某作者的，某个性别的粉丝数
     * @param writerId
     * @param sex
     * @return
     */
    public Integer queryFansCount(String writerId, Sex sex);

4.在【user】用户服务的MyFansServiceImpl类中，去实现查询男女粉丝数量的方法；

    /**
     * 查询某作者的，某个性别的粉丝数
     * @param writerId
     * @param sex
     * @return
     */
    @Override
    public IntegerqueryFansCount(String writerId, Sex sex) {
        Fans fans = new Fans();
        fans.setWriterId(writerId);
        fans.setSex(sex.type);
 
        int count = fansMapper.selectCount(fans);//去查询数量
        return count;
    }

5.效果；

（1）先install一下整个项目；（2）记得使用SwitchHost开启虚拟域名映射；（3）使用Tomcat启动前端项目；（4）然后，启动后端项目； 

PS：我们在设计fans表的时候，添加了很多冗余的字段；现在，能感受到这些冗余字段带来的好处了；即，为了实现这儿的业务，我只查询fans表就够了，而不用多表关联查询了；

---

二：开发【粉丝地域分布数，接口】；

1.在【api】接口工程的MyFansControllerApi接口中，定义一个接口；

    /**
     * 查询粉丝地域分布数据；
     * @param writerId
     * @return
     */
    @ApiOperation(value = "查询粉丝地域分布数据", notes = "查询粉丝地域分布数据", httpMethod = "POST")
    @PostMapping("/queryRatioByRegion")
    public GraceJSONResult queryRatioByRegion(@RequestParam String writerId);

说明：

（1）需要和前端保持一致；

2.在【user】用户服务的MyFansController类中，去实现这个接口；

    /**
     * 查询粉丝地域分布数据；
     * @param writerId
     * @return
     */
    @Override
    public GraceJSONResult queryRatioByRegion(String writerId) {
        List list = myFansService.queryRegionRatioCounts(writerId);
        return GraceJSONResult.ok(list);
    }

说明：

（1）为了满足前端对返回数据的要求，我们创建了RegionRatioVO实体类，来包装返回给前端的数据；

 

3.在【user】用户服务的MyFansService接口中，定义一个查询男女粉丝数量的方法；

    /**
     * 查询某用户的、粉丝的地域分布数据；
     * @param writerId
     * @return
     */
    public List queryRegionRatioCounts(String writerId);

4.在【user】用户服务的MyFansServiceImpl类中，去实现查询男女粉丝数量的方法；

    //这儿的循环策略：可以改成在mybatis的SQL中去循环；同时，后续我们将采用另一种策略，即在Elasticsearch中去做；
    public static final String[] regions = {"北京", "天津", "上海", "重庆",
            "河北", "山西", "辽宁", "吉林", "黑龙江", "江苏", "浙江", "安徽", "福建", "江西", "山东",
            "河南", "湖北", "湖南", "广东", "海南", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "台湾",
            "内蒙古", "广西", "西藏", "宁夏", "新疆",
            "香港", "澳门"};
    /**
     * 查询某用户的、粉丝的地域分布数据；
     * @param writerId
     * @return
     */
    @Override
    public List queryRegionRatioCounts(String writerId) {
        //还是那句话，简单的条件查询，就没必要使用Example了；tkmybatis提供了很多根据具体对象去查询的方法；
        Fans fans = new Fans();
        fans.setWriterId(writerId);
        List list = new ArrayList<>();//创建List，用于存储所有的数据
 
        //遍历所有省份，去分别获取该省份中的粉丝人数；
        for (String region : regions) {
            fans.setProvince(region);
            Integer count = fansMapper.selectCount(fans);//查询出该省份中的，粉丝人数；
 
            //构建VO，并存到List中；
            RegionRatioVO regionRatioVO = new RegionRatioVO();
            regionRatioVO.setName(region);
            regionRatioVO.setValue(count);
            list.add(regionRatioVO);
 
        }
        return list;
    }

5.效果；

（1）先install一下整个项目；（2）记得使用SwitchHost开启虚拟域名映射；（3）使用Tomcat启动前端项目；（4）然后，启动后端项目；