4

そのため、MERN スタックを使用して API とやり取りする練習用に、5 日間の天気予報 Web アプリをセットアップしています。リクエストの送信と応答に Axios.js を使用しています。バックエンドが機能していることを確認するために、API との通信を開始する前に、バックエンドの構築を開始しました。ただし、フロントエンドに設定したボタン (json データの取得要求をサーバーに送信します) は、次の値を持つ response.data を持つ応答オブジェクトを常に返します。

RESPONSE: <!doctype html>
<html>
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

それ以外の

RESPONSE: "hello there!"

次のような JavaScript の場合:

{data: "hello there!"}

これらのリクエストを送受信する際に、おそらく手順が抜けていることは承知していますが、これについて調査した後でも、期待した結果が得られない理由がわかりません。私のファイルは次のように設定されています：

-weather_forcast
  -client
    -src
      -components(empty)
      app.jsx
  -public
    -dist
      bundle.js
    index.html
  -server
    -routes
      routes.js
    index.js
  package.json
  webpack.config.js

現在コードが含まれているファイルの内容は次のとおりです。

app.jsx 

    import React, {Component} from 'react';
    import ReactDOM, {render} from 'react-dom';
    import axios from 'axios';
    // import daysOfWeek from './daysOfWeek.jsx';

    class App extends Component {
      constructor() {
          super();
          this.state = {
          }
          this.getData = this.getData.bind(this);
      }

      getData() {
          axios.get('/')
          .then((response) => {
              console.log("RESPONSE:", response.data);
          })
          .catch((error) => {
              console.log(error);
          })
      }

      render() {
          return(
              <div>
                  <button onClick={this.getData}>Hello world</button>
              </div>
          )
      }
  }

  render(<App/>, document.getElementById('app'));

index.html

<!doctype html>
<html>
    <head>
        <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="app"></div>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

ルート.js

let express = require('express');
let router = express.Router();

router.get('/', (req, res) => {
    res.send({data:'hello there!'});
});

module.exports = router;

index.js

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const router = require('./routes/routes.js');
const app = express();
let port = 8000;

app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../public')));

app.use('/', router);

app.listen(port, () => {
  console.log(`express is listening on port ${port}`);
});

webpack.config.js

const path = require('path');
const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/public/dist');

module.exports = {
    entry: `${SRC_DIR}/app.jsx`,
    output: {
        filename: 'bundle.js',
        path: DIST_DIR
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                include: SRC_DIR,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
}

「routes」フォルダーを追加して index.js ファイルを次のように設定する前に、同じ問題が発生しました。

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const router = require('./routes/routes.js');
const app = express();
let port = 8000;

app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../public')));

app.get('/', (req, res) => {
  res.send({data: "hello there!"});
);

app.listen(port, () => {
  console.log(`express is listening on port ${port}`);
});

どんな助けでも大歓迎です！json オブジェクトをデータとしてフロントエンドに取得できないようですが、この設定で何が欠けているのかわかりません。

4

1 に答える 1