当前位置: 移动技术网 > IT编程>开发语言>.net > abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

2019年09月17日  | 移动技术网IT编程  | 我要评论

酷米图书馆,小西悠番号,蛋蛋1113新浪

目录

abp(net core)+easyui+efcore实现仓储管理系统——abp总体介绍(一)

abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)

abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)

 abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)

abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务(五)

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器(六)

abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)

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

       easyui国内的名气不小的前端框架,做为开发者来说,即使没用过,多少也听说过,而且也比较适合dotnet环境。

   虽然说现在主流的前端开发框架是vue、angular、react这三个,如果是开发企业里面的信息管理系统,个人感觉还是easyui方便一些。easyui一开始是一种基于jquery的用户界面插件集合,现在其可以基于vue、angular、react这些最新的脚本库实现用户界面。easyui的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的ui界面。easyui支持各种皮肤以满足使用者对于页面不同风格的喜好。easyui为提供了大多数ui控件的使用,如:表单、下拉框、菜单、对话框、标签、窗体、按钮、数据网格、树形表格、 面板等等。

         easyui现在也更新到了1.8版本了。easyui下载地址:

       我下载了easyui 1.8.1版本,把下载的压缩文件jquery-easyui-1.8.1.zip解压缩,并在“abp.tplms.web.mvc”项目的wwwroot\lib文件夹中创建一个名为easyui-1.8的文件夹,用于存储easyui相关的素材。如下图。

 

三、在布局文件中引入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。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网