Spring Boot 構建電商基礎秒殺項目 (九) 商品列表 & 詳情
阿新 • • 發佈：2019-03-22
des img getitem strip 技術 ng- omap label v-for
![技術分享圖片]()
SpringBoot構建電商基礎秒殺項目 學習筆記
ItemDOMapper.xml 添加
<select id="listItem" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from item
order by sales desc
</select>ItemDOMapper 添加
List<ItemDO> listItem();ItemServiceImpl 添加
@Override public List<ItemModel> listItem() { List<ItemDO> itemDOList = itemDOMapper.listItem(); List<ItemModel> itemModelList = itemDOList.stream().map(itemDO -> { ItemStockDO itemStockDO = itemStockDOMapper.selectByItemId(itemDO.getId()); ItemModel itemModel = convertFromDataObject(itemDO, itemStockDO); return itemModel; }).collect(Collectors.toList()); return itemModelList; }
ItemController 添加
@RequestMapping(value = "/list", method = {RequestMethod.GET}) @ResponseBody public CommonReturnType listItem(){ List<ItemModel> itemModelList = itemService.listItem(); List<ItemVO> itemVOList = itemModelList.stream().map(itemModel -> { ItemVO itemVO = convertFromModel(itemModel); return itemVO; }).collect(Collectors.toList()); return CommonReturnType.create(itemVOList); }
新建列表 & 詳情頁面
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!--<item-list-->
<!--v-for="item in items"-->
<!--v-bind:item="item"-->
<!--v-bind:key="item.id"></item-list>-->
<template>
<el-table
:data="items"
@row-click="handleClick"
stripe
style="width: 100%">
<el-table-column
prop="title"
label="商品名"
width="180">
</el-table-column>
<el-table-column
label="商品圖片"
width="180">
<template slot-scope="scope">
<img :src="scope.row.imgUrl" min-width="70" height="70" />
</template>
</el-table-column>
<el-table-column
prop="description"
label="商品描述">
</el-table-column>
<el-table-column
prop="price"
label="商品價格">
</el-table-column>
<el-table-column
prop="stock"
label="商品庫存">
</el-table-column>
<el-table-column
prop="sales"
label="商品銷量">
</el-table-column>
</el-table>
</template>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// Vue.component('item-list',{
// props: ['item'],
// template:'<li>{{item.title}}</li>'
// });
var app = new Vue({
el: '#app',
data: {
items: [],
},
methods: {
getItems(){
// https://www.cnblogs.com/yesyes/p/8432101.html
axios({
method: 'get',
url: 'http://localhost:8080/item/list',
withCredentials: true,
})
.then(resp=>{
if(resp.data.status == 'success'){
this.items = resp.data.data;
}else{
this.$message.error('獲取商品列表失敗，原因為：' + resp.data.data.errMsg);
}
})
.catch(err =>{
this.$message.error('獲取商品列表失敗，原因為：' + err.status + ', ' + err.statusText);
});
},
handleClick(row){
window.location.href='getitem.html?id=' + row.id;
},
},
mounted() {
this.getItems()
},
});
</script>
</html>{{item.title}}
```
源碼：spring-boot-seckill
Spring Boot 構建電商基礎秒殺項目 (九) 商品列表 & 詳情