把商品的购买数量排列下来(quantity)
而且我们需要把(product_id)进行合并,因为表示的是同一个商品。
这里我们给的是商品的名称,但是上面的那个表格没有,所以我们这里要使用多表关联查询
order_detail里面的product_id对应的就是product里面的id
后台开始写项目和前端对接
后端首先要创建一个实体类和要传递给前端的数据进行对应。
这里我们是创建了两个集合(这个集合是属于纵向的)
这个泛型我们发现没有写order_detail的实体类,这个是没关系的,我们写Product这个实体类是让mybaits-plus自动和数据库进行关联,形成查询语句的映射,这里我们已经写了注解(自定义的sql查询语句)
这个集合我们还不能直接返回到前端,因为这里的集合是横向的,前端要的是纵向的。
[ProductBarVO(name=啫喱水, count=37), ProductBarVO(name=润肤露, count=10), ProductBarVO(name=洁面装, count=66), ProductBarVO(name=电饭锅, count=6), ProductBarVO(name=荣耀3C, count=3), ProductBarVO(name=联想Y系列, count=100), ProductBarVO(name=红短沙发, count=10)]
接下来的目的我们就是把它分成两个集合(把ProductVO转成BarVO)
这里是测试了一下
得到的结果
BarVO(names=[啫喱水, 润肤露, 洁面装, 电饭锅, 荣耀3C, 联想Y系列, 红短沙发], values=[37, 10, 66, 6, 3, 100, 10])
现在我们要做的就是把BarVO对象传到前端。
service层相当于注入了mapper层然后就可以查询数据库的方法
@RequestMapping 可以接收到任何的请求。
这里使用jquery的目的就是为了实现ajax交互。
如何可以弹出来说明jquery的环境是ok的。
接下来我们就是在jquery里面发ajax请求
不需要传参的我们直接写success,直接写回调。
data指的就是它返回的数据(这个data是在回调里面出了回调就失去它的作用域了)
所以我们要把内容全部写在回调里面
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="layui/jquery-1.8.3.min.js"></script>
<script src="layui/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
$(function(){
$.ajax({
"url":"/barVO",
"type":"POST",
"success":function(data){
console.log(data.names)
console.log(data.values)
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: data.names
},
yAxis: {
type: 'value'
},
series: [{
data: data.values,
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
})
</script>
</body>
</html>
接下来我们看下使用饼图来展示后端的数据
这里是为了实现获取对象以后重新赋值给PieVO,因为ProductBarVO里面的属性值和PieVO的属性值不同。
这里我们也可以不写PieVO,直接使用ProductVO这个实体类
但是我们会发现返回count的时候,数据不会显示。
代码地址:https://www.lanzoux.com/b015sadjc
密码:c297