基于javaweb+jquery+axios前后端分离实现增删改查

前后端分离的增删改查示例代码：

后端（Java Web）:

// 假设使用Spring Boot框架
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
 
@RestController
@RequestMapping("/api/items")
public class ItemController {
 
    // 查询所有
    @GetMapping
    public Map<String, Object> queryAll() {
        // 实现查询逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        result.put("data", items); // items为查询到的数据列表
        return result;
    }
 
    // 查询单个
    @GetMapping("/{id}")
    public Map<String, Object> queryById(@PathVariable("id") Long id) {
        // 实现查询逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        result.put("data", item); // item为查询到的数据
        return result;
    }
 
    // 添加
    @PostMapping
    public Map<String, Object> add(@RequestBody Item item) {
        // 实现添加逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        return result;
    }
 
    // 修改
    @PutMapping("/{id}")
    public Map<String, Object> update(@PathVariable("id") Long id, @RequestBody Item item) {
        // 实现更新逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        return result;
    }
 
    // 删除
    @DeleteMapping("/{id}")
    public Map<String, Object> delete(@PathVariable("id") Long id) {
        // 实现删除逻辑...
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("message", "success");
        return result;
    }
}

前端（HTML + jQuery + Axios）:

<!-- 引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
<script>
$(document).ready(function() {
    // 查询所有
    axios.get('/api/items')
    .then(response => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
 
    // 查询单个
    axios.get('/api/items/1')
    .then(response => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
 
    // 添加
    axios.post('/api/items', itemData)
    .then(response => {
        // 处理响应数据
    })
    .catch(error => {
        // 处理错误
    });
 
    // 修改
    axios.put('/api/items/1', i