异步请求商品管理(商品删除操作)简易版

异步请求商品管理(商品列表操作)简易版

http://t.csdn.cn/zmmdN

删除商品

1. 在select.html页面中添加删除超链接,废掉超链接的跳转功能, 给超链接添加点击事件,点击事件中发出向/delete?id=xxx 地址发出异步请求

<div>
    <h1>商品列表</h1>
    <table border="1" >
        <th>编号</th><th>商品标题</th><th>库存</th><th>价格</th><th>操作</th>
        <tr v-for="p in arr">
            <td>{{p.id}}</td>
            <td>{{p.title}}</td>
            <td>{{p.num}}</td>
            <td>{{p.price}}</td>
            <!--javascript:void(0) 废掉超链接的跳转功能 添加点击事件del(p.id)-->
            <td>
                <a href="javascript:void(0)" @click="del(p.id)">删除</a>
            </td>
        </tr>
    </table>
</div>
<!-- 引入Vue框架 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!--引入Axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v=new Vue({
        el:"body>div",
        data:{
            arr:[]
        },
        methods:{
            del(id){
                if (confirm("您确定删除此商品吗?")){
                    //发出异步删除请求
                    axios.get("/delete?id="+id).then(function () {
                        //重新加载页面
                        location.reload();
                    })
                }
            }
        },
        created:function () {
            //页面加载完会自动执行此方法
            axios.get("/select").then(function (response){
                //把请求回来的数据给到数组
                v.arr=response.data;

            })
        }
    })
    </script>

2.在ProductController里面添加delete方法处理/delete请求, 在方法中调用mapper的deleteById方法把接收到的id传递过去

@RestController
public class ProductController {
    @Autowired
    ProductMapper mapper;

@RequestMapping("/delete")
    public void delete(int id){
    mapper.delete(id);
}
}

3.实现mapper里面的deleteById方法

@Mapper
public interface ProductMapper {

    @Delete("delete from product where id=#{id}")
    void delete(int id);
}