Springboot+vue后台管理系统-数据回显+增删改查的实现

上一篇文章已经基本搭建好了框架并且实现了与数据库的对接，我们这篇文章来讲解怎样完成数据的增删改查

首先是上一篇文章写的新增，但是数据没有回显在前端：

我们首先需要在后端写一个查询数据库数据的方法可以将数据显现出来：

我们这里是分页查询，所以需要给他传两个值，分别是当前页和每页条数：这里的我们默认不传参就是第一页然后十条数据

 /**
     * 查询数据 模糊查询
     */
    @GetMapping
    public Result findPage(
             @RequestParam(defaultValue = "1") Integer pageNum
            ,@RequestParam(defaultValue = "10") Integer pageSize
            ,@RequestParam(defaultValue = "") String search){

        LambdaQueryWrapper wrapper = Wrappers.lambdaQuery();
        if (StrUtil.isNotBlank(search)){
            wrapper.like(User::getNickName,search);
        }
        Page userPage = userMapper.selectPage(new Page<>(pageNum, pageSize),wrapper);
        return Result.success(userPage);
    }

然后我们在网页上可以看到这样的现象：

然后我们接下来在前端接收这些值：

  // 加载数据库数据进行渲染
    load(){
      request.get("/user",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

然后我们在初始的时候加载：

接下来就是增删改查的前后端代码：

后端：

package com.example.demo.controller;

import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.common.Result;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * @RestController:返回数据
 * @Controller：渲染界面
 */

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

    @Resource
    UserMapper userMapper;
    /**
     * 新增  @RequestBody:前台传过来的json转换为java对象
     * @return
     */
    @PostMapping
    public Result save(@RequestBody User user){
        if (user.getPassword() == null){
            user.setPassword("123456");
        }
        userMapper.insert(user);
        return Result.success();
    }

    /**
     * 查询数据 模糊查询
     */
    @GetMapping
    public Result findPage(
             @RequestParam(defaultValue = "1") Integer pageNum
            ,@RequestParam(defaultValue = "10") Integer pageSize
            ,@RequestParam(defaultValue = "") String search){

        LambdaQueryWrapper wrapper = Wrappers.lambdaQuery();
        if (StrUtil.isNotBlank(search)){
            wrapper.like(User::getNickName,search);
        }
        Page userPage = userMapper.selectPage(new Page<>(pageNum, pageSize),wrapper);
        return Result.success(userPage);
    }

    /**
     * 更新操作
     */
    @PutMapping
    public Result update(@RequestBody User user){

        userMapper.updateById(user);
        return Result.success();
    }


    /**
     * 删除操作
     */
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long id){
        userMapper.deleteById(id);
        return Result.success();
    }





}

前端：

项目截图：

到目前为止的项目地址：

链接：https://pan.baidu.com/s/1a-DBEUDuhAQB4JfmvKO3nw 
提取码：jgcj 
--来自百度网盘超级会员V3的分享