场景

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

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

注：

博客：
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后台数据相关推荐

若依前后端分离版怎样修改主页面和浏览器上的图标和标题
场景使用若依的前后端分离版,,其默认的图标和标题等如下如果想要修改为自己想要的标题和图标,实现类似下面的效果注: 博客: https://blog.csdn.net/badao_liumang_ ...
若依前后端分离版手把手教你本地搭建环境并运行项目
场景 RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架. RuoYi 官网地址:http://ruoyi.vip RuoYi 在线文档:http://doc.ruo ...
若依前后端分离版怎样根据数据库生成代码并快速实现某业务的增删改查
场景使用若依的前后端分离版,怎样使用其代码生成实现对单表的增删改查导出的业务. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程 ...
若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出
场景使用若依前后端分离版实现Excel的导入和导出. 前端:Vue+ElementUI 后端:SpringBoot+POI+Mysql 注: 博客: https://blog.csdn.net/ba ...
使用SpringBoot + Vue (若依前后端分离版) 写项目的一些总结(持续更新...)
使用SpringBoot + Vue(若依前后端分离版) 写项目的一些总结获取Redis服务 @Autowired private RedisCache redisCache; String cap ...
若依前后端分离版怎样去掉登录验证码
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离版本的配置上面在 ...
若依前后端分离版数据库已经存在的字典添加一条后刷新没作用，必须清除Redis缓存
场景使用若依的前后端分离版,前端下拉框的使用直接查询的是字典表中的数据. 对于某个类型的字典如果之前已经添加过并使用过,后来想要再添加一条此类型的字典. 在数据库中添加后,前端刷新下,发现没有获取到 ...
从零入门开源框架---若依(前后端分离版)
一.若依是什么? 若依它就是一个开源项目,别人写好的代码,我们拿来进行二次开发,它主要是做数据和权限管理系统. 二.使用背景任何公司的各种大的项目必然需要一个后台权限管理系统,这是必然的,但是如果不 ...
Ruoyi-Vue若依前后端分离版 2022年5月基于代码生成器的新模块添加
Ruoyi-Vue若依前后端分离版 2022年5月基于代码生成器的新模块添加在ruoyi数据库的基础上.编辑好自己的数据库表启动ruoyi前后端,进系统使用代码生成器将生成的代码导入到现有的项 ...

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

场景

实现

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

最新文章

热门文章