异步请求商品管理(商品修改操作)简易版

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

http://t.csdn.cn/SOusH

1. 修改商品

1. 回显步骤

在select.html页面table表中添加修改超链接, 请求地址/update.html?id=xxx

<div>
    <h1>商品列表</h1>
    <table border="1" >
        <th>编号</th><th>商品标题</th><th>库存</th><th>价格</th><th>操作</th>
        <tr v-for="(p,i) in arr">
            <td>{{p.id}}</td>
            <td>{{p.title}}</td>
            <td>{{p.num}}</td>
            <td>{{p.price}}</td>
            <!--javascript:void(0) 废掉超链接的跳转功能-->
            <td><a :href="'/update.html?id='+p.id">修改</a>
                <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>

创建update.html页面, 然后在页面中准备文本框和按钮, 让文本框和Vue里面的对象双向绑定, 在created方法中向/selectById?id=xxx发出请求 把请求回来的商品对象赋值给Vue里面的对象

<div>
  <h1>修改商品信息</h1>
    <input type="text" v-model="p.id" placeholder="id" readonly>
    <input type="text" v-model="p.title" placeholder="标题">
    <input type="text" v-model="p.num" placeholder="库存">
    <input type="text" v-model="p.price" placeholder="价格">
    <input type="button" value="修改" @click="update()">
    
</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:{
            p:{  id:"", title:"", num:"", price:"",}
        },
        methods:{
            update(){
                axios.post("/update",v.p).then(function () {
                    alert("修改完成!")
                    location.href="/select.html";
                })
            }
        },
      created:function () {
            //localhost:8080/select?id=1
          //location.search 得到 ?id=1;
        axios.get("/selectById"+location.search).then(function (response) {
            console.log(location.search);
            //得到通过id查询到的商品对象 赋值给Vue里面的对象,页面会自动改变
          v.p=response.data;
        })
      }
    })
    </script>

在ProductController中添加selectById方法处理 /selectById请求, 方法中调用mapper里面的selectById方法 返回值为Product对象, 最后把对象返回给客户端

@RestController
public class ProductController {
    @Autowired
    ProductMapper mapper;

@RequestMapping("/selectById")
    public Product selectById(int id){
    System.out.println("id = " + id);
    return mapper.selectById(id);
}
}

实现mapper里面的selectById方法

@Mapper
public interface ProductMapper {

    @Select("select * from product where id=#{id}")
    Product selectById(int id);
}

2.修改步骤:

1. 给修改按钮添加点击事件, 在事件方法中向/update发出异步请求把双向绑定的对象提交服务器

<input type="button" value="修改" @click="update()">

methods:{
            update(){
                axios.post("/update",v.p).then(function () {
                    alert("修改完成!")
                    location.href="/select.html";
                })
            }

在ProductController中添加update方法处理/update请求, 方法中调用mapper的update方法把接收到的Product对象传递到方法中

@RestController
public class ProductController {
    @Autowired
    ProductMapper mapper;

@RequestMapping("/update")
    public void update(@RequestBody Product product){
    mapper.update(product);
}
}

实现mapper里面的update方法

@Mapper
public interface ProductMapper {
//执行修改SQL语句
    @Update("update product set title=#{title},num=#{num},price=#{price} where id=#{id}")
    void update(Product product);
}