文章目录
后端
数据库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);
},
}