Форум

Ivan65913 · #1 (**permalink**) 07.08.2022, 10:40

Как построить дерево навигации?
Можно ли это решить в рамках node.js или нужно использовать что-то ещё?

Логика.
- запускается страница;
- слева строится дерево;
- если узел содержит дочерние элементы, то узел можно сворачивать, разворачивать;

Источник данных меню - БД MySql.

В будущем планируется:
- пользователь кликает по меню;
- справа появляется статья соответствующая узлу меню.
Статья отображается без перезагрузки всей страницы.
Т.е. после клика по меню, обновляется только фрагмент страницы, где располагается статья.

Примечание.
Node.js изучаю.
Имею минимальный опыт C# ASP.NET, MVC.

create_db-2.sql

Код:

REATE DATABASE socka;

--
-- Структура таблицы `articles`
--
DROP TABLE IF EXISTS `articles`;
CREATE TABLE IF NOT EXISTS `articles` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `content` text,
  `background` text,
  `owner` int(11) DEFAULT NULL,
  `pos` int(11) DEFAULT '0',
  `lang` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=275 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;


--
-- Структура таблицы `articles`
--
INSERT INTO `articles` (`id`, `title`, `content`, `background`, `owner`, `pos`, `lang`) VALUES
(1, 'Articles-1', 'Content--Articles-1', NULL, NULL, 0, 1),
(2, 'Articles-1-1', 'Content--Articles-1-1', NULL, 1, 0, 1),
(3, 'Articles-1-2', 'Content--Articles-1-2', NULL, 1, 0, 1),
(4, 'Articles-1-3', 'Content--Articles-1-3', NULL, 1, 0, 1),
(5, 'Articles-1-1-1', 'Content--Articles-1-1-1', NULL, 2, 0, 1),
(6, 'Articles-1-1-2', 'Content--Articles-1-1-2', NULL, 2, 0, 1),
(7, 'Articles-1-1-3', 'Content--Articles-1-1-3', NULL, 2, 0, 1),
(8, 'Articles-2', 'Content--Articles-2', NULL, NULL, 0, 1),
(9, 'Articles-3', 'Content--Articles-3', NULL, NULL, 0, 1),
(10, 'Articles-4', 'Content--Articles-4', NULL, NULL, 0, 1),
(11, 'Articles-5', 'Content--Articles-5', NULL, NULL, 0, 2);

home.controller.js

const fs = require('fs');

exports.getHomePage = (req, res) => {
    let query = "SELECT * FROM `articles` ORDER BY id ASC"; // query database to get all the articles

    // execute query
    db.query(query, (err, result) => {
        if (err) {
            res.redirect('/');
        }

        res.render('index.ejs', {
            title: "Welcome to DB",
            articles: result
        });
    });
};

index.ejs

<!doctype html>
<html lang="ru">
<head>
    <!-- Кодировка веб-страницы -->
    <meta charset="utf-8">
    <!-- Настройка viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>...</title>
    
    <!-- Bootstrap CSS (jsDelivr CDN) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
    <!--
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    -->
</head>
<!-- <body> -->
    <body>
        <!-- class="container" -->
        <div class="container">
            
            <!-- div -->
            <div class="border border-success border-3 p-2 vh-100 d-flex flex-column">
                <!-- HEADER  --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- ---->
                <!-- <header class="py-4 text-center text-uppercase fs-4 bg-primary bg-gradient text-white">
                    Header
                    </header> -->
                    
                    <!-- ROW  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- --- --- -->
                    <div class="row py-3 flex-grow-1">
                        
                        <!-- LEFT MENU  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <div class="col-3 d-flex">
                            <aside class="bg-danger bg-gradient w-100 d-flex justify-content-left align-items-center text-dark fs-5">                                
                                <% if (articles.length > 0) { %>
                                    <ul>
                                        <% articles.forEach((article, index) => { %>
                                        <li>
                                            <input type="hidden" class="articles" name="articles[]" value="<%= article.id %>">     
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.title%></a>
                                            </span>                                
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.owner%></a>
                                            </span>                                
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.number%></a>
                                            </span>                                
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.pos%></a>
                                            </span>                                            
                                          
                                        </li>
                                        <%})%>
                                    </ul>
                                <%}%>
                                </ul>
                            </aside>
                        </div>
                        <!-- PLACEHOLDER  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <div class="col-9 d-flex">
                            <main class="bg-light bg-gradient w-100 d-flex justify-content-center align-items-center text-dark fs-5 border border-success border-3">
                            Placeholder
                            </main>
                        </div>
                        <!-- RIGHTBAR  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <!-- <div class="col-3 d-flex">
                            <aside class="bg-danger bg-gradient w-100 d-flex justify-content-center align-items-center text-white fs-5">
                            Right Bar
                            </aside>
                        </div> -->
                        
                    </div>
                    
                    <!-- FOOTER -->
                    <!-- <footer class="py-4 bg-info bg-gradient text-center text-uppercase fs-4 text-white">
                    Footer
                    </footer> -->
                    
                </div>
                
            </div> <!-- .container -->
            
        </body>
        </html>

ksa · #2 (**permalink**) 07.08.2022, 18:15

Сообщение от Ivan65913

Можно ли это решить в рамках node.js или нужно использовать что-то ещё?

Скорее всего придется еще использовать клиентский JS...

Ivan65913 · #3 (**permalink**) 07.08.2022, 18:26

Сообщение от ksa

Скорее всего придется еще использовать клиентский JS...

На начальном этапе вопрос: как построить дерево при первой загрузке страницы?
1. Нужна рекурсия?
Где размещать функцию?
в **index.ejs**?
Типа так?

<% articles.forEach((article, index) => { %>
    <li>
        <input type="hidden" class="articles" name="articles[]" value="<%= article.id %>">     
        <span>
        <a style="font-weight: bold;" href="#"><%=article.title%></a>
        </span>                                
        <span>
        <a style="font-weight: bold;" href="#"><%=article.owner%></a>
        </span>                                
        <span>
        <a style="font-weight: bold;" href="#"><%=article.number%></a>
        </span>                                
        <span>
        <a style="font-weight: bold;" href="#"><%=article.pos%></a>
        </span>
    </li>
<%})%>

Только как это сделать с рекурсией?

2. Или рекурсию размещать в index.ejs в тегах `<script></script>`?
И далее через JS?
3. Или рекурсию размещать в **home.controller.js**?
Там формировать html разметку `<ul>` и `<li>` и далее вставлять в **index.ejs**?
4. Или есть библиотеки, которым можно скормить список из БД, а библиотека далее сама всё сделает?
5. Что из этого брать?
https://www.cssscript.com/best-tree-view/
6. Что искать?
Поиск: "js treeview main menu"?

ksa · #4 (**permalink**) 07.08.2022, 22:31

Сообщение от Ivan65913

как построить дерево при первой загрузке страницы?

Можно просто отрисовать "родительский" слой. Потом отлавливать клики и формировать "дочерние" слои.

Форум

Справочник

Discord чат

Курсы javascript