Http请求类型（Method）实现查询增删改
第一步：定义一个实体类
package com.example.products.entity; import java.io.Serializable; import java.util.ArrayList; import java.util.List; //实现Serializable接口 public class Products implements Serializable { private int id; private String name; private double price; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; } public Products(int id, String name, double price) { this.id = id; this.name = name; this.price = price; } public Products() { } }
第二步：定义一个服务类接口
package com.example.products.service; import com.example.products.entity.Products; import java.util.List; public interface ProductsService { //查询商品 public Products findProductById(int id); //查询所有商品 public List<Products> findAllPorducts(); //添加商品 public int addPorducts(Products products); //修改商品 public int editProducts(Products products); //删除商品 public int delete(int id); }
第三步：定义一个实现接口的方法
package com.example.products.service.impl; import com.example.products.entity.Products; import com.example.products.service.ProductsService; import org.springframework.stereotype.Service; import java.util.ArrayList; import java.util.List; @Service public class UserServiceImpl implements ProductsService { //定义集合 static List<Products> list=new ArrayList<>(); static { list.add(new Products(1,"果冻",2)); list.add(new Products(2,"旺旺碎冰冰",2.5)); list.add(new Products(3,"甜筒",5)); } //查询id的数据 @Override public Products findProductById(int id) { Products products=null; for(Products u:list){ if(u.getId()==id){ products=u; break; } } return products; } //查询全部数据 @Override public List<Products> findAllPorducts() { return list; } //添加数据 @Override public int addPorducts(Products products) { list.add(products); return 1; } //修改数据 @Override public int editProducts(Products products) { int i=0; Products u=findProductById(products.getId()); if(u!=null) { u.setName(products.getName()); u.setPrice(products.getPrice()); i++; } return i; } //删除数据 @Override public int delete(int id) { int i=0; Products p=findProductById(id); if(p!=null){ list.remove(p); i++; } return i; } }
第四步：定义一个控制类，实现请求的接口
package com.example.products.contorller; import com.example.products.entity.Products; import com.example.products.service.ProductsService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController() @RequestMapping("/api") public class UserContorller { @Autowired ProductsService productsService; //查询id的数据 @GetMapping(path = "/products/{id}") public Products getProductById(@PathVariable int id){ return productsService.findProductById(id); } //查询全部数据 @GetMapping("/products") public List<Products> getAll(){ return productsService.findAllPorducts(); } //添加数据 @PostMapping(path = "/products") public int addPorducts(@RequestBody Products product){ return productsService.addPorducts(product); } //修改数据 @PutMapping(path = "/products") public int editUser(@RequestBody Products products){ return productsService.editProducts(products); } //删除数据s @DeleteMapping(path = "/products/{id}") public int deletUser(@PathVariable int id){ return productsService.delete(id); } }
第五步：页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<style>
tr{
text-align: center;
}
input{
outline-style: none;
}
.div1{
position: relative;
}
.prompt{
width: 150px;
height: 100px;
text-align: center;
line-height: 100px;
color: aliceblue;
font-size: 25px;
background-color: #5CB85C;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-75px,-50px);
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2>商品管理</h2>
<label for="coid">商品查询：</label><input type="text" id="coid" placeholder="请输入商品编号"><button style="background-color: #5CB85C;color: azure;border: none" @click="getProductById()">搜索</button><br><br>
<table id="tab" width="100%" border="1">
<tr style="background-color: #1FC0EF">
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr v-for="(product,index) in products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td style="text-align: center">
<button onclick="up(this)" style="background-color: #1FC0EF;border: none;color: black">修改</button>
<button @click="del(product.id)" style="background-color: #FF0000;border: none;color: azure" >删除</button>
</td>
</tr>
</table>
<br>
<br>
<div class="div1">
<div class="prompt">
添加成功!
</div>
</div>
<form action="#">
<fieldset style="width: 300px">
<legend>商品管理</legend>
<label for="pid" >编号：</label> <input id="pid" type="text"><br><br>
<label for="name">名称：</label> <input id="name" type="text"><br><br>
<label for="price">价格：</label> <input id="price" type="text"><br><br>
<button style="background-color: #5CB85C;color: azure;border: none" @click="addProduct()">添加</button> <button style="background-color: #F0AD4E;color: azure;border: none" @click="update">修改</button>
</fieldset>
</form>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
products: []
},
//初始化数据
created() {
axios.get('/api/products', {}).then(function (response) {
app.products = response.data;
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
},
methods:{
//查询为id的数据
getProductById:function (){
let coid=document.getElementById("coid").value;
axios.get("/api/products/"+coid+"", {}).then(function (response) {
let arr=[response.data]
app.products=arr;
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
},
//添加数据
addProduct:function () {
let pid = document.getElementById("pid").value;
let name = document.getElementById("name").value;
let price = document.getElementById("price").value;
if (pid != "" && name != "" && price != "") {
let product = {
"id": pid,
"name": name,
"price": price
}
axios.post("/api/products", product)
.then(function (response) {
let i = response.data;
if (i>=1){
document.getElementsByClassName("prompt")[0].innerHTML="添加成功!"
document.getElementsByClassName("prompt")[0].style.display="block"
setTimeout(function (){
document.getElementsByClassName("prompt")[0].style.display="none"
location.reload();
},500);
}
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}else{
alert("添加数据不能为空");
return;
}
},
//修改数据
update:function (){
let pid=document.getElementById("pid").value;
let name=document.getElementById("name").value;
let price=document.getElementById("price").value;
if (pid != "" && name != "" && price != "") {
let product = {
"id": pid,
"name": name,
"price": price
}
axios.put("/api/products", product)
.then(function (response) {
let i = response.data;
if (i>=1){
document.getElementsByClassName("prompt")[0].innerHTML="修改成功!"
document.getElementsByClassName("prompt")[0].style.display="block";
setTimeout(function (){
document.getElementsByClassName("prompt")[0].style.display="none"
location.reload();
},500);
}
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
else{
alert("添加数据不能为空");
}
},
//删除数据
del:function (i){
axios.delete("/api/products/"+i+"", {}).then(function (response) {
let i=response.data;
if(i>=1){
document.getElementsByClassName("prompt")[0].innerHTML="删除成功!"
document.getElementsByClassName("prompt")[0].style.backgroundColor="#FF0000";
document.getElementsByClassName("prompt")[0].style.display="block";
setTimeout(function (){
document.getElementsByClassName("prompt")[0].style.display="none"
location.reload();
},500);
}
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
}
});
//点击修改把数据填写到对应的表单中
function up(val){
var value = $(val).parent().parent().find("td");
let id=value.eq(0).text();
let name=value.eq(1).text();
let price=value.eq(2).text();
let pid=document.getElementById("pid");
let name1=document.getElementById("name");
let price1=document.getElementById("price");
pid.value=id;
name1.value=name;
price1.value=price;
pid.disabled="disabled"
}
</script>
</body>
</html>
浙公网安备 33010602011771号