Bootstrap框架

Bootstrap讓前端開發(fā)更快速、簡單。所有開發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項目都適
用。

• 可以直接使用Bootstrap提供的 CSS 樣式表，Bootstrap的源碼是采用最流行的CSS預(yù)處理工具Less和Sass開發(fā)的?？梢灾苯硬捎妙A(yù)編譯的CSS文件快速開發(fā)，也可以從Bootstrap源碼自定義自己需要的樣式。
• 網(wǎng)站和應(yīng)用能在Bootstrap幫助下通過同一份源碼快速、有效地適配手機、平板和 PC 設(shè)備，這一
  切都是 CSS 媒體查詢Media Query的功勞。
• 提供大量的布局容器、柵格系統(tǒng)以及大量的組件，可以快速方便的開發(fā)

前后端分離

從項目維護的角度上，傳統(tǒng)的開發(fā)模式，前端代碼和后端代碼耦合在一起，導(dǎo)致代碼混亂不堪，極大的降低了項目的可維護性，增加了維護成本。從開發(fā)角度來看，研發(fā)人員在開發(fā)過程中，不僅要設(shè)計后端架構(gòu)還要兼顧前端展示，導(dǎo)致開發(fā)效率低下，延長開發(fā)周期。

傳統(tǒng)開發(fā)模式的問題

• 開發(fā)出的軟件響應(yīng)速度慢，質(zhì)量差，用戶體現(xiàn)差
• 前后端嚴(yán)重耦合，代碼混亂，可維護性差
• 研發(fā)人員前后端兼顧，開發(fā)效率低下，研發(fā)周期變長。
  

在前后端分離的開發(fā)模式中，后端僅返回前端所需的數(shù)據(jù)，前端負(fù)責(zé)渲染HTML頁面，后端不再控制前端的效果，從后端請求的數(shù)據(jù)如何加載到前端中，都由前端自己決定，后端僅僅需要提供一套邏輯對外提供數(shù)據(jù)即可，并且前端與后端的耦合度相對較低，在這種模式中通常將后端開發(fā)的每個視圖都成為一個接口或者API，前端通過訪問接口來對數(shù)據(jù)進行增刪改查?？偨Y(jié)就是：后臺負(fù)責(zé)提供數(shù)據(jù)，前端負(fù)責(zé)數(shù)據(jù)展示，職責(zé)分離，分工明確。

前后端分離實際上是一個工程化考量和項目管理的問題，非常適合復(fù)雜項目的開發(fā)，但是開發(fā)各個環(huán)節(jié)的成本都會有明顯提升，注意不要為了前后端分離而在開發(fā)中采用前后端分離。

由于項目越來越復(fù)雜，而前端野生的開發(fā)方法，基本上都是copy代碼段，人肉試錯的方式，根本不可能實現(xiàn)工程化、項目化，這樣根本不能適應(yīng)需求，更不要說長期演進和迭代的目標(biāo)。前端開發(fā)組件化框架解決了這些問題，例如Vue.js、React等相關(guān)框架的出現(xiàn)。而且前端可以借助Node開發(fā)各種工具以輔助開發(fā)，例如包管理器、預(yù)編譯工具等。

前后端分離的實施

一個最簡單的開發(fā)步驟也應(yīng)該有設(shè)計、開發(fā)、測試和部署4步。前后端分離會滲透每個步驟中的。

• 設(shè)計階段最基本的是系統(tǒng)設(shè)計
  • 后端系統(tǒng)設(shè)計包括系統(tǒng)架構(gòu)設(shè)計，例如數(shù)據(jù)庫、中間件、緩存這些架構(gòu)的設(shè)計。主要考慮性
    能、容量、可擴展性、可維護性等
  • 前端根據(jù)項目規(guī)模也需要充分的規(guī)劃和準(zhǔn)備，要滿足可長期演進、可迭代的目標(biāo)
