1. Python技术站首页
  2. 其他
  3. Java

Java之SpringBoot实现基本增删改查（前后端分离版）

• Java
yizhihongxing

Java之SpringBoot实现基本增删改查（前后端分离版）攻略

简介

本篇攻略主要介绍如何使用SpringBoot实现前后端分离模式下的基本增删改查操作。在本文中，我们将使用MySQL数据库和Vue.js作为前端技术栈。此外，后端所使用的工具主要有SpringBoot、MyBatis和Swagger。在完成本文所述内容之前，请确保你已完成以下几个环节：

  • 安装MySQL，并创建一个名为“test”的数据库；
  • 安装Node.js，并在系统中配置环境变量；
  • 前端项目基于Vue.js初始化完成，且已安装必要的依赖包。

步骤

第一步：创建数据库表

在MySQL数据库中使用以下SQL语句创建一个名为“user”的表：

CREATE TABLE user (
    id INT(11) PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL,
    age INT(11) NOT NULL,
    gender VARCHAR(2) NOT NULL
);

第二步：创建后端项目

在Eclipse或IntelliJ等JAVA IDE中创建一个SpringBoot项目。在创建项目时，需要使用如下依赖项：

  • Spring Web
  • MySQL Driver
  • MyBatis Framework
  • MyBatis-Spring

第三步：配置数据库

在resources目录下创建application.properties文件，并加入以下内容:

spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

第四步：编写实体类

在model目录下创建一个实体类User，并加入以下内容：

public class User {
    private Integer id;
    private String username;
    private Integer age;
    private String gender;

    //getter setter 方法
}

第五步：编写mapper

在mapper目录下创建一个UserMapper.xml，并加入以下内容：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.demo.mapper.UserMapper">
    <resultMap id="BaseResultMap" type="com.example.demo.model.User">
        <id column="id" property="id" jdbcType="INTEGER" />
        <result column="username" property="username" jdbcType="VARCHAR" />
        <result column="age" property="age" jdbcType="INTEGER" />
        <result column="gender" property="gender" jdbcType="VARCHAR" />
    </resultMap>

    <select id="listAll" resultMap="BaseResultMap">
        SELECT * FROM user
    </select>

    <insert id="insert" parameterType="com.example.demo.model.User">
        INSERT INTO user(username, age, gender)
        VALUES(#{username}, #{age}, #{gender})
    </insert>

    <update id="update" parameterType="com.example.demo.model.User">
        UPDATE user
        SET username=#{username}, age=#{age}, gender=#{gender}
        WHERE id=#{id}
    </update>

    <delete id="deleteById" parameterType="java.lang.Integer">
        DELETE FROM user
        WHERE id=#{id}
    </delete>

</mapper>

第六步：编写dao层

在dao层中，我们需要定义一个接口UserMapper，以完成对User对象的操作。

@Mapper
@Component
public interface UserMapper {
    List<User> listAll();
    void insert(User user);
    void update(User user);
    void deleteById(Integer id);
}

第七步：编写service层

在service层中，我们将通过Autowired注解注入UserMapper对象，以完成对User对象的操作。

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

    public List<User> listAll() {
        return userMapper.listAll();
    }

    public void insert(User user) {
        userMapper.insert(user);
    }

    public void update(User user) {
        userMapper.update(user);
    }

    public void deleteById(Integer id) {
        userMapper.deleteById(id);
    }
}

第八步：编写Controller

在Controller中，我们将通过@GetMapping、@PostMapping、@PutMapping和@DeleteMapping注解完成对User对象的增删改查操作。具体的代码如下：

@RestController
@RequestMapping("/api/v1/user/")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("listAll")
    public List<User> listAll() {
        return userService.listAll();
    }

    @PostMapping("insert")
    public void insert(@RequestBody User user) {
        userService.insert(user);
    }

    @PutMapping("update")
    public void update(@RequestBody User user) {
        userService.update(user);
    }

    @DeleteMapping("deleteById/{id}")
    public void deleteById(@PathVariable Integer id) {
        userService.deleteById(id);
    }
}

第九步：编写Swagger配置类

在项目中加入Swagger组件后，我们可以通过swagger-ui.html页面对接口进行调试，方便快捷。具体的配置如下所示：

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
            .apiInfo(apiInfo())
            .select()
            .apis(RequestHandlerSelectors.basePackage("com.example.demo.controller"))
            .paths(PathSelectors.any())
            .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
            .title("User Rest API Doc")
            .description("User Restful API接口文档")
            .version("1.0.0")
            .build();
    }
}

第十步：编译打包

在使用Maven命令或IDEA自带的打包工具打包后，我们就可以得到一个名为demo.jar的可执行文件。

第十一步：编写前端页面

在Vue.js项目中，我们可以通过Axios组件与后端进行数据交互。下面是一个简单的示例：

