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技术站

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