Skip to content

Commit

Permalink
refactor: 修复ps和px取值排序的问题；对界面做了修改，使用bootstrap的panel；
Browse files Browse the repository at this point in the history
  • Loading branch information
@vector4wang
vector4wang committed Aug 3, 2019
1 parent 4ba1444 commit 64c3346
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 87 deletions.
6 changes: 2 additions & 4 deletions flink-2-hbase/src/main/java/com/demo/scheduler/SchedulerJob.java
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
package com.demo.scheduler;

import com.demo.client.HbaseClient;
import org.apache.commons.lang3.time.DateUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.util.*;
import java.util.concurrent.*;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

public class SchedulerJob {

Expand Down
Binary file modified resources/pic/后台数据.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/pic/推荐页面.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions web/src/main/java/com/demo/service/impl/RecommandServiceImpl.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import com.demo.service.ProductService;
import com.demo.service.RecommandService;
import com.demo.service.UserScoreService;
import org.apache.hadoop.hbase.client.coprocessor.BigDecimalColumnInterpreter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
Expand All @@ -18,6 +19,7 @@

import javax.annotation.Resource;
import java.io.IOException;
import java.math.BigDecimal;
import java.util.*;
import java.util.stream.Collectors;

Expand Down Expand Up @@ -139,14 +141,15 @@ private List<String> addRecommandProduct(List<String> topList, String table) {
//获取的产品list是已经排好序的,根据得分排序
try {
ps = HbaseClient.getRow(table, s);
Collections.sort(ps,((o1, o2) -> -(new BigDecimal(o1.getValue().toString()).compareTo(new BigDecimal(o2.getValue().toString())))));
} catch (Exception e) {
logger.warn("Hbase中没有产品【{}】记录", s);
}
if (CollectionUtils.isEmpty(ps)) {
continue;
}
// 只保留最相关的3个产品
int end = ps.size() > PRODUCT_LIMIT ? PRODUCT_LIMIT : ps.size();
int end = Math.min(ps.size(), PRODUCT_LIMIT);
for (int i = 0; i < end; i++) {
if (Objects.nonNull(ps.get(i))) {
ret.add((String) ps.get(i).getKey());
Expand Down Expand Up @@ -214,7 +217,8 @@ private List<String> getDefaultTop() {
List<String> topList = redisClient.getTopList(TOP_SIZE);
topList = topList.stream().filter(Objects::nonNull).collect(Collectors.toList());
if (topList.size() < 10) {
topList.addAll(productService.selectInitPro(TOP_SIZE));
// 尽量多的拿产品列表
topList.addAll(productService.selectInitPro(100));
topList = topList.stream().distinct().collect(Collectors.toList());
logger.info("top: {}", topList);
}
Expand Down
34 changes: 18 additions & 16 deletions web/src/main/resources/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,29 @@
<div class="row">
<!--热度榜-->
<div class="col-sm-6" style="margin-top: 50px;" >
<p1 style="font-size: 50px; margin-left: 250px; margin-bottom: 20px;color: crimson">热度榜</p1>
<!--<div class="row" style=" border: 3px solid #ff877c">-->
<!--<div class="container" style=" border: 3px solid #ff877c">-->
<div class="row" th:each="pro : ${topProduct}" style=" border: 3px solid #ffe9bf">
<div class="col-sm-3">
<img style="width: 100px;height: 100px;" th:src="${pro.picUrl}"/>
</div>
<div class="col-sm-3">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.brandName}"></text>

<div class="panel panel-success">
<div class="panel-heading"><p1>热度榜</p1></div>
<div class="panel-body">
<div class="row" th:each="pro : ${topProduct}" style=" border: 3px solid #ffe9bf">
<div class="col-sm-3">
<img style="width: 100px;height: 100px;" th:src="${pro.picUrl}"/>
</div>
<div class="row">
<text th:text="${pro.itemName}"></text>
<div class="col-sm-3">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.brandName}"></text>
</div>
<div class="row">
<text th:text="${pro.itemName}"></text>
</div>
</div>
</div>
</div>
</div>

<!--</div>-->
</div>
<!--小时内实时日志量-->
<div class="col-sm-4">
Expand Down
157 changes: 92 additions & 65 deletions web/src/main/resources/templates/user.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,89 +7,116 @@
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<style>
.product-item {
margin-top: 5px;
border: 1px solid #ffe9bf;
}
.product-item-img{
width: 100px;
height: auto;
}
.product-action{
/*margin-top: 35%*/
}
</style>
</head>
<body>
<div class="clearfix" style="margin-top:15px;"></div>
<div class="container-fluid">

<div class="row">
<!--热度榜-->
<div class="col-lg-4">
<div class="row">
<p1 style="font-size: 40px; margin-left: 250px; margin-bottom: 20px;color: crimson">热度榜</p1>
</div>
<div class="row" th:each="pro: ${hotList}" style=" margin-top:20px; border: 3px solid #ffe9bf">
<div class="col-lg-6">
<img style="width: 100px;height: 100px;" th:src="${pro.contact.picUrl}"/>
</div>
<div class="col-lg-6">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.contact.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.contact.brandName}"></text>
</div>
<div class="row" style="margin-top: 50px">
<text th:text="${pro.contact.itemName}"></text>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img
src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img
src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img
src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
<div class="panel panel-success">
<div class="panel-heading">热度榜</div>
<div class="panel-body">

<div class="row product-item" th:each="pro: ${hotList}">
<div class="col-lg-6">
<img class="product-item-img" th:src="${pro.contact.picUrl}"/>
</div>
<div class="col-lg-6">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.contact.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.contact.brandName}"></text>
</div>
<div class="row product-action">
<text th:text="${pro.contact.itemName}"></text>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'"
href=""><img
src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'"
href=""><img
src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'"
href=""><img
src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
</div>
</div>
</div>
</div>
</div>

</div>
<!--协同过滤-->
<div class="col-lg-4">
<div class="row">
<p1 style="font-size: 40px; margin-left: 250px; margin-bottom: 20px;color: crimson">协同过滤推荐</p1>
</div>
<div class="row" th:each="pro: ${itemCfCoeffList}" style=" margin-top:20px; border: 3px solid #ffb6c7">
<div class="col-lg-6">
<img style="width: 100px;height: 100px;" th:src="${pro.contact.picUrl}"/>
</div>
<div class="col-lg-6">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.contact.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.contact.brandName}"></text>
</div>
<div class="row" style="margin-top: 50px">
<text th:text="${pro.contact.itemName}"></text>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img src="../icon/浏览.png" style="width: 20px;height: 20px;" ></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img src="../icon/收藏.png" style="width: 20px;height: 20px;" ></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img src="../icon/购买.png" style="width: 20px;height: 20px;" ></a>
<div class="panel panel-info">
<div class="panel-heading">协同过滤推荐</div>
<div class="panel-body">
<div class="row product-item" th:each="pro: ${itemCfCoeffList}">
<div class="col-lg-6">
<img class="product-item-img" th:src="${pro.contact.picUrl}"/>
</div>
<div class="col-lg-6">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.contact.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.contact.brandName}"></text>
</div>
<div class="row product-action">
<text th:text="${pro.contact.itemName}"></text>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'"
href=""><img src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'"
href=""><img src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'"
href=""><img src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--产品画像-->
<div class="col-lg-4">
<div class="row">
<p1 style="font-size: 40px; margin-left: 250px; margin-bottom: 20px;color: crimson">产品画像推荐</p1>
</div>
<div class="row" th:each="pro: ${productCoeffList}" style=" margin-top:20px; border: 3px solid #a1fff3">
<div class="col-lg-6">
<img style="width: 100px;height: 100px;" th:src="${pro.contact.picUrl}"/>
</div>
<div class="col-lg-6">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.contact.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.contact.brandName}"></text>
</div>
<div class="row" style="margin-top: 50px">
<text th:text="${pro.contact.itemName}"></text>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img
src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img
src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img
src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
<div class="panel panel-primary">
<div class="panel-heading">产品画像推荐</div>
<div class="panel-body">
<div class="row product-item" th:each="pro: ${productCoeffList}">
<div class="col-lg-6">
<img class="product-item-img" th:src="${pro.contact.picUrl}"/>
</div>
<div class="col-lg-6">
<div class="row">
<text><strong>id:</strong></text>
<text th:text="${pro.contact.id}"></text>
<text><strong>brand:</strong></text>
<text th:text="${pro.contact.brandName}"></text>
</div>
<div class="row product-action">
<text th:text="${pro.contact.itemName}"></text>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img
src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img
src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
<a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img
src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -100,7 +127,7 @@
<!--日志发送函数-->
<script>
function sendLog(id, prod, action) {
var url = "http://localhost:8082/log?id=" + id + "&prod=" + prod + "&action=" + action;
var url = "/log?id=" + id + "&prod=" + prod + "&action=" + action;
var request = new XMLHttpRequest();
request.open("GET", url);
request.send();
Expand Down

0 comments on commit 64c3346

Please sign in to comment.