Conditional query and data query

1. Backend

1.controller layer

package com.like.controller;


import com.like.common.CommonDto;
import com.like.entity.User;
import com.like.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

     @Resource
     private UserService userService;
     
     @GetMapping("/getList")
     public CommonDto getList(){
          CommonDto commonDto = new CommonDto();
          List<User> userList = userService.getList();
          commonDto.setContent(userList);
          return commonDto;
     }
}

2.service layer

package com.like.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.like.entity.User;
import java.util.List;

public interface UserService extends IService<User> {
     List<User> getList();

}

QueryWrapper is a query tool class launched before Mybatis-plus 3.0.7 version. Different from the usage of LambdaQueryWrapper, QueryWrapper needs to use SQL statements to construct query conditions. 

package com.like.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.like.entity.User;
import com.like.mapper.UserMapper;
import com.like.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {

     @Resource
     private UserMapper userMapper;
     @Override
     public List<User> getList() {
          QueryWrapper<User> queryWrapper = new QueryWrapper<>();
          List<User> selectList = userMapper.selectList(queryWrapper);
          return selectList;
     }
}

2. Front-end

1. Display data at startup

First, write the get request of axios. Note that methods, created and data are at the same level. The author made this small mistake, which led to ten thousand years of debugging. I hope everyone can learn from it.

methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getUserList(){
      this.axios.get("http://localhost:3333/user/getList").then((resp)=>{
        console.log(resp,'resp');
      });
    }
  },
  created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来
    this.getUserList();
  }

In this way, after starting the front-end project, a get request is immediately sent to the back-end, and the browser response data is as follows

Obviously, the data we need is in the content of data. At this time, we only need to make tableData=resp.data.content in data

   getUserList(){
      this.axios.get("http://localhost:3333/user/getList").then((resp)=>{
        console.log(resp,'resp');
        this.tableData = resp.data.content;
      });
   }

At this time, all the data from our database will be displayed on the page.

 2.Conditional query

Now the effect we need is to click query to trigger conditional query, that is, query user information based on name.

Add parameter name to the getUserList method

   getUserList(){
      this.axios.get("http://localhost:3333/user/getList",{
        params:{
          name:this.query.name  //参数让其等于输入框输入的name
        }
      }).then((resp)=>{
        console.log(resp,'resp');
        this.tableData = resp.data.content;
      });
   }

Add a click event to the button and click to trigger this method

<el-button type="primary" @click="getUserList">查询</el-button>

When we click the query button, we can see that there is a response from the front end, and the get request in the network has parameters, so that we can write the back-end code

The back-end interface code logic is perfected

 @Override
     public List<User> getList(User user) {
          LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
          //判断前端是否传来有参数，如果有参数，就使用这个构造条件
          if (ObjectUtils.isNotEmpty(user.getName())) {
               lambdaQueryWrapper.like(User::getName,user.getName());
          }
          List<User> userList = userMapper.selectList(lambdaQueryWrapper);
          return userList;
     }

3. Added clearing effect to the input box

<el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>