前端實戰(zhàn)之用戶控制臺

這是一個模仿簡書風(fēng)格的用戶設(shè)置頁面

實現(xiàn)頁面

  • 基本設(shè)置頁
  • 個人資料頁面
  • 黑名單頁面
  • 密碼重置頁
  • 刪除賬號頁

依賴第三方工具

  • BootStrap框架
  • jQuery

HTML代碼

<body id="setting-page" ng-controller="setCtrl">
<link href="css/settings.css" rel="stylesheet">
<div class="navbar-USF">
    <div class="dropdown">
        <a href="/" title="回到首頁" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-home"></span>
        </a>
        <a href="/" title="小組廣場" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-th"></span>
        </a>
        <a href="/" title="發(fā)條狀態(tài)" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-pencil"></span>
        </a>
    </div>
    <div class="nav-user">
        <a href="/user" title="個人主頁" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-user"></span>
        </a>
        <a href="/message" title="您的消息" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-comment"></span>
        </a>
        <a href="/message" title="發(fā)現(xiàn)" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-eye-open"></span>
        </a>
        <a href="/">
            <span class="glyphicon glyphicon-book" title="收藏夾" data-placement="right" data-toggle="tooltip"> </span>
        </a>
        <a href="/settings" title="設(shè)置" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-cog"></span>
        </a>
        <a href="/logout" title="登出" data-placement="right" data-toggle="tooltip">
            <span class="glyphicon glyphicon-log-out"></span>
        </a>
    </div>
</div>
<div class="container" ng-init="getUser()">
    <div class="setting">
        <div class="alert alert-info" ng-show="$root.display">
            <button type="button" class="close" ng-click="$root.display=false">
                <span>×</span>
            </button>
            {{$root.msg}}
        </div>
    </div>

<h2 class="page-title">
    <span class="glyphicon glyphicon-cog"></span>
    設(shè)置
</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li role="presentation" class="active">
        <a href="#basic" role="tab" data-toggle="tab">基礎(chǔ)設(shè)置</a>
    </li>
    <li role="presentation">
        <a href="#profile" role="tab" data-toggle="tab">個人資料</a>
    </li>
    <li role="presentation">
        <a href="#pass" role="tab" data-toggle="tab">修改密碼</a>
    </li>
    <li role="presentation">
        <a href="#blacklist" role="tab" data-toggle="tab">黑名單</a>
    </li>
    <li role="presentation">
        <a href="#destroy" role="tab" data-toggle="tab">刪除賬號</a>
    </li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="basic">
    <div class="block">
        <h4>
            選擇常用編輯器
            <span class="notice">  切換后對新建文章生效</span>
        </h4>
        <div class="radio">
            <label>
                <input type="radio" name="editor" value="0" checked="checked">
                富文本編輯器
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="editor" value="1">
                Markdown編輯器
            </label>
        </div>
    </div>
</div>
<div role="tabpanel" class="tab-pane" id="profile" ng-controller="profileCtrl">
    <form class="block form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-2">
                頭像
            </label>
            <div class="avatar col-sm-2">
                <img alt="用戶頭像" class="img-circle" ng-src="{{profile.avatar}}">
            </div>
            <div class="btn-group change-avatar col-sm-2">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    更換頭像
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="upload-button">
                        <div class="btn btn-lg btn-link upload-avatar" type="file"
                             ng-file-select="fileSelect($files)" accept="image/*">
                            <span class="glyphicon glyphicon-pencil"></span>
                            上傳頭像
                        </div>
                    </li>
                    <li class="divider">
                    </li>
                    <li class="available-avatar">
                        <img ng-repeat="pic in picList" ng-src="{{pic}}" ng-click="changeAvatar(pic)">

                    </li>
                </ul>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                真實姓名
            </label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="張三" ng-model="profile.realname">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                性別
            </label>
            <div class="col-sm-2">
                <select class="form-control" ng-model="profile.sex">

                    <option value="0">
                        男
                    </option>
                    <option value="1">
                        女
                    </option>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label" ng-model="profile.email">
                電子郵件
            </label>
            <div class="col-sm-6">
                <input type="email" disabled="disabled" class="form-control" ng-model="profile.email" placeholder="Email">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                電話號碼
            </label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="+86" ng-model="profile.phone">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                個人主頁
            </label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="http://" ng-model="profile.page">
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
                自我描述
            </label>
            <div class="col-sm-6">
                <textarea type="text" class="form-control" rows="4" placeholder="填寫您的個人簡介可以幫助其他人更好的了解您."
                        ng-model="profile.description"></textarea>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-2 control-label">
            </label>
            <div class="col-sm-3">
                <button class="btn btn-lg btn-success" ng-click="saveProfile()">
                    保存修改
                </button>
            </div>
        </div>
    </form>
</div>
<div role="tabpanel" class="tab-pane" id="pass" ng-controller="resetPasswordCtrl">
    <form class="block">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    舊密碼
                </div>
                <input class="form-control" ng-model="form.password" type="password" placeholder="***********">
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    新密碼
                </div>
                <input class="form-control" ng-model="form.newPassword" type="password" placeholder="***********">
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    請重復(fù)
                </div>
                <input class="form-control" ng-model="form.repeatPassword" type="password" placeholder="***********">
            </div>
        </div>
        <br>
        <button class="btn btn-primary btn-lg" ng-click="reset()">
            保存
        </button>
    </form>