• 設(shè)計階段第二階段就是接口設(shè)計，前后端系統(tǒng)通過接口進行交互。這里模型層面的接口約定就是非常重要的內(nèi)容，例如請求方式、數(shù)據(jù)格式、數(shù)據(jù)類型等。應(yīng)該進行充分的評審
• 開發(fā)階段時前后端按照事先約定好的接口獨立開發(fā)。前端可以使用組件化框架實現(xiàn)獨立驅(qū)動頁面開發(fā)，數(shù)據(jù)從mock服務(wù)器上獲取，完全不需要依賴于實時的后端接口。后端需要按照之前評審好的接口約定來提供數(shù)據(jù)即可，后端一套接口可以提供給多種不同類型的前端使用。
• 測試階段前后端獨立可測試。前端主要是頁面顯示、跳轉(zhuǎn)、輸入、傳遞參數(shù)、響應(yīng)數(shù)據(jù)等測試；后端主要保證數(shù)據(jù)接口的提供，包括數(shù)據(jù)格式、校驗、異常處理、數(shù)據(jù)的一致性問題、權(quán)限問題等。
• 部署上線階段應(yīng)該是前后端項目獨立可部署，相互不收對方的約束和影響，互相透明。后端項目可以通過類似Jenkins系統(tǒng)持續(xù)發(fā)布，一鍵部署。前端項目有自己的CI系統(tǒng)。

前端框架LayUI

layui兼容人類正在使用的全部瀏覽器，但是IE6/7除外，可作為Web界面速成開發(fā)方案。它更多是面向
后端開發(fā)者，無需涉足前端各種工具，只需面對瀏覽器本身，讓一切所需要的元素與交互。

概述LayUI

layui是一套采用自身經(jīng)典的模塊化規(guī)范編寫的開源Web UI解決方案，并遵循原生 HTML/CSS/JS 的開發(fā)與組織方式，門檻極低，拿來即用，非常適合網(wǎng)頁界面的快速開發(fā)。

layui是由中國人開發(fā)的，16年出廠的框架，其主要提供了很多好看、方便的樣式，并且基本拿來即用，類似Bootstrap相似。該框架極大的好處就是定義了很多前后端交互的樣式接口，例如分頁表格，只需要在前端配置好接口，后端則按照定義好的接口規(guī)則返回數(shù)據(jù)，即可完成頁面的展示，極大減少了后端人員的開發(fā)成本。

官網(wǎng)：https://www.layui.com

官方文檔：https://www.layui.com/doc/

layui有免費和授權(quán)兩種版本。通用型管理系統(tǒng)純靜態(tài) UI 模板https://www.layui.com/layuiadmin/一般
用于企業(yè)級應(yīng)用開發(fā)，但是需要收費授權(quán)。

可以通過文檔或者實例查看幫助文檔，推薦使用示例直接指導(dǎo)項目開發(fā)

LayUI特點

• layui屬于輕量級框架，簡單美觀。適用于開發(fā)后端模式，它在服務(wù)器頁面上有非常好的效果
• layui是提供給后端開發(fā)人員的ui框架，基于DOM驅(qū)動

下載與使用

1、在官網(wǎng)首頁下載到layui的最新版，目錄結(jié)構(gòu)

├─css //css目錄
│ │─modules //模塊 css 目錄（一般如果模塊相對較大，我們會單獨提取，如下：）
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心樣式文件
├─font //字體圖標(biāo)目錄
└─layui.js //核心庫

2、獲得layui后，將其完整地部署拷貝到項目目錄中，然后在頁面種引入兩個文件

<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>

3、按鈕點擊彈出消息框

<link rel="stylesheet" href="layui/css/layui.css">
<!-- 使用layui-fluid類不會固定寬度，而是100%自適應(yīng) -->
<div class="layui-fluid">
<button class="layui-btn" id="btn">按鈕</button>
</div>
<!--引入layui.js的<script>標(biāo)簽最好放置在html末尾 -->
<script src="layui/layui.js"></script>
<script>
layui.use(['layer'],function(){
var layer = layui.layer; //定義全局變量layer即可調(diào)用layui.layer模塊中的函數(shù)
$=layui.jquery;
$(document).on('click', '#btn', function(){ //在頁面種查找id=btn的元素并添加click事件處理
layer.msg('hello');
});
});
</script>

