前后端分离的增删改查示例代码：
后端（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