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. Feature Extractor[Inception v4]

    0. 背景 随着何凯明等人提出的ResNet v1,google这边坐不住了,他们基于inception v3的基础上,引入了残差结构,提出了inception-resnet-v1和inception ...

  2. abp 基于api接口的页面内容提交

    项目中,后端api接口需要接收来自页面提交的数据.注意下拉控件对应值,应该按以下方式赋值 @Html.DropDownListFor(m => m.IsFolder, new List<S ...

  3. pip install报错Can't roll back cryptography; was not uninstalled

    当使用pip install或者pip install --upgrade报错 Can't roll back cryptography; was not uninstalled 可以进行以下的尝试: ...

  4. Ambari 使用 Hive View 异常处理

    异常:进入Hive View提示user home check fail 详细日志:Service 'userhome' check failed: java.io.FileNotFoundExcep ...

  5. mongodb java3.2驱动 测试 一些记录

    mongo驱动包 自带线程池的概念 获取 MongoClient mongoClient 后 通过客户端(mongoClient ) 获取 库操作 MongoDatabase 获取 表操作 Mongo ...

  6. eclipse不能运行Struts2项目

    刚接触Struts2项目,本想写个HelloWorld上手,谁知道光eclipse配置tomcat就鼓捣一晚上,查阅各种资料. 项目刚开始报错: "java.lang.ClassNotFou ...

  7. linux上搭建svn服务器

    1.检查当前版本,没有的话用yum安装rpm -qa subversion 2.安装yum install subversion -y 2.建库mkdir -p /home/svn/projectsv ...

  8. 比较ASP.NET和ASP.NET Core[经典 Asp.Net v和 Asp.Net Core (Asp.Net Core MVC)]

    ASP.NET Core是.与.Net Core FrameWork一起发布的ASP.NET 新版本,最初被称为ASP.NET vNext,有一系列的命名变化,ASP.NET 5.0,ASP.NET ...

  9. H5 60-浮动元素排序规则

    60-浮动元素排序规则 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  10. Sparse Principal Component Analysis via Regularized Low Rank Matrix Approximation(Adjusted Variance)

    目录 前言 文章概述 固定\(\widetilde{\mathrm{v}}\) 固定\(\widetilde{\mathrm{u}}\) Adjusted Variance 前言 这篇文章用的也是交替 ...