Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情

最新推荐文章于 2022-03-11 14:02:30 发布

weixin_34185560

最新推荐文章于 2022-03-11 14:02:30 发布

阅读量224

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/victorbu/p/10580879.html

版权

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>

```

源码：spring-boot-seckill

转载于:https://www.cnblogs.com/victorbu/p/10580879.html

weixin_34185560

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情

SpringBoot构建电商基础秒杀项目学习笔记ItemDOMapper.xml 添加 <select id="listItem" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from item order by sales desc...
复制链接

扫一扫