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>

<body>

    <div id="app">

        <el-row>

            <el-col :span="8" :offset="8">

                <h3>{{item.title}}</h3>

                <el-form ref="form" :model="form" label-width="80px">

                    <el-form-item label="商品描述">

                        <label>{{item.description}}</label>

                    </el-form-item>

                    <el-form-item label="价格">

                        <label>{{item.price}}</label>

                    </el-form-item>

                    <el-form-item label="图片">

                        <img :src="item.imgUrl"  min-width="70" height="70" />

                    </el-form-item>

                    <el-form-item label="库存">

                        <label>{{item.stock}}</label>

                    </el-form-item>

                    <el-form-item label="销量">

                        <label>{{item.sales}}</label>

                    </el-form-item>

                </el-form>

            </el-col>

        </el-row>

    </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>

    var app = new Vue({

        el: '#app',

        data: {

            item: {},

            form: {

                id: 0,

            },

        enable: true,

        },

        methods: {

            getItem(){

                this.form.id = this.getUrlKey("id");

                // https://www.cnblogs.com/yesyes/p/8432101.html

                axios({

                    method: 'get',

                    url: 'http://localhost:8080/item/get',

                    params: this.form,

                    withCredentials: true,

                })

                .then(resp=>{

                    if(resp.data.status == 'success'){

                        this.item = resp.data.data;

                    }else{

                        this.$message.error('获取商品失败，原因为：' + resp.data.data.errMsg);

                    }

                })

                .catch(err =>{

                    this.$message.error('获取商品失败，原因为：' + err.status + ', ' + err.statusText);

                });

            },

            // https://www.cnblogs.com/xyyt/p/6068981.html

            getUrlKey(name){

                return decodeURIComponent(

                    (new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)')

                        .exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;

            },

        },

        mounted() {

            this.getItem()

        },

    });

</script>

```

源码：spring-boot-seckill

Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情的更多相关文章

Spring Boot 构建电商基础秒杀项目 (八) 商品创建
SpringBoot构建电商基础秒杀项目学习笔记新建数据表 create table if not exists item ( id int not null auto_increment, ti ...
Spring Boot 构建电商基础秒杀项目 (一) 项目搭建
SpringBoot构建电商基础秒杀项目学习笔记 Spring Boot 其实不是什么新的框架,它默认配置了很多框架的使用方式,就像 maven 整合了所有的 jar 包, Spring Boot ...
Spring Boot 构建电商基础秒杀项目 (十二) 总结 (完结)
SpringBoot构建电商基础秒杀项目学习笔记系统架构存在问题如何发现容量问题如何使得系统水平扩展查询效率低下活动开始前页面被疯狂刷新库存行锁问题下单操作步骤多,缓慢浪涌流量如何 ...
Spring Boot 构建电商基础秒杀项目 (十一) 秒杀
SpringBoot构建电商基础秒杀项目学习笔记新建表 create table if not exists promo ( id int not null auto_increment, pro ...
Spring Boot 构建电商基础秒杀项目 (十) 交易下单
SpringBoot构建电商基础秒杀项目学习笔记新建表 create table if not exists order_info ( id varchar(32) not null defaul ...
Spring Boot 构建电商基础秒杀项目 (七) 自动校验
SpringBoot构建电商基础秒杀项目学习笔记修改 UserModel 添加注解 public class UserModel { private Integer id; @NotBlank(m ...
Spring Boot 构建电商基础秒杀项目 (六) 用户登陆
SpringBoot构建电商基础秒杀项目学习笔记 userDOMapper.xml 添加 <select id="selectByTelphone" resultMap=& ...
Spring Boot 构建电商基础秒杀项目 (五) 用户注册
SpringBoot构建电商基础秒杀项目学习笔记 UserService 添加 void register(UserModel userModel) throws BusinessException ...
Spring Boot 构建电商基础秒杀项目 (四) getotp 页面
SpringBoot构建电商基础秒杀项目学习笔记 BaseController 添加 public static final String CONTENT_TYPE_FORMED = "a ...

随机推荐

摒弃FORM表单上传图片，异步批量上传照片
之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...
Luogu P4169 [Violet]天使玩偶/SJY摆棋子
传送门二维平面修改+查询,cdq分治可以解决. 求关于某个点曼哈顿距离(x,y坐标)最近的点——dis(A,B) = |Ax-Bx|+|Ay-By| 但是如何去掉绝对值呢? 查看题解发现假设所有的点 ...
Linux笔记-top命令和load average
参考资料 top相关: http://blog.csdn.net/zhangchenglikecc/article/details/52103737参考资料 cpu核数: https://www.cn ...
任务调度工具Quartz入门笔记
一,导包 1)官网下载:http://www.quartz-scheduler.org/downloads/ 2)Maven <dependency> <groupId>org ...
持续集成之单元测试篇——WWH(讲讲我们做单元测试的故事)
持续集成之单元测试篇--WWH(讲讲我们做单元测试的故事) 前言临近上线的几天内非重大bug不敢进行发版修复,担心引起其它问题(摁下葫芦浮起瓢) 尽管我们如此小心,仍不能避免修改一些bug而引起更多 ...
Go+Python双剑合璧
目的 Python调用Go的方法,Python有很多功能强悍又使用简洁的库.而新生军Go的多核心利用率也是非常强悍的.当然这是明面上的优点.反正你有很多理由想要让Python能够调用Go的方法. 实验 ...
常见的web攻击手段总结
xxs攻击(跨站脚本攻击) 攻击者在网页中嵌入恶意脚本程序,当用户打开该网页时脚本程序便在浏览器上执行,盗取客户端的cookie.用户名密码.下载执行病毒木马程序解决: 我们可以对用户输入的数据进 ...
SNMP 获取交换机端口相关信息
原文地址:https://blog.csdn.net/ysdaniel/article/details/37927541 我们想用snmpwalk查看网络设备的端口,MIB库中相关定义的信息如下: [ ...
mybatis配置文件配错
UG] 2017-10-04 20:04:30,582(137226) --> [http-bio-8082-exec-9] org.springframework.web.servlet.ha ...
LZO
LZO 是致力于解压速度的一种数据压缩算法,LZO 是 Lempel-Ziv-Oberhumer 的缩写.这个算法是无损算法,参考实现程序是线程安全的. 实现它的一个自由软件工具是lzop.最初的库是 ...

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

ItemDOMapper.xml 添加

ItemDOMapper 添加

ItemServiceImpl 添加

ItemController 添加

新建列表 & 详情页面

Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情的更多相关文章

随机推荐

热门专题