通過layui.use方式來聲明所使用的模塊，加載入口文件并執(zhí)行指定function()函數(shù)。導(dǎo)航依賴layer模
塊，否則無法進行功能性操作。注意 $(function(){ }) 先執(zhí)行； layui.use 后執(zhí)行，渲染靠后。

布局

固定寬度：兩側(cè)有留白。將柵格放入要給class=layui-container特定容器中，以便在小屏幕以上的設(shè)備
中固定寬度，讓列可控

<div class="layui-container" style="background-color:red; height:300px;">
	<div class="layui-row">
		... ...
	</div>
</div>

完整寬度：可以不固定容器寬度，將柵格或其它元素放入一個帶有class=layui-fluid的容器中，那么寬度將不會固定，而是100%適應(yīng)

<div class="layui-fluid">
	... ...
</div>

柵格系統(tǒng)

為了豐富網(wǎng)頁布局，簡化html/css代碼的耦合，并提升多終端的適配能力，可以采用layui排版應(yīng)對響應(yīng)式網(wǎng)站和后臺管理系統(tǒng)的界面，layui的柵格采用業(yè)界比較常見的12等分規(guī)則，內(nèi)置預(yù)設(shè)了4*12種css排列類，可用于手機、平板、PC 桌面中大型屏幕的4中不同的終端適配處理，最低能支持到 ie8。

柵格布局隊則

采用layui-row定義行

<div class="layui-row"></div>

采用類似 layui-col-md* 這樣的預(yù)設(shè)類來定義一組列column，且放在行row內(nèi)，其中

• 變量md代表的是不同屏幕下的標(biāo)記
• 變量 * 代表的是該列所占用的12等分，可選值為1-12
• 如果多個列的等分值總和等于12，剛好滿行排列。如果大于12，多余的列將自動另起一行，注意是整個列另起新行

列可以同時出現(xiàn)最多4種不同的組合，分別是xs超小屏幕，如手機、sm小屏幕，如平板、md桌面中等屏幕、lg桌面大型屏幕

對列追加類似layui-col-space5、layui-col-md-offset3這樣的預(yù)設(shè)類來定義列的間距和偏移

可以在列column元素放入自己的任意元素填充內(nèi)容

<div class="layui-row">
	<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
		移動：4/12 | 平板：7/12 | 桌面：8/12
	</div>
	<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
		移動：4/12 | 平板：5/12 | 桌面：4/12
	</div>
</div>

將柵格放入一個帶有class="layui-container"的特定的容器中，以便在小屏幕以上的設(shè)備中固定寬度，讓列可控。

可以不固定容器寬度將柵格或其它元素放入一個帶有class="layui-fluid"的容器中，那么寬度將不會固
定，而是100%適應(yīng)

響應(yīng)式規(guī)則

柵格的響應(yīng)能力得益于CSS3媒體查詢的強力支持，從而針對4類不同尺寸的屏幕進行響應(yīng)的適配處理

平板和桌面端不同表現(xiàn)

<div class="layui-row">
	<div class="layui-col-sm6 layui-col-md4" style="background-color:red">
		平板6/12，桌面端4/12
	</div>
</div>

列邊距

通過列邊距的預(yù)設(shè)類來設(shè)定列之間的艱巨，且以行中最左的列不會出現(xiàn)左邊距，最右的列不會出現(xiàn)右邊距。列間距在保證排版美觀的同時，還可以進一步保證列的寬度精細(xì)程度。Layui預(yù)設(shè)了12種不同尺寸的邊距

支持列之間為1px-30px區(qū)間的所有雙數(shù)間隔，以及1px、5px、15px、25px的單數(shù)間隔

layui-col-space1、space2、space4、space5、space6、space8、space10、space12、
space14、space15、space16、space18、space20、space22、space24、space25、
space26、space28、space30

樣例