<template>
  <div>
    <el-table :data="userData">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form :model="form" ref="form" label-width="90px" style="margin-top: 20px;">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="form.age"></el-input-number>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      userData: [],
      form: {
        username: '',
        age: '',
        gender: '男'
      }
    }
  },
  created() {
    axios.get('/api/v1/user/listAll')
      .then(response => {
        this.userData = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    handleEdit(row) {
      this.form = Object.assign({}, row);
      this.$refs.form.validateFields();
    },
    handleDelete(row) {
      axios.delete('/api/v1/user/deleteById/' + row.id)
        .then(response => {
          this.userData = this.userData.filter(function(el) {
            return el.id !== row.id;
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleSubmit() {
      if (this.form.id == null) {
        axios.post('/api/v1/user/insert', this.form)
          .then(response => {
            this.form.id = response.data;
            this.userData.push(this.form);
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        axios.put('/api/v1/user/update', this.form)
          .then(response => {
            this.userData.forEach((value, index, array) => {
              if (value.id === this.form.id) {
                array[index] = this.form;
              }
            });
          })
          .catch(error => {
            console.log(error);
          });
      }
      this.form = {
        username: '',
        age: '',
        gender: '男'
      };
      this.$refs.form.resetFields();
    }
  }
}
</script>

总结

通过本文的学习，我们已经掌握了使用SpringBoot实现基本增删改查（前后端分离版）的方法，以及如何通过MyBatis、Swagger等工具提高开发效率。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Java之SpringBoot实现基本增删改查（前后端分离版） - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月15日
下一篇 2023年5月15日

相关文章

  • SpringBoot+Vue项目新手快速入门指南

    SpringBoot+Vue项目新手快速入门指南 SpringBoot和Vue是两个非常流行的开发框架，它们可以帮助我们快速构建高效、可靠的Web应用程序。在本文中，我们将介绍如何使用SpringBoot和Vue构建一个完整的Web应用程序。 步骤一：创建SpringBoot项目 我们首先需要创建一个SpringBoot项目。以下是一个示例： 打开Intel…

    Java 2023年5月15日
    00

  • SpringMVC请求数据详解讲解

    下面我将详细讲解“SpringMVC请求数据详解讲解”的完整攻略。 1. SpringMVC请求数据的概述 在Web开发中，一个请求的处理需要有数据的输入和输出。SpringMVC框架中，请求数据主要包含路由参数、请求参数和请求体三种形式。 路由参数为请求路径包含的参数，如对于路径 /user/{id}，其中 {id} 就是路由参数。 请求参数为请求的Que…

    Java 2023年6月15日
    00

  • java自定义日志输出文件(log4j日志文件输出多个自定义日志文件)

    以下是详细的java自定义日志输出文件（log4j日志文件输出多个自定义日志文件）的攻略： 1.安装log4j 我们在进行自定义日志输出文件之前，需要先安装一个java非常常用的日志库—log4j，安装的步骤如下：1. 前往Apache Log4j官网(https://logging.apache.org/log4j/2.x/)下载最新版的log4j。2. …

    Java 2023年5月26日
    00

  • 搭建简单的Spring-Data JPA项目

    搭建简单的Spring-Data JPA项目可分为以下几个步骤： 第一步：创建Maven项目 首先需要创建一个Maven项目，然后在pom.xml中导入Spring-Data JPA以及Hibernate等相关依赖。 示例代码： <dependency> <groupId>org.springframework.data</gr…

    Java 2023年6月3日
    00

  • java实现遍历树形菜单两种实现代码分享

    下面我将详细讲解Java实现遍历树形菜单的两种实现代码分享，包括以下内容： 遍历算法的概念 遍历树形菜单的两种实现方式 示例代码和详细解释 一、什么是遍历算法？ 在讲解树形菜单的遍历算法之前，我们先来了解一下遍历算法的概念。 遍历算法是对数据结构中所有元素进行无遗漏且不重复的访问，以达到数据处理的目标。 在树形菜单的遍历中，我们需要访问每一个节点，以获取每个…

    Java 2023年5月20日
    00

  • Junit写法及与spring整合过程详解

    Junit写法及与Spring整合过程详解 JUnit的使用 JUnit是一个用于Java编程语言中的单元测试框架，它由 Kent Beck 和 Erich Gamma 建立，逐风速成了极佳的Java应用程序测试框架。JUnit提供了一个简单的方式来断言一个测试的代码的预期行为。在大多数开发人员的实践中，JUnit在持续建构编译系统和开发环境中经常被使用。 …

    Java 2023年5月19日
    00

  • SpringBoot Mail邮件任务详情

    Spring Boot Mail邮件任务详情 在Spring Boot中，我们可以使用Mail模块来实现邮件发送功能。本文将详细讲解Spring Boot Mail邮件任务的完整攻略，并提供两个示例。 1. 配置邮件发送信息 以下是配置邮件发送信息的基本流程： 在application.properties或application.yml文件中添加以下内容：…

    Java 2023年5月15日
    00

  • 浅谈MyBatis通用Mapper实现原理

    浅谈MyBatis通用Mapper实现原理 简介 通用Mapper是一个MyBatis的插件，它通过对Mapper文件进行解析和编译，根据实体类的属性、注解和方法名，生成对应的SQL语句，从而进行数据库操作。使用通用Mapper可以省去编写大量重复的CRUD操作，提高开发效率。 实现原理 通用Mapper的实现原理主要分为三部分：Mapper接口解析、SQL…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部