文章目录

后端
- 数据库sql语句及查询
- mapper.xml文件
- domain层 MyEmp.java文件中
- 在mapper.java文件下添加接口
- 在service层加上接口
- 在Controller层添加
- 完成后端部署
- 测试代码是否能够拉取至前端
前端
- 在js文件中
- 在vue文件中
- 注意：2、3、4中bmlist都是同一个数组
- 前端测试
- 可以看到在前端也可以获取到数据

后端

数据库sql语句及查询

select a.dept_no as bm,a.date as sj,sum(a.score) as fs from gra_empmsg a,sys_dept bwhere a.dept_no=b.dept_id GROUP BY date ORDER BY date

结果

mapper.xml文件

resultType中返回的是domanin下的MyEmp的实体类

  <select id="selectbm" resultType="com.ruoyi.system.domain.MyEmp" >select a.dept_no as bm,a.date as sj,sum(a.score) as fs from gra_empmsg a,sys_dept bwhere a.dept_no=b.dept_id GROUP BY date ORDER BY date</select>

domain层 MyEmp.java文件中

定义类，并且加入set.get方法

package com.ruoyi.system.domain;import java.util.Date;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;//@Data
//@AllArgsConstructor
//@NoArgsConstructor
//@Accessors(chain = true)
public class MyEmp {private Long bm;private Date sj;private String fs;@Overridepublic String toString() {return "MyEmp [bm=" + bm + ", sj=" + sj + ", fs=" + fs + "]";}public Long getBm() {return bm;}public void setBm(Long bm) {this.bm = bm;}public Date getSj() {return sj;}public void setSj(Date sj) {this.sj = sj;}public String getFs() {return fs;}public void setFs(String fs) {this.fs = fs;}public MyEmp(Long bm, Date sj, String fs) {super();this.bm = bm;this.sj = sj;this.fs = fs;}public MyEmp() {super();// TODO Auto-generated constructor stub}
}

在mapper.java文件下添加接口

public List<MyEmp> selectbm();

在service层加上接口

  public List<MyEmp> selectbm();

在对应的impl下添加实现方法

@Overridepublic List<MyEmp> selectbm() {// TODO Auto-generated method stubreturn graEmpmsgMapper.selectbm();}

在Controller层添加

 //选择部门积分表汇总@PostMapping("/selectbm")public List<MyEmp> getselectlist(){List<MyEmp> list=graEmpmsgService.selectbm();System.out.println(list);return list;}

完成后端部署

测试代码是否能够拉取至前端

1、在若依前后端分离版中，可以在framework下的config下的SecurityConfig.java下添加
这个可以绕过登录去访问若依后台数据

.antMatchers("/system/empmsg/selectbm").anonymous()

2、可以用postman测试所拉取的数据

如上图所示，可以成功拉取数据

前端

在js文件中

脸上后端controller对应的@PostMapping地址


//查询部门所有积分汇总
export function selectbm(query) {return request({url: '/system/empmsg/selectbm',method: 'post',params: query})
}

在vue文件中

1、首先导入selectbm方法

import {selectbm } from "@/api/system/empmsg";

2、在methods中加入get方法

//查询部门汇总积分详情getbmlist(){selectbm().then(response=> {this.bmlist=response;})},

3、在data return中定义bmlist数组

 bmlist: [],

4、在created中添加getbmlist();

  created() {this.getbmlist();},

注意：2、3、4中bmlist都是同一个数组

前端测试

首先在页面添加一个按钮并增加点击事件

 <el-button type="warning" plain icon="el-icon-download" size="mini" @click="console">点我</el-button>

在方法中添加对应的事件

  methods: {console(){  console.log("打印后台数据");console.log(this.bmlist);},}

可以看到在前端也可以获取到数据

基于SpringBoot,vue从数据库到前端页面代码编写实战相关推荐

基于springboot+vue的水果销售系统附代码
本项目包含的功能有: 登录,注册,首页宣传图,分类展示水果信息,热门商品,网站公告,公告详情,推荐商品,物价商品,全部商品,购物车, 结算中心,收获人信息,我的订单,付款,订单明细,评价订单,用户信息 ...
java计算机毕业设计基于springboot+vue+elementUI的旅游网站(源码+数据库+Lw文档）
项目介绍旅游管理平台采用B/S模式,促进了旅游管理平台的安全.快捷.高效的发展.传统的管理模式还处于手工处理阶段,管理效率极低,随着用户的不断增多,传统基于手工管理模式已经无法满足当前用户需求,随着 ...
基于Springboot+vue电影院会员管理系统(源代码+数据库+文档)025
部分代码地址 https://gitee.com/ynwynwyn/cinema-public 基于Springboot+vue电影院会员管理系统(源代码+数据库+文档) 一.系统介绍 cinema项 ...
基于SpringBoot+vue的民宿预定管理系统(源代码+数据库) 033
部分代码地址 https://gitee.com/ynwynwyn/mingsu-public 基于SpringBoot+vue的民宿预定管理系统一.系统介绍本项目是前后端分离开发前台: 民宿预 ...
基于Springboot+vue的小米商城(源代码+数据库)056
部分代码地址 https://gitee.com/ynwynwyn/xiaomiMall-public 基于Springboot+vue的小米商城(源代码+数据库) 一.系统介绍本项目分为管理员与普 ...
基于springboot+vue的酒店预订管理系统(源代码+数据库)072
部分代码地址 https://gitee.com/ynwynwyn/hotelVuePublic 基于springboot+vue的酒店预订管理系统(源代码+数据库)072 一.系统介绍本项目前后端 ...
基于Springboot+vue的电影购票系统(源代码+数据库)057
代码地址 https://gitee.com/ynwynwyn/movie-puchase2-public 基于Springboot+vue的电影购票系统(源代码+数据库) 一.系统介绍本项目前后端 ...
基于springboot+vue的宠物交易/领养系统 (源代码+数据库) 008
代码地址 https://gitee.com/ynwynwyn/pettrading-main-public 基于springboot+vue的宠物交易/领养系统 (源代码+数据库) 一.系统介绍本 ...
基于springboot+vue的房屋租赁统(源代码+数据库)071
部分代码地址 https://gitee.com/ynwynwyn/houserentVuePublic 基于springboot+vue的房屋租赁系统(源代码+数据库) 一.系统介绍本项目前后端分 ...

基于SpringBoot,vue从数据库到前端页面代码编写实战