Skip to content

Commit 6a4d17a

Browse files
author
chunwei
committed
almost done
1 parent ad31454 commit 6a4d17a

18 files changed

+290
-104
lines changed

‎.idea/encodings.xml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,45 @@
55
"main": "server.js",
66
"dependencies": {
77
"body-parser": "^1.4.3",
8-
"express": "^4.4.5",
9-
"jquery": "^2.1.4",
10-
"react": "^0.13.3",
11-
"react-router": "^1.0.0-rc1"
8+
"express": "^4.4.5",
9+
"jquery": "^2.1.4",
10+
"js-cookie": "^2.0.3",
11+
"react": "^0.13.3",
12+
"react-router": "^1.0.0-rc1"
13+
},
14+
"devDependencies": {
15+
"autoprefixer-loader": "^3.1.0",
16+
"babel": "^5.8.23",
17+
"babel-core": "^5.8.24",
18+
"babel-loader": "^5.3.2",
19+
"css-loader": "^0.16.0",
20+
"file-loader": "^0.8.4",
21+
"style-loader": "^0.12.3",
22+
"url-loader": "^0.5.6",
23+
"webpack": "^1.11.0",
24+
"webpack-dev-server": "^1.10.1"
1225
},
13-
"devDependencies": {
14-
"autoprefixer-loader": "^3.1.0",
15-
"babel": "^5.8.23",
16-
"babel-core": "^5.8.24",
17-
"babel-loader": "^5.3.2",
18-
"css-loader": "^0.16.0",
19-
"file-loader": "^0.8.4",
20-
"style-loader": "^0.12.3",
21-
"url-loader": "^0.5.6",
22-
"webpack": "^1.11.0",
23-
"webpack-dev-server": "^1.10.1"
24-
},
2526
"scripts": {
2627
"test": "echo \"Error: no test specified\" && exit 1",
27-
"start": "node server.js",
28-
"build": "webpack --config webpack.build.config.js",
29-
"dev-server": "webpack-dev-server --devtool eval --progress --colors --hot --content-base public/build",
30-
"deploy": "set NODE_ENV=production&&webpack -p --config webpack.production.config.js"
28+
"start": "node server.js",
29+
"build": "webpack --config webpack.build.config.js",
30+
"dev-server": "webpack-dev-server --host 0.0.0.0 --devtool eval --progress --colors --hot --content-base public/build",
31+
"deploy": "set NODE_ENV=production&&webpack -p --config webpack.production.config.js"
3132
},
3233
"repository": {
3334
"type": "git",
34-
"url": "https://github.com/chunwei/react-tutorial.git"
35+
"url": "https://github.com/chunwei/react-tutorial.git"
3536
},
3637
"keywords": [
3738
"react",
3839
"tutorial",
3940
"comment",
4041
"example"
4142
],
42-
"author": "Lu Chunwei <[email protected]>",
43-
"license": "ISC",
44-
"homepage": "https://github.com/chunwei/react-tutorial",
45-
"engines": {
46-
"node": "0.12.x"
43+
"author": "Lu Chunwei <[email protected]>",
44+
"license": "ISC",
45+
"homepage": "https://github.com/chunwei/react-tutorial",
46+
"engines": {
47+
"node": "0.12.x"
4748
}
4849
}

‎public/css/base.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44
font-size: 15px;
55
line-height: 1.7;
66
margin: 0 0 72px 0;
7-
padding: 30px;
7+
padding: 10px;
88
}
99

