[Separation of front-end and back-end] Background query_Front drop-down box display

Show results

insert image description here

business logic description

This business logic mainly uses SpringBoot to query data from the background, and then display it on the front page. The entire project is separated from the front and back ends.

code behind

Because it is a customized query, the Mybatis-plus framework cannot directly query the calling method, so it needs to be defined in Mapper.xml here.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.*.system.mapper.DMapper">
<!-- 定义select语句 -->
    <select id="findDAndCount" resultType="Dment">
        select dept.id,
               dept.name,
               IFNULL((select count(*) from d doc
               where doc.depart_id = dept.id and
               doc.deleted = 0 group by depart_id),0)
              as deptCount from depart dept;
    </select>
</mapper>

Note that the deptCount attribute is introduced in Mapper.xml above, so this attribute needs to be defined in the entity class of Dment

Regarding the keyword TableField, you can view the Mybatis-plus documentation

    @ApiModelProperty(value = "分组查询中的部门人数")
    //表示在Mysql表中没有定义的，但新引入的属性，所以备注 exist=false
    @TableField(exist = false)
    private Integer  deptCount;

Mapper.java configuration

Defining methods in Mapper

public interface DMapper extends BaseMapper<Dment> {
    
    
    List<Dment>findDAndCount();
}

Service layer code

public interface DService extends IService<Dment> {
    
    
    List<Dment> findDAndCount();
}

ServiceImp layer code

Implement Service code

@Service
public class DServiceImpl extends ServiceImpl<DMapper, Dment> implements DService {
    
    

    @Override
    public List<Dment> findDAndCount() {
    
    
        return this.baseMapper.findDAndCount();
    }
}

Controller layer code

@Api(value = "部门管理",tags="部门管理接口")
@RestController
@RequestMapping("/dment")
public class DController {
    
    
    @Autowired
    private DService dService;
    @ApiOperation(value = "查询部门及人数", notes="从部门表中分组查出用户人数")
    @GetMapping("/findDAndCount")
    public Result findDAndCount(){
    
    
        List<Dment> dments = dService.findDAndCount();
        if(ds.size()==0){
    
    
            throw new BusinessException(ResultCode.DEPARTMENT_NOT_EXIST.getCode(),
                    ResultCode.DEPARTMENT_NOT_EXIST.getMessage());
        }
        return Result.ok().data("ds",ds);
    }
}

front desk code

1 JS code

Add the front-end dment.js file. This js mainly handles the request method in DController. The
insert image description here
code is as follows:

import request from '../utils/request'
/*
后面每次请求都需要携带token
 */
export const findDAndCount = () => {
    
    
  return request({
    
    
    url: '/dment/findDAndCount',
    method: 'get'
  })
}

2 For the detailed code of the page, please refer to the click . Only the newly added code is recorded here.

<!-- template 中的代码 -->
  <el-option
              v-for="item in ds"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{
    
    {
    
     item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{
    
    {
    
     item.deptCount }}</span>
              </span>
    </el-option>
    <!-- JS 中代码-->
    data(){
    
    
    /* 即新增 ds 列表 */
    return ds: [],
    }
    methods:{
    
    
      created () {
    
    
    // 创建组件的时候，调用部门信息查询
    this.getDAndCount();
  },
     async getDeptAndCount(){
    
    
      const {
    
    data} = await findDAndCount();
      //  ds 为 Controller中传递的key值
      this.ds = data.data.ds;
      }
    }

test