Занятие 5. Обмен между Клиентом и Сервером, GET и POST запросы.

Видео

GET и POST запросы

• HTTP-методы GET и POST — самые распространённые способы отправить или получить данные с сервера.
• GET — метод для чтения данных с сайта. Например, для доступа к указанной странице. Он говорит серверу, что клиент хочет прочитать указанный документ. На практике этот метод используется чаще всего.
• POST — метод для отправки данных на сайт.
• Тело запроса присутствует только в POST-запросе и в ответе.

// GET
let response = await fetch(url);

// POST
let response = await fetch('/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(user)
});

GET и POST обработчики на Flask

@app.route("/getData", methods=['GET'])
def getData():
responseJson = {'status': 'success'}
return responseJson


@app.route("/postData", methods=['POST'])
def postData():
requestJson = request.json
responseJson = {'status': 'success'}
return responseJson

Компоненты React

Компонент - это функция JS. Пример:

function Welcome() {
return <h1>Привет, Андрей</h1>;
}

Пропсы React

Пропсы - параметр props компонента.

function Welcome(props) {
return <h1>Привет, {props.name}</h1>;
}

Каждый родительский компонент может передать дочернему какую-либо для инициализации.

<Welcome name='Андрей'/>

Стейты React

Стейты - это переменные компонентов. При изменении стейта происходит автоматический рендеринг компонента.

function MyComponent() {
const [name, setName] = useState('Taylor');

function handleClick() {
setName('Robin');
}
}

Домашнее задание

1. Создать компоненты React.
2. На фронте создать страницу, на которой отобразить список предсказаний по темам (содержимое файла future.json с прошлого задания) с возможностью добавления.