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

随机推荐

【Qt】Qt Quick 之 QML 与 C++ 混合编程详解
Qt Quick 之 QML 与 C++ 混合编程详解 - CSDN博客专栏:Qt Quick简明教程 - CSDN博客 .
NLog配置分享
新建一个文件命名为NLog.Config,然后添加如下代码 <?xml version="1.0" encoding="utf-8" ?> < ...
disconf原理 “入坑”指南
之前有了解过disconf,也知道它是基于zookeeper来做的,但是对于其运行原理不太了解,趁着周末,debug下源码,也算是不枉费周末大好时光哈 :) .关于这篇文章,笔者主要是参考discon ...
Jquery遍历之获取子级元素、同级元素和父级元素
Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...
Python_每日习题-0008-九九乘法表
题目: 输出9*9乘法口诀表. 程序分析:分行与分列的考虑,共9行9列,i控制行,j控制列. for i in range(1, 10): for j in range(1, i+1): print( ...
H5 22-通配符选择器
22-通配符选择器我是标题我是段落我是超链接 --> 我是标题我是段落我是超链接 <!DOCTYPE html> <html lang="en"& ...
Dijkstra的应用
每次只涉及一边两端点的极值循环转移应用Dijkstra.
对Vuejs框架原理名词解读
渐进式()+虚拟Dom: vue-cli 遍历Dom:先序遍历DOM树的5种方法! 三层架构+m v c +mvp+m v vm()+MVC,MVP 和 MVVM 的图示剖析vue MVVM实现原理 ...
iOS开发——无网占位图的实现
https://www.jianshu.com/p/d537393fe247 https://github.com/wyzxc/CQPlaceholderViewhttps://github.com/ ...
抽象代数-p22商群
G/e={g{e}|g∈G}={{g}|g∈G}=G G/G={gG|g∈G}={G} (gG=G左乘g是G上的双射,它的逆映射是左乘g^-1) 所以 G/G 只有一个元素,所有G 就只能是 ...

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

ItemDOMapper.xml 添加

ItemDOMapper 添加

ItemServiceImpl 添加

ItemController 添加

新建列表 & 详情页面

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

随机推荐

热门专题