首页 > 其他分享> > Http请求类型（Method）实现查询增删改

Http请求类型（Method）实现查询增删改

2022-04-25 23:04:34 作者：互联网

第一步：定义一个实体类

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() {
    }
}

View Code

第二步：定义一个服务类接口

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);
}

View Code

第三步：定义一个实现接口的方法

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;
    }
}

View Code

第四步：定义一个控制类，实现请求的接口

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);
    }

}

View Code

第五步：页面代码

<!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>

View Code

标签：function,Http,name,id,Method,products,增删,Products,public
来源： https://www.cnblogs.com/Ryan-DHQ/p/16192445.html