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

异步请求商品管理(商品增加操作)简易版

http://t.csdn.cn/o2ZGh

商品列表

在首页添加超链接请求地址 /select.html

创建select.html页面, 在页面中添加表格标签, 并且在Vue里面添加created方法, 在方法中向/select地址发请求获取数据,把获取到的数据赋值给Vue里面的arr数组,让表格和数组进行绑定 展示数组里面的内容

div>
  <h1>商品列表</h1>
  <table border="1">
    <tr>
      <th>id</th>
      <th>标题</th>
      <th>库存</th>
      <th>价格</th>
    </tr>
 <!--遍历数组-->
    <tr v-for="p in arr">
      <td>{{p.id}}</td>
      <td>{{p.title}}</td>
      <td>{{p.num}}</td>
      <td>{{p.price}}</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:{
        
          }
        },created:function () {//页面加载完会自动执行此方法
           //发出异步请求--请求数据
        axios.get("/select").then(function (response) {
/*请求回来的数据存入数组中*/
          v.arr=response.data;
        })
      }
    })
    </script>

在ProductController里面添加select方法处理/select请求, 在方法中调用mapper的select方法 将查询到的list集合直接返回给客户端

@RestController
public class ProductController {
    @Autowired
    ProductMapper mapper;

@RequestMapping("/select")
//用集合装每一个product对象
    public List<Product> select (){
   List<Product> list=mapper.select();
   return list;
}
}

实现mapper里面的select方法

@Mapper
public interface ProductMapper {

//执行SQL语句
    @Select("select * from product")
    List<Product> select();
}