2
我正在開發一個應用程序reactjs前端和軌道後端。我是新來的鐵軌。我使用reactjs開發了一個註冊系統，現在我想將數據發佈到服務器。我沒有使用react-rails gems。我不知道下一步如何發佈數據到服務器。任何人都可以請賜教嗎？我現在應該怎麼做 ？有什麼我必須提供？ P.S我沒有使用react-rails gem。如何將反應和ajax數據發佈到rails服務器？
我陣營代碼的房間登記（縮短通過去除說明和一些其它字段）
var fieldValues = {
ownerName:'',
email:'',
phoneNumber:'',
image:[]
}
class AddRent extends React.Component{
constructor(props,context) {
super(props,context);
this.state = {
step: 1
};
}
saveValues(field_value) {
return function() {
fieldValues = Object.assign({}, fieldValues, field_value)
}()
console.log('fieldValues are', fieldValues);
}
nextStep(step) {
var step = this.state.step;
var newStep = step+1;
this.setState({step:newStep});
}
previousStep(step) {
var step = this.state.step;
var newStep = step-1
this.setState({
step : newStep
});
}
showStep() {
switch (this.state.step) {
case 1:
return <RenderPersonalInfo fieldValues={fieldValues}
nextStep={this.nextStep.bind(this)}
previousStep={this.previousStep.bind(this)}
saveValues={this.saveValues.bind(this)} />
case 6:
return <RenderPhotos fieldValues={fieldValues}
nextStep={this.nextStep.bind(this)}
previousStep={this.previousStep.bind(this)} />
}
}
render() {
var style = {
width : (this.state.step/6 * 100) + '%'
}
return (
<main>
<span className="progress-step">Step {this.state.step}</span>
<progress className="progress" style={style}></progress>
{this.showStep()}
</main>
)
}
};
class RenderPersonalInfo extends React.Component{
render(){
return(
<div>
<h3>Personal Information</h3>
<p className="subtitle">Provide your authentic information so rent seekers can contact you</p>
<hr/>
<div className="col-md-4">
<label htmlFor='name'>Owner Name</label>
<input ref="name" defaultValue={this.props.fieldValues.ownerName} type="textbox" className="form-control" id="name" placeholder="Owner name" />
</div>
<div className="col-md-4">
<label htmlFor="email">Email</label>
<input ref="email" defaultValue={this.props.fieldValues.email} type="email" className="form-control" id="email" placeholder="email" />
</div>
<div className="col-md-4">
<label htmlFor="phoneNumber">Phone Number</label>
<input ref="phone" defaultValue={this.props.fieldValues.phoneNumber} type="textbox" className="form-control" id="phoneNumber" placeholder="phone number" />
</div>
<hr/>
<div className="row continueBtn text-right">
<button className="btn how-it-works" ref="personalInfo" onClick={this.nextStep.bind(this)}>Continue</button>
</div>
</div>
);
}
nextStep(step){
var data = {
ownerName : this.refs.name.value,
email : this.refs.email.value,
phoneNumber: this.refs.phone.value,
}
console.log(data.ownerName);
if ((data.ownerName)&&(data.email)&&(data.phoneNumber)) {
this.props.saveValues(data);
this.props.nextStep();
}
else{
alert('please enter the name, email and phone number');
}
}
};
class RenderPhotos extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
files: []
};
}
onDrop(files) {
console.log('Received files: ', files);
this.setState({
files: files
});
var image = [];
image = new FormData(files);
$.each(files,function(i,file){
image.append('image',file);
});
$.ajax({
url:"",
data:image,
contentType:false,
processData:false,
type:'POST',
mimeType: "multipart/form-data",
success: function(data) {
console.log('success');
}
});
}
showFiles() {
const { files } = this.state;
console.log('files',files);
if (!files.length) {
return null;
}
return (
<div>
<h3>Dropped files: </h3>
<ul className="gallery">
{
files.map((file, idx) => {
return (
<li className="col-md-3" key={idx}>
<img src={file.preview} width={200}/>
<div>{file.name}</div>
</li>
)
})
}
</ul>
</div>
);
}
render() {
return (
<div>
<p>Add photos of spaces to give more insight of your space </p>
<hr/>
<div className="col-md-12">
<form method="POST" encType="multipart/form-data">
<Dropzone onDrop={this.onDrop.bind(this)}>
Try dropping some files here, or click to select files to upload.
</Dropzone>
</form>
{this.showFiles()}
</div>
<div className="row continueBtn text-right">
<button className="btn how-it-works pull-left" onClick={this.props.previousStep.bind(this)}>Back</button>
<button className="btn how-it-works" onClick={this.nextStep.bind(this)}>Submit</button>
</div>
</div>
);
}
nextStep(step){
var sendData={'ownerName':this.props.fieldValues.ownerName,
'email':this.props.fieldValues.email,
'phoneNumber':this.props.fieldValues.phoneNumber,
}
console.log(sendData.email);
$.ajax({
url:"",
data:sendData,
type:'POST',
success: function(data) {
console.log('success');
}
});
}
}
export default AddRent;
我rooms_controller
class RoomsController < ApplicationController
def index
@rooms = Room.all
end
def new
@room = Room.new
end
def create
@room = Room.new(listing_params)
respond_to do |format|
if @room.save
format.html { redirect_to @room, notice: 'Room was successfully listed.' }
format.json { render json: @room }
else
format.html {render :new}
format.html {render json:@room.errors}
end
end
private
def listing_params
params.require(:room).permit(:ownerName, :email, :phoneNumber, :listingName, :summary, :property, :room, :price, :city, :place, :water, :amenities, :is_published)
end
end
模型室（遷移文件）
class CreateRooms < ActiveRecord::Migration
def change
create_table :rooms do |t|
t.string :ownerName
t.string :email
t.integer :phoneNumber
t.string :listingName
t.text :summary
t.string :property
t.integer :room
t.integer :price
t.string :city
t.string :place
t.string :water
t.string :amenities
t.boolean :is_published
t.timestamps null: false
end
end
end
問題在哪裏？你有包括Ajax調用，這似乎是合理的（雖然網址是空的？）。不知道你遇到了什麼錯誤，或者你陷入了什麼階段，很難給出洞察力。 – gravityplanx
我不知道。我想我應該通過映射在控制器中創建動作的url並創建一個create.js.erb，但我不確定。那是我要做的嗎？我想要這個想法，因爲除了通過反應軌道寶石，我還沒有在互聯網上看到任何這樣的事情。我想知道在完成reactjs創建表單後我應該怎麼做。 – Tushant
這不是一個真正的反應或rails問題，它是一個ajax/api問題。研究如何在rails中構建和訪問API端點，它接收並提供JSON而不是呈現視圖（對此沒有.erb文件）。你甚至不需要任何寶石，只需瞭解API/ajax的功能。 Rails的'render json：'選項也很有用，但如果你以前從未使用過/創建過API，那麼你應該先深入研究一下。 – gravityplanx