場景

使用若依的前后端分離版，本來的首頁效果是

?

現在如果要根據具體業務實現從后臺獲取要顯示的數據實現類似下面的效果

?

注：

博客：
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) => {debuggerconsole.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) => {debuggerconsole.log(response.data)this.indexData = response.data;});console.log(this.indexData);},methods: {handleSetLineChartData(type) {this.$emit("handleSetLineChartData", type);},getList() {debuggerreturn 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 {@Autowiredprivate IDpDdjlService dpDdjlService;@Autowiredprivate IHtHtcxService htHtcxService;@Autowiredprivate IRyjnService ryjnService;@Autowiredprivate IYxrcService yxrcService;@Autowiredprivate 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">SELECTcount( * )FROM(SELECTghFROMdp_pxryWHEREljsc = 0AND date_format( jsrq, '%y%m%d' ) > date_format(#{today}, '%y%m%d' )GROUP BYgh) a</select>

其中today是傳遞的今天時間參數，gh是根據工號分組，因為是統計人數。

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

總結

以上是生活随笔為你收集整理的若依前后端分离版怎样修改主页面显示请求的SpringBoot后台数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。