硬编码链接和 .env PORT

hard coded links and .env PORT

5 video tutorial series
Original LoopBack & React tutorial from Traversy for comparison

我已经按照教程进行操作,并在开发过程中让它在 Cloud 9 上运行。 我不确定如何将端口设置为环境变量,所以我用 Cloud 9 的 8080 硬编码了我的端口。现在我试图在 Heroku 上 运行 它并且我所有的 axios 帖子都被破坏了。

我想我把所有 link 都从

改回来了
axios.get(`http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels/${barrelID}`)

axios.get(`http://localhost:3000/api/Barrels/${barrelID}`) 但我仍然缺少一些东西,我可以在

上在 Heroku 上编译它

https://food-liberation-frontz.herokuapp.com

但是当我点击保存link添加一个新桶时,它坏了。

```

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class AddBarrel extends Component {

    addBarrel(newBarrel){
        console.log(newBarrel);
        axios.request({
            method:'post',
            url:'http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels',
            data: newBarrel
        }).then(response => {
            this.props.history.push('/');
        }).catch( err => console.log(err));
    }

    onSubmit(e){
        const newBarrel = {
            Name: this.refs.Name.value,
            barrel_number: this.refs.barrel_number.value,
            contents: this.refs.contents.value,
            date_last_checked: this.refs.date_last_checked.value,
            date_planted: this.refs.date_planted.value,
            location: this.refs.location.value,
            size: this.refs.size.value,
            notes: this.refs.notes.value
        }
        this.addBarrel(newBarrel);
        e.preventDefault();
    }

    render () {
    return (
            <div className = "container green lighten-3" >
            <br />
            <Link className = "btn grey" to = "/">back</Link>
            <h6>add a Barrel</h6>
            <form onSubmit = {this.onSubmit.bind(this)}>
                <div className = "input-field" >
                    <input type = "text" name = "Name" ref = "Name" />
                    <label htmlFor = "Name" >Name</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "barrel_number" ref = "barrel_number" />
                    <label htmlFor = "barrel_number" >barrel number</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "contents" ref = "contents" />
                    <label htmlFor = "contents" >contents</label>
                </div>
                <div className = "input-field" >
                    <input type = "date" name = "date_planted" ref = "date_planted" />
                    <label htmlFor = "date_planted" ></label>
                </div>
                <div className = "input-field" >
                    <input type = "date" name = "date_last_checked" ref = "date_last_checked" />
                    <label htmlFor = "date_last_checked" ></label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "location" ref = "location" />
                    <label htmlFor = "location" >location</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "size" ref = "size" />
                    <label htmlFor = "size" >size</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "notes" ref = "notes" />
                    <label htmlFor = "notes" >notes</label>
                </div>                

                <input type = "submit" value = "Save" className = "btn" />
            </form>
            </div>
           )
}
}

export default AddBarrel;

```

您是否定义了当服务器从前端接收到您在上面定义的 POST 请求时您的应用程序应该做什么?例如...

在您的 POST 请求上方的 React 组件中可能如下所示。我已经修改了上面的代码,特别是 URL。请注意,您的浏览器已指向应用程序的 URL,但您希望向 特定 路由 发出 POST 请求 你的申请。

axios.request({
  method:'post',
  url:'/api/Barrels',
  data: newBarrel
})

您的服务器会收到对该路由的请求,做一些事情,然后做出相应的响应。下面的代码可能位于 server.js.

app.post('/api/Barrels', function (req, res) {
  res.send('STUFF BACK TO FRONT END')
})