1.设计一张商品表
CREATE TABLE IF NOT EXISTS goods (id BIGINT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NOT NULL
);
2.编写实体类映射数据库表格
@Data
public class Goods {private Long id;private String name;
}
3.编写持久层接口以及其对应sql
@Mapper
public interface GoodsMapper {@Insert("<script>" +"INSERT INTO goods (name) VALUES " +"<foreach collection='goodsList' item='item' separator=','>" +"(#{item.name})" +"</foreach>" +"</script>")void batchInsert(@Param("goodsList") List<Goods> goodsList);
}
4.编写服务层类
@Service
public class GoodsService {@Autowiredprivate GoodsMapper goodsMapper;public void batchInsertGoods(List<Goods> goodsList) {goodsMapper.batchInsert(goodsList);}
}
5.编写控制层类
@RestController
@RequestMapping("/api/goods")
public class GoodsController {@Autowiredprivate GoodsService goodsService;@PostMapping("/batch")public String batchInsertGoods(@RequestBody List<Goods> goodsList) {try {goodsService.batchInsertGoods(goodsList);return "Batch insert successful";} catch (Exception e) {return "Batch insert failed: " + e.getMessage();}}
}
6.编写前端页面进行批量插入测试
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>批量插入商品</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.container {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);width: 300px;}h1 {text-align: center;color: #333;}input[type="text"] {width: calc(100% - 22px);padding: 10px;margin-bottom: 10px;border: 1px solid #ccc;border-radius: 4px;}button {width: calc(50% - 6px);padding: 10px;margin: 2px;border: none;border-radius: 4px;background-color: #007BFF;color: white;cursor: pointer;}button:hover {background-color: #0056b3;}ul {list-style-type: none;padding: 0;}li {background-color: #f9f9f9;padding: 10px;margin-bottom: 5px;border-radius: 4px;border: 1px solid #ddd;}</style>
</head>
<body>
<div class="container"><h1>批量插入商品</h1><form id="goodsForm"><input type="text" id="goodName" placeholder="请输入商品名称"/><div style="display: flex; justify-content: space-between;"><button type="button" onclick="addGood()">添加商品</button><button type="button" onclick="submitGoods()">提交商品</button></div></form><ul id="goodsList"></ul>
</div><script>let goods = [];function addGood() {const goodName = document.getElementById('goodName').value.trim();if (goodName !== '') {goods.push({name: goodName});renderGoods();document.getElementById('goodName').value = '';}}function renderGoods() {const goodsListElement = document.getElementById('goodsList');goodsListElement.innerHTML = '';goods.forEach((good, index) => {const li = document.createElement('li');li.textContent = `${index + 1}: ${good.name}`;goodsListElement.appendChild(li);});}async function submitGoods() {const response = await fetch('/api/goods/batch', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(goods)});const result = await response.text();alert(result);if (response.ok) {goods = [];renderGoods();}}
</script>
</body>
</html>
