★ Introduction

J'étudie également Node.js et React en parallèle avec l'étude de Spring, mais les progrès sont probablement lents parce que la face avant n'est pas bonne dans ce domaine. Comme d'habitude, ce sera un article de mémo de travail et un dossier d'étude.

★ Ce que tu veux faire

Sujet maman. ◆ Essayez d'appeler l'API au format SpringBoot + gradle REST + JSON Implémentez le processus d'appel de l'API créée à l'étape 1 sur la face avant.

D'ailleurs, en entreprise, nous développons principalement des API en utilisant le côté serveur de base et notre propre framework. Même si j'ai de l'expérience dans la mise en œuvre du processus d'appel d'API à partir d'un lot, je n'ai pas beaucoup d'expérience dans la mise en œuvre du processus d'appel d'API depuis l'avant et l'écran, c'était donc une bonne étude.

★ côté API (SpringBoot)

`RestApiController.java`


package com.example.sample.app.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.sample.app.resource.BirthStone;

@RestController
@CrossOrigin(origins = "*") //★ Changements
@RequestMapping("api/sample")
public class RestApiController {
    
    @RequestMapping(value = "/getBirthStone", method = RequestMethod.GET)
    @ResponseBody
    public BirthStone getBirthStone() {
        BirthStone birthStone = new BirthStone("février", "améthyste", "violet");
        return birthStone;
    }
}

Lorsque vous appelez depuis l'écran ** "Requête cross-origin bloquée: la même politique d'origine refuse de charger les ressources distantes sous [* URL API](Raison: en-tête CORS manquant" Access-Control-Allow-Origin "" ). [Détails] "** Quel message d'erreur a été envoyé à la console, j'ai donc pensé que c'était une erreur avec ** CORS **. J'ai d'abord appris le mot CORS parce que je n'ai pas étudié. Je ne l'ai pas encore compris, je prévois donc d'étudier à une date ultérieure. Je voudrais écrire un article si j'ai la capacité disponible.

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annotation/CrossOrigin.html

CORS peut être contrôlé en ajoutant l'annotation @ CrossOrigin. ʻOrigins` (Access-Control-Allow-Origin) est défini sur "*" (caractère générique).

Commencez localement. Le port est le 8080 par défaut.

★ côté écran (React)

//Création de projet
create-react-app call_api_sample
//Déplacer vers le projet
cd  call_api_sample
// node-Installer la récupération
npm install --save node-fetch
//Démarrage du serveur
npm start

J'ai créé un projet et l'ai installé parce que je voulais utiliser l'API Fetch. Démarrez le serveur. Le port par défaut est 3000.

`App.js`


import React, { Component } from 'react';
import fetch from 'node-fetch';
import './App.css';

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      month: '',
      name: '',
      color: ''
    }
  }
  componentWillMount () {
    const URL = 'http://localhost:8080/api/sample/getBirthStone'
    fetch(URL, {mode: 'cors'})
    .then(res => res.json())
    .then(json => {
      this.setState({
        month: json['month'],
        name: json['name'],
        color: json['color']
      })
    });
  }

  render() {
    return <div className='App'>
      month: {this.state.month} <br />
      name: {this.state.name} <br />
      color: {this.state.color} <br />
    </div>
  }
}

export default App;

J'ai pensé créer un autre fichier js, mais ce n'était qu'une simple confirmation de communication, j'ai donc réécrit App.js.

Le mois, le nom et la couleur sont initialisés (vides) avec constructeur.

L'API est appelée par componentWillMount (processus exécuté avant la création du composant), et les valeurs de réponse sont regroupées en mois, nom et couleur. Réglez "cors" sur "mode" pour prendre en charge CORS.

★ Résultat de l'exécution

http://localhost:3000/ Lorsque vous accédez à ...

La valeur de réponse de l'API est affichée à l'écran.

★ Référence

En écrivant cet article, j'ai fait référence aux livres et articles suivants.

Techniques de développement d'applications Node.js et React pour les programmeurs JS modernes

Résumé CORS [Bases de JavaScript] Bases de l'API Fetch - KDE BLOG Activer la récupération dans Node.js Vive le bon travail XMLHttpRequest, Hello fetch

[JAVA] ◆ Obtenez l'API créée par Spring Boot à partir de React