<div class="layui-row layui-col-space10">定義其中的每個div都有邊距為10px，但是左右兩端沒有邊距，space最大30，如果需要更大的值則只能使用列偏移
	<div class="layui-col-md4">
		<div style="background-color:red;">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color:green;">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color:yellow;">4</div>
	</div>
</div>

layui-col-span設(shè)置的是padding內(nèi)邊距，所以設(shè)置背景色也會添加上顏色，所以看起來好像沒有邊距一樣，可以在里面再加一個div達(dá)到顯示的目的

列偏移

對列追加類似layui-col-md-offset * 的預(yù)設(shè)類從而讓列向右偏移，其中 * 號代表的是偏移占據(jù)的列數(shù)，可選值為1-12。例如 layui-col-md-offset3 代表在中型桌面屏幕下，讓該列向右偏移3個列寬度

<div class="layui-row">
	<div class="layui-col-md4" style="background-color:red;">
		4/12
	</div>
	<div class="layui-col-md4 layui-col-md-offset4" style="backgroundcolor:blue;">
		偏移4列，從而顯示在最右邊
	</div>
</div>

列偏移可針對不同屏幕的標(biāo)準(zhǔn)進行設(shè)定，在當(dāng)前設(shè)定的屏幕下有效，當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值時就會堆疊排列

列嵌套

可以對柵格進行無窮層次的嵌套，在列元素layui-col-md中插入行元素layui-row，即可完成嵌套

<div class="layui-row layui-col-space5">
	<div class="layui-col-md5" style="background-color:red;">
		<div class="layui-row">
			<div class="layui-col-md3" style="background-color:blue;">
				內(nèi)部列1
			</div>
			<div class="layui-col-md5" style="background-color:yellow;">
				內(nèi)部列2
			</div>
			<div class="layui-col-md4" style="background-color:green;">
				內(nèi)部列3
			</div>
		</div>
	</div>
</div>

基本元素

按鈕

向任意html元素設(shè)定class=layui-btn就可以建議一個基礎(chǔ)按鈕，通過追加格式layui-btn-[type]的class來
定義其它按鈕風(fēng)格

<!--基礎(chǔ)按鈕-->
<button class="layui-btn">一個標(biāo)準(zhǔn)的按鈕</button>
<a href="http://www.layui.com" class="layui-btn">一個可跳轉(zhuǎn)的按鈕</a>
<div class="layui-btn">一個按鈕</div>

不同主題具有不同的顯示顏色layui-btn默認(rèn)、layui-btn-primary原始、layui-btn-normal百搭灰色、
layui-btn-warm暖色、layui-btn-dangger警告、layui-btn-disabled禁用

不同尺寸按鈕具有不同的大小layui-btn默認(rèn)、layui-btn-lg大型、layui-btn-sm小型、layui-btn-xs迷你

圓角按鈕layui-btn-radius

圖標(biāo)按鈕

<button class="layui-btn">
<i class="layui-icon">&#xe608;</i>添加
</button>
<button class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">&#x1002;</i>刷新
</button>

具體的圖標(biāo)值可以在layui的幫助文檔中進行查詢

點擊動作

<button class="layui-btn layui-btn-warm" id="btn">一個標(biāo)準(zhǔn)的按鈕</button>
<script>
layui.use(['laydate','jquery'], function() {
var layer = layui.layer,
$=layui.jquery;
$(document).on('click','#btn',function(){
layer.msg('hello');
});
另外寫法
$('#btn').click(function(){
alert('點擊按鈕!')
});
});
</script>

使用javascript定義點擊事件處理

<button class="layui-btn-normal" onclick="clickme()">layUI按鈕</button>
<script type="text/javascript">
function clickme(){
alert('點擊按鈕!');
}
</script>

導(dǎo)航

水平導(dǎo)航使用無序表單標(biāo)簽ul，導(dǎo)航菜單用到layui中class=layui-nav，其中l(wèi)ayui-this可以選中標(biāo)簽按鍵

