eureka:
client:
registerWithEureka: true
fetchRegistry: true
service-url:
defaultZone: http://localhost:8761/eureka/
instance:
hostname: localhost
server:
port: 8000
spring:
application:
name: API-GATEWAY
cloud:
gateway:
routes:
- id: CITIZEN-SERVICE
uri:
lb://CITIZEN-SERVICE
predicates:
- Path=//citizen/**
- id: VACCINATION-CENTER-SERVICE
uri:
lb://VACCINATION-CENTER-SERVICE
predicates:
- Path=//vaccinationCenter/**

eureka: client:
registerWithEureka: true fetchRegistry: true
service-url: defaultZone: http://localhost:8761/eureka/
instance: hostname: localhost
server: port: 8000
spring: application:
name: API-GATEWAY cloud:
gateway: routes:
- id: CITIZEN-SERVICE uri:
lb://CITIZEN-SERVICE predicates:
- Path=/citizen-service/** - id: VACCINATION-CENTER-SERVICE
uri: lb://VACCINATION-CENTER-SERVICE
predicates: - Path=/vaccinationCenter/**

import { useRef,useState } from "react";
import axios from "axios";
const GetExp1=()=>{
const [arr,setArr]=useState([]);
const ref1=useRef(null);
const fetch_data=()=>{
getData();
}

const getData=async ()=>{
const res=await axios.get(`https://reqres.in/api/users?page=${ref1.current.value}`);
const {data:x}=res;
const {data}=x;
setArr(data);
}
return(
<>
<input type="number" ref={ref1}></input>
<button onClick={fetch_data}>GetData</button>
<br></br>
{
arr.length!=0?(<table border={1}
align="center"
cellSpacing={10}
cellPadding={10}>
<tr>
<th>id</th>
<th>first_name</th>
<th>last_name</th>
<th>email</th>
<th>avatar</th>
</tr>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.id}</td>
<td>{element.first_name}</td>
<td>{element.last_name}</td>
<td>{element.email}</td>
<td><img src={element.avatar}></img></td>
</tr>
)
})
}
</table>):(<i className="fa fa-spin fa-spinner"></i>)
}
</>
)
}
export default GetExp1;

import { useEffect,useState } from "react"
import axios from "axios";
const GetExp2=()=>{
const [arr,setArr]=useState([]);

const getData=async ()=>{
const res=await axios.get(`http://localhost:9000/getAll`);
const {data}=res;
setArr(data);
}
useEffect(()=>{
getData();
},[]);
return(
<>
<h1>DISPLAY ELECTRICITY BILL CONSUMER DETAILS</h1>
<div className="container mt-5">
<table border={1}>
<thead>
<tr>
<th>CID</th>
<th>CNAME</th>
<th>CURRENT_READING</th>
<th>PRIVIOUS_READING</th>
<th>UNITS</th>
<th>SERVICE_CHARGES</th>
<th>TOTAL_BILL</th>
</tr>
</thead>
<tbody>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.cid}</td>
<td>{element.name}</td>
<td>{element.current_reading}</td>
<td>{element.previous_reading}</td>
<td>{element.units}</td>
<td>{element.service_charges}</td>
<td>{element.total_bill}</td>

</tr>
)
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>
</>
)
}
export default GetExp2;