紹

介紹

前面我們以及學會了Bootstrap框架和jQuery庫的基本使用方法，并且已經把這兩個軟件包整合到了我們的TFPHP框架里面，接下來我們就可以使用它們去制作用戶管理系統的視圖模板了。

用戶管理系統包含幾個主頁模板：

1）用戶信息表

2）用戶登錄頁面

3）用戶注冊頁面

4）個人資料修改

5）登錄密碼重置

6）用戶頭像上傳

7）安全問題設置

8）綁定郵箱設置

9）忘記密碼頁面

頁面比較多，我們一點點地設計。萬事開頭難，福哥今天下帶著大家完成先完成第一個表單頁面——用戶登錄頁面。

用戶登錄頁面

HTML

登錄頁面的html部分包括一個頁頭和一個表單。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首頁</a></li>
                <li class="nav-item"><a href="" class="nav-link">登錄</a></li>
                <li class="nav-item"><a href="" class="nav-link">注冊</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登錄</h3>
                <p>請輸入正確的用戶名和密碼登錄用戶管理系統</p>
                <form>
                    <div class="form-group">
                        <label>用戶名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登錄狀態
                        </label>
                        <a href="" class="float-right">忘記密碼</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登錄</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用戶登錄頁面的CSS也是一個top bar和一個login form兩個部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}

講解

用戶登錄頁面

首先，因為這是TFUMS系統的第一個模板，所以福哥先設計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式，簡化了自己寫CSS的工作。

其次，表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式，加上label和form-control簡簡單單就把一個漂亮的表單做出來了。

還有福哥使用浮動加清除實現了“保存登錄狀態”和“忘記密碼”的左右布局設計。

最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個容器，看起來比較工整了。

總結

今天我們完成了第一個表單頁面的模板，包括：HTML和CSS部分。有了這個基礎之后，再去制作其他表單頁面就容易多了。

下一課我們將嘗試完成用戶注冊頁面、忘記密碼頁面、登錄密碼重置三個頁面的模板的制作。

https://m.tongfu.net/home/35/blog/512901.html

定義設置登錄頁面

啟動ant design vue pro腳手架

第一篇介紹了如何從git上拉取ant design vue pro腳手架并使用VS Code編輯器啟動腳手架。在第二篇開始之前，我們先打開VS Code軟件加載腳手架代碼，并運行命令 npm run serve命令啟動腳手架！通過瀏覽器訪問地址：http://localhost:8000進入登錄首頁。系統登錄首頁如下圖所示：

自定義設置登錄頁面

ant design vue pro提供了一套登錄頁面模板，可以基本滿足我們的業務需求，但是有些地方還需要修改以達到滿足我們系統的業務需求。其中需要修改的地方主要有以下四點，修改的地方如下圖所示。

1. 修改系統小圖標和文字

修改路徑：ant-design-vue-pro/public/index.html

修改方式：首先我們需要準備系統圖標，推薦一個阿里巴巴出品的矢量圖標庫—— iconfont。我以XX大學畢業生就業信息管理系統為例，修改圖標和文字。下載好的圖標我們修改名為logo.png，并替換public下的logo.png。然后修改index.html的head部分的title標簽內容為XX大學畢業生就業信息管理系統，修改之后的index.html如下圖所示。

修改完成之后，我們保存之后看下瀏覽器端的頁面變化效果，如下圖所示。

2. 自定義修改頁面系統圖標、 大標題、小標題描述

修改路徑：ant-design-vue-pro/src/layouts/UserLayout.vue

修改方式：打開UserLayout.vue文件，定位修改圖標標題描述的位置，如下圖所示。

可以看到系統圖標引入在img標簽的src屬性，且格式為svg格式，我們可以在iconfont上復制圖標的svg代碼，然后將logo.svg內容替換成我們復制的svg代碼。同時修改Ant Design標題為XX大學畢業生就業信息管理系統。唯一有點不好理解的是小標題描述是引入一段代碼，該代碼定義于locals中，路徑為ant-design-vue-pro/src/locals/lang/zh_CN.js，具體修改小標題描述位置如下圖所示。

修改后的結果如下圖所示。

3.登錄頁面功能自定義設置

我們可以根據自身系統業務需求來取舍頁面功能，比如只需保留賬戶密碼登錄，無需設置手機號登錄。不設置自動登錄，并且不提供其它登錄方式。修改路徑為ant-design-vue-pro/src/views/Login.vue。修改位置如下圖所示。

修改輸入框提示語，可以定位到用戶名和密碼輸入框，看到其placeholder屬性也是使用代碼定義，那我們可以通過在locals/lang/zh_CN/user.js

4. 修改頁腳內容

修改路徑：ant-design-vue-pro/src/layouts/UserLayout.vue

修改位置：頁腳內容定義在UserLayout中，具體修改位置如下圖所示。

到此自定義設置登錄頁面就設置完成了，修改之后的效果如下圖所示。

配置路由菜單

輸入用戶名和密碼（都為admin）即可進入前端首頁。腳手架首頁如下圖所示。

本節我們暫時先介紹修改前端兩個地方，一個是瀏覽器顯示內容，另一個就是系統左側的路由菜單。

修改瀏覽器標題內容

我們觀察到進入首頁之后，瀏覽器正常顯示了系統圖標，但是瀏覽器內容并不符合系統標題。分析系統標題的顯示規則為菜單名-系統標題。我們只需修改defaultSetting中的title屬性改為系統標題即可。

修改路徑：ant-design-vue-pro/src/config/defaultSetting.js

修改位置：修改位置如下圖所示。

配置路由菜單

修改路徑：ant-design-vue-pro/src/config/router.config.js

修改位置：打開路由配置文件，修改asyncRouterMap數組。修改位置如下圖所示。

asyncRouterMap數組中定義了對象屬性有path、name、component、meta、redirect、children。

• path屬性可以自定義設置
• name屬性建議和頁面中定義export的name屬性保持一致
• component屬性除首頁定義為BasicLayout，其余定義為RouteView即可
• meta屬性里面定義了title、icon、permission屬性，其中title屬性定義了路由菜單名稱、icon屬性定義了圖標，permission定義了路由權限
• redirect屬性設置為子路由path路徑
• children屬性定義父路由的子路由，以及孫子路由等等。屬性可按照腳手架給出的模板進行定義。配置的路由屬性如下圖所示。

如果系統已經定義好了需求頁面，可以自行按照模板進行添加，這里我暫時演示刪除一個孫子路由，我們演示出路由配置效果即可。刪除了監控頁面的效果如下圖所示。

總結

第二章給大家詳細介紹了如何自定義設置登錄頁面內容、如何配置路由菜單項。每一步都有詳細的路徑和截圖作為參考。請大家跟著圖片進行配置，如有配置不正常的可以留言，我看到會及時回復。第三章給大家主要講解右上角用戶名的配置以及設置頭像下掛菜單，去掉mock數據初步入門。這可能是全網唯一的分享這套優秀的前端框架的系列文章，大家多多鼓勵，你的每一次點贊收藏轉發都是鼓勵我不斷更新下去的動力，敬請期待！

家好，今天給大家介紹一款，html+css實現的扁平簡潔登錄頁面html源碼（圖1）。送給大家哦，獲取方式在本文末尾。

打開頁面有圖片動畫特效，看起來非常不錯（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10186，需要的朋友，訪問[92ui點net]，搜索10186，即可獲取。