Разработка приложений на C++_Практическая работа №14
.pdf
Модуль 4 Тема 4.4 Практика
1.Считать данные из https://jsonplaceholder.typicode.com/todos в
формате json и отобразить их на экране приложения в удобочитаемом формате.
2.На сайте https://reqres.in/ имеется API, с помощью которого можно тестировать свои приложения на запрос-ответ. Отправьте запрос на регистрацию. Смотрите на раздел POST: REGISTER -
SUCCESSFUL и REGISTER - UNSUCCESSFUL. Логин и пароль запросите от пользователя приложения. Если пользователь не ввел пароль, выведите ответ сервера о неуспешной регистрации. Если пользователь ввел все данные, выведите токен из ответа
1.Считать данные из
https://jsonplaceholder.typicode.com/todos в формате json и отобразить
их на экране приложения в удобочитаемом формате.
Page {
ListView { anchors.fill: parent model: jsonModel
delegate: Text { width: parent.width
wrapMode: Text.Wrap
text: "User ID: " + model.userId + "\n" + "ID: " + model.id + "\n" +
"Title: " + model.title + "\n" + "Completed: " + model.completed + "\n" +
"----------------------"
}
}
ListModel {
id: jsonModel
}
Component.onCompleted: {
var request = new XMLHttpRequest(); request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE) { if (request.status === 200) {
var response = JSON.parse(request.responseText); processData(response);
} else {
console.error("Failed to fetch JSON data:", request.status, request.statusText);
}
}
}
request.open("GET", "https://jsonplaceholder.typicode.com/todos",
true);
request.send();
}
function processData(data) {
for (var i = 0; i < data.length; i++) { jsonModel.append({
"userId": data[i].userId, "id": data[i].id,
"title": data[i].title, "completed": data[i].completed
});
}
}
}
●ListView: Это компонент, который отображает список элементов и позволяет прокручивать их. Он заполняет всю доступную область страницы с помощью anchors.fill: parent.
●model: jsonModel: Здесь устанавливается модель jsonModel для
ListView. Модель предоставляет данные, которые будут отображаться в списке.
● delegate: Text: Компонент Text является делегатом для каждого элемента списка. Он определяет, как будет отображаться каждый элемент данных. В данном случае, используя свойства модели (model.userId, model.id, model.title, model.completed), мы формируем текстовую строку,
содержащую информацию о каждом элементе данных.
●ListModel: Это объект, представляющий модель данных,
используемую в ListView. Здесь он называется jsonModel и
идентифицируется с помощью id.
●Component.onCompleted: Это событие вызывается, когда страница полностью создана и готова к использованию. Здесь мы выполняем запрос на сервер с использованием XMLHttpRequest, чтобы получить JSON-данные.
●processData: Это функция, которая обрабатывает полученные данные и добавляет их в модель jsonModel. Каждый элемент данных в
JSON-формате (data[i]) преобразуется в объект с четырьмя свойствами
(userId, id, title, completed), которые затем добавляются в модель с помощью jsonModel.append().
Таким образом, при выполнении этого кода страница будет отображать список элементов, полученных из JSON-запроса, и
прокручивать их, если их количество превышает доступное пространство на странице.
2. На сайте https://reqres.in/ имеется API, с помощью которого можно тестировать свои приложения на запрос-ответ. Отправьте запрос на регистрацию. Смотрите на раздел POST: REGISTER -
SUCCESSFUL и REGISTER - UNSUCCESSFUL. Логин и пароль запросите от пользователя приложения. Если пользователь не ввел пароль, выведите ответ сервера о неуспешной регистрации. Если пользователь ввел все данные, выведите токен из ответа
QT += xmlpatterns
import QtQuick 2.0 import Sailfish.Silica 1.0
import QtQuick.XmlListModel 2.0
Page {
id: window
objectName: "mainPage" allowedOrientations: Orientation.All
property string login: ""
property string password: "" property string token: ""
function register() {
var request = new XMLHttpRequest() if (login === "" || password === "") {
// Пользователь не ввел все данные console.log("Registration failed")
} else {
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE) { if (request.status === 200) {
// Успешная регистрация
var response = JSON.parse(request.responseText) token = response.token
console.log("Token:", token)
}else {
//Неуспешная регистрация
console.log("Registration failed") console.log(request.responseText)
}
}
}
request.open("POST", "https://reqres.in/api/register", true) request.setRequestHeader("Content-Type",
"application/json;charset=UTF-8") request.send(JSON.stringify({
"email": login, "password": password
}))
}
}
Column { id: layout spacing: 5
//anchors.centerIn: parent
TextField {
id: loginField placeholderText: "Логин" //width: parent.width height: 150 onTextChanged: {
login = text
}
}
TextField {
id: passwordField placeholderText: "Пароль" //width: parent.width height: 150 onTextChanged: {
password = text
}
}
Button {
text: "Зарегистрироваться" onClicked: {
register()
}
}
}
}
Данный код представляет собой QML страничку, которая содержит форму для регистрации нового пользователя. Страница имеет два поля ввода: для логина и для пароля, а также кнопку, которая позволяет выполнить запрос на регистрацию нового пользователя через API. После успешной регистрации пользователя, ответ API парсится в переменную
"token", которая будет использоваться в дальнейшем.
Данный код представляет функцию "register()", которая выполняет запрос на регистрацию нового пользователя через API при нажатии на соответствующую кнопку в форме регистрации.
Сначала создается новый объект XMLHttpRequest, который будет использован для отправки AJAX запроса к API.
Затем проверяется, что пользователь ввел все необходимые данные для регистрации - логин и пароль. Если какое-то из полей не заполнено,
выводится предупреждение в консоль и функция завершается.
Если же все поля заполнены, то устанавливается функция обратного вызова для XMLHttpRequest, которая будет вызвана при изменении состояния запроса. Здесь используется readyState XMLHttpRequest,
который позволяет определить текущее состояние запроса.
Если запрос успешно завершен со статусом 200, то результат запроса парсится в виде JSON объекта и сохраняется в переменную "token", которая используется для авторизации пользователя.
Если же статус запроса не равен 200, то выводится сообщение об ошибке в консоль и также выводится текст ответа.
Затем выполняется отправка POST запроса на API для регистрации нового пользователя с использованием методов open(), setRequestHeader() и send(). В теле запроса передаются логин и пароль, указанные пользователем в форме, в формате JSON строки.
Таким образом, данная функция выполняет регистрацию нового пользователя через API и сохраняет токен, полученный после успешной регистрации.
Далее страница содержит Column layout, который помогает расположить элементы формы по вертикали. Каждое поле ввода TextField
имеет свой ID и placeholderText. Также то, что пользователь вводит в поля логина и пароля сохраняется в текстовые переменные "login" и "password"
соответственно. Кнопка регистрации выполнена в виде элемента Button.
При нажатии на кнопку вызывается метод "register()".
Модуль 4 Тема 4.5 Практика