介紹
前面我們以及學會了Bootstrap框架和jQuery庫的基本使用方法,并且已經(jīng)把這兩個軟件包整合到了我們的TFPHP框架里面,接下來我們就可以使用它們?nèi)ブ谱饔脩艄芾硐到y(tǒng)的視圖模板了。
用戶管理系統(tǒng)包含幾個主頁模板:
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>請輸入正確的用戶名和密碼登錄用戶管理系統(tǒng)</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" />
保存登錄狀態(tài)
</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系統(tǒng)的第一個模板,所以福哥先設計了頁頭的樣式。這個頁頭也會作為其他頁面的共用的頁頭。頁頭使用了bs的nav樣式組的樣式,簡化了自己寫CSS的工作。
其次,表單部分使用了bs的form-group樣式作為每一行表單項的容器樣式,加上label和form-control簡簡單單就把一個漂亮的表單做出來了。
還有福哥使用浮動加清除實現(xiàn)了“保存登錄狀態(tài)”和“忘記密碼”的左右布局設計。
最后,福哥給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進入登錄首頁。系統(tǒng)登錄首頁如下圖所示:
登錄首頁
自定義設置登錄頁面
ant design vue pro提供了一套登錄頁面模板,可以基本滿足我們的業(yè)務需求,但是有些地方還需要修改以達到滿足我們系統(tǒng)的業(yè)務需求。其中需要修改的地方主要有以下四點,修改的地方如下圖所示。
自定義設置登錄頁面
修改路徑:ant-design-vue-pro/public/index.html
修改方式:首先我們需要準備系統(tǒng)圖標,推薦一個阿里巴巴出品的矢量圖標庫—— iconfont。我以XX大學畢業(yè)生就業(yè)信息管理系統(tǒng)為例,修改圖標和文字。下載好的圖標我們修改名為logo.png,并替換public下的logo.png。然后修改index.html的head部分的title標簽內(nèi)容為XX大學畢業(yè)生就業(yè)信息管理系統(tǒng),修改之后的index.html如下圖所示。
修改后的index.html文件
修改完成之后,我們保存之后看下瀏覽器端的頁面變化效果,如下圖所示。
小圖標標題修改
修改路徑:ant-design-vue-pro/src/layouts/UserLayout.vue
修改方式:打開UserLayout.vue文件,定位修改圖標標題描述的位置,如下圖所示。
修改位置
可以看到系統(tǒng)圖標引入在img標簽的src屬性,且格式為svg格式,我們可以在iconfont上復制圖標的svg代碼,然后將logo.svg內(nèi)容替換成我們復制的svg代碼。同時修改Ant Design標題為XX大學畢業(yè)生就業(yè)信息管理系統(tǒng)。唯一有點不好理解的是小標題描述是引入一段代碼,該代碼定義于locals中,路徑為ant-design-vue-pro/src/locals/lang/zh_CN.js,具體修改小標題描述位置如下圖所示。
小標題修改位置
修改后的結(jié)果如下圖所示。
系統(tǒng)修改后的結(jié)果
3.登錄頁面功能自定義設置
我們可以根據(jù)自身系統(tǒng)業(yè)務需求來取舍頁面功能,比如只需保留賬戶密碼登錄,無需設置手機號登錄。不設置自動登錄,并且不提供其它登錄方式。修改路徑為ant-design-vue-pro/src/views/Login.vue。修改位置如下圖所示。
登錄頁面功能設置
登錄頁面設置
修改輸入框提示語,可以定位到用戶名和密碼輸入框,看到其placeholder屬性也是使用代碼定義,那我們可以通過在locals/lang/zh_CN/user.js
修改輸入框提示語
4. 修改頁腳內(nèi)容
修改路徑:ant-design-vue-pro/src/layouts/UserLayout.vue
修改位置:頁腳內(nèi)容定義在UserLayout中,具體修改位置如下圖所示。
修改頁腳
到此自定義設置登錄頁面就設置完成了,修改之后的效果如下圖所示。
登錄頁面修改完成
輸入用戶名和密碼(都為admin)即可進入前端首頁。腳手架首頁如下圖所示。
腳手架首頁
本節(jié)我們暫時先介紹修改前端兩個地方,一個是瀏覽器顯示內(nèi)容,另一個就是系統(tǒng)左側(cè)的路由菜單。
修改瀏覽器標題內(nèi)容
我們觀察到進入首頁之后,瀏覽器正常顯示了系統(tǒng)圖標,但是瀏覽器內(nèi)容并不符合系統(tǒng)標題。分析系統(tǒng)標題的顯示規(guī)則為菜單名-系統(tǒng)標題。我們只需修改defaultSetting中的title屬性改為系統(tǒng)標題即可。
修改路徑:ant-design-vue-pro/src/config/defaultSetting.js
修改位置:修改位置如下圖所示。
修改首頁標題
配置路由菜單
修改路徑:ant-design-vue-pro/src/config/router.config.js
修改位置:打開路由配置文件,修改asyncRouterMap數(shù)組。修改位置如下圖所示。
路由配置文件
asyncRouterMap數(shù)組中定義了對象屬性有path、name、component、meta、redirect、children。
路由配置屬性
如果系統(tǒng)已經(jīng)定義好了需求頁面,可以自行按照模板進行添加,這里我暫時演示刪除一個孫子路由,我們演示出路由配置效果即可。刪除了監(jiān)控頁面的效果如下圖所示。
配置路由后的效果
代碼配置
總結(jié)
第二章給大家詳細介紹了如何自定義設置登錄頁面內(nèi)容、如何配置路由菜單項。每一步都有詳細的路徑和截圖作為參考。請大家跟著圖片進行配置,如有配置不正常的可以留言,我看到會及時回復。第三章給大家主要講解右上角用戶名的配置以及設置頭像下掛菜單,去掉mock數(shù)據(jù)初步入門。這可能是全網(wǎng)唯一的分享這套優(yōu)秀的前端框架的系列文章,大家多多鼓勵,你的每一次點贊收藏轉(zhuǎn)發(fā)都是鼓勵我不斷更新下去的動力,敬請期待!
圖1
圖2
圖3
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。