<ul class="layui-nav">
<li class="layui-nav-item"><a href="http://www.baidu.com">最新活動</a>
</li>
<li class="layui-nav-item layui-this"><a href="http://www.baidu.com">產(chǎn)
品</a></li>
<li class="layui-nav-item"><a href="http://www.baidu.com">大數(shù)據(jù)</a></li>
<li class="layui-nav-item"><a href="http://www.baidu.com">解決方案</a>
<!-- 二級菜單 -->
<dl class="layui-nav-child">
<dt><a href="">方案1</a></dt>
<dd><a href="">方案2</a></dd>
<dd><a href="">方案3</a></dd>
</dl>
</li>
</ul>

垂直導(dǎo)航使用時需要在class中加入layui-nav-tree

<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="http://www.baidu.com">最新活動</a>
</li>
<li class="layui-nav-item layui-this"><a href="http://www.baidu.com">產(chǎn)
品</a></li>
<li class="layui-nav-item"><a href="http://www.baidu.com">大數(shù)據(jù)</a></li>
<li class="layui-nav-item"><a href="javascript:void(0);">解決方案</a>
<!-- 二級菜單 -->
<dl class="layui-nav-child">
<dt><a href="">方案1</a></dt>
<dd><a href="">方案2</a></dd>
<dd><a href="">方案3</a></dd>
</dl>
</li>
</ul>

邊側(cè)導(dǎo)航還要在class中加上layui-nav-side 設(shè)置背景顏色可以通過layui-bg-blue。通過span標(biāo)簽
class="layui-badge "可以附加小標(biāo)記 ，標(biāo)記也可以在更改顏色圖案等

<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-blue">
<li class="layui-nav-item"><a href="http://www.baidu.com">最新活動<span
class="layui-badge " >6</span></a></li>
<li class="layui-nav-item"><a href="http://www.baidu.com">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="http://www.baidu.com">大數(shù)據(jù)</a></li>
<li class="layui-nav-item"><a href="http://www.baidu.com">解決方案</a>
<!-- 二級菜單 -->
<dl class="layui-nav-child">
<dt><a href="">方案1</a></dt>
<dd><a href="">方案2</a></dd>
<dd><a href="">方案3</a></dd>
</dl>
</li>
</ul>

選項卡

默認(rèn)風(fēng)格只用加layui-tab、簡潔風(fēng)格layui-tab-brief、卡片風(fēng)格layui-tab-card

<fieldset class="layui-elem-field layui-field-title" style="margin-top:
30px;">
<legend>默認(rèn)風(fēng)格的Tab</legend>
</fieldset>
<div class="layui-tab" id="demo" lay-filter="demo" lay-allowclose="true">
<ul class="layui-tab-title" >
<li lay-id="1" class="mydemo">網(wǎng)站設(shè)置</li>
<li lay-id="2" class="mydemo">用戶管理</li>
<li lay-id="3" class="layui-this mydemo">權(quán)限分配</li>
<li lay-id="4" class="mydemo">商品管理</li>
<li lay-id="5" class="mydemo">訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item">
1. 高度默認(rèn)自適應(yīng)，也可以隨意固寬。<br>2. Tab進行了響應(yīng)式處理，所以無需擔(dān)
心數(shù)量多少。
</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item layui-show" >內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn" id="add">添加一個Tab</button>
<button type="button" class="layui-btn " id="change">切換用戶管理
</button>
<button type="button" class="layui-btn" id="delete">刪除商品管理</button>
<button type="button" class="layui-btn" id="deleteAll">刪除所有
tab</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top:
30px;">
<legend>簡單風(fēng)格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">網(wǎng)站設(shè)置</li>
<li>用戶管理</li>
<li>權(quán)限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默認(rèn)自適應(yīng)，也可以隨意固寬。<br>2. Tab進行了響應(yīng)式處理，所以無需
擔(dān)心數(shù)量多少。
</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item">內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top:
30px;">
<legend>卡片風(fēng)格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">網(wǎng)站設(shè)置</li>
<li>用戶管理</li>
<li>權(quán)限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
1. 高度默認(rèn)自適應(yīng)，也可以隨意固寬。<br>2. Tab進行了響應(yīng)式處理，所以無需
擔(dān)心數(shù)量多少。
</div>
<div class="layui-tab-item">內(nèi)容2</div>
<div class="layui-tab-item">內(nèi)容3</div>
<div class="layui-tab-item">內(nèi)容4</div>
<div class="layui-tab-item">內(nèi)容5</div>
</div>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['element','jquery'],function(){
var $=layui.jquery;
var element=layui.element;
$("#add").click(function(){
element.tabAdd('demo', {
title: '選項卡的標(biāo)題'
,content: '選項卡的內(nèi)容' //支持傳入html
});
})
$("#change").click(function(){
element.tabChange('demo', '2');
})
$("#delete").click(function(){
element.tabDelete("demo", "4");
})
$("#deleteAll").click(function(){
var lis=$(".mydemo");
$.each(lis,function(index,item){
var layid=item.getAttribute("lay-id");
element.tabDelete("demo", layid);
});
})
});
</script>

