<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<title>facebook parser</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<style>
* {
font-family: Microsoft JhengHei;
}
.header {
background: #3B5998;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="header" style="text-align:center">Facebook 粉絲專頁剖析小幫手</h1>
<hr>
<input v-on:keyup.13="search" :disabled="searching" type="text" class="form-control" v-model="keyword" placeholder="輸入粉絲專頁的id"
/>
<div v-show="searching" class="alert alert-warning" style="margin-top:15px;" role="alert">
<img height="20px" src="images/loader.gif" alt=""> <strong> 搜尋中 </strong> 小爬蟲正在努力的爬，我們稍微等牠一下吧！
</div>
<hr>
<img :src="img" alt="">{{name}} <br><br> 一共{{posts.length}}則貼文 所有貼文被按了{{totalLikes}}個讚， 分享了{{totalShares}}次，並且有{{totalComments}}則回覆
<hr>
<div id="myChart"></div>
<hr>
<table class="table">
<thead>
<tr>
<th>created_time</th>
<th>likes</th>
<th>shares</th>
<th>comments</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts">
<td> {{post.created_time}} </td>
<td> {{post.likes.summary.total_count}} </td>
<td> {{post.shares.count}} </td>
<td> {{post.comments.summary.total_count}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
searching: false,
name: '',
img: '',
totalLikes: 0,
totalShares: 0,
totalComments: 0,
keyword: 'hsuehjendada',
posts: []
},
methods: {
search: function () {
this.searching = true;
$.ajax({
type: 'GET',
url: '/fb/' + this.keyword,
timeout: 50000,
success: function (response) {
if (response.code) {
switch (response.code) {
case 803:
alert("輸入的ID錯誤，查無粉絲專頁");
break;
default:
alert("爬蟲時發生錯誤");
break;
}
app.searching = false;
return;
}
var hrs = [];
_.each(response.data, function (o) {
o.shares = o.shares ? o.shares : { count: 0 };
var hour = moment(o.created_time).format('H');
o.created_time = moment(o.created_time).format('YYYY/MM/DD , a h:mm:ss');
hrs.push(hour);
return o;
});
hrs = _.countBy(hrs);
app.totalLikes = _.sumBy(response.data, function (o) { return o.likes.summary.total_count; });
app.totalShares = _.sumBy(response.data, function (o) { return o.shares.count; });
app.totalComments = _.sumBy(response.data, function (o) { return o.comments.summary.total_count; });
app.posts = response.data;
app.name = response.info.name;
app.img = response.info.img;
console.log(app.posts);
app.searching = false;
$("#myChart").html('<canvas id="chart"></canvas>');
var ctx = document.getElementById('chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
datasets: [{
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
label: '發文時間',
data: [hrs[0], hrs[1], hrs[2], hrs[3], hrs[4], hrs[5], hrs[6], hrs[7], hrs[8], hrs[9], hrs[10],
hrs[11], hrs[12], hrs[13], hrs[14], hrs[15], hrs[16], hrs[17], hrs[18], hrs[19], hrs[20],
hrs[21], hrs[22], hrs[23]]
}]
}
});
}
});
}
}
})
</script>
</body>
</html>