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 构建电商基础秒杀项目 (九) 商品列表 & 详情的更多相关文章

  1. Spring Boot 构建电商基础秒杀项目 (八) 商品创建

    SpringBoot构建电商基础秒杀项目 学习笔记 新建数据表 create table if not exists item ( id int not null auto_increment, ti ...

  2. Spring Boot 构建电商基础秒杀项目 (一) 项目搭建

    SpringBoot构建电商基础秒杀项目 学习笔记 Spring Boot 其实不是什么新的框架,它默认配置了很多框架的使用方式,就像 maven 整合了所有的 jar 包, Spring Boot ...

  3. Spring Boot 构建电商基础秒杀项目 (十二) 总结 (完结)

    SpringBoot构建电商基础秒杀项目 学习笔记 系统架构 存在问题 如何发现容量问题 如何使得系统水平扩展 查询效率低下 活动开始前页面被疯狂刷新 库存行锁问题 下单操作步骤多,缓慢 浪涌流量如何 ...

  4. Spring Boot 构建电商基础秒杀项目 (十一) 秒杀

    SpringBoot构建电商基础秒杀项目 学习笔记 新建表 create table if not exists promo ( id int not null auto_increment, pro ...

  5. Spring Boot 构建电商基础秒杀项目 (十) 交易下单

    SpringBoot构建电商基础秒杀项目 学习笔记 新建表 create table if not exists order_info ( id varchar(32) not null defaul ...

  6. Spring Boot 构建电商基础秒杀项目 (七) 自动校验

    SpringBoot构建电商基础秒杀项目 学习笔记 修改 UserModel 添加注解 public class UserModel { private Integer id; @NotBlank(m ...

  7. Spring Boot 构建电商基础秒杀项目 (六) 用户登陆

    SpringBoot构建电商基础秒杀项目 学习笔记 userDOMapper.xml 添加 <select id="selectByTelphone" resultMap=& ...

  8. Spring Boot 构建电商基础秒杀项目 (五) 用户注册

    SpringBoot构建电商基础秒杀项目 学习笔记 UserService 添加 void register(UserModel userModel) throws BusinessException ...

  9. Spring Boot 构建电商基础秒杀项目 (四) getotp 页面

    SpringBoot构建电商基础秒杀项目 学习笔记 BaseController 添加 public static final String CONTENT_TYPE_FORMED = "a ...

随机推荐

  1. 普通用户使用Docker

    1.查询是否有docker组 cat /etc/group 如果没有可以通过该命令添加(一般默认是有的) sudo groupadd docker 2.将当前用户添加到docker组 sudo use ...

  2. HyperLedger Fabric 1.0的Transaction处理流程

    如果把区块链比作一个只能读写,不能删改的分布式数据库的话,那么事务和查询就是对这个数据库进行的最重要的操作.以比特币来说,我们通过钱包或者Blockchain.info进行区块链的查询操作,而转账行为 ...

  3. KNN-笔记(2)

    1 - kd Tree KD树是一种对K维空间中的实例点进行存储以便对其进行快速检索的树形数据结构.KD树其实就是二叉树,表现为对K维空间的一个划分,构造kd树相当于不断的用垂直于坐标轴的超平面将k维 ...

  4. Git安装以及常用命令(图文详解)

    **Git安装以及常用命令** 1.下载安装Git,傻瓜式安装相信大家都会. 官网下载地址:[https://git-scm.com/downloads] 2.Git基本操作 (1)git --ver ...

  5. 深入浅出Tomcat系列

    原本打算一篇文章就发了的,无奈文章太长,阅读压力较大.为了让阅读体验更好一些,还是分多篇吧,大概6篇. 下面是这个主题的目录: 深入浅出Tomcat/1- 来历和配置文件 深入浅出Tomcat/2 - ...

  6. Meterpreter常⻅见⽤用法

    0x01 背景 meterpreter作为后渗透模块有多种类型,并且命令由核⼼心命令和扩展库命令组成,极⼤大的丰富了了攻击⽅方式. 需要说明的是meterpreter在漏漏洞洞利利⽤用成功后会发送第二 ...

  7. Python requests 多线程抓取 出现HTTPConnectionPool Max retires exceeded异常

    https://segmentfault.com/q/1010000000517234 -- ::, - oracle - ERROR - data format error:HTTPConnecti ...

  8. pycharm 中 import requests 报错

    一 , 使用Pycharm来抓取网页的时候,要导入requests模块,但是在pycharm中 import requests 报错. 原因: python中还没有安装requests库 解决办法: ...

  9. java.lang.LinkageError: JAXB 2.0 API is being loaded from the bootstrap classloader

    我的解决办法:    1.如果是application工程,则在程序中打印出         system.out.println(System.getProperty("java.endo ...

  10. JavaScript对象访问器属性

    对象访问器就是setter和getter,他们的作用就是 提供另外一种方法来获取或者设置对象的属性值, 并且在获取和设置的时候,可以用一定的其他操作. 看下面代码: <script> va ...