前端VUE通过请求后端实现增删改查，文末会有前端完整代码
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); }- 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); }- 前端请求这个page接口，即可实现查询
2、实现批量删除
- UserController.java
//批量删除 @PostMapping ("/del/batch") public boolean deleteBatch(@RequestBody List<Integer>ids){ return userService.removeBatchByIds(ids); }- 前端请求这个接口即可实现批量删除
3、增、删、改
- 后端代码之前已经写过
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请求后端
- 先下载axios组件
npm install axios –save
- 创建一个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 " /> 
后台管理系统 导航一 选项4 选项4-1 导航二 选项4 选项4-1 导航三 选项4 选项4-1 Truthfully 个人信息 退出 首页 用户管理 搜索 重置 新增 批量删除 导入 导出 编辑 删除 取 消 确 定 import request from '@/utils/request'export default { name:'HomeView', data() { return { tableData:[], total: 0 , pageNum:1, pageSize:2, username:"", email:"", address:"", form:{}, dialogFormVisible:false, multipleSelection:[], collapseBtnClass:'el-icon-s-fold' , isCollapse:false, sideWidth:200 , logoTextShow:true, headerBg: 'headerBg' } }, created(){ // 请求分页查询数据 this.load() }, methods:{ collapse(){ //点击收缩按钮触发 this.isCollapse=!this.isCollapse if(this.isCollapse){ //收缩 this.sideWidth=64 this.collapseBtnClass='el-icon-s-unfold' this.logoTextShow=false }else{ //展开 this.sideWidth = 200 this.collapseBtnClass='el-icon-s-fold' this.logoTextShow=true } }, 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 }) }, save(){ request.post("/user",this.form).then(res=>{ if(res){ this.$message.success("保存成功!") this.dialogFormVisible=false this.load() }else{ this.$message.error("保存失败！") } }) }, handleAdd(){ this.dialogFormVisible=true this.form={} }, handleUpdate(row){ this.form={...row} this.dialogFormVisible=true }, handleDelete(id){ request.delete("/user/" + id).then(res=>{ if(res){ this.$message.success("删除成功!") this.load() }else{ this.$message.error("删除失败！") } }) }, delBatch(){ let ids=this.multipleSelection.map(v=>v.id) //把对象数组转化为id数组【1,2,3】 request.post("/user/del/batch",ids).then(res=>{ if(res){ this.$message.success("批量删除成功!") this.load() }else{ this.$message.error("批量删除失败！") } }) }, handleSelectionChange(val){ this.multipleSelection=val }, reset(){ this.username="" this.email="" this.address="" this.load() }, handleSizeChange(pageSize){ this.pageSize=pageSize this.load() }, handleCurrentChange(pageNum){ this.pageNum=pageNum this.load() } }}6、测试功能
- 在前端页面上测试各功能能否正常使用