1010
a {

‎public/index.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
66
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
77

8-
<!-- <meta name="rsvp-baseurl" content="http://192.168.1.222:8080/social/">
8+
<meta name="rsvp-baseurl" content="http://192.168.1.166/tourweb/social/">
99
<meta name="rsvp-selecturl" content="select">
1010
<meta name="rsvp-inserturl" content="insert">
11-
<meta name="rsvp-likeurl" content="like">-->
12-
<meta name="rsvp-openid" content="aaaaaaaaaaaaaaaaaaaaaaaaa">
13-
<meta name="rsvp-appid" content="x594623abcdefg">
11+
<meta name="rsvp-likeurl" content="like">
12+
<meta name="rsvp-openid" content="o2ZUBj9_wYxViN-icURjOqQlYfBQ">
13+
<meta name="rsvp-appid" content="wx1beebdac94aeb4aa">
1414
<meta name="rsvp-uuid" content="77_121_jd">
1515

1616
<title>Hello React</title>
@@ -21,7 +21,9 @@
2121
</head>
2222
<body>
2323
<div id="comments"></div>
24-
<script src="http://localhost:8080/webpack-dev-server.js"></script>
25-
<script src="http://localhost:8080/app.js"></script>
24+
<script src="http://192.168.1.166:8080/webpack-dev-server.js"></script>
25+
<script src="http://192.168.1.166:8080/comment.js"></script>
26+
27+
<script src="http://192.168.1.166:8081/target/target-script-min.js#comment"></script>
2628
</body>
2729
</html>

‎public/index1.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
8+
<!-- <meta name="rsvp-baseurl" content="http://192.168.1.222:8080/social/">
9+
<meta name="rsvp-selecturl" content="select">
10+
<meta name="rsvp-inserturl" content="insert">
11+
<meta name="rsvp-likeurl" content="like">-->
12+
<meta name="rsvp-openid" content="aaaaaaaaaaaaaaaaaaaaaaaaa">
13+
<meta name="rsvp-appid" content="x594623abcdefg">
14+
<meta name="rsvp-uuid" content="77_121_jd">
15+
16+
<title>Hello React</title>
17+
<!-- Not present in the tutorial. Just for basic styling. -->
18+
<link rel="stylesheet" href="css/base.css" />
19+
20+
21+
</head>
22+
<body>
23+
<div id="comments"></div>
24+
<script src="http://localhost:8080/webpack-dev-server.js"></script>
25+
<script src="http://localhost:8080/app.js"></script>
26+
</body>
27+
</html>

‎server.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,6 @@ app.post('/like', function(req, res) {
107107
});
108108

109109

110-
app.listen(app.get('port'), function() {
110+
app.listen(app.get('port'),'0.0.0.0', function() {
111111
console.log('Server started: http://localhost:' + app.get('port') + '/');
112112
});

‎src/components/comment/Comment.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,22 @@
33
*/
44
import React from 'react';
55
import {Link} from 'react-router';
6-
import LikeButton from '../like/LikeBotton.js'
6+
import LikeButton from '../like/LikeBotton.js';
77

88
import '../utils/datetime.js';
99

1010
var CommentHeader = React.createClass({
1111
render: function () {
12-
var defaultAvatar = require('./user.png');
13-
var avatar=this.props.author.avatar||defaultAvatar;
12+
var defaultAvatar = require('./user.png');
13+
var avatar=this.props.author.avatar||defaultAvatar;
14+
let tag=(this.props.showTag&&this.props.tag)?(<span className="tag">#{this.props.tag}</span>):null;
1415
return (
1516
<div className="commentHeader">
1617
<div className="commentAuthor">
1718
<span className="avatar"><img src={avatar}/></span>
18-
<span className="author">{this.props.author.name||"游客"}</span>
19+
<span className="author">{this.props.author.name||"游客"} {tag}</span>
1920
</div>
20-
<LikeButton liked={this.props.liked} count={this.props.likedCount} commentid={this.props.id} url="like"/>
21+
<LikeButton liked={this.props.liked} count={this.props.likedCount} commentid={this.props.id}/>
2122
</div>
2223
);
2324
}
@@ -38,7 +39,7 @@ var CommentFooter = React.createClass({
3839
let towhoname=this.props.towhoname;
3940
let replyUrl=`/reply/${this.props.id}`;//`/reply/${pid}/${towho}/${towhoname}`;
4041
let time=new Date(this.props.time).toRelativeTime();
41-
let link=(this.props.id+'').substr(0,2)=='__'?'':<Link to={replyUrl}>回复</Link>;
42+
let link=((this.props.id+'').substr(0,2)=='__')?'':<Link to={replyUrl}>回复</Link>;
4243
return (
4344
<div className="commentFooter">
4445
<span className="time">{time}</span>
@@ -50,13 +51,13 @@ var CommentFooter = React.createClass({
5051
var Comment = React.createClass({
5152
render: function () {
5253
let comment=this.props.comment;
53-
let liked=comment.liked||0;
54+
let liked=(comment.liked&&parseInt(comment.liked))||0;
5455
let pid=this.props.pid?this.props.pid:comment.id;
5556
return (
5657
<div className="comment">
57-
<CommentHeader author={comment.author} liked={liked} likedCount={comment.likedCount} id={comment.id}/>
58+
<CommentHeader author={comment.author} liked={liked} likedCount={comment.likedCount} id={comment.id} showTag={this.props.showTag} tag={comment.tag}/>
5859
<CommentContent>{comment.text}</CommentContent>
59-
<CommentFooter id={comment.id} pid={pid} towho={comment.author.id} towhoname={comment.author.name} time={comment.time}/>
60+
<CommentFooter id={comment.id} pid={pid} towho={comment.author.id} towhoname={comment.author.name} time={comment.time} />
6061
{this.props.children}
6162
</div>
6263
);

‎src/components/comment/CommentBox.js

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import './comment.css';
66

77
import $ from 'jquery';
88
import React from 'react';
9+
import {Link} from 'react-router';
910
import CommentList from './CommentList.js'
1011
import CommentBar from './CommentBar.js'
1112
import RSVP from '../utils/common.js'
@@ -19,7 +20,15 @@ var CommentBox = React.createClass({
1920
data:{params:JSON.stringify(RSVP.getSelectParams())},
2021
success: function (res) {
2122
if(res&&res.Status=="Success") {
22-
this.setState({data: res.Result,hasmore:res.Result.length>=RSVP.config.pagesize});
23+
var comments=res.Result;
24+
if(!comments||comments.length==0){
25+
comments=[];
26+
var first=RSVP.createComment();
27+
first.author.name='景区';
28+
first.text='欢迎留下您的足迹！';
29+
comments.push(first);
30+
}
31+
this.setState({data: comments,hasmore:res.Result.length>=RSVP.config.pagesize});
2332
}
2433
}.bind(this),
2534
error: function (xhr, status, err) {
@@ -37,7 +46,9 @@ var CommentBox = React.createClass({
3746
data:{params:JSON.stringify(params)},
3847
success: function (res) {
3948
if(res&&res.Status=="Success") {
40-
this.setState({data: this.state.data.concat(res.Result),hasmore:res.Result.length>=RSVP.config.pagesize});
49+
//var newData=this.state.data.concat(res.Result);//正序，最后位置插入
50+
var newData=res.Result.concat(this.state.data);//逆序，最前位置插入
51+
this.setState({data: newData,hasmore:res.Result.length>=RSVP.config.pagesize});
4152
RSVP.config.page=params.page;
4253
}
4354
}.bind(this),
@@ -46,7 +57,7 @@ var CommentBox = React.createClass({
4657
}.bind(this)
4758
});
4859
},
49-
handleCommentSubmit: function (comment,pId) {
60+
handleCommentSubmit: function (comment,pId) {console.log("handleCommentSubmit");
5061
var comments = this.state.data;
5162
//let pId=comment.parentId;
5263
if(pId&&pId!=0){
@@ -60,15 +71,17 @@ var CommentBox = React.createClass({
6071

6172
var syncComment=RSVP.getCommentById(comments,comment.syncId);
6273
if(!!!syncComment.replys)syncComment.replys=[];
63-
syncComment.replys.push(comment);
74+
//syncComment.replys.push(comment);//正序，最后位置插入
75+
syncComment.replys.unshift(comment);//逆序，最前位置插入
6476
}else{
6577
comment.parentId =0;
6678
comment.syncId=0;
6779
comment.toOpenid='';
6880
comment.toAppid='';
6981
comment.toWho='';
7082

71-
comments.push(comment);
83+
//comments.push(comment);//正序，最后位置插入
84+
comments.unshift(comment);//逆序，最前位置插入
7285
}
7386

7487
/* if(pId&&pId!=0){//这是回复评论
@@ -87,26 +100,31 @@ var CommentBox = React.createClass({
87100
//var newComments = comments.concat([comment]);
88101
this.setState({data: comments});
89102

90-
103+
console.log("insert to local comments Success");
91104
$.ajax({
92105
url: this.props.inserturl,
93106
dataType: 'json',
94107
type: 'POST',
95108
data: {params:JSON.stringify(comment)},
96-
success: function (res) {
97-
if(res.Status=="Success") {console.log(res);
109+
success: function (res) {//console.log("insert Success");
110+
if(res&&res.Status=="Success") {//console.log("res&&res.Status==Success");
98111
//this.setState({data: data});
99-
var comment=res.Result[0];
100-
if (comment && comment.tempid) {
101-
var old = RSVP.getCommentById(comments, comment.tempid);console.log(old);
112+
var comment=res.Result[0];console.log(res);//console.log(comment);
113+
if (comment && res.tempid) {console.log("comment && res.tempid");
114+
var old = RSVP.getCommentById(comments, res.tempid);console.log('old=');//console.log(old);console.log('==old end');
102115
old.id = comment.id;
103116
old.author = comment.author;
117+
old.text=comment.text;
104118
this.setState({data: comments});
105119
}
120+
}else{
121+
if(res&&res.Status=="Error"){
122+
console.log('insert error:',res.Reason);
123+
}
106124
}
107125
}.bind(this),
108126
error: function (xhr, status, err) {
109-
console.error(this.props.url, status, err.toString());
127+
console.error(this.props.inserturl, status, err.toString());
110128
}.bind(this)
111129
});
112130
window.location.hash = '';
@@ -146,8 +164,10 @@ var CommentBox = React.createClass({
146164
var loadMoreBtn=this.state.hasmore?<div className="LoadMoreBtn" onClick={this.loadMore}>加载更多</div>:null;
147165
return (
148166
<div className="commentBox">
149-
<h4>精华评论</h4>
150-
<CommentList data={this.state.data}/>
167+
<div className="BoxHeader">
168+
<b>驴友评论</b><Link to='/post' className="writeComment">写评论<i className="icon-writeComment"></i></Link>
169+
</div>
170+
<CommentList data={this.state.data} sortBy="oldest" showTag={RSVP.config.showCommentTag}/>
151171
{loadMoreBtn}
152172
<CommentBar/>
153173
{/*

‎src/components/comment/CommentForm.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,18 @@ var CommentForm = React.createClass({
3636
}
3737
return {pid:pid};
3838
},
39+
componentWillMount: function () {
40+
//RSVP.checkOpenId();
41+
},
3942
render: function () {
4043
//var towho = this.props.params.towhoname;
4144
//var replyTo=towho?`回复@${towho}：`:'';
42-
var replyTo=this.state.pid?`回复@${this.state.pComment.author.name}：`:'';
45+
//var replyTo=this.state.pid?`回复@${this.state.pComment.author.name||'游客'}：`:'';
46+
var replyTo='';
47+
if(this.state.pid){
48+
var x=this.state.pComment.author.name||'游客';
49+
replyTo=`回复@${x}：`;
50+
}
4351
return (
4452
<div className="commentFormHolder">
4553
<form className="commentForm" onSubmit={this.handleSubmit}>

‎src/components/comment/CommentList.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import Comment from './Comment.js';
77

88
var CommentList = React.createClass({
99
render: function () {
10+
var showTag=this.props.showTag||false;
11+
var newest=this.props.sortBy=="newest";
1012
var comments = this.props.data.map(function (comment, index) {
11-
var replys=!!!comment.replys?'':comment.replys.map(function(reply,index){
13+
var replys=!!!comment.replys?[]:comment.replys.map(function(reply,index){
1214
return(
1315
<Comment author={reply.author} key={index} pid={comment.id} comment={reply} />
1416
);
@@ -17,17 +19,17 @@ var CommentList = React.createClass({
1719
// `key` is a React-specific concept and is not mandatory for the
1820
// purpose of this tutorial. if you're curious, see more here:
1921
// http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
20-
<Comment author={comment.author} key={index} comment={comment}>
22+
<Comment author={comment.author} key={index} comment={comment} showTag={showTag}>
2123
<div className="replys">
22-
{replys}
24+
{newest?replys.reverse():replys}
2325
</div>
2426
</Comment>
2527

2628
);
2729
});
2830
return (
2931
<div className="commentList">
30-
{comments}
32+
{newest?comments.reverse():comments}
3133
</div>
3234
);
3335
}

0 commit comments

Comments
 (0)