Spring Boot 构建电商基础秒杀项目 (九) 商品列表 & 详情
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 构建电商基础秒杀项目 (九) 商品列表 & 详情的更多相关文章
- 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 ...
随机推荐
- 初学Python——文件操作第三篇
一.引言 什么?有了第二篇文件操作还不够?远远不够!而且在读完第三篇文件操作还是不够.关于文件的操作,后续的学习中将不断学习新的操作方式,使用更加合适的方法. 进入正题,上一篇讲到,Python对文件 ...
- Egg入门学习(二)---理解service作用
在上一篇文章 Egg入门学习一 中,我们简单的了解了Egg是什么东西,且能做什么,这篇文章我们首先来看看官网对Egg的整个框架的约定如下,及约定对应的目录是做什么的,来有个简单的理解,注意:我也是按照 ...
- Java多线程（三）—— synchronized关键字详解
一.多线程的同步 1.为什么要引入同步机制 在多线程环境中,可能会有两个甚至更多的线程试图同时访问一个有限的资源.必须对这种潜在资源冲突进行预防. 解决方法:在线程使用一个资源时为其加锁即可. 访问资 ...
- Jenkins - SSH认证方式拉取Git代码
1.本地生成密钥 [root@root ~] ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which ...
- R语言
什么是R语言编程? R语言是一种用于统计分析和为此目的创建图形的编程语言.不是数据类型,它具有用于计算的数据对象.它用于数据挖掘,回归分析,概率估计等领域,使用其中可用的许多软件包. R语言中的不同数 ...
- js中的join(),reverse()与 split()函数用法解析
<script> /* * 1:arrayObject.reverse() * 注意: 该方法会改变原来的数组,而不会创建新的数组.此函数可以将数组倒序排列 * 2:arrayObject ...
- Alibaba Cloud Toolkit for Eclipse & ECS、EDAS 或容器服务 Kubernetes
UserGuide_V2.1.0http://toolkit.aliyun.com/eclipse/?spm=5176.2020520130.105.3.3c3b697bOHma9f&msct ...
- winform启动界面+登录窗口
需求场景:先展示启动界面,然后打开登录界面,如果登录成功就跳转到主界面 首先在程序的入口路径加载启动界面,使用ShowDialog显示界面, 然后在启动界面中添加定时器,来实现显示一段时间的效果,等到 ...
- Linux系统中常用的命令汇总
日常开发,上线的服务器系统一般都是Linux系统,所以,熟练的掌握常用的命令操作就尤其的重要了 1) 查看某个服务的运行情况 (例如Redis) ps -ef | grep redis //e-显示程 ...
- 【Python3练习题 005】输入三个整数x,y,z，请把这三个数由小到大输出
import re x, y, z = re.split(',| |,| ', input('请输入3个数字,用逗号或空格隔开:'))x, y, z = int(x), int(y), int(z) ...