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來實現一個增刪改查的頁面功能。
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相關的素材。以下圖。
仍是在以前的這個項目中,咱們不須要更換項目。
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。