若依前后端分离版怎样修改主页面显示请求的SpringBoot后台数据

场景

使用若依的前后端分离版，本来的首页效果是

现在如果要根据具体业务实现从后台获取要显示的数据实现类似下面的效果

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先在前端项目中找到主页面显示的地方。

在views/dashboard/PanelGroup.vue

修改页面布局为自己想要的布局，去掉没必要的，添加想要的。

比如下面的这些示例代码

    <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="clipboard" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">本月调动人员</div>
          <count-to :start-val="0" :end-val="indexData.byddry" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="email" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">待补卡人员</div>
          <count-to :start-val="0" :end-val="4562" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
        <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="druid" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">转岗培训人员</div>总人数：
          <count-to :start-val="0" :end-val="indexData.zgpxryzrs" :duration="2600" class="card-panel-num" />
          <br />到期人数：
          <count-to :start-val="0" :end-val="indexData.zgpxrydqrs" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>

然后就是实现在页面一加载完就去请求后台数据获取要显示的数据。

首先声明一个用来存储首页数据的数组

export default {
  components: {
    CountTo,
  },
   data() {
    return {
      indexData:[]
      }
    },

使用indexData用来存储主页数据。

然后在页面一加载完之后就去请求后台获取数据，所以添加created函数。

  created() {

   this.getList().then((response) => {
     debugger
     console.log(response.data)
        this.indexData = response.data;
      });
    console.log(this.indexData);
  },

这样在页面加载完之后就会执行getList方法，此方法会去请求后台数据并将获取的数据赋值

给上面声明的数组indexData。

在请求后台数据的方法getList中

    getList() {
    return request({
      url: '/getIndexData',
      method: 'get'
    })
    },

发送get请求到后台并将请求的数据返回。

当然需要提前引入request

import request from '@/utils/request'

以上部分的完整示例代码

<script>
import CountTo from "vue-count-to";
import request from '@/utils/request'

export default {
  components: {
    CountTo,
  },
   data() {
    return {
      indexData:[]
      }
    },
  created() {

   this.getList().then((response) => {
     debugger
     console.log(response.data)
        this.indexData = response.data;
      });
    console.log(this.indexData);
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
    },
    getList() {
      debugger
    return request({
      url: '/getIndexData',
      method: 'get'
    })
    },
  },
};
</script>

在请求到后台数据后就是将获取的数据作为对应的页面的count-to组件的end-val去

显示，比如

        <div class="card-panel-description">
          <div class="card-panel-text">本月调动人员</div>
          <count-to :start-val="0" :end-val="indexData.byddry" :duration="2600" class="card-panel-num" />
        </div>

直接通过indexData.byddry来进行赋值显示。

其中byddry要与后台返回的对象的属性一致。

然后就是对应的请求后台数据的接口。

来到后台SpringBoot后台项目中在某目录下新建一个Controller和 model

这里在com.ruoyi.project下新建index目录，并在此目录下新建IndexController和IndexModel

其中IndexModel就是用来存储数据的model对象

/**
 * 首页Model
 *
 */
public class IndexModel
{
    private static final long serialVersionUID = 1L;


    @ApiModelProperty(value = "本月不能满勤人员")
    private int bybnmqry;

    @ApiModelProperty(value = "本月调动人员")
    private int byddry;

    @ApiModelProperty(value = "待补卡人员")
    private int dbkry;

    @ApiModelProperty(value = "合同到期人员")
    private int htdqry;

    @ApiModelProperty(value = "技能鉴定到期人员")
    private int jnjddqry;

 

    private int zgpxrydqrs;

}

以上省略get和set方法，具体属性根据自己的需要定义。

然后在IndexController中

@RestController
public class IndexController
{
    @Autowired
    private IDpDdjlService dpDdjlService;

    @Autowired
    private IHtHtcxService htHtcxService;

    @Autowired
    private IRyjnService ryjnService;

    @Autowired
    private IYxrcService yxrcService;

    @Autowired
    private IDpPxryService dpPxryService;
    /**
     * 生成验证码
     */
    @GetMapping("/getIndexData")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        IndexModel indexModel = new IndexModel();
        //获取本月调动人员
        indexModel.setByddry(dpDdjlService.selectCurrentMonthNum());
        //获取合同到期人员
        indexModel.setHtdqry(htHtcxService.selectHtDqNum());
        //获取技能鉴定到期人员
        indexModel.setJnjddqry(ryjnService.selectJnjsDqNum());
        //获取优秀技术人才
        indexModel.setYxjsrc(yxrcService.selectYxjsrcNum());
        return AjaxResult.success(indexModel);
    }
}

引入相关业务的service以及调用相应的方法获取统计的数据，并给model赋值，然后返回给前端。

关于统计符合条件的数量的sql可以参考如下

    <select id="selectPxryDqNum" resultType="Integer">
        SELECT
            count( * )
        FROM
            (
            SELECT
                 gh
            FROM
                dp_pxry
            WHERE
                ljsc = 0
                AND date_format( jsrq, '%y%m%d' ) > date_format(#{today}, '%y%m%d' )
            GROUP BY
            gh
            ) a
    </select>

其中today是传递的今天时间参数，gh是根据工号分组，因为是统计人数。

最后再查询人数，记得要给表设置别名。