使用springboot搭建一个简单的增删改查前后端分离页面

好的，下面我来为您介绍使用Spring Boot搭建增删改查前后端分离页面的步骤：

1. 创建Spring Boot项目

首先，在IDE中创建一个Spring Boot项目，我们可以使用Spring Initializr来快速创建一个基础的Spring Boot项目。

2. 添加依赖

在pom.xml文件中，添加如下依赖：

<!-- Spring Boot Web依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- Spring Boot MyBatis依赖 -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.0.1</version>
</dependency>

<!-- MySQL数据库依赖 -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.26</version>
</dependency>

3. 创建实体类

在src/main/java目录下创建一个名为"com.example.demo.entity"的包，然后创建一个实体类，例如：

package com.example.demo.entity;

public class User {
    private Long id;
    private String name;
    private Integer age;
    
    // 省略getter和setter方法
}

4. 创建Mapper接口和XML文件

在src/main/java目录下创建一个名为"com.example.demo.mapper"的包，然后创建一个Mapper接口，例如：

package com.example.demo.mapper;

import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface UserMapper {
    List<User> findAll();
    User findById(Long id);
    void insert(User user);
    void update(User user);
    void delete(Long id);
}

在resources目录下创建一个名为"mapper"的文件夹，然后在其中创建一个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="UserMap" type="com.example.demo.entity.User">
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="age" property="age"/>
    </resultMap>

    <select id="findAll" resultMap="UserMap">
        select * from user
    </select>

    <select id="findById" resultMap="UserMap">
        select * from user where id = #{id}
    </select>

    <insert id="insert">
        insert into user(name, age) values(#{name}, #{age})
    </insert>

    <update id="update">
        update user set name = #{name}, age = #{age} where id = #{id}
    </update>

    <delete id="delete">
        delete from user where id = #{id}
    </delete>
</mapper>

5. 创建Service接口和实现类

在src/main/java目录下创建一个名为"com.example.demo.service"的包，然后创建一个Service接口，例如：

package com.example.demo.service;

import com.example.demo.entity.User;

import java.util.List;

public interface UserService {
    List<User> findAll();
    User findById(Long id);
    void insert(User user);
    void update(User user);
    void delete(Long id);
}

然后创建一个Service实现类，例如：

package com.example.demo.service.impl;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.findAll();
    }

    @Override
    public User findById(Long id) {
        return userMapper.findById(id);
    }

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

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

    @Override
    public void delete(Long id) {
        userMapper.delete(id);
    }
}

6. 创建Controller

在src/main/java目录下创建一个名为"com.example.demo.controller"的包，然后创建一个Controller，例如：

package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.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 UserService userService;

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

    @GetMapping("/{id}")
    public User findById(@PathVariable Long id) {
        return userService.findById(id);
    }

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

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

    @DeleteMapping("/{id}")
    public void delete(@PathVariable Long id) {
        userService.delete(id);
    }
}

7. 编写前端页面

在src/main/resources/static目录下创建一个名为"index.html"的文件，例如：

<!DOCTYPE html>
<html>
<head>
    <title>User Management</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h2>User Management</h2>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="userList">
        </tbody>
    </table>

    <br>

    <form>
        <label>Name:</label>
        <input type="text" id="name" name="name">
        <br>
        <label>Age:</label>
        <input type="number" id="age" name="age">
        <br>
        <button type="button" onclick="insert()">Add User</button>
    </form>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            findAll();
        });

        function findAll() {
            $.get("/user/", function(data) {
                $("#userList").empty();
                $.each(data, function(index, user) {
                    var row = "<tr><td>" + user.id + "</td><td>" + user.name + "</td><td>" + user.age + "</td><td><button type='button' onclick='findById(" + user.id + ")'>Edit</button><button type='button' onclick='deleteUser(" + user.id + ")'>Delete</button></td></tr>";
                    $("#userList").append(row);
                })
            });
        }

        function findById(id) {
            $.get("/user/" + id, function(user) {
                $("#name").val(user.name);
                $("#age").val(user.age);
                $("#id").val(user.id);
            });
        }

        function insert() {
            var name = $("#name").val();
            var age = $("#age").val();
            var user = {name: name, age: age};
            $.ajax({
                type: "POST",
                url: "/user/",
                data: JSON.stringify(user),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function() {
                    alert("Insert Successfully");
                    findAll();
                    $("#name").val("");
                    $("#age").val("");
                }
            });
        }

        function update() {
            var id = $("#id").val();
            var name = $("#name").val();
            var age = $("#age").val();
            var user = {id: id, name: name, age: age};
            $.ajax({
                type: "PUT",
                url: "/user/",
                data: JSON.stringify(user),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function() {
                    alert("Update Successfully");
                    findAll();
                    $("#name").val("");
                    $("#age").val("");
                }
            });
        }

        function delete(id) {
            $.ajax({
                type: "DELETE",
                url: "/user/" + id,
                success: function() {
                    alert("Delete Successfully");
                    findAll();
                }
            });
        }
    </script>
</body>
</html>

这样，一个简单的增删改查前后端分离页面就完成了。您可以使用浏览器访问"http://localhost:8080"来查看效果。