07---vue前端实现增删改查

前端VUE通过请求后端实现增删改查，文末会有前端完整代码

1、实现查询功能

一、实现三个条件一起查询

• 后台需要实现这三个条件的模糊查询

1. UserController.java

   //分页查询
    @GetMapping("/page")
    public IPage<User> findPage(@RequestParam Integer pageNum,
                                @RequestParam Integer pageSize,
                                @RequestParam(defaultValue = "") String username,
                                @RequestParam(defaultValue = "") String email,
                                @RequestParam(defaultValue = "") String address){
      return userService.findPage(pageNum,pageSize,username,email,address);

    }

2. UserService.java

   public IPage<User> findPage( Integer pageNum,
                                 Integer pageSize,
                                  String username,
                                 String email,
                                 String address) {
        IPage<User> page = new Page<>(pageNum, pageSize);
        QueryWrapper<User>queryWrapper=new QueryWrapper<>();
        if (! "".equals(username)){
            queryWrapper.like("username",username);
        }
        if (! "".equals(email)){
            queryWrapper.like("email",email);
        }
        if (! "".equals(address)){
            queryWrapper.like("address",address);
        }
        //增加的排在前面，倒序
        queryWrapper.orderByDesc("id");
        return this.page(page,queryWrapper);
    }

3. 前端请求这个page接口，即可实现查询

2、实现批量删除

1. UserController.java

    //批量删除
    @PostMapping ("/del/batch")
    public boolean deleteBatch(@RequestBody List<Integer>ids){
        return userService.removeBatchByIds(ids);
    }

2. 前端请求这个接口即可实现批量删除

3、增、删、改

1. 后端代码之前已经写过

package com.xqh.controller;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.xqh.entity.User;
import com.xqh.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@RestController  //返回json
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;


    //插入和修改操作
    @PostMapping
    public boolean save(@RequestBody User user){
        return userService.saveOrUpdate(user);
    }

    //查询所有数据
    @GetMapping
    public List<User> findAll(){
        return userService.list();
    }

    //删除
    @DeleteMapping("/{id}")
    public boolean delete(@PathVariable Integer id){
        return userService.removeById(id);
    }

 

前端只需要请求响应的接口即可

4、使用axios请求后端

1. 先下载axios组件

npm install axios --save

2. 创建一个utils包，在里面创建一个request.js文件

import axios from 'axios'

const request = axios.create({
	baseURL: 'http://localhost:8081',    //这是请求后端的前面那串网址
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

3. main.js中注册

import request from "@/utils/request"

4. 然后就可以在Home.vue中使用axios调用接口了，如

 load(){
      request.get("/user/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        username:this.username,
        email:this.email,
        address:this.address

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.records
        this.total=res.total 
      })
     }

5、前端Vue完整代码

Home.vue

6、测试功能

1. 在前端页面上测试各功能能否正常使用