整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
介紹
前面我們以及學(xué)會(huì)了Bootstrap框架和jQuery庫(kù)的基本使用方法，并且已經(jīng)把這兩個(gè)軟件包整合到了我們的TFPHP框架里面，接下來(lái)我們就可以使用它們?nèi)ブ谱饔脩艄芾硐到y(tǒng)的視圖模板了。
用戶管理系統(tǒng)包含幾個(gè)主頁(yè)模板：
1）用戶信息表
2）用戶登錄頁(yè)面
3）用戶注冊(cè)頁(yè)面
4）個(gè)人資料修改
5）登錄密碼重置
6）用戶頭像上傳
7）安全問(wèn)題設(shè)置
8）綁定郵箱設(shè)置
9）忘記密碼頁(yè)面
頁(yè)面比較多，我們一點(diǎn)點(diǎn)地設(shè)計(jì)。萬(wàn)事開頭難，福哥今天下帶著大家完成先完成第一個(gè)表單頁(yè)面——用戶登錄頁(yè)面。
HTML
登錄頁(yè)面的html部分包括一個(gè)頁(yè)頭和一個(gè)表單。
<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">首頁(yè)</a></li>
<li class="nav-item"><a href="" class="nav-link">登錄</a></li>
<li class="nav-item"><a href="" class="nav-link">注冊(cè)</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>請(qǐng)輸入正確的用戶名和密碼登錄用戶管理系統(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
用戶登錄頁(yè)面的CSS也是一個(gè)top bar和一個(gè)login form兩個(gè)部分。
/**
* 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;
}用戶登錄頁(yè)面
首先，因?yàn)檫@是TFUMS系統(tǒng)的第一個(gè)模板，所以福哥先設(shè)計(jì)了頁(yè)頭的樣式。這個(gè)頁(yè)頭也會(huì)作為其他頁(yè)面的共用的頁(yè)頭。頁(yè)頭使用了bs的nav樣式組的樣式，簡(jiǎn)化了自己寫CSS的工作。
其次，表單部分使用了bs的form-group樣式作為每一行表單項(xiàng)的容器樣式，加上label和form-control簡(jiǎn)簡(jiǎn)單單就把一個(gè)漂亮的表單做出來(lái)了。
還有福哥使用浮動(dòng)加清除實(shí)現(xiàn)了“保存登錄狀態(tài)”和“忘記密碼”的左右布局設(shè)計(jì)。
最后，福哥給button增加了form-control樣式，使按鈕撐滿了整個(gè)容器，看起來(lái)比較工整了。
今天我們完成了第一個(gè)表單頁(yè)面的模板，包括：HTML和CSS部分。有了這個(gè)基礎(chǔ)之后，再去制作其他表單頁(yè)面就容易多了。
下一課我們將嘗試完成用戶注冊(cè)頁(yè)面、忘記密碼頁(yè)面、登錄密碼重置三個(gè)頁(yè)面的模板的制作。
https://m.tongfu.net/home/35/blog/512901.html
們?cè)谶M(jìn)行開發(fā)的時(shí)候，需要進(jìn)行前端的設(shè)計(jì)，但是如果都是自己寫的話，需要寫大量的CSS。
如果套用的模板的話，勢(shì)必會(huì)省很大的時(shí)間和精力。
經(jīng)過(guò)一段時(shí)間的整理，孟哥整理了11套高質(zhì)量的后臺(tái)模板，非常奈斯。
需要的，可以自取。
關(guān)注+轉(zhuǎn)發(fā)+評(píng)論。
碼地址：https://gitee.com/itsoft7/itbi-vue
淺談一下vue的目錄結(jié)構(gòu)，對(duì)vue小白用，大神請(qǐng)繞過(guò)。項(xiàng)目建立后，腳手架自動(dòng)根據(jù)模板生成了文件目錄結(jié)構(gòu)，具體文件結(jié)構(gòu)可以在網(wǎng)上可以搜索到，在這里就不再贅述了，我只針對(duì)重要的幾個(gè)進(jìn)行說(shuō)明。
三者之間的聯(lián)系是什么？
從上圖簡(jiǎn)單看出三者之間聯(lián)系，同時(shí)也體現(xiàn)出來(lái)vue的單頁(yè)面模式，何為單頁(yè)面應(yīng)用（SPA），通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用（核心：index.html,main.js,app.vue），瀏覽器一開始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在app.vue（<router-view/>）。開發(fā)的每個(gè)模塊都是一個(gè)組件，然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新組件資源，就是通常所說(shuō)的不是全面頁(yè)面刷新。單頁(yè)面優(yōu)缺點(diǎn)并存
登錄界面
主界面
導(dǎo)航菜單
1.樣式表使用了scss : 項(xiàng)目采用的lang="scss"，后報(bào)錯(cuò)TypeError: this.getResolve is not a function at由于當(dāng)前sass的版本太高，webpack編譯時(shí)出現(xiàn)了錯(cuò)誤，這個(gè)時(shí)候只需要換成低版本的就行，下面說(shuō)一下修改方法，很簡(jiǎn)單，如下，找到package.json和package-lock.json文件，里面的 "sass-loader"的版本更換掉 就行了，換成如下版本"sass-loader": "^7.3.1",
2.路由模式采用了“history”：這樣去掉了url地址中#號(hào)，具體代碼需要修改router文件夾的index .js。
采用這種模式時(shí)，發(fā)布部署的時(shí)候一定要需要nginx的配合，后面文章會(huì)專門講。
3.圖標(biāo)使用svg格式：
第一步：下載 "svg-sprite-loader": "^6.0.7",
第二步：修改配置文件
第三步：參照源碼
4.使用elementUI：這ui使用也比較簡(jiǎn)單，具體使用方法可以通過(guò)官網(wǎng)了解,同樣先下載依賴，然后在main.js重要初始化加載。
/*ElementUI*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)其中element-ui/lib/theme-chalk/index.css 是默認(rèn)樣式表，可以在官網(wǎng)按照自己喜歡的風(fēng)格生成樣式表，下載下來(lái)后單獨(dú)引用即可，在使用過(guò)程需要自定義修改樣式的需要單獨(dú)自己創(chuàng)建一個(gè)樣式文件，在默認(rèn)樣式表下單獨(dú)自定義樣式表，自定義的樣式這樣就可以覆蓋默認(rèn)的了，不建議直接默認(rèn)的樣式表上去修改。
4.Layout：layout是布局容器,可以根據(jù)應(yīng)用場(chǎng)景定義自己的布局，其結(jié)構(gòu)是:
布局說(shuō)明
定義好后layout后如何和視圖頁(yè)面進(jìn)行關(guān)聯(lián)？在路由文件進(jìn)行配置
該文章不是一個(gè)演示文章，代碼也不是為了寫文章而寫，我是想通過(guò)實(shí)際的項(xiàng)目給大家進(jìn)行分享，代碼已經(jīng)完全公開，會(huì)不斷的持續(xù)更新。
目前正在研究在vue使用mxgraph畫流程圖，正在研究中......
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
