基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(二)

学习后端CRUD操作

书接上文,我们学习了前后端分离项目的基础环境配置和用户管理模块的前后端基础搭建,以下链接是上一节教程内容详细步骤,友友们可以跟着步骤实操。本节课程我们在前面项目的基础上接着学习后端CRUD操作,真正打通数据库。
基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程(一)

一、建库建表添数据

  • 数据库为qing,表名:sys_user,字段如下

  • 自己给表中填充几条数据,后面两个字段先不用管,之后会用到

二、数据查询,新增/更改,删除

1、IDEA项目包下新建三个包entity,mapper,service,controller,各个包分别建User类,UserMapper类,UserService类,UserController类

2、UserMapper类中编写(增/删/改/查)的sql语句 及 接口

这里我们先用简单的sql学习后端数据库的CRUD操作,之后会学习如何在XML文件中编写动态sql,动态sql使得新增/更新操作更加灵活。

mapper层代码如下

java 复制代码
package com.xrk.ejobback.mapper;

import com.xrk.ejobback.entity.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface UserMapper {
    //这里使用的数据库修改为qing,yml文件中记得修改
    //查询方法(查询所有)的sql及接口
    @Select("select * from sys_user")
    List<User> findAll();

    //数据增加的sql及接口
    @Insert("insert into sys_user(username,password,email,phone,nickname,address)"+
            "VALUES(#{username},#{password},#{email},#{phone},#{nickname},#{address});")
    int insert(User user);

    // 数据更新的sql及接口
    @Update("update sys_user set username=#{username},password=#{password},email=#{email},"+
            "phone=#{phone},nickname=#{nickname},address=#{address} where id=#{id}")
    int update(User user);

    //数据删除的sql及接口
    @Delete("delete from sys_user where id=#{id}")
    int deleteById(@Param("id")Integer id);
}

3、UserService类中编写具体的增、删、改业务逻辑

本次查询逻辑简单,所以查询业务没有写service层里,我们在controller层直接调用查询的mapper接口就可以了。

service层代码如下

java 复制代码
package com.xrk.ejobback.service;

import com.xrk.ejobback.entity.User;
import com.xrk.ejobback.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper  ;

    //增、改方法,通过判断Id是否为空做方法分流
    public int save(User user){
        //如果没有id则是新增:调用insert
        if(user.getId()==null){
            return userMapper.insert(user);
        }else {
            //否则是更新:调用update
            return userMapper.update(user);
        }
    }

    //删除方法
    public int deleteById(Integer id){
        return userMapper.deleteById(id);
    }
}

4、UserController中编写路由及方法调用

controller层代码如下

java 复制代码
package com.xrk.ejobback.controller;

import com.xrk.ejobback.entity.User;
import com.xrk.ejobback.mapper.UserMapper;
import com.xrk.ejobback.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

//设置后端控制器路由
@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserMapper userMapper;
    @Autowired
    private UserService userService ;

    //查询数据控制器
    @RequestMapping("/index")
    public List<User> index(){
        return userMapper.findAll();
    }

    // 新增、更改数据控制器
    @PostMapping("/save")
    public Integer save(@RequestBody User user){
       return userService.save(user);
    }

    //删除方法控制器
    @PostMapping("/{id}")
    public Integer deleteById(@PathVariable Integer id){
        return userService.deleteById(id);
    }
}

三、用postman做后端CRUD测试

1、测试方法:添加一条数据

复制代码
按下图照步骤操作,看到圈8返回了影响行数:1,表示我们添加数据成功。

上图中的Json代码如下

java 复制代码
    {
        "username": "虚拟2",
        "password": "1239",
        "email": "xuni@qq.com",
        "phone": "12777780217",
        "nickname": "将会被删除",
        "address": "删除库"
    }

如法炮制,我们可以在数据库多添加几条数据

2、测试方法:修改数据

对其中一条存在的数据进行修改,例如我修改Id=8的这条为:

java 复制代码
    {
        "id":"8",
        "username": "虚拟身份",
        "password": "7069",
        "email": "wuming@qq.com",
        "phone": "12755550217",
        "nickname": "待删除",
        "address": "删除库"
    }

点击send查看返回影响行数:1,表明数据修改成功;

在navicat中刷新表格,也看到修改成功后的数据

3、测试方法:删除数据

我这里删除Id=7和Id=8两条数据

4、测试方法:查询数据

相关推荐
执子念的飞鱼1 小时前
Vue 3 文件预览落地:鉴权 Blob、Worker/WASM 与内网子路径部署
vue.js·webassembly
用户3126874877202 小时前
Spring Bean 生命周期到底经历了什么?从实例化到销毁的全链路拆解
java·spring boot
无人生还2 小时前
从 Vue3 到 React · 快速上手系列第 11 篇:状态管理
前端·vue.js·react.js
Flittly2 小时前
【我的手搓轮子日记】(2)handmade-ioc 手搓 IOC 容器
java·spring boot·spring
AlunYegeer2 小时前
Spring Boot 多模块服务间 API Token 鉴权排查记录
java·spring boot·后端
paopaokaka_luck2 小时前
基于springboot3+vue3的乡村医生诊疗管理系统(AI助手、协同过滤算法、webSocket实时聊天、Echarts图形化分析)
前端·网络·人工智能·spring boot·websocket·网络协议·echarts
其美杰布-富贵-李2 小时前
Vue 3 模块导入教程:import、export 与文件组织
前端·javascript·vue.js
vx-程序开发3 小时前
【java项目分享】springboot农产品销售平台14952
java·javascript·spring boot·python·eclipse·django·php
布兰妮甜3 小时前
Vue 路由进阶:路由守卫权限控制、动态路由、懒加载、路由缓存
vue.js·懒加载·动态路由·路由守卫权限控制·路由缓存
Cobyte3 小时前
Vite & Rollup 插件开发实践
前端·javascript·vue.js