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

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

• Java

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日

相关文章

  • 谈谈JavaScript自定义回调函数

    谈谈JavaScript自定义回调函数 什么是回调函数？ 回调函数是一种特殊的函数，它作为参数传递给另一个函数并且在主函数执行完成后被调用。通常情况下，回调函数用于处理异步操作。比如，当一个网络请求完成时，需要回调函数来处理返回的数据。 JavaScript自定义回调函数的基本用法 在JavaScript中，我们可以通过自定义函数来实现回调函数的功能。下面是…

    Java 2023年6月15日
    00

  • Java实现配置加载机制

    首先我们先来简单了解一下Java的配置加载机制。Java程序通常需要各种不同的配置信息，例如数据库连接、服务器地址、日志操作等等。这些配置信息的变化可能会影响到程序的运行，为了方便进行调整，我们需要将这些配置信息进行集中管理并且可以灵活地加载和修改。Java实现配置加载机制就是为了解决这些问题的。 Java实现配置加载机制的方法有很多种，比较常见的有以下几种…

    Java 2023年5月20日
    00

  • SpringBoot实现物品点赞功能

    下面是关于SpringBoot实现物品点赞功能的完整攻略： 前言 物品点赞功能是很常见的网站功能之一。Spring Boot 给我们提供了很好的实现方式，通过本文，你可以学习到 Spring Boot 如何实现物品点赞功能。 实现过程 创建数据库 首先我们需要创建一个数据库来储存点赞信息。数据库需要包含以下两个表： item 表：储存物品信息，包括物品 ID…

    Java 2023年5月23日
    00

  • java中计算字符串长度的方法及u4E00与u9FBB的认识

    Java中计算字符串长度的方法 在Java中计算字符串长度是一项常见的任务，在实际开发中也有很多场景需要计算字符串的长度。本攻略将介绍Java中计算字符串长度的方法以及相关的知识点，包括中文字符的Unicode编码等。 1. String类的length()方法 Java中的String类提供了length()方法来计算字符串的长度，它返回的是字符串中的字符…

    Java 2023年5月20日
    00

  • Spring Boot实现简单的增删改查

    下面是SpringBoot实现简单的增删改查的完整攻略。 1. 环境准备 在开始之前，需要找到一台安装了JDK1.8以上版本的电脑，并确保你已经熟练掌握了Java语言以及Spring Boot框架的基础知识。 首先，需要安装开发工具IDEA和Maven。 在IDEA官网下载并安装IntelliJ IDEA Community版本：https://www.je…

    Java 2023年5月15日
    00

  • Spring Boot整合mybatis(一)实例代码

    在Spring Boot应用程序中使用MyBatis进行数据库操作是非常常见的。在本文中，我们将介绍如何在Spring Boot应用程序中整合MyBatis，并提供两个示例。 示例一：使用XML配置文件 以下是一个示例，演示如何在Spring Boot应用程序中使用XML配置文件整合MyBatis： 添加依赖 在pom.xml文件中添加以下依赖： <d…

    Java 2023年5月15日
    00

  • JSP 前端数据本地排序实例代码

    当我们需要对表格数据进行排序时，我们可以使用前端的JavaScript进行排序。下面是一个使用JSP和JavaScript实现前端数据本地排序的示例代码： 首先，我们可以创建一个包含表格的HTML代码，表格中的每行数据都由一个对象构成。对象中的每个属性对应每一列的数据，例如姓名、身高、年龄等。 <table id="myTable"…

    Java 2023年6月15日
    00

  • 什么是对象的生命周期？

    以下是关于“什么是对象的生命周期？”的完整使用攻略： 1. 对象的生命周期 在Java中，对象的生命周期指对象从创建到销毁的整个过程。对象的生命周期包括以下几个阶段： 创建阶段：在Java中，使用new关键字创建对象，JVM会在堆内存中为对象分配内存空，并调用对象的构造函数进行初始化。在创建阶段对象的状态为“创建”。 使用阶段：在Java中，对象被创建后，可…

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