小编Joh*_*ess的帖子

将mapbox/leaflet映射定位在容器div中

我在Ruby on Rails应用程序中使用Mapbox.对于我的生活,我无法让地图坚持任何简单的CSS.允许地图出现的唯一CSS是给它一个顶部和底部为0的绝对位置.更改高度和宽度以外的任何内容都会导致地图消失.我想让地图集中在容器div中.这是代码:

<div id="map-container">
  <div id='map'>
  </div>
</div>

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiYWxvb2thdG9tbW9yb3ciLCJhIjoiNGM4ODhkZjUwMGM1ZDE4M2VjNzQ4MmQ4ODcxMjk5ZjMifQ.XVvFc8kl-0z4NAblE-mNqw';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 10);

</script>
Run Code Online (Sandbox Code Playgroud)

以下CSS:

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 50%;
  width: 50%;
}
Run Code Online (Sandbox Code Playgroud)

如果我改变了什么,地图就会消失.我试图给map-container div一个相对位置.这不起作用.我想要的只是将地图包含在div中,看起来似乎并不困难.从2013年开始有一篇关于此的帖子,但它已经过时了.谢谢你的帮助.

css leaflet mapbox

4
推荐指数
2
解决办法
1万
查看次数

React JS在页面加载时触发提交功能

我是React的新手。我正在尝试将一个包含三个组件的简单应用程序放在一起-一个父组件(SearchContainer)和两个子组件(SearchForm和ResultsContainer)。这个想法是为了在搜索表单上输入内容,以使用搜索查询更新SearchForm的状态。然后,该窗体有一个onSubmit函数,该函数触发一个AJAX请求,该请求接受查询,命中API并检索搜索结果。现在,onSubmit函数将在页面加载后立即触发,并继续反复触发。我不知道为什么会这样。这是代码:

SearchContainer(父组件):

var React = require('react');
var ResultsContainer = require('./ResultsContainer.jsx')
var SearchForm = require('./SearchForm.jsx')

var SearchContainer = React.createClass({
  getInitialState: function () {
    return {
      results: null,
      formAction: 'http://localhost:3000/search',
      formMethod: 'get',
    };
  },
  executeSearch: function(query) {
    console.log("executing search");
    var data = {
      query: query,
    };
    $.ajax({
      url: this.state.formAction,
      data: data,
      dataType: 'json',
      success: this.successFunction,
      error: this.errorFunction,
    });
  },

  handleSearch: function(query) {
    this.executeSearch(query);
  },
  successFunction: function(response){
    console.log("success");
    this.setState({results: response["results"]});
  },
  errorFunction: function(){
    console.log("error");
  },
  render: function () {
    return (
     <div className='center-text'> …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

4
推荐指数
1
解决办法
6959
查看次数

如何使用nginx、capistrano和passenger部署React前端+Rails api后端

我正在部署一个应用程序,其中使用 React 前端创建create-react-app,并使用 Rails API 作为后端。我对配置网络服务器和代理不太了解,所以我不确定如何让它在生产中工作。我正在将应用程序部署到 Amazon EC2 实例上的 Ubuntu。Nginx 是网络服务器。我需要配置它,以便 Nginx 提供目录中的静态文件client/build,然后发送任何请求/api到端口 3001 上运行的 Rails 应用程序。现在 Nginx 正在提供 index.html 并且 Javascript 运行正常,但请求/api是没有去正确的地方。关于如何配置 Nginx 来做到这一点有什么想法吗?这是我的/etc/nginx/sites-enabled/default文件:

server {
       listen 80 default_server;
       listen [::]:80 default_server;
       server_name mydomain.com;
       passenger_enabled on;
       rails_env    staging;
       root         /home/ubuntu/app-name/current/client/build;
       index index.html;

       location /api {
          proxy_pass http://127.0.0.1:3001;
       }
}
Run Code Online (Sandbox Code Playgroud)

我缺少什么?如何让 Rails 应用程序在端口 3001 上运行并使所有请求都发送到/api该端口?我需要server在此配置中使用单独的块吗?

deployment ruby-on-rails nginx http-proxy reactjs

2
推荐指数
1
解决办法
4172
查看次数