mirror of
https://github.com/Febbweiss/springboot-react-webpack.git
synced 2026-03-04 22:25:34 +00:00
Feature: add CF plugin + Fix: remove static resources from .gitignore
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,8 +1,7 @@
|
||||
.classpath
|
||||
.project
|
||||
.settings
|
||||
src/main/resources/static
|
||||
src/main/webapp/js/.module-cache
|
||||
src/main/resources/static/js/.module-cache
|
||||
src/test/resources/static/js/compiled
|
||||
src/test/resources/static/js/.module-cache
|
||||
target
|
||||
|
||||
18
pom.xml
18
pom.xml
@@ -311,6 +311,24 @@
|
||||
<customRunnerTemplate>${project.basedir}/src/test/resources/jasmine/ReactJsSpecRunner.htmltemplate</customRunnerTemplate>
|
||||
</configuration>
|
||||
</plugin>
|
||||
<!-- Deployment -->
|
||||
<plugin>
|
||||
<groupId>org.cloudfoundry</groupId>
|
||||
<artifactId>cf-maven-plugin</artifactId>
|
||||
<version>1.1.3</version>
|
||||
<!-- <configuration>
|
||||
<server>bluemix</server>
|
||||
<target>https://api.eu-gb.bluemix.net </target>
|
||||
<org>open-groupe.com</org>
|
||||
<space>dev</space>
|
||||
<appname>TOFILL</appname>
|
||||
<url>TOFILL</url>
|
||||
<buildpack>https://github.com/cloudfoundry/java-buildpack.git</buildpack>
|
||||
<memory>512</memory>
|
||||
<diskQuota>1024</diskQuota>
|
||||
<instances>1</instances>
|
||||
</configuration> -->
|
||||
</plugin>
|
||||
</plugins>
|
||||
|
||||
<pluginManagement>
|
||||
|
||||
12
src/main/resources/static/css/comments.css
Normal file
12
src/main/resources/static/css/comments.css
Normal file
@@ -0,0 +1,12 @@
|
||||
#content {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #101010;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
123
src/main/resources/static/js/app.jsx
Normal file
123
src/main/resources/static/js/app.jsx
Normal file
@@ -0,0 +1,123 @@
|
||||
'use strict';
|
||||
|
||||
var Comment = React.createClass({
|
||||
rawMarkup: function() {
|
||||
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
|
||||
return { __html: rawMarkup };
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div className="comment">
|
||||
<h2 className="commentAuthor">
|
||||
{this.props.author}
|
||||
</h2>
|
||||
<span dangerouslySetInnerHTML={this.rawMarkup()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var CommentForm = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {author: '', text: ''};
|
||||
},
|
||||
handleAuthorChange: function(e) {
|
||||
this.setState({author: e.target.value});
|
||||
},
|
||||
handleTextChange: function(e) {
|
||||
this.setState({text: e.target.value});
|
||||
},
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var author = this.state.author.trim();
|
||||
var text = this.state.text.trim();
|
||||
if( !text || !author ) {
|
||||
return;
|
||||
}
|
||||
this.props.onCommentSubmit({author: author, text: text})
|
||||
this.setState({author: '', text: ''});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<form className="commentForm" onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
value={this.state.author}
|
||||
onChange={this.handleAuthorChange}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Say something..."
|
||||
value={this.state.text}
|
||||
onChange={this.handleTextChange}
|
||||
/>
|
||||
<input type="submit" value="Post" />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
});
|
||||
var CommentBox = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {data: []};
|
||||
},
|
||||
loadCommentsFromServer: function() {
|
||||
$.ajax({
|
||||
url: this.props.url,
|
||||
dataType: 'json',
|
||||
cache: false,
|
||||
success: function(data) {
|
||||
this.setState({data: data});
|
||||
}.bind(this),
|
||||
error: function(xhr, status, err) {
|
||||
console.error(this.props.url, status, err.toString());
|
||||
}.bind(this)
|
||||
});
|
||||
},
|
||||
handleCommentSubmit: function(comment) {
|
||||
var comments = this.state.data;
|
||||
comment.id = Date.now();
|
||||
var newComments = comments.concat([comment]);
|
||||
this.setState({data: newComments});
|
||||
$.ajax({
|
||||
url: this.props.url,
|
||||
method: 'POST',
|
||||
dataType: 'json',
|
||||
data: comment,
|
||||
success: function(data) {
|
||||
this.setState({data: data});
|
||||
}.bind(this),
|
||||
error: function(xhr, status, err) {
|
||||
this.setState({data: comments});
|
||||
console.error(this.props.url, status, err.toString());
|
||||
}.bind(this)
|
||||
});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.loadCommentsFromServer();
|
||||
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div className="commentBox">
|
||||
<h1>Comments</h1>
|
||||
<CommentList data={this.state.data}/>
|
||||
<CommentForm onCommentSubmit={this.handleCommentSubmit}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
var CommentList = React.createClass({
|
||||
render: function() {
|
||||
var commentNodes = this.props.data.map( function(comment) {
|
||||
return (
|
||||
<Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div className="commentList">
|
||||
{commentNodes}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
4
src/main/resources/static/js/app.render.jsx
Normal file
4
src/main/resources/static/js/app.render.jsx
Normal file
@@ -0,0 +1,4 @@
|
||||
ReactDOM.render(
|
||||
<CommentBox url="/api/comments" pollInterval={2000}/>,
|
||||
document.getElementById('content')
|
||||
);
|
||||
Reference in New Issue
Block a user