表格

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/',
page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', 80, sort: true}">ID</th>
<th lay-data="{field:'username', 80}">用戶名</th>
<th lay-data="{field:'sex', 80, sort: true}">性別</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">簽名</th>
<th lay-data="{field:'experience', sort: true}">積分</th>
<th lay-data="{field:'score', sort: true}">評分</th>
<th lay-data="{field:'classify'}">職業(yè)</th>
<th lay-data="{field:'wealth', sort: true}">財富</th>
</tr>
</thead>
</table>

表單

表單 <form action="" method="post" class="layui-form"></form>

輸入框，其中外層div的class為layui-form-item；lable為layui-form-label；內(nèi)層div的class為layui-input-inline；輸入框的class為layui-input；

<div class="layui-form-item">
<label class="layui-form-label">用戶名</label>
<div class="layui-input-inline">
<input type="text" name="useraName" required lay-verify="required"
placeholder="請輸入用戶名" class="layui-input"/>
</div>
</div>

• required必填字段
• lay-verify注冊form模塊需要驗證的類型
• class="layui-input"是layui.css提供的通用 css類

單選框和輸入框不同的地方就是單選框的class屬性值不同，單選框的class：layui-radio-disbaled

<div class="layui-form-item">
<label class="layui-form-label">性別</label>
<div class="layui-input-inline">
<input type="radio" name="sex" class="layui-radio-disbaled"
value="男" title="男" checked="checked" />
<input type="radio" name="sex" class="layui-radio-disbaled"
value="女" title="女" />
</div>
</div>

• 屬性title可自定義文本
• 屬性disabled開啟禁用
• 屬性value="xxx"可自定義值，否則選中時返回的是默認(rèn)的on

復(fù)選框lay-skin=“primary”原始復(fù)選框

<div class="layui-form-item">
<label class="layui-form-label">愛好</label>
<div class="layui-input-block">
<input type="checkbox" name="exercise" value="運動" title="運動"
checked="checked" lay-skin="primary">
<input type="checkbox" name="music" value="聽音樂" title="聽音樂">
<input type="checkbox" name="book" value="看書" title="看書">
<input type="checkbox" name="movie" value="看電影" title="看電影">
<input type="checkbox" name="movie" value="旅游" title="旅游"
disabled="disabled">
</div>
</div>

• title屬性可自定義文本。如果只想提示復(fù)選框可以不用設(shè)置title
• 屬性checked可設(shè)定默認(rèn)選中
• 屬性lay-skin可設(shè)置復(fù)選框的風(fēng)格
• 設(shè)置value="1"可自定義值，否則選中時返回的就是默認(rèn)的on

下拉框

<div class="layui-form-item">
<label class="layui-form-label">班級</label>
<div class="layui-input-inline">
<select name="clazz" lay-verify="required">
<option value=""></option>
<option value="1班">1班</option>
<option value="2班">2班</option>
<option value="3班">3班</option>
<option value="4班">4班</option>
<option value="5班" disabled="disabled">5班</option>
</select>
</div>
</div>

• selected屬性可設(shè)置默認(rèn)項
• disabled屬性開啟禁用，select和option標(biāo)簽都支持

文本域

