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. Ubuntu18.04安装Tensorflow

    1.Ubuntu安装Python3.6: 首先拉取远程仓库 sudo add-apt-repository ppa:jonathonf/python-3.6 更新源 sudo apt-get upda ...

  2. CSS的插入和选择器介绍

    一.认识CSS样式 1.定义 CSS全称:层叠样式表(Cascading Style Sheets) 主要作用:定义HTML内容在浏览器内的显示样式,比如文字大小.颜色.字体加粗等 优点:通过定义某个 ...

  3. 狄利克雷卷积&莫比乌斯反演总结

    狄利克雷卷积&莫比乌斯反演总结 Prepare 1.\([P]\)表示当\(P\)为真时\([P]\)为\(1\),否则为\(0\). 2.\(a|b\)指\(b\)被\(a\)整除. 3.一 ...

  4. Project Tungsten：让Spark将硬件性能压榨到极限（转载）

    在之前的博文中,我们回顾和总结了2014年Spark在性能提升上所做的努力.本篇博文中,我们将为你介绍性能提升的下一阶段——Tungsten.在2014年,我们目睹了Spark缔造大规模排序的新世界纪 ...

  5. vue 项目中添加阿里巴巴矢量图

    1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...

  6. C#邮件发送类 简单实用 可自定义发件人名称

    上图看效果 MailHelper: public class MailHelper { public bool SendMail(MailSender sender,out string errorM ...

  7. 跨界 - Omi 发布多端统一框架 Omip 打通小程序与 Web

    Omip 今天,Omi 不仅仅可以开发桌面 Web.移动 H5,还可以直接开发小程序!直接开发小程序!直接开发小程序! Github Omi 简介 Omi 框架是微信支付线研发部研发的下一代前端框架, ...

  8. python 跨域处理方式

    因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...

  9. MSSQL清理日志\删除数据\收缩数据库

    首先解释一下数据库的版本是SQL Server 2012.清除的数据库800多G,磁盘空间就剩10多G,数据量最多的表有2亿.目的就是清楚去年的数据(2017年之前),遇到了一些问题,总结起来就是三方 ...

  10. 全局关键字搜索：Element UI Table内容过滤\jQuery过滤器fastLiveFilter插件\BootstrapVue插件;

    ```html data:{ resultMaster: [], otableData:[], schfilter:'' } watch: { schfilter: function(val, old ...