07---vue前端实现增删改查-创新互联

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

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十载时间我们累计服务了上千家以及全国政企客户，如玻璃隔断等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞美。1、实现查询功能

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

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

1. UserController.java

//分页查询
    @GetMapping("/page")
    public IPagefindPage(@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 IPagefindPage( Integer pageNum,
                                 Integer pageSize,
                                  String username,
                                 String email,
                                 String address) {IPagepage = new Page<>(pageNum, pageSize);
        QueryWrapperqueryWrapper=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 Listids){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 ListfindAll(){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. 在前端页面上测试各功能能否正常使用

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

文章名称：07---vue前端实现增删改查-创新互联
当前路径：http://cxhlcq.com/article/egpph.html