<div class="layui-form-item">
<label class="layui-form-label">留言</label>
<div class="layui-input-inline">
<textarea name="leave" placeholder="請輸入你的留言" class="layuitextarea" lay-verify="required"></textarea>
</div>
</div>

• class="layui-textarea"是layui.css提供的通用css類

開關(guān)按鈕

<div class="layui-form-item">
<label class="layui-form-label">開關(guān)</label>
<div class="layui-input-inline">
<input type="checkbox" checked="checked" name="close" layskin="switch" lay-text="ON|OFF" />
</div>
</div>

• 屬性checked可設(shè)定默認(rèn)開
• 屬性disabled開啟禁用
• 屬性lay-text可自定義開關(guān)兩種狀態(tài)的文本
• 設(shè)置value="1"可自定義值，否則選中時返回的就是默認(rèn)的on

提交submit和重置reset設(shè)置class=“l(fā)ayui-btn layui-btn-normal”，按鈕的樣式class較多

<button type="button" class="layui-btn layui-btn-primary">原始按鈕</button>
<button type="button" class="layui-btn">默認(rèn)按鈕</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按鈕</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按鈕</button>
<button type="button" class="layui-btn layui-btn-danger">警告按鈕</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按鈕</button>

提交和重置按鈕

<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit layfilter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-danger">重置</button>
</div>
</div>

表單的賦值

form.val('first',{'title':'測試','phone':'123456','sex':'男'})

自定義驗證規(guī)則，這里的title是輸入框的lay-verify屬性的值

form.verify({
title:function(value){
if(value.length<5)
return '標(biāo)題太短了!'
},
password:['/^(.+){6,12}$/','密碼要求6到12位']
})

彈出層
最簡單的彈層，這個彈層的效果其實就是一個加了特效和樣式的alert()

layui.use("layer", function () {
var layer = layui.layer;
layer.msg("大家好，這是最簡單的彈層"); // 默認(rèn)樣式以灰色為背景，不帶icon圖標(biāo)，3秒
之后自動消失。
});

layer提供了5種層類型?？蓚魅氲闹涤校?信息提示框彈出層，默認(rèn)、1頁面層、2iframe層、3加載層、4為tips層

自定義樣式以及消失時間，例如con樣式是6，關(guān)閉時間為2秒：layer.msg('操作成功!', {icon: 6, time: 2000});

頁面層彈框?qū)?yīng)type為1。該類型無法應(yīng)用icon圖標(biāo)。content:支持普通文本、html和DOM

layer.open({
type:1,
content:"<h3 style='margin:20px'>我是頁面層，content支持普通文本、html、
DOM</h3>",
btn:["取消"]
})

使用layer實現(xiàn)彈框登錄

layer.open({
type: 2,
title: '用戶登錄',
maxmin: true,
skin: 'layui-layer-lan',
shadeClose: true, //點擊遮罩關(guān)閉層
area : ['400px' , '280px'],
content:'login.html'//彈框顯示的url,對應(yīng)的頁面
});

日期和時間選擇

layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test1'// 由type屬性定義選擇器類型
});
});

編寫數(shù)據(jù)表格

示例-數(shù)據(jù)表格-開啟合計行
1、新建項目，將下載的layui壓縮包的內(nèi)容拷貝到項目中
2、創(chuàng)建table.html頁面，將示例中的代碼拷貝到頁面中
3、下載樣例中對應(yīng)的json文件，并拷貝到項目中
4、使用HBuilder修改頁面顯示，使用HBuilder開發(fā)的原因是它自帶了一個web服務(wù)器，可以直接進行開發(fā)調(diào)試
5、為刪除按鈕添加對應(yīng)的操作，可以查看示例-數(shù)據(jù)表格-數(shù)據(jù)操作

SpringBoot后臺接口

需求為：產(chǎn)品和類別的一對多關(guān)聯(lián)

@Controller
public class MyController{
	@GetMapping("/{url}")
	public String dispatch(@PathVariable("url") String url){
		return url;
	}
}

JsonResult

@Data
public class JsonResult{
private int code;
private String message;
private Object data;
}

