登录后如何在导航栏添加用户头像？

Question

我使用 bootstrap 4.
制作了一个导航栏

现在我想在登录后添加用户头像和名字作为圆圈提到。我不知道该怎么做。如果你给或刮它帮助我很多。

现在，我的想法是，当用户登录时，将导航栏替换为带有头像的新导航栏。或者用对我来说更复杂的头像替换 Sign in 文本。其次是我想需要更多 css 代码。

我使用以下规则加载导航栏。然后有可能 nav-placeholder 当 sign in 按钮被点击时。

 <body>
    <!--Navigation bar-->
    <div id="nav-placeholder">
    </div>
    <div id="carousel">
    </div>

<div id="successfulModal">
</div>
<script>
$(function(){
  $("#nav-placeholder").load("newnavbar.html");
  $("#carousel").load("carousel.php");
});
</script>

我的导航栏代码

<html lang="en">
<head>
    <title>Matir Dokan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
    /* Remove the navbar's default rounded borders and increase the bottom margin */ 
    .navbar {
        margin-bottom: 50px;
        border-radius: 0;
    }

    /* Remove the jumbotron's default bottom margin */ 
    .jumbotron {
        margin-bottom: 0;
    }

    /* Add a gray background color and some padding to the footer */
    footer {
        background-color: #f2f2f2;
        padding: 25px;
    }
    .modal-backdrop
    {
        background: none;
    }
</style>
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Matir Dokan</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>


            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle toggle1" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Object Type
                </a>
                <div class="dropdown-menu menu1" aria-labelledby="navbarDropdown1">
                    <a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="toy">Toy</a>
                    <div class="dropdown-divider" ></div>
                    <a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Furniture">Furniture</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Gift">Gift</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Household">Household</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" onclick="add_form(name)" id="menu1_item" name="Instrument">Instrument</a>
                </div>
            </li>


            <script>

                $(function(){

                    $(".menu1 a").click(function(){

                        $(".toggle1").text($(this).text());

                    });

                });
            </script>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Material Type
                </a>


                <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
                    <a class="dropdown-item">Mud</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Cloth</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Thread</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Jute</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Cotton</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Cane</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Bamboo</a>
                </div>
            </li>


            <script>

                $(function(){

                    $(".menu2 a").click(function(){

                        $(".toggle2").text($(this).text());

                    });

                });
            </script>


            <li class="nav-item">
                <form class="form-inline my-2 my-lg-0">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="Search">
                        <input class="form-control" type="hidden" id="object" value="">
                        <input class="form-control" type="hidden" id="material">
                        <div class="input-group-append">
                            <div class="input-group-text"><i class="fa fa-search"></i></div>
                        </div>
                    </div>
                </form>
            </li>

            <script type="text/javascript">
                function add_form(name){
                    document.getElementById("object").value=name;

                    console.log(document.getElementById("object").value);
                }
            </script>



            <li class="nav-item">
                <a class="nav-link" href="#">Auction</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle toggle3" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Cart
                </a>
                <div class="dropdown-menu menu3" aria-labelledby="navbarDropdown3">
                    <a class="dropdown-item">
                        <div>
                            <img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park  <span class="dropdown-product-details">2 x .89</span>
                        </div>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">
                        <div>
                            <img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
                        </div>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">
                        <div>
                            <img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
                        </div>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">
                        <a class="btn btn-sm  btn-secondary" href="cart.html">View Cart</a>
                        <a class="btn btn-sm btn-success" href="checkout-address.html">Checkout</a>
                    </a>


                    <li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
                    <li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>

                    <!-- Modal content-->




                    <div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <!--<label for="email" class="col-form-label">Email address:</label>-->
                                            <input type="email" class="form-control" id="signUpEmail" name="email" placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <!--<label for="pwd" class="col-form-label">Password:</label>-->
                                            <input type="password" class="form-control" id="signUpPassword" name="password" placeholder="Password" onchange="check_pass()">
                                        </div>
                                        <div class="form-group">
                                            <!--<label for="pwd" class="col-form-label">Confirm Password:</label>-->
                                            <input type="password" class="form-control" id="signUpConPassword" name="password" placeholder="Confirm Password" onchange="check_pass()">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary" id="signUpSubmit" disabled="true" >Sign Up</button>

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

<script type="text/javascript">
    function check_pass() 
    {
        //alert(document.getElementById('signUpPassword').value);
    if (document.getElementById('signUpPassword').value ==
            document.getElementById('signUpConPassword').value) {
        document.getElementById('signUpSubmit').disabled = false;
    }
    else
    {
        document.getElementById('signUpSubmit').disabled = true;
    }
}
$('#signUpSubmit').click(function() 
{

    $('#signUp').modal('toggle');
    //alert("signup completed");
    var email=document.getElementById('signUpEmail').value;
    var password = document.getElementById('signUpPassword').value;
    $.ajax({
        url: 'signup.php',
        type: 'POST',
        data: {
            email: email,
            password: password
        },
        success: function() {
            //alert('Email Sent');
        }               
    });
});
</script>



                    <div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Sign In</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <!--<label for="email" class="col-form-label">Email address:</label>-->
                                            <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <!--<label for="pwd" class="col-form-label">Password:</label>-->
                                            <input type="password" class="form-control" id="pwd" name="password" placeholder="Password">
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <div class="checkbox">
                                        <label><input type="checkbox"> Remember me</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign In</button>


                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

Answer 1

在导航栏中放置 php 功能。

<?php

if ( isset($_SESSION['session name here']) ) { ?>

   // here put navigation bar which you want to show after sig in.

<?php } else { ?>


  // here put navigation bar which  you want to show before sign in.

<?php } ?>

现在应该可以了。

Answer 2

默认情况下，您可以隐藏头像字段或显示为 none，成功登录后您可以取消隐藏头像 class 像这样

if(result == "validUser"){
// If the user is valid add the class
$("#avatarImg").addClass("showAvatar");
$("#avatarImg").addClass("rounded-circle");
}
.showAvatar{
display:block;
}

登录后如何在导航栏添加用户头像？

How to add user avatar in navbar after sign in?

css

navbar

avatar