ASP。NET核心项目实战的权限管理系统(1)使用adminlte建立前端-研发项目管理

>>ASP。NET核心项目实战的权限管理系统(1)使用adminlte建立前端-研发项目管理

ASP。NET核心项目实战的权限管理系统(1)使用adminlte建立前端-研发项目管理

引言:当今社会市场竞争激烈,软件开发企业想要占据前列需要在研发管理上下功夫,“向管理要效益”已经成为软件开发企业的共识,研发项目管理在软件企业中的普及也是大势所趋。国内做软件项目管理工具的开发商翼发云近几年发展十分迅速,越来越多的软件开发企业认识到研发项目管理的重要性,能切实有效降低成本,规范软件开发流程,提高软件产品质量。国内研发项目管理系统、敏捷开发管理工具的领导品牌翼发云敏捷项目管理系统采用可视化业务流程技术,支持瀑布模型等传统软件研发项目管理,同时也支持scrum等敏捷开发流程,是理想的敏捷开发管理工具,涵盖软件项目管理工作的整个生命周期。为提高国内软件开发企业的项目管理水平,分享一篇企业管理相关的知识文章。

0 ASP.NET核心项目物权管理系统(0)

1 ASP。NET核心项目实战的权限管理系统(1)使用adminlte建立前端 scrum

2 ASP.NET核心项目实战权限管理系统(2)功能与实体设计

3 ASP。NET核心项目真正的版权管理系统(3)通过使用PostgreSQL EntityFramework核心 软件项目管理

4 ASP.NET核心项目物权管理系统(4)依赖于多项目分层实施注入、仓储和服务。

5 ASP.NET核心项目实战权限管理系统(5)用户登录 敏捷开发流程

6 ASP.NET核心项目实战权限管理系统(6)功能管理

7 ASP.NET核心项目版权管理系统(7)组织、角色、用户权限 研发项目管理

8 ASP.NET核心项目版权管理系统(8)功能菜单动态加载

GitHub源地址

0布局页,起始页和错误页

0 layout page

使用布局页相当于一个母版页,可以将各个页面公用部分,如上方标题区、左侧导航菜单区、下方版权声明及状态显示区以及通用的js及css引用等,集中放到布局页管理,具体功能页面只需关注自己独有的界面元素系布局即可。

创建布局页面

在Views文件夹下新建一个Shared文件夹,文件夹下新建一个名称为”_Layout.cshtml”的MVC视图布局页。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

将_Layout.cshtml布局页的内容修改如下:

<DOCTYPE html & gt;& lt!;HTML & gt;<头><meta name=“视口”content=“宽度=设备宽度/ ><标题>@ ViewBag。标题& lt;/标题></头><体><H1 >这里是页面内容的布局一般是统一的风格,每一页的菜单等常见的部分& lt;/ H1 ><div >& lt;!当你创建一个基于视图的内容_layout.cshtml页面布局视图,而视图的内容页的布局将出现在“renderbody渲染()- & gt(& lt);@ renderbody;/ DIV ></身体& gt;& lt;/ HTML & gt;

布局页面的使用

使用布局页,只需要指定页面的Layout即可,我们以上节创建的Home下的Index.cshtml为例,只需在页面上添加如下代码即可。

“{ /布局使用布局=“~ /观点/共享/ _layout页。cshtml”};<H1 >你好,ASP。NET核心MVC & lt;/ H1 & gt;

此时,我们运行程序,已经成功使用了布局页

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

0.1起始页

为了避免每个页面都要指定Layout这种重复繁琐的操作,MVC为我们提供了MVC视图起始页,我们只需添加一个视图起始页,并在视图起始页里面添加对布局页的引用,即可达到所有页面都使用布局页的目的。

创建起始页

右键Views文件夹,通过”添加->新建项”菜单添加一个名称为”_ViewStart.cshtml”的MVC视图起始页。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

使用起始页

在起始页添加对布局页的引用,修改_ViewStart.cshtml起始页的内容如下:

“{布局=“_layout”;}

现在将Home/Index.cshtml页面头部中对布局页的引用部分代码去掉,运行程序,已经可以成功的使用布局页。

布局页面禁用

对于个别不需要使用统一布局页的界面,如登录界面、注册界面,我们可以通过在页面头部添加以下代码,禁止使用布局页面。

{布局= NULL;}

0.2错误页面

开发环境错误页面

Asp.net Core为我们提供了统一的错误处理机制,在Startup.cs中的Configure方法中,已经默认添加了以下开发环境的错误处理代码。

