-
Notifications
You must be signed in to change notification settings - Fork 0
/
my_praise.html
299 lines (276 loc) · 13.4 KB
/
my_praise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html>
<head>
<title>weibo-发现好玩有趣的事情</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/jquery/jquery.js"></script>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jQuery-cookie.js"></script>
<link href="styles/weibo.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function res(){
var content = prompt("请输入要回复的内容","内容");
$.ajax({
type: "POST",
url:"url",//-------------------------------------------------------需要填写php的URL
async: false,
data: {"username":$.cookie("username"),"request":"comment","message":$("#message").val(),"content":content},//给服务器端传递用户昵称，类型为json,传递的类型需要和后台协商，这里给出必要3项：评论用户名称、请求类型、被评论微博id、评论内容
dataType:"text",//需要传递回确认信息
success: function(){
window.location.reload();//刷新页面
}
error: function(){
alert("回复失败！");
}
});
};
</script>
<script type="text/javascript">
function pra(){
$.ajax({
type: "POST",
url:"url",//-------------------------------------------------------需要填写php的URL
async: false,
data: {"username":$.cookie("username"),"request":"praise","message":$("#message").val()},//给服务器端传递用户昵称，类型为json,传递的类型需要和后台协商，这里给出必要3项：评论用户名称、请求类型、被评论微博id
dataType:"text",//需要传递回新的被赞数
success: function(data){
var num_praises = data;
$("#num_praises").text(num_praises);
}
error: function(){
alert("回复失败！");
}
});
};
</script>
<script>
$(document).ready(function(){
if($.cookie("username")) $("#username").text($.cookie("username"));//导航栏中的用户名字段设置为当前登录用户名
});
<!--消息获取-->
$(document).ready(function(){
$.ajax({
type: "GET",
url://-------------------------------------------------------需要填写php的URL
async: false,
data: {"username":$.cookie("username"),"request":"my_praise"},//给服务器端传递用户昵称，类型为json,这里是本人用户名称,而且需要用request标识出需要获取的数据是我赞的微博
dataType:"json",//需要传递回用户标签表述descrip，用户头像headurl，发送时间time，用户名称sendername，微博内容message，评论人数num_comments，点赞人数num_praises，这些都是发送微博的人的数据
success: function(data){
var json = eval(data); //数组
$.each(json, function (index, item) {
//循环获取数据并且填充相应的html元素
var descrip = json[index].descrip;
var headurl= json[index].headurl;
var time = json[index].time;
var sendername = json[index].sendername;
var message = json[index].message;
var num_comments = json[index].num_comments;
var num_praises = json[index].num_praises;
$("#head").attr("src",headurl); //填充微博主题消息
$("#descrip").text(descrip);
$("#time").text(time);
$("#sendername").text(sendername);
$("#message").text(message);
$("num_comments").text(num_comments);
$("num_praises").text(num_praises);
}
)}
error:function(){
alert("获取微博消息失败");
}
});
});
</script>
</head>
<body background="images/pbg.jpg">
<!------------------------------------------头部------------------------------------>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" style="font-size:30px"><strong>weibo<strong/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" type="text" />
</div> <button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="http://localhost:81/weibo/weibo.html"><span class="glyphicon glyphicon-home" style="color: rgb(0,0,0);"> 首页</span></a><!--需要填入超链接-->
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-film" style="color: rgb(0,0,0);"> 视频</span></a>
</li>
<li>
<a id="username" href="#"><span class="glyphicon glyphicon-user" style="color: rgb(0,0,0);">用户名我是weibo</span></a><!--需要显示用户名-->
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog" style="color: rgb(0,0,0);">设置</span><strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">账号设置</a>
</li>
<li>
<a href="#">会员中心</a>
</li>
<li>
<a href="#">V认证</a>
</li>
<li>
<a href="#">隐私设置</a>
</li>
<li>
<a href="#">屏蔽设置</a>
</li>
<li>
<a href="#">消息设置</a>
</li>
<li>
<a href="#">帮助中心</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container" style="background-color:rgba(36,61,89,0.25);">
<!--------------------------------------左部------------------------------------------>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix" >
<div class="col-md-2 column">
<ul class="nav nav-tabs nav-stacked" style="position:fixed;width:170px;top:60px;font-size:15px;background-color:#E8E8E8;opacity:0.5;">
<!--------------超链接部分没有填入，请按照配置环境填入------>
<li>
<a href="#" ><span class="glyphicon glyphicon-home" style="color: rgb(0,0,0);"> 首页</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-heart" style="color: rgb(0,0,0);"> 我的关注</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-heart" style="color: rgb(0,0,0);"> 关注我的</span></a>
</li>
<li class="active">
<a href="#"><span class="glyphicon glyphicon-thumbs-up" style="color: rgb(0,0,0);"> 我的赞</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-thumbs-up" style="color: rgb(0,0,0);"> 收到赞</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-edit" style="color: rgb(0,0,0);"> 我的评论</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-edit" style="color: rgb(0,0,0);"> 收到评论</span></a>
</li></hr>
<li>
<a href="#"><span class="glyphicon glyphicon-hand-right" style="color: rgb(0,0,0);"> 热门微博</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-hand-right" style="color: rgb(0,0,0);"> 热门视频</span></a>
</li></hr>
<li>
<a href="#"><span class="glyphicon glyphicon-hand-right" style="color: rgb(0,0,0);"> 搞笑幽默</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-hand-right" style="color: rgb(0,0,0);"> 视频音乐</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-hand-right" style="color: rgb(0,0,0);"> 新闻趣事</span></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-hand-right" style="color: rgb(0,0,0);"> 娱乐圈</span></a>
</li>
</ul>
</div>
<!-----------------------------------------------------------中部---------------------------------------------------->
<div class="col-md-7 column" style="position:relative;top:60px;">
<div class="page-header" style="background-color:white;margin-left:-15px;height:25px;margin-bottom:5px;margin-top:-10px;opacity:0.8;margin-right:-15px;position:relative;">
<h4>赞过的微博</h4>
</div>
<!------------------------------------------------消息展示，我们只提供了消息的HTML模板，所以前端接口需要你们劳心了---------------------------------------------->
<!--消息的获取，通过ajax和服务器交互，发送用户username或者uid，得到json类型数据，然后填充即可，函数已在上面给出-->
<!--------------------------------------------一条消息------------------------------------------>
<div class="row clearfix" style="background-color:white;position:relative;">
<div class="col-md-12 column">
<!-----------------------------------头像和名称------------------------------------>
<div class="row clearfix">
<div class="col-md-8 column">
<div class="media">
<a id="head" href="#" class="pull-left" target="_blank"><img src="images/weibo.jpg" class="media-object" style="border-radius:50%;width:80px;height:80px;" alt='' /></a>
<div class="media-body">
<a id="sendername" href="#" target="_blank"><h4 class="media-heading">
我是weibo
</h4></a>
<p id="time" class="txt" style="text-align:left;font-size:12px;color:#B3B3B3">5月24日 16:20</p>
<p id="descrip">一个乐于发现好玩有趣事物的新新人类</p>
</div>
</div>
</div>
<div class="col-md-1 column"></div>
</div>
<!------------------------------------中间消息主体------------------------------>
<div class="row clearfix">
<div class="col-md-12 column">
<!---------------------------文字部分---------------------->
<div class="txt" style="font-family:sans-serif;">
<p id="message">#今天你吃了什么#
今天我吃了好多喜欢的</p>
</div></br>
</div>
</div>
<!---------------------------------------下面的转发、评论、点赞-------------------------------------->
<div class="row clearfix">
<div class="col-md-12 column">
<div class="col-md-9 column"></div>
<div class="col-md-3 column"><div class="txt">
<span class="glyphicon glyphicon-edit"></span><a id="num_comments" href="javascript:;" onclick="res()">57935</a></span>
<span class="glyphicon glyphicon-thumbs-up"></span><a id="num_praises" href="javascript:;" onclick="pri()"" >123588</a></span></div>
</div>
</div>
</div>
</div>
</div><br/>
<!------------------------------------------------------------消息结束----------------------------------------------------------->
<!------------------------------------------------------------消息展示结束----------------------------------------------------------->
</div><br/>
<!------------------------------------------------------------------右部------------------------------------------------------------------>
<div class="col-md-3 column" >
<div class="row clearfix">
<div class="col-md-12 column" style="width:280px;;background-color:white;opacity:0.8;margin-top:40px;margin-left:10px;">
<a style=" color:#666; font-size:24px" href=""><span class="glyphicon glyphicon-thumbs-up" style="color: rgb(365,180,0);"> 赞过的兴趣主页</span></a><!--这里href指向other_page的url-->
</div>
</div>
</br>
<div class="row clearfix">
<div class="col-md-12 column" style="width:280px;background-color:white;opacity:0.7;margin-left:10px;">
<h4 class="obj_name"><span class="main_title W_fb W_f14">微博意见反馈</span></h4>
<div class="WB_innerwrap">
<div class="list_wrap">
<a style="color: rgb(0,0,0)";>欢迎使用微博并提出宝贵建议。请<a href="#">点击这里</a>提交微博意见反馈。</a><br><br>
<ul class="ul_hot" id="sgs">
<li class="txt">
<a href="#">微博常见问题</a>
</li>
<li class="txt">
<a href="#">微博客服专区</a>
</li>
<li class="txt">
<a href="#">全国人大常委会《关于加强网络信息保护的决定》</a>
</li>
</ul>
<br>
<a href="#" style="font-size:18px;color: rgb(180,180,0);"><span class="glyphicon glyphicon-warning-sign"> 微博举报处理中心</a>
</div>
</div>
</div>
</div>
</body>