場景

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

?

現(xiàn)在如果要根據(jù)具體業(yè)務(wù)實現(xiàn)從后臺獲取要顯示的數(shù)據(jù)實現(xiàn)類似下面的效果

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

首先在前端項目中找到主頁面顯示的地方。

在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">本月調(diào)動人員</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">轉(zhuǎn)崗培訓(xùn)人員</div>總?cè)藬?shù)：<count-to :start-val="0" :end-val="indexData.zgpxryzrs" :duration="2600" class="card-panel-num" /><br />到期人數(shù)：<count-to :start-val="0" :end-val="indexData.zgpxrydqrs" :duration="2600" class="card-panel-num" /></div></div></el-col>

然后就是實現(xiàn)在頁面一加載完就去請求后臺數(shù)據(jù)獲取要顯示的數(shù)據(jù)。

首先聲明一個用來存儲首頁數(shù)據(jù)的數(shù)組

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

使用indexData用來存儲主頁數(shù)據(jù)。

然后在頁面一加載完之后就去請求后臺獲取數(shù)據(jù)，所以添加created函數(shù)。

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

這樣在頁面加載完之后就會執(zhí)行g(shù)etList方法，此方法會去請求后臺數(shù)據(jù)并將獲取的數(shù)據(jù)賦值

給上面聲明的數(shù)組indexData。

在請求后臺數(shù)據(jù)的方法getList中

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

發(fā)送get請求到后臺并將請求的數(shù)據(jù)返回。

當然需要提前引入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>

在請求到后臺數(shù)據(jù)后就是將獲取的數(shù)據(jù)作為對應(yīng)的頁面的count-to組件的end-val去

顯示，比如

??????? <div class="card-panel-description"><div class="card-panel-text">本月調(diào)動人員</div><count-to :start-val="0" :end-val="indexData.byddry" :duration="2600" class="card-panel-num" /></div>

直接通過indexData.byddry來進行賦值顯示。

其中byddry要與后臺返回的對象的屬性一致。

然后就是對應(yīng)的請求后臺數(shù)據(jù)的接口。

來到后臺SpringBoot后臺項目中在某目錄下新建一個Controller和 model

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

其中IndexModel就是用來存儲數(shù)據(jù)的model對象

/*** 首頁Model**/ public class IndexModel {private static final long serialVersionUID = 1L;@ApiModelProperty(value = "本月不能滿勤人員")private int bybnmqry;@ApiModelProperty(value = "本月調(diào)動人員")private int byddry;@ApiModelProperty(value = "待補卡人員")private int dbkry;@ApiModelProperty(value = "合同到期人員")private int htdqry;@ApiModelProperty(value = "技能鑒定到期人員")private int jnjddqry;private int zgpxrydqrs;}

以上省略get和set方法，具體屬性根據(jù)自己的需要定義。

然后在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();//獲取本月調(diào)動人員indexModel.setByddry(dpDdjlService.selectCurrentMonthNum());//獲取合同到期人員indexModel.setHtdqry(htHtcxService.selectHtDqNum());//獲取技能鑒定到期人員indexModel.setJnjddqry(ryjnService.selectJnjsDqNum());//獲取優(yōu)秀技術(shù)人才indexModel.setYxjsrc(yxrcService.selectYxjsrcNum());return AjaxResult.success(indexModel);} }

引入相關(guān)業(yè)務(wù)的service以及調(diào)用相應(yīng)的方法獲取統(tǒng)計的數(shù)據(jù)，并給model賦值，然后返回給前端。

關(guān)于統(tǒng)計符合條件的數(shù)量的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是傳遞的今天時間參數(shù)，gh是根據(jù)工號分組，因為是統(tǒng)計人數(shù)。

最后再查詢?nèi)藬?shù)，記得要給表設(shè)置別名。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。