abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八)

abp(net core)+easyui+efcore實現倉儲管理系統目錄php

abp(net core)+easyui+efcore實現倉儲管理系統——ABP整體介紹(一)css

abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二)html

abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三)前端

abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)jquery

abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務(五)bootstrap

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之控制器(六)前端框架

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之列表視圖(七)app

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之增刪改視圖(八)框架

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之菜單與測試(九)編輯器

abp(net core)+easyui+efcore實現倉儲管理系統——多語言(十)

abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十一)

abp(net core)+easyui+efcore實現倉儲管理系統——菜單-上 (十六)

abp(net core)+easyui+efcore實現倉儲管理系統——菜單-下(十七) 

一.前言

    經過前面的學習,咱們已經有實現了傳統的ASP.NET Core MVC的增刪改查功能,也實現了使用ABP提供的WebAPI方式來實現增刪改查的功能。今天咱們來學習一下標題中的另外一個主要組件——EasyUI。如何經過使用Easy UI來實現一個增刪改查的頁面功能。

2、前端框架EasyUI

   EasyUI國內的名氣不小的前端框架,作爲開發者來講,即便沒用過,多少也據說過,並且也比較適合DotNet環境。

   雖說如今主流的前端開發框架是Vue、Angular、React這三個,若是是開發企業裏面的信息管理系統,我的感受仍是EasyUI方便一些。EasyUI一開始是一種基於JQuery的用戶界面插件集合,如今其能夠基於Vue、Angular、React這些最新的腳本庫實現用戶界面。EasyUI的目標就是幫助Web開發者更輕鬆的打造出功能豐富而且美觀的UI界面。EasyUI支持各類皮膚以知足使用者對於頁面不一樣風格的喜愛。EasyUI爲提供了大多數UI控件的使用,如:表單、下拉框、菜單、對話框、標籤、窗體、按鈕、數據網格、樹形表格、 面板等等。

   EasyUI如今也更新到了1.8版本了。EasyUI下載地址: http://www.jeasyui.com/download/list.php

   我下載了EasyUI 1.8.1版本,把下載的壓縮文件jquery-easyui-1.8.1.zip解壓縮,並在「ABP.TPLMS.Web.Mvc」項目的wwwroot\lib文件夾中建立一個名爲easyui-1.8的文件夾,用於存儲easyui相關的素材。以下圖。

 

3、在佈局文件中引入EasyUI

       仍是在以前的這個項目中,咱們不須要更換項目。

      1) 在Visual Studio 2017的「解決方案資源管理器」中,右鍵單擊在領域層「ABP.TPLMS.Web.Mvc」項目中的views\Share目錄。 找到_Layout.cshtml文件,使用鼠標雙擊以後,在編輯器中打開。只在開發環境中引用EasyUI相關css文件。以下圖。

 

具體代碼以下:

<link href="~/lib/easyui-1.8/themes/icon.css" rel="stylesheet" asp-append-version="true" />

<link href="~/lib/easyui-1.8/themes/bootstrap/easyui.css" rel="stylesheet" asp-append-version="true" />
 

     2)一樣在_Layout.cshtml文件中,在開發環境中引用EasyUI相關js文件。以下圖。

 

 具體的代碼以下:

   <script src="~/lib/easyui-1.8/jquery.easyui.min.js"></script>

    <script src="~/lib/easyui-1.8/locale/easyui-lang-zh_CN.js"></script>

     3)上面的引入的文件,只在開發環境中才起做用。實際狀況是開發完成以後,要在生產環境中使用。咱們來看看在全部環境中引用EasyUI相關css文件。以下圖。

 

 3)在全部環境中引用EasyUI相關js文件。以下圖。

 

        執行到這裏,咱們已經在咱們的項目中引入了EasyUI。

相關文章
相關標籤/搜索