Echarts數(shù)據(jù)可視化顯示

ECharts開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5 Canvas，是一個純Javascript圖表庫，提供直觀、生動、可交互、可個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力。

ECharts提供的圖表（共9類14種）支持任意混搭：折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、 餅圖（環(huán)形圖）、雷達(dá)圖、地圖、和弦圖、力導(dǎo)布局圖。

開發(fā)流程

需求：統(tǒng)計商品的熱銷表，查看訂單詳情表(id, order_id, product_id, quantity, cost)

select p.name, sum(quantity) count from order_item od, product p where od.product_id = p.id group by product_id

封裝用于傳遞數(shù)據(jù)的值bean

@Data
public class OrderCountData{
	private String name;
	private Integer count;
}

定義Mapper查詢

public interface ProductMapper extends SqlMapper<Product,Long>{
	List<OrderCountData> findAll();
}

可以參照官方網(wǎng)站樣例，查看對應(yīng)的代碼，拷貝修改即可完成開發(fā)

<script src="echarts.min.js"></script>

繪制一個具備高寬的DOM容器，注意這里必須設(shè)置寬高

<div id="main" style="width:600px;height:400px"></div>

通過echarts.init方法初始化echarts實例，并通過setOption方法生成一個簡單的柱狀圖

<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
title: {
text: '簡單柱狀圖示例'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
option && myChart.setOption(option);
</script>

這里發(fā)現(xiàn)前端所需要的數(shù)據(jù)和實際返回數(shù)據(jù)格式不一致，因為xAxis和series中的data都是數(shù)組

@Data
public class BarData{
private List<String> names=new ArrayList<>();
private List<Long> values=new ArrayList<>();
}

在業(yè)務(wù)實現(xiàn)類中將獲取的 List<OrderCountData> 轉(zhuǎn)換為BarData數(shù)據(jù)類型
在頁面中引入jquery.js進行異步請求獲取數(shù)據(jù)

<script src="jquery.js"></script>
<script src="echarts.js"></script>
<script>
$(function(){
$.ajax({
"url":"http://localhost:8080/bar",
"type":"POST",
"success":function(data){
var myChart=echarts.init(document.getElementById('main'));
var option={
xAxis:{
type:'category',
data:data.names
},
yAxis：{
type:'value'
},
series:[{
data:data.values,
type:'bar'
}]
};
myChart.setOption(option);
}
});
});
</script>

后臺管理界面

首先在示例-布局-框架中找到一個簡單界面樣式，拷貝代碼再到HBuilder中進行修改文章來源地址http://www.zghlxwxcb.cn/news/detail-433005.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<title>管理系統(tǒng)布局</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="jquery.js"></script>
<script>
function change(str){
$('#show').attr('src',str+'.html');
}
</script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layout demo</div>
<!-- 頭部區(qū)域（可配合layui 已有的水平導(dǎo)航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制臺</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用戶管理</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系統(tǒng)</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="cweg.jpg" class="layui-nav-img">登錄用戶
</a>
<dl class="layui-nav-child">
<dd><a href="">set 1</a></dd>
<dd><a href="">set 2</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退出系統(tǒng)</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側(cè)導(dǎo)航區(qū)域（可配合layui已有的垂直導(dǎo)航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">layui-nav-itemed表示默認(rèn)選
中第一個
<a href="javascript:;">商品管理</a>
<dl class="layui-nav-child">
<dd class="layui-this"><a href="javascript:;"
onclick="change('table')">商品查詢</a></dd> 這里的layui-this當(dāng)前選中樣式顯示
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">數(shù)據(jù)分析</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" onchange="change('re')">商品熱銷榜</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>

<div class="layui-body">
<!-- 內(nèi)容主體區(qū)域 -->
<div style="padding: 15px;">
<iframe src="table.html" id="show" style="width:100%;height:600px">
</iframe>
</div>
</div>
<div class="layui-footer">
底部固定區(qū)域
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//組件的初始化代碼
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>

到了這里，關(guān)于前端框架LayUI的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！