基於Layui的開源後端管理應用模板——KitAdmin

2019-07-06     最美分享Coder

介紹

layui是國內開發者開發的一個面向所有層次的前後端開發者,零門檻開箱即用的前端UI解決方案,可以說它極度符合國人的風格,深受廣大前後端開發者和愛好者的喜愛,也誕生了不少基於layui的框架模板,特別適合國內前中後端工程師使用,KITADMIN就是其中一個基於layui的後端管理應用模板,當前版本是基於layui 2.x重構的版本,與之後1.x版本有本質有區別。該版本的核心是[路由],不再支持[iframe]方式的加載,可以說更加的優雅了!



開源地址

碼云:

https://gitee.com/kitteam/kit_admin/


演示地址:

http://kit.zhengjinfan.cn/#/

版本特性

以下是來自demo頁面作者的介紹,感興趣的可以直接去看看

  • 1、用法一如既往的簡單,快捷。(只需要簡單的配置就實現一些功能).
  • 2、提供本地開發環境。(依賴nodejs運行環境和gulp)
  • 3、提供代碼功能。(依賴nodejs運行環境和gulp)
  • 4、模塊化加載。(依賴layui模塊化,用法與layui保持一致)
  • 5、提供路由功能。(路由是本版本的核心功能了,需與模板綁定,詳情請參考相關文檔)
  • 6、完全的前後端分離開發。(集成mockjs用於攔截請求並返回模擬數據,詳情請參考相關文檔)
  • 7、左側菜單重寫,支持到4級菜單。(集成mockjs用於攔截請求並返回模擬數據,詳情請參考相關文檔)

文檔就在demo頁面的下面.



腳手架

KITADMIN的作者非常給力,提供了開箱即用的腳手架,我們可以基於此腳手架直接用於正式開發

https://gitee.com/kitteam/kit_admin_scaffold/


  1. 提供本地開發環境;
  2. 提供代碼打包功能 ;
  3. 模塊化;
  4. 提供路由功能;
  5. 能快速開發單頁面應用程式。


打開後效果:



頁面都是以模板形式的,如下



開發構建:


# 安裝node依賴包
npm install
# 啟動開發環境 http://localhost:8010
npm start
# 構建生產環境代碼
npm run build

PS:這個地方需要注意的是,你nodejs的版本不能過高,我在本地測試時發現最高版本12.x會報錯,隨後重新安裝了nodejs10,問題隨之解決!

效果預覽

在正式選用框架之前,你應該大致的預覽一下,以免開發的時候才發現可能無法滿足你的需求:

  • 登錄頁面


  • 左側菜單欄

菜單欄支持多級菜單,最多支持4級,支持收縮菜單欄



  • 頂部(看不清可以直接打開Demo預覽)


  • 頁面設置:

你可以切換頁面模式,可以使選項卡式,也可以是單個頁面模式(一次只打開一個頁面),更換主題功能



  • 選項卡模式


  • 切換主題


  • 頁簽管理


  • 左側邊欄打開


  • 右側邊欄


兼容性

KIADMIN很遺憾不兼容IE,但是當前大多數新項目已經不再要求兼容IE了,一些特殊的項目除外,因此也並不是問題,支持其他主流的瀏覽器

關於layui

關於layui,筆者一直都在關注,因為當時的畢業設計就用了它,因此感觸很多,在之前的一段時間裡,layui停止更新了一段時間,但最近作者又在瘋狂的更新了,雖然現在還是2.x版本,但是我相信在未來不久的日子裡,3.0版本會上線的,大家可以去官網隨時查看相關動態!



總結

KITADMIN是一個不錯的後端應用的前端模板,雖然可能和官方的layuiAdmin相比還稍遜一籌,但是它是開源的,對於個人開發者尤為友好,如果你對它感興趣,不妨可以試試,如果是企業用戶,無論是使用KITADMIN還是使用官方的layuiAdmin都是可以的,如果你遇到了什麼困難,這裡我引用作者的一句話:

多思考,多動手,進步是可以看得見的!

文章來源: https://twgreatdaily.com/zh-tw/G9TUMWwB8g2yegNDcYCr.html