layui後臺框架的搭建

layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都通過精心雕琢，很是適合界面的快速開發。layui 首個版本發佈於2016年金秋，她區別於那些基於 MVVM 底層的 UI 框架，卻並不是逆道而行，而是信奉返璞歸真之道。準確地說，她更可能是爲服務端程序員量身定作，你無需涉足各類前端工具的複雜配置，只需面對瀏覽器自己，讓一切你所須要的元素與交互，從這裏信手拈來。

1、從官網下載layui（可保存至任意盤符）

　　地址：http://www.layui.com/

　　下載完成後，能夠看到以下架構

1. ├─css //css目錄
2. │ │─modules //模塊css目錄（通常若是模塊相對較大，咱們會單獨提取，好比下面三個：）
3. │ │ ├─laydate
4. │ │ ├─layer
5. │ │ └─layim
6. │ └─layui.css //核心樣式文件
7. ├─font //字體圖標目錄
8. ├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情）
9. │─lay //模塊核心目錄
10. │ └─modules //各模塊組件
11. │─layui.js //基礎核心庫
12. └─layui.all.js //包含layui.js和全部模塊的合併文件

2、從Git倉庫下載layui 的完整開發包，以便於進行二次開發

　　下載地址：https://github.com/sentsin/layui/

3、 npm 安裝（前提是要先安裝node.js-----此操做見下節node.js的安裝）

　　

通常用於 WebPack 管理

4、完成以上操做後，新建一個項目（這裏以MVC爲案例）

　　而後將下載好的layui（完整移動，不要更改文件名以及其餘信息）移至項目

　　

　　如上圖所示

5、如今已經部署好了layui，能夠新建頁面查看效果

　　在MVC中新建佈局頁（框架中有一部份內容是同樣的，因此能夠重複使用，故新建佈局頁，在其餘項目中也能夠新建母版頁，用戶控件等等）

　　地址：http://www.layui.com/demo/admin.html  將後臺佈局寫好

　　選擇獲取佈局代碼，將代碼貼至佈局頁中。

　　新建佈局頁和視圖頁，在佈局頁中內容主體區域要加@RenderBody()方法，其餘項目不如此，以下

 

　　添加視圖--

　　運行視圖，可獲得以下效果

　　在佈局頁中給列表一加上跳轉連接--

　　

　　新建FormTable視圖（注意要添加布局頁），加入其餘元素，此處添加的表單元素，地址：http://www.layui.com/demo/form.html，選擇查看代碼將所要的代碼貼至頁面--

　　運行index.cshtml頁面後，點擊列表一，出現以下效果：

　　如上操做是簡單搭建layui，進行後臺系統搭建。

　　下節講解上面所提到的npm的安裝過程。