若依前后端分離版怎樣修改主頁面顯示請求的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是根據工號分組，因為是統計人數。

最后再查詢人數，記得要給表設置別名。