如果((env。发展)){ //(APP。usedeveloperexceptionpage)开发环境异常处理;}

我们将HomeController中的Index方法修改为直接抛出异常,进行测试。

公共iactionresult指数(){抛出异常(“例外”);//返回视图();}

直接开发环境调试运行,得到如下结果页面,错误页面上会提示详细的错误信息,这有助于我们快速定位并解决异常信息。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

生产环境错误页

在生产环境我们一般不会将上述页面直接呈现给我们的客户,而是选择制作一个提示友好的错误页。我们首先修改Startup.cs中Configure方法,添加对生产环境的错误处理。

公共无效配置(iapplicationbuilder APP,ihostingenvironment env,iloggerfactory loggerfactory){ loggerfactory.addconsole();如果(env.isdevelopment()){ //发展环境app.usedeveloperexceptionpage异常处理();}否则{ /生产环境异常处理app.useexceptionhandler(“/共享/错误”);} // app.usestaticfiles(静态文件);// MVC,设置默认路由app.usemvc(路线= & gt;{ routes.maproute(名称:“默认模板”控制器=家} { } =指数/行动/ { ID {?});

在Controllers文件夹下创建一个包含如下内容,名称为SharedController的控制器。

公共课sharedcontroller:控制器{ /得到/ & lt;控制器& gt;iactionresult /公共(错误)返回(视图){ } };

在Shared文件下创建一个名称为Error.cshtml的错误页面,将Error.cshtml的内容修改为如下代码:

我是一个灰色和美丽的错误页面的界面。和;

模拟生产环境运行程序(具体方法参看上一篇使用Kestrel服务运行程序的第二种方法,或直接发布部署到IIS上),结果如下:

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

1使用鲍尔经理管理前端包

使用Bower管理器管理前端包,类似于使用NuGet管理我们的各种依赖类库,他的好处是,我们可以根据需要很方便的对我们引用的各种前端插件进行实时更新,Visual Studio 也会根据Bower的配置文件自动还原相关前端包的依赖。

利用Bower经理

右键我们的项目,添加一个Bower配置文件。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

Bower管理器添加项目可以通过直接修改Bower.json文件,或者使用可视化的管理器界面两种方式。以添加我们后续必不可少的bootstrap、font-awesome、icheck前端程序包引用为例。

1 bower.json直接修改

右键Bower管理器,选择打开Bower.json,添加相关的依赖项。

{“名字”:“ASP。NET”、“私人”:真的,“依赖”:{“引导”:“3.3.6”、“字体真棒”:“4.6.1”} })

2使用Bower visualmanager

右键Bower管理器,选择”管理Bower程序包”。搜索我们需要的包,单击安装即可。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

通过Bower管理器添加的前端程序包,会自动放在wwwroot下的lib文件夹下。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

2静态文件

前面说过Asp.net Core所有的请求管道配置都是在Startup.cs的Configure中,上面我们已经添加了bootstrap、font-awesome、icheck等前端包的引用,如果我们不对静态文件配置进行处理,当页面中引用相关css/js/images时,浏览器会告诉你找不到资源,我们需要在http请求管道中开启静态文件配置。

在project.json中添加Microsoft.AspNetCore.StaticFiles的依赖,默认已经有了,如果没有自己添加即可

“依赖”:“微软。磊科。APP”:{ {“版本”:“1.0.0”、“类型”:“平台”},”微软。aspnetcore。诊断”、“1.0.0”、“微软”。aspnetcore。服务器。iisintegration”、“1.0.0”、“微软”。aspnetcore。服务器。红隼”、“1.0.0”、“微软。扩展。测井。控制台”、“1.0.0”、“微软”。aspnetcore。MVC”:“1.0.0”、“微软”。aspnetcore。staticfiles”:“1.0.0”},

在Startup.cs的Configure方法中增加如下代码即可。

静态文件(应用程序使用。usestaticfiles)/ /;

3使用adminlte

AdminLTE是一个完全响应管理模板。基于Bootstrap3框架,易定制模板。适合多种屏幕分辨率,从小型移动设备到大型台式机。内置了多个页面,包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。最重要的是它是开源免费的,我们可以尽情的使用它。目前的最新版本是2.3.6,可以自行去搜索AdminLTE,官网下载使用。

3添加adminlte相关核心文件到项目中

在wwwroot下添加js、css、images三个文件夹。

1 将/AdminLTE-2.3.6/dist/js下的app.js及app.min.js两个文件拷贝至wwwroot/js文件夹下。

2 将/AdminLTE-2.3.6/dist/css下的所有文件拷贝至wwwroot/css文件夹下。

3 将/AdminLTE-2.3.6/dist/img下的所有文件拷贝至wwwroot/images文件夹下。

3.1 _layout.cshtml布局页面修改

添加AdminLTE相关css及js引用

公司名称;公司名称;公司名称!告诉响应屏幕宽度——>&lt元;内容=宽度=设备宽度,初始规模为1,最大规模为1,用户可扩展的=没有“name =“视口”& gt;& lt链接;rel=“样式表”href =“~ / lib /引导/距离/ CSS / bootstrap.css“><链接rel=“样式表”href =“~ / lib /字体真棒/ CSS / font-awesome.css”& gt;& lt链接;rel=“样式表”href =“~ / CSS / adminlte.css“><<- & gt!皮肤;链接rel=“样式表”href =“~ / CSS /皮肤/ skin-blue.css“></头& gt;
<script src=“~ / lib / jQuery /距离/ jQuery JS”></脚本><script src=“~ / lib /引导/距离/ JS /引导。JS”;“;”;“;”;“;”;

修改菜单部门代码

&lt;UL class=“侧边栏”&gt;&lt;李class=“头”& gt;权限管理& lt;/李& gt;& lt;!– Optionally, you can add icons to the links –> <li class=”active”><a href=”#”><i class=”fa fa-link”></i> <span>组织机构</span></a></li> <li><a href=”#”><i class=”fa fa-link”></i> <span>角色管理</span></a></li> <li><a href=”#”><i class=”fa fa-link”></i> <span>用户管理</span></a></li> <li><a href=”#”><i class=”fa fa-link”></i> <span>功能管理</span></a></li> <li><a href=”#”><i class=”fa fa-link”> < /i> < span> &lt /span> &lt management;; /a> < /li> @*< Li class= “treeview” > &lt a; href= > < “#” I class= “Fa fa-link” > < /i> < span> Multilevel< /span> < span class= “pull-right-container” > < I class= “Fa fa-angle-left pull-right” > < /i> < /span> < /a> < UL class= “treeview-menu” > < li> < a href= &gt Link in “#”; level 2< /a> < /li> &lt < a; li> > href= “#” Link in level 2< /a> < /li> < /ul> < /li> *@ < /ul>

完整代码请从github获取。

此时运行我们的程序,主页面已经变得比较漂亮了。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

3.2登录界面

1创建控制器

在Contrllers文件夹下添加LoginController控制器

2创建登录界面视图

在Views文件夹下新建Login文件夹,在Login文件夹下新增登录界面Index.cshtml,修改为不使用布局页,整体界面代码如下:

“{ =布局无效;&lt DOCTYPE html & gt;};!这是一个浏览器!Tell responsive to screen width –> &lt meta; content= width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no “name=” viewport “> < link rel=” stylesheet “href=” ~/lib/bootstrap/dist/css/bootstrap.css “> &lt link; rel=” stylesheet “href=” ~/lib/font-awesome/css/font-awesome.css “< link & gt; rel=” stylesheet “href=” ~/css/AdminLTE.css “> &lt link; rel=” stylesheet “href=” ~/lib/iCheck/skins/square/blue.css “> < /head> < body class= hold-transition login-page” > < div “class=” login-box “> &lt div; class=” login-logo “> < a Href= “http://fonour.cnblogs.com” target= “_blank” > < b> Fonour< /b> < /a> < /div> < < /.login-logo! – –> div class= > &lt login-box-body; P class= > “login-box-msg” permission management system < /p> < form action= /Home/Index “method=” post “> &lt div; class= form-group > &lt input; has-feedback” type= “text” class= “form-control” placeholder= “username” > < span class= “glyphicon glyphicon-user form-control-feedback” > < /span> < /div> < div class= > &lt “form-group has-feedback” input; type= “password” class= “form-control placeholder=” & “password” Gt; < span class= “glyphicon glyphicon-lock form-control-feedback” > < /span> < /div> < div class= “row” > &lt div; class= “col-xs-8” > < div class= “checkbox Icheck &gt”; < label> < input type= >“复选框”我记得和!- & gt;div class= &gt;&lt col-xs-4;按钮式=“提交”class=“按钮按钮按钮按钮主块平& gt;& lt /按钮&gt;日志;&lt;/ DIV &gt;&lt;- & gt & lt;!“/”!-!- & gt;脚本src=“~ / lib / jQuery /距离/ jQuery JS”&gt;&lt;/脚本&gt;&lt;script src=“~ / lib /引导/距离/ JS /引导。JS”&gt;&lt;/脚本&gt;& lt脚本”~ / lib /检查/检查。JS“&gt;src=;&lt;/脚本&gt;&lt;script&gt;$(函数(){ $(输入的)。ICheck(’icheckbox_square-blue”radioclass:’iradio_square-blue”{ checkboxclass:,increasearea:20 %,/ /可选});});&lt;/脚本&gt;&lt;/身体&gt;&lt;/ HTML & gt;

3将登录页更改为默认页

修改Startup.cs的Configure方法,设置默认路由为系统登录。

/ /使用MVC,设置默认路由系统日志app.usemvc(路线= & gt;{ routes.maproute(名称:“默认”的模板:“{ }或{登录控制器=行动=指数}、{身份证吗?});

运行系统,默认进入登录界面。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

单击登录按钮,已经可以跳转进入系统首页。

4总结

本次我们主要创建了系统通用的布局页、起始页及错误页,然后使用Bower管理器对系统前端依赖程序包进行了添加,配置启用静态文件,最后使用AdminLTE实现了系统登录页及主界面的布局。

Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

文章从互联网整理而来,旨在传播scrum、软件项目管理、研发项目管理、敏捷开发管理工具的知识与应用,帮助软件开发企业真正了解研发项目管理的价值和意义,如果本文侵犯了您的权益或者您需要具体了解更多国内做研发项目管理系统的公司翼发云敏捷项目管理系统的相关信息,欢迎和我们联络:

【网址】www.effapp.com

2018-02-24T21:07:25+08:002018-02-24 21:07:25|Categories: scrum项目管理|