后端

数据库sql语句及查询

select a.dept_no as bm,a.date as sj,sum(a.score) as fs from gra_empmsg a,sys_dept b
        where 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 b
        where 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;
	
	@Override
	public 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下添加实现方法

@Override
	public List<MyEmp> selectbm() {
		// TODO Auto-generated method stub
		return 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);
    },
    }

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