За последние 24 часа нас посетили 17190 программистов и 1248 роботов. Сейчас ищут 953 программиста ...

Правильная логика формирования страницы

Тема в разделе "JavaScript и AJAX", создана пользователем IvanKut, 21 июн 2020.

  1. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    Привет
    Посоветуйте куда покопать, чтобы научится правильной логики формирования страницы.
    Есть api, возвращающая много блоков данных(заказ, клиент, товар, оплаты, комментарии), внутри каждого блока данных много строк с данными.
    Есть шаблон страницы html(bootstrap) который надо заполнить данными.
    Вопрос - как правильно делать разметку данных внутри html шаблона.

    Например блок Клиент
    Имя клиента [Статус]
    Кол-во заказов / Кол-во обращений
    Номер паспорт Серия паспорта

    У меня мне кажется бредовая идея в виде <p> прометить через classe и в ручную метчить ключ из json и класс.

    Но есть ситуация еще сложней, когда есть исторические данные много строк. Например таблица комментариев

    Каждый комментарий выводится в строчку
    Дата [Менеджер] Комментарий - и нужно чтобы jQuery создал столько строк, сколько в JSON

    Тут именно вопрос, чтобы Вы мне подсказали что почитать, какая методология метчинга данных из API и Фронта наиболее оптимальная

    Благодарю
     
  2. виталий032

    виталий032 Активный пользователь

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    Возможно вы имели ввиду JS шаблонизатор. Если да, то вот статья про то, как это сделать с помощью популярной библиотеки lodash https://learn.javascript.ru/template-lodash
    Было бы классно использовать vue или react, чтобы не использовать эти js шаблонизаторы, так как эти js шаблонизаторы снижают читабельность кода.

    Пример:
    Код (Javascript):
    1. <!-- библиотека LoDash -->
    2. <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
    3.  
    4. <!-- шаблон для списка от 1 до count -->
    5. <script type="text/template" id="list-template">
    6. <ul>
    7.   <% for (var i=1; i<=count; i++) { %>
    8.   <li><%=i%></li>
    9.   <% } %>
    10. </ul>
    11. </script>
    12.  
    13. <script>
    14.   var tmpl = _.template(document.getElementById('list-template').innerHTML);
    15.  
    16.   // ..а вот и результат
    17.   var result = tmpl({count: 5});
    18.   ddocument.body.appendChild(result);
    19. </script>
    Я бы всеми силами избегал js шаблонизаторы. Либо html готовый с бэкенда возвращать, либо JSON, но при этом использовать react или vue.
     
    #2 виталий032, 21 июн 2020
    Последнее редактирование: 21 июн 2020
  3. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    @виталий032 если говорить про html готовый Вы имеет ввиду не JSON данные возвращать, а сразу подготовленный html код под каждый блок?
    Чтобы тупо замещать весь div кодом с бэкэнда?

    Кстати пользуясь случае спрошу, как Вы рекомендуете писать код HTML внутри php файлов? У меня вся генерация данных в API, на фронте в php только формирование шаблонов
    [​IMG]
     
  4. виталий032

    виталий032 Активный пользователь

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    Да

    Да

    Я бы формировал html на стороне сервера. Только немного по-другому.
    У вас html и php код похоже в одном файле.
    Вынесите html в отдельный файл имя.html и делайте его include в php файле.

    PHP:
    1. <?php
    2.  
    3. $data = 'мои данные';
    4. include('имя.html');
    Кстати, пользуясь случаем, что это за функция pd()?
     
  5. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    @виталий032 print-debug:) обработчик для быстрого дебага на странице:) самописная.

    А как в HTML фаил из переменной $data данные будут попадать?
    <h5><?=$data['attr']?></h5>
    Так?

    Но ведь есть еще логическое ветвление if-else показ инфы.
     
  6. виталий032

    виталий032 Активный пользователь

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    Верно. Все переменные, которые объявите до include будут доступны в html файле.

    Можно завести переменную $billingListIsEmpty в php файле, а в html файле делать вот так:
    HTML:
    1. <div>
    2.      <?php if ($billingListIsEmpty) { ?>
    3.             <span><?=$data['ключ']</span>
    4.       <?php } else {?>
    5.              <span>Упс.</span>
    6.       <?php } ?>
    7. </div>
    Либо используя short tags (https://www.php.net/manual/ru/control-structures.alternative-syntax.php)
    HTML:
    1. <div>
    2.      <?php if ($a == 5): ?>
    3.           <span>A равно 5</span
    4.      <?php endif; ?>
    5. </div>
     
  7. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    @IvanKut нормальная верстка не мудри. Но чтобы не запутаться в скобочках у условии или циклов, обычно используют такие обозначения:
    PHP:
    1. <?php if ($a == 5): ?>
    2. <div>123</div>
    3. <?php endif; ?>
    4.  
    5. <?php foreach ($array as $item): ?>
    6. <li><?=$item?></li>
    7. <?php endforeach; ?>
    Это просто чтобы не запутаться в скобочках. Не надо никаких html.
    --- Добавлено ---
    @виталий032 чему ты учишь человека, какие html еще. Как пятая нога :)
    --- Добавлено ---
    просто чтоб понимали что все нормально, вот стандартная верстка у Laravel:
    PHP:
    1. @if (count($errors) > 0)
    2.   <!-- Список ошибок формы -->
    3.   <div class="alert alert-danger">
    4.     <strong>Упс! Что-то пошло не так!</strong>
    5.  
    6.     <br><br>
    7.  
    8.     <ul>
    9.       @foreach ($errors->all() as $error)
    10.         <li>{{ $error }}</li>
    11.       @endforeach
    12.     </ul>
    13.   </div>
    14. @endif
    Вот у Yii:
    PHP:
    1. <?php $form = ActiveForm::begin(); ?>
    2.  
    3.     <?= $form->field($model, 'name') ?>
    4.  
    5.     <?= $form->field($model, 'email') ?>
    6.  
    7.     <div class="form-group">
    8.         <?= Html::submitButton('Отправить', ['class' => 'btn btn-primary']) ?>
    9.     </div>
    10.  
    11. <?php ActiveForm::end(); ?>
     
  8. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    @Artur_hopf про сокращенную вариацию написания if foreach спасибо не знал!

    Жалко они еще не придумали сокращенную варианцию if(!empty($_REQUEST['field']))