Hej. Próbowałem jakiś czas temu stworzyć jak najprostszą aplikację, w której backend byłby w Springu, a front w React. Program ma tylko jedną funkcję: dla wprowadzonego w pole tekstowe miasta szuka w bazie danych "world" danych dotyczących populacji i wyświetla je.
W React zrobiłem najprostszy formularz zawierający pole tekstowe i miejsce na rezultat. Teraz nie wiem jak to połączyć tak, żeby tekst wprowadzany w pole tekstowe był argumentem dla metody w Javie "findByPopulation" i żeby w polu "Result" był wyświetlany wynik tej metody.
Byłbym bardzo wdzięczny za pomoc. Jeśli dobrze to rozumiem, to powinno być kilka linijek w JavaScripcie w komponentach 'result' dodać coś do '<dev>' i w 'Form' do '<form>, ale ciężko mi się było połapać jak to dokładnie zrobić. Poniżej linki. To jest siedem klas, ale chyba bardzo prostych.
Jakby ktoś sie zastanawiał po co w ogóle mi to. Przejrzałem kilka kursów i jest trochę tak, że kurs Spring Java w momencie, w którym jest omawiany temat komunikacji z frontem, podaje po prostu dosyć złożony (jak dla kogoś kto nigdy nic nie napisał w JavaScript) przykład widoku, który należy sobie wkleić i nie głowić się za bardzo nad tym co tam się dzieje. No ja jednak wolałbym na prostym przykładzie wiedzieć jak pola z klas w JS są identyfikowane z tymi w Javie, a poza tym stopniowo sobie wszystko rozbudowywać.
class App extends Component {
render (){
return(
<div className='App'>
<Form />
<Result />
</div>
);
}
}
const Form = () => {
return (
<form>
<input type='text'/>
<button>Wyszukaj miasto</button>
</form>
)
}
export default Form;
const Result = () => {
return (
<div>Populacja</div>
);
}
export default Result;
mport lombok.*;
import javax.persistence.*;
@Entity
@Table(name = "city")
@Getter
@Setter
@ToString
public class City {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
int ID;
String name;
@Transient
String CountryCode;
String District;
int Population;
public City()
{
}
public City(int ID, String name, /*String countryCode,*/ String District, int Population) {
this.ID = ID;
this.name = name;
/*this.CountryCode = countryCode;*/
this.District = District;
this.Population = Population;
}
}
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;
public interface CityRepository extends JpaRepository<City, Long> {
List<City> findByName(String name);
List<City> findByPopulation(int population);
}
@RestController
public class CityService {
@Autowired
CityRepository cityRepository;
@Autowired
ObjectMapper objectMapper;
@PostMapping("/cities")
public ResponseEntity findCity(@RequestBody City city){
List <City> foundedCity = cityRepository.findByName(city.getName());
return ResponseEntity.ok(foundedCity);
}
}
@SpringBootApplication
public class Main {
public static void main(String[] args) {
SpringApplication.run(Main.class, args);
}
}