2016-05-04 4 views
1

Мой вопрос в том, как правильно настроить маршруты на стороне сервера, связанные с response.js на клиенте.Маршрутизация на стороне сервера с Meteor.js + React.js

Я работаю над приложением, основанным на Meteor.js, которое я интегрирую с React.js. Приложение потребует нескольких маршрутов. Моя основная проблема (до сих пор) заключается в том, что я ожидаю много вызовов api на стороне сервера, используя их соответствующие (безопасные) секретные ключи. Звонки будут такими, как

Meteor.http.call("GET", "http://search.twitter.com/search.json?q=perkytweets"); 

Очевидно, что это должно быть серверной стороной по соображениям безопасности. Затем я обработаю данные на сервере и передаю то, что мне нужно, чтобы реагировать, чтобы затем отображаться в DOM.

Похоже, что Flow Router не идеален, хотя кажется, что он подходит для приложений Meteor+React, поскольку он ориентирован на маршрутизацию на стороне клиента, а не на маршрутизацию на стороне сервера, которая мне нужна.

Как правило, приложения Meteor.js построены с Iron Router, но мне было трудно получить React для работы рядом с Iron Router.

Обращаем ваше внимание, что код не указывает на необходимость какой-либо серверной части, потому что я просто получаю все, что связано с учебным пособием, но в конечном итоге это будет ... прямо сейчас просто пытаясь заставить маршруты работать.

я делал следующее:


ВЗАИМОДЕЙСТВУЕТ КОД НИЖЕ:

клиент/main.html

<head> 
    <title>List</title> 
</head> 

<body> 
    <div id="render-target"></div> 
</body> 

клиент/main.jsx

import React from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { render } from 'react-dom'; 

import App from '../imports/ui/App.jsx'; 

Meteor.startup(() => { 
    render(<App />, document.getElementById('render-target')); 
}); 

импорта/щ/App.jsx

import React, { Component } from 'react'; 
import Spot from './Spot.jsx'; 

// App component - represents the whole app 
export default class App extends Component { 
    getSpots() { 
    return [ 
     { _id: 1, text: 'This is task 1' }, 
     { _id: 2, text: 'This is task 2' }, 
     { _id: 3, text: 'This is task 3' }, 
    ]; 
    } 

    renderSpots() { 
    return this.getSpots().map((spot) => (
     <Spot key={spot._id} spot={spot} /> 
    )); 
    } 

    render() { 
    return (
     <div className="container"> 
     <header> 
      <h1>List</h1> 
     </header> 
     <ul> 
      {this.renderSpots()} 
     </ul> 
     </div> 
    ); 
    } 
} 

импорта/щ/Spot.jsx

import React, { Component, PropTypes } from 'react'; 

// Task component - represents a single todo item 
export default class Spot extends Component { 
    render() { 
    return (
     <li>{this.props.spot.text}</li> 
    ); 
    } 
} 

Spot.propTypes = { 
    // This component gets the task to display through a React prop. 
    // We can use propTypes to indicate it is required 
    spot: PropTypes.object.isRequired, 
}; 

Покушение Исправление # 1:

сервера/main.js

import { Meteor } from 'meteor/meteor'; 

Meteor.startup(() => { 
    // code to run on server at startup 
}); 
Router.route('/', function() { 
    this.layout('homePage'); 
}); 

клиент/главное.HTML

<tempate name="homePage"> 
    <head> 
     <title>List</title> 
    </head> 

    <body> 
     <div id="render-target"></div> 
    </body> 
</template> 

Вот результат (сообщение Iron Router означает, что маршруты не были реализованы наряду реагируют) enter image description here

+0

Что вы подразумеваете под вызовами API на стороне сервера? (Методы Meteor? Подписки? REST звонки?) У меня есть трудное время, устраняющее вашу проблему, возможно, так как ваш пост не содержит вопроса. :) – aedm

+0

справедливая точка: мой вопрос заключается в том, как правильно настроить маршруты на стороне сервера, которые связаны с response.js на клиенте. Звонки будут примерно такими: Meteor.http.call («GET», «http://search.twitter.com/search.json?q=perkytweets»); – maudulus

+0

Я до сих пор не понимаю. Что вы подразумеваете под серверными маршрутами? Вы хотите добиться рендеринга на стороне сервера? Если да, то вам может помочь [Flow Router SSR] (https://github.com/kadirahq/flow-router/tree/ssr). – aedm

ответ

1

Нет необходимости использовать на стороне сервера маршрутизации здесь, просто создать функции сервера стороннего метода Meteor для выполнения вызовов API и отображения их результатов.

Этот примерный компонент вызывает метод при монтаже и обрабатывает его возвращаемое значение асинхронно.

export class Pony extends React.Component { 

    // ... 

    componentDidMount() { 
    Meteor.call("call-pony-name-api", customPonyParameter, (error, result) => { 
     if (error) {...} 
     this.setState({ponyName: result.ponyName}); 
    }); 
    } 
} 
Смежные вопросы