目錄 <https://www.cnblogs.com/chillsrc/p/11231284.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——ABP總體介紹(一)
<https://www.cnblogs.com/chillsrc/p/10913047.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——解決方案介紹(二)
<https://www.cnblogs.com/chillsrc/p/10944870.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——領(lǐng)域?qū)觿?chuàng)建實(shí)體(三)
<https://www.cnblogs.com/chillsrc/p/10980974.html>
?abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——定義倉儲并實(shí)現(xiàn) (四)
<https://www.cnblogs.com/chillsrc/p/11024357.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——創(chuàng)建應(yīng)用服務(wù)(五)
<https://www.cnblogs.com/chillsrc/p/11065667.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之控制器(六)
<https://www.cnblogs.com/chillsrc/p/11096690.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之列表視圖(七)
<https://www.cnblogs.com/chillsrc/p/11124614.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之增刪改視圖(八)
<https://www.cnblogs.com/chillsrc/p/11159642.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——展現(xiàn)層實(shí)現(xiàn)增刪改查之菜單與測試(九)
<https://www.cnblogs.com/chillsrc/p/11195189.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——多語言(十)
<https://www.cnblogs.com/chillsrc/p/11231265.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——使用 WEBAPI實(shí)現(xiàn)CURD (十一)
<https://www.cnblogs.com/chillsrc/p/11269737.html>
abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——菜單-上 (十六)
<https://www.cnblogs.com/chillsrc/p/11448287.html>
?abp(net core)+easyui+efcore實(shí)現(xiàn)倉儲管理系統(tǒng)——菜單-下(十七)
<https://www.cnblogs.com/chillsrc/p/11497266.html>
?
一.前言
????? 通過前面的學(xué)習(xí),我們已經(jīng)有實(shí)現(xiàn)了傳統(tǒng)的ASP.NET Core
MVC的增刪改查功能,也實(shí)現(xiàn)了使用ABP提供的WebAPI方式來實(shí)現(xiàn)增刪改查的功能。今天我們來學(xué)習(xí)一下標(biāo)題中的另一個主要組件——EasyUI。如何通過使用Easy
UI來實(shí)現(xiàn)一個增刪改查的頁面功能。
二、前端框架EasyUI
?????? EasyUI國內(nèi)的名氣不小的前端框架,做為開發(fā)者來說,即使沒用過,多少也聽說過,而且也比較適合DotNet環(huán)境。
??
雖然說現(xiàn)在主流的前端開發(fā)框架是Vue、Angular、React這三個,如果是開發(fā)企業(yè)里面的信息管理系統(tǒng),個人感覺還是EasyUI方便一些。EasyUI一開始是一種基于JQuery的用戶界面插件集合,現(xiàn)在其可以基于Vue、Angular、React這些最新的腳本庫實(shí)現(xiàn)用戶界面。EasyUI的目標(biāo)就是幫助Web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。EasyUI支持各種皮膚以滿足使用者對于頁面不同風(fēng)格的喜好。EasyUI為提供了大多數(shù)UI控件的使用,如:表單、下拉框、菜單、對話框、標(biāo)簽、窗體、按鈕、數(shù)據(jù)網(wǎng)格、樹形表格、
面板等等。
???????? EasyUI現(xiàn)在也更新到了1.8版本了。EasyUI下載地址:
?http://www.jeasyui.com/download/list.php
<http://www.jeasyui.com/download/list.php>
<http://www.jeasyui.net/>
?????? 我下載了EasyUI
1.8.1版本,把下載的壓縮文件jquery-easyui-1.8.1.zip解壓縮,并在“ABP.TPLMS.Web.Mvc”項(xiàng)目的wwwroot\lib文件夾中創(chuàng)建一個名為easyui-1.8的文件夾,用于存儲easyui相關(guān)的素材。如下圖。
?
三、在布局文件中引入EasyUI
?????? 還是在之前的這個項(xiàng)目中,我們不需要更換項(xiàng)目。
????? 1) 在Visual Studio
2017的“解決方案資源管理器”中,右鍵單擊在領(lǐng)域?qū)印癆BP.TPLMS.Web.Mvc”項(xiàng)目中的views\Share目錄。
找到_Layout.cshtml文件,使用鼠標(biāo)雙擊之后,在編輯器中打開。只在開發(fā)環(huán)境中引用EasyUI相關(guān)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文件
中,在開發(fā)環(huán)境中引用EasyUI相關(guān)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)上面的引入的文件,只在開發(fā)環(huán)境中才起作用。實(shí)際情況是開發(fā)完成之后,要在生產(chǎn)環(huán)境中使用。我們來看看在所有環(huán)境中引用EasyUI相關(guān)css文件。如下圖。
?
?3)在所有環(huán)境中引用EasyUI相關(guān)js文件。如下圖。
?
? ? ? ? 執(zhí)行到這里,我們已經(jīng)在我們的項(xiàng)目中引入了EasyUI。
熱門工具 換一換