时间戳

首页 > 解决方案 > 其他用户登录时如何更改部分html页面内容？

html - 其他用户登录时如何更改部分html页面内容？

问题描述

当其他用户登录时，如何更改 html 页面的内容？例如，有一个具有“user”角色的用户，他的 html 页面应该看起来像某种方式，并且有一个具有“admin”角色的用户，他的 html 页面应该看起来有点不同（应该出现几个按钮或只部分内容会发生变化，但页眉、页脚和页面的其他部分将保持不变）。我读到在这种情况下可以使用模板引擎，但我不明白模板在代码中的外观。尝试使用哈巴狗。我正在编写一个应用程序，其中背面在本机节点 js（没有 express）上，正面在 html、css、js 上。例如，有以下 html 页面。当“用户”进入应用程序时，我需要显示divwith id="contacts_content"，当“管理员”divid="feedback_content". 我在想哈巴狗在正确的方向吗？怎么做？

<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="header_inner">
                <div class="header_logo">
                    <h2>PROGRAMMING BLOG</h2>
                </div>

                <nav class="nav" id="nav">
                    <a class="nav_link" href="/main">Main</a>
                    <a class="nav_link" href="/about">About</a>
                    <a class="nav_link" href="/contacts">Contacts</a>
                    <a class="nav_link" href="/login">Log in</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- Rubrics -->
    <div class="rubrics">
        <div class="container">
            <div class="rubrics_inner">
                <h3 class="rub_title">Rubrics</h3>

                <div class="rub_text">
                    <ul>
                        <li><a class="rub_link" onclick="onRenderRubricPosts('Programming')" href="#">Programming</a></li>
                        <li><a class="rub_link" onclick="onRenderRubricPosts('Technologies')" href="#">Technologies</a></li>
                        <li><a class="rub_link" onclick="onRenderRubricPosts('Security')" href="#">Security</a></li>
                        <li><a class="rub_link" onclick="onRenderRubricPosts('Databases')" href="#">Databases</a></li>
                        <li><a class="rub_link" onclick="onRenderRubricPosts('Operating systems')" href="#">Operating systems</a></li>
                    </ul>
                </div>

                <p>
                    <input class="search_field" id="search_field" type="search" placeholder="Поиск по сайту">
                    <input class="search_button" id="search_button" type="submit" value="Найти">
                </p>

                <button class="create_post_button" type="button"
                onClick='location.href="/new_post"'>Новый пост</button>
            </div>
        </div>
    </div>

    <!-- Content if the user is logged in -->
    <!-- <div id="contacts_content">
        <div class="container">
            <div class="contacts_inner">
                
                <form name="messageFromUser" action="">
                    <h1>Contacts</h1>
                    <p class="sub_contacts">Any questions, advertising and cooperation proposals. </p>

                    <div class="contacts_name">
                        <p>Name</p>
                        <input class="input_contacts" name="user_name"/>
                    </div>

                    <div class="contacts_email">
                        <p>Email</p>
                        <input class="input_contacts" name="user_email"/>
                    </div>

                    <div class="contacts_title">
                        <p>Title</p>
                        <input class="input_contacts" name="user_title"/>
                    </div>

                    <div class="contacts_message">
                        <p>Message</p>
                        <textarea style="width:700px; height:400px;" name="user_message"></textarea>
                    </div>

                    <input class="contacts_message_send" type="submit" value="Save" id="send_message">
                </form>

            </div>
        </div>
    </div> -->

    <!-- Content if the admin is logged in -->
    <!-- <div id="feedback_content">
        <div class="container">
            <div class="feedback_inner">

                <div class="message">
                    <div class="message_header">
                        <tt class="message_email">User email</tt>
                        <tt class="message_name">User name</tt>
                        <tt class="message_date">24.03.2021</tt>
                    </div>
                    <h3 class="message_title">Message title</h3>
                    <p class="message_text">Message text</p>
                </div>

                ...

            </div>
        </div>
    </div> -->

    <!-- Футер -->
    <footer class="footer">
        <div class="container">
            <p>© 2021 – </p>
            <p>When reprinting materials, an active link to the site is required.</p>
        </div>
    </footer>
</body>

标签： htmlnode.js

解决方案

推荐阅读