Введение
Сервисные страницы позволяют создавать системные интерфейсы.
Как правило, сервисные страницы находятся в папке /web/, так как являются частью веб-приложения.
Структура простой сервисной страницы: /web/папка/index.php - это позволит открыть интерфейс по адресу:
/web/папка/
Например: /web/login/
Для более сложных интерфейсов может использоваться следующая структура:
/web/projects/list/index.php - список проектов
/web/projects/detail/index.php - карточка проекта
Дополнительная информация и исходники:
Изучите сервисную страницу и ее исходники: /web/login/
Создание сервисной страницы
Для создания сервисной страницы скачайте готовую сигнатуру и следуйте структуре.
После скачивания необходимо поместить папку /web/ в корень проекта
Контроллер страницы
Контроллер сервисной страницы ( controller ) - это функция в которой реализуется back-end для рендеринга страницы.
В return[] помещаются все данные которые в дальнейшем потребуются в шаблоне и будут доступны в массиве $data
Шаблон страницы
Шаблон сервисной страницы ( view ) - это функция в которой реализуется представление шаблона.
Все данные с контроллера хранятся в массиве $data
Css стили
Css стили сервисной страницы ( css ) - это функция в которой реализуется описание стилей для сервисной страницы.
Javascript страницы
Javascript сервисной страницы ( javascript ) - это функция в которой реализуется логика клиентской части сервисной страницы.
Все функции описываются в объекте App
Javascript - получение данных
View
<template>
<div class="app">
<div class="uni-container">
<h1><?= $data['lang']['title'] ?></h1>
<div class="js_contentBox">
</div>
</div>
</div>
</template>
Javascript
App = {
loadData: function () {
let contentBox = $('.js_contentBox');
Framework.Loaders.Form.preload(contentBox);
let params = {
limit: 10
};
prologueClient.queryToServer('MyProject/Data:getData', params, (res) => {
if (res.status === 'error') {
Framework.Errors.setError('.js_error', res);
Framework.Loaders.Form.unPreload(contentBox);
} else if (res.status === 'ok') {
Framework.Loaders.Form.unPreload(contentBox);
renderTable(
res.items,
contentBox
);
} else {
Framework.Errors.setServerError();
Framework.Loaders.Form.unPreload(contentBox);
}
});
function renderTable(items, contentBox) {
let html = '';
if (items) {
html += '<table>';
$.each(items, function (key, item) {
html += '<tr>';
html += '<td>' + item.id + '</td>';
html += '<td>' + item.title + '</td>';
html += '</tr>';
});
html += '</table>';
} else {
html = '<span>Нет данных</span>';
}
contentBox.html(html);
}
}
};
$(function () {
App.loadData();
});
ApiBackend
/api/site/v1/MyProject/Data.php
<?php
namespace api\site\v1\MyProject;
Class Data
{
public static function getData($request, $response)
{
$response['status'] = 'ok';
$response['items'][] = [
'id' => 1,
'title' => 'Элемент 1',
];
$response['items'][] = [
'id' => 2,
'title' => 'Элемент 2',
];
$response['items'][] = [
'id' => 2,
'title' => 'Элемент 3',
];
return $response;
}
}