</div>
<div role="tabpanel" class="tab-pane" id="blacklist" ng-controller="blacklistCtrl">
    <div class="block" ng-init="initBlackList()">
        <p>
            您可以在用戶狀態(tài)和用戶主頁中將其加入黑名單。您將無法看到加入黑名單的用戶發(fā)表的狀態(tài)和評論。
        </p>
        <table class="table table-bordered">
            <tbody>
            <tr>
                <th colspan="2">
                    黑名單用戶
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr ng-repeat="person in personList">
                <td>
                    <input class="check-helper" type="checkbox" ng-model="person.checked">
                </td>
                <td>
                    <a ng-href="/users/{{person.name}}">{{person.name}}</a>
                </td>
                <td>
                    <label class="btn-link btn-small unblock" ng-click="remove(person)">
                        從黑名單移除
                    </label>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="3">
                    <input class="check-helper" type="checkbox" ng-click="selectAll()">
                    <span>全選</span>
                    <label class="btn-link  pull-right" style="color:#555555" ng-click="removeAll()">
                        批量移除
                    </label>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
<div role="tabpanel" class="tab-pane" id="destroy" ng-controller="destroyUserCtrl">
    <div class="block">
        <h4>
            刪除賬號
        </h4>
        <p class="text-danger">
            <span class="glyphicon glyphicon-exclamation-sign"></span>
            此操作將刪除您的全部數(shù)據(jù)，請謹(jǐn)慎操作
        </p>
        <br>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-lock"></span>
                </div>
                <input class="form-control" ng-model="password" type="password" placeholder="當(dāng)前密碼">
            </div>
        </div>
        <br>
        <button class="btn btn-lg btn-danger" ng-click="destroy()">
            刪除賬號
        </button>
    </div>
</div>
</div>
</div>


</body>

CSS代碼

.navbar-USF{
    left:0;
    top:0;
    position:fixed;
    height:100%;
    width:45px;
    background-color:#3C3C3C;
}
.navbar-USF  a{
    display:block;
    padding:10px;
    line-height: 25px;
    height:45px;
    font-size:16px;
    text-align: center;
}
.navbar-USF a:hover{
    background:#E0E0E0;
}
.navbar-USF a span{
    height:25px;
    width: 25px;
}

.navbar-USF .nav-user{
    position:relative;
    width:100%;
    bottom:-43%;

}

.navbar-USF .nav-user a{
    padding:5px 10px;
    height:35px;
}

.setting{
    padding:0px 100px 30px;
    color:#555555;
}

.page-title{
    text-align:center;
    margin:20px 0 20px;
    font-size:30px;
    padding-left:20px;
    position:relative;
}

.page-title span{
    top:5px;
}

.nav-tabs{
    margin:20px 100px 10px 100px;
    text-align:center;
    display:tables;
    padding:0 16%;
    position:relative;
    left:8%;
}label.btn-link{
    cursor: pointer;
}

.nav-tabs>li>a{
    margin-right:2px;
    padding-left:12px;
    display:block;
    color:#555555;
}

.tab-content{
    padding:30px 100px 0;
}

.check-helper{
    height:18px;
    width:18px;
    margin:4px;
}

#setting-page .alert{
    margin:10px 26% 0;
    text-align:center;
    position:absolute;
    top:-10px;
    width:20%;
}

#pass form{
    width:40%;
    margin:0 34%;
}
#pass .input-control{
    margin-bottom:15px;
}
#pass label{
    font-weight:normal;
}
#pass form input{
    height:40px;
    line-height:normal;
    margin-top:0;
    width:100%;
}



#destroy .block{
    margin-left:38%;
}
#destroy .form-group{
    width:50%;
}



#blacklist .block{
    margin:0 25%;
    position:relative;
    left:2%;
}
table {
    vertical-align:middle;
}
tr th{
    text-align:center;
}
#blacklist tbody td {
    text-align:center;
}
#blacklist tfoot td{
    padding:15px;
    vertical-align:middle;
}
#blacklist tfoot td span{
    position:relative;
    top:-4px;
}


#profile .block{
    position:relative;
    left:20%;
}
#profile .avatar img{
    width:90px;
    height:90px;
}
#profile .available-avatar img{
    cursor: pointer;
}
.change-avatar .dropdown-menu{
    padding: 3px;
    width:180px;
    position: relative;
}
.change-avatar li{
    position:relative;
}
.change-avatar .upload-avatar{
    display: block;
    margin:5px;
    font-size:14px;
    text-align:left;
    height:40px;
    margin:5px;
    padding: 10px;
}
.change-avatar .upload-avatar:hover{
    background:#555555;
}
.available-avatar img{
    width:40px;
    height:40px;
    margin:5px;
}
#basic .block{
    position:relative;
    left:32%;
}
#basic .notice{
    font-size:12px;
    color:#999999;
}

效果展示

個人資料頁面
密碼重置頁面
黑名單頁面
刪除賬號頁面
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 22年12月更新：個人網(wǎng)站關(guān)停，如果仍舊對舊教程有興趣參考 Github 的markdown內(nèi)容[https://...
    tangyefei閱讀 35,235評論 22贊 257
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,809評論 1贊 92
  • 10月的秋雨，很少下得這么慌亂，無所適從我坐在窗前，實在想不起今夜找誰喝點(diǎn)酒、或者唱首歌我在別人的故鄉(xiāng)里，想我的故...
    靜靜的阿花閱讀 276評論 3贊 3
  • 1992年，老應(yīng)夫妻倆在江西開一個小吃店失敗，背著一萬多元債來到杭州。老應(yīng)身無長技，就花了150塊錢從一個老鄉(xiāng)手里...
    文峰日志閱讀 410評論 0贊 3
  • 愛著一些人，因為他們而快樂著，大笑著， 討厭著一些人，因為他們而躊躇著，不悅著， 敬佩著一些人，因為他們而奮斗...
    年少模樣閱讀 111評論 0贊 0