SP.Net Core Razor+AdminLTE 应用详解

 

 AdminLTE 

SP.Net Core Razor+AdminLTE  应用详解

   一个基于 bootstrap 的轻量级后台模板,这个前端界面个人感觉很清爽,对于一个大后端的我来说,可以减少较多的时间去承担前端的工作但又必须去独立去完成一个后台系统开发的任务,并且,文档还算比较齐全,对着demo可以完成一个基本的前端框架搭建了。大家如有更为好看的又方便后端上手的前端框架,也可以在留言区分享一下呗。

AdminLTE 文档

在线中文Demo:http://adminlte.la998.com/

在线中文文档:http://adminlte.la998.com/documentation/index.html

Github:https://github.com/almasaeed2010/AdminLTE/releases

AdminLTE 布局

AdminLTE依赖于两个主要框架:JQ和Bootstrap,其他插件可以按需增加。

从文档可以知道,使用AdminLTE主要有四个部分:

  • 包装.wrapper。包裹整个网站的div。
  • 主标题.main-header。包含徽标和导航栏。
  • 边栏.sidebar-wrapper。包含用户面板和侧边栏菜单。
  • 内容.content-wrapper。包含页眉和内容。

在文档中,可以找到下载地址,本文示例是使用最新的版本V2.4.5。

 Asp.Net Core Razor

SP.Net Core Razor+AdminLTE  应用详解

新建项目Asp.net Core Web应用程序,默认就是Razor Pages,然后添加相应的模块,如图:本文使用的SDK版本为:dotNet Core 2.1。

SP.Net Core Razor+AdminLTE  应用详解

First

在Asp.Net Core项目中,引用AdminLTE,在wwwroot仅添加如图三个文件夹即可: 

SP.Net Core Razor+AdminLTE  应用详解

  • bower_components  基本组件。
  • dist  adminlte的主要文件。
  • plugins 其他插件。

Second

在_Layout.cshtml文件中添加引入相关文件:

SP.Net Core Razor+AdminLTE  应用详解
 <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="~/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="~/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link href="~/adminlte/bower_components/Ionicons/css/ionicons.min.css" rel="stylesheet" />
    <!-- Theme style -->
    <link rel="stylesheet" href="~/adminlte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="~/adminlte/dist/css/skins/_all-skins.min.css">
    <!-- Pace style -->
    <link href="~/adminlte/plugins/pace/pace.min.css" rel="stylesheet" />
    <link href="~/css/common.css" rel="stylesheet" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
SP.Net Core Razor+AdminLTE  应用详解

在body中,添加js:

SP.Net Core Razor+AdminLTE  应用详解
 <!-- jQuery 3 -->
    <script src="~/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="~/adminlte/bower_components/jquery-ui/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge(‘uibutton‘, $.ui.button);
    </script>
    <!-- Bootstrap 3.3.7 -->
    <script src="~/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Slimscroll -->
    <script src="~/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="~/adminlte/bower_components/fastclick/lib/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="~/adminlte/dist/js/adminlte.min.js"></script>
    <!-- Skin -->
    <script type="text/javascript" src="~/adminlte/dist/js/sidebarskins.js" charset="gbk"></script>
SP.Net Core Razor+AdminLTE  应用详解

sidebarskins.js是本人汉化的侧边栏皮肤

SP.Net Core Razor+AdminLTE  应用详解

坑1:一般情况,发现某些功能运行不起来的都是引用不正确导致的,这个要耐心对照好Demo来检查,或者直接用Demo来修改吧。

Third

开始使用AdminLTE,这里直接贴图吧,图上有注释和代码折叠比较直观点,重要的地方在放代码。

SP.Net Core Razor+AdminLTE  应用详解

最后就可以运行项目来预览一下效果了:

SP.Net Core Razor+AdminLTE  应用详解

都使用到bootstrap,必须得看看移动端的效果,还不错吧。

SP.Net Core Razor+AdminLTE  应用详解

 坑2:需要注意的是,点击这个小图标SP.Net Core Razor+AdminLTE  应用详解可以实现左侧边栏收缩展开的功能,当只有侧边栏可以正常收缩展开但Logo无动于衷的时候,你可能是少了【sidebar-mini】样式和【logo-mini】logo小图的引用

SP.Net Core Razor+AdminLTE  应用详解       SP.Net Core Razor+AdminLTE  应用详解

添加一个登陆

登录界面写得比较简约,我比较喜欢这种风格。前端写得不多,所以还得前端的女票指导一二,不然就是后端的设计的界面了,你懂的。

SP.Net Core Razor+AdminLTE  应用详解SP.Net Core Razor+AdminLTE  应用详解

在Pages文件夹中,添加一个Razor界面,并撸好界面代码:

SP.Net Core Razor+AdminLTE  应用详解 View Code

在Startup中引入Authentication身份验证:

services.AddAuthentication(CookieService.AuthenticationScheme)
                    .AddCookie(CookieService.AuthenticationScheme, o =>
            {
                o.LoginPath = new PathString("/Login");
            });

Configure方法内调用

app.UseAuthentication();

在Login.cshtml.cs中增加一个OnPostAsync的方法:

SP.Net Core Razor+AdminLTE  应用详解
       [HttpPost]
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                Message = ModelState.Root.Errors[0].ErrorMessage;
            }
            else
            {
                var user = userService.Login(Login.UserName, Login.Password);
                if (user != null)
                {
                    VUserModel model = new VUserModel()
                    {
                        Id = user.Id,
                        UserName = user.UserName,
                        Time = DateTime.Now
                    }; 
                    var identity = new ClaimsIdentity(CookieService.AuthenticationScheme); 
                    identity.AddClaim(new Claim(ClaimTypes.Sid, CookieService.GetDesEncrypt(model)));

                    await HttpContext.SignInAsync(CookieService.AuthenticationScheme, new ClaimsPrincipal(identity), new AuthenticationProperties()
                    {
                        //记住我
                        IsPersistent = true, 
                        //过期时间
                        ExpiresUtc = DateTimeOffset.Now.Add(TimeSpan.FromMinutes(30))
                    }); 
                    return RedirectToPage("./Index"); 
                }
                Message = "登录失败,用户名密码不正确。";
            }
            return Page();
        }
SP.Net Core Razor+AdminLTE  应用详解
  userService和CookieService都是在业务层定义的,gayhub会在文章末尾。

在.Net Core Razor中,xx.cshtml.cs中默认触发的是Get和Post方法,

  • OnGet
  • OnPost
  • OnGetAsync
  • OnPostAsync

如果是需要自定义的,举个栗子,定义为:OnPostLoginAsync,然后在Form表单提交的【按钮】增加asp-page-handler="Login",详细的推荐大家阅读这篇文章:ASP.NET Core - Razor页面之Handlers处理方法

接着,然后再Index和需要身份验证的地方都加上Authorize特性即可:

SP.Net Core Razor+AdminLTE  应用详解
namespace AdminLTE.Net.Web.Pages
{
    [Authorize(AuthenticationSchemes = CookieService.AuthenticationScheme)]
    public class IndexModel : BasePageModel
    {
         
        public void OnGet()
        {
             
        }
    }
}
SP.Net Core Razor+AdminLTE  应用详解

踩坑

一、Ajax Post请求, 400 Bad Request

SP.Net Core Razor+AdminLTE  应用详解
        function uploadfile() {
            var file = $("#input-userimg")[0].files[0];
            var data = new FormData();
            data.append(‘file‘, file);
            $.ajax({
                url: "/Account/UserList?handler=Upload",
                type: ‘POST‘,
                data: data,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    $("#user-img").attr(‘src‘, returndata.path); 
                },
                error: function (a, b, c) {
                    alert(‘上传失败‘)
                }
            });
        };
SP.Net Core Razor+AdminLTE  应用详解

SP.Net Core Razor+AdminLTE  应用详解

折腾许久,原因是Razor被设计为可以自动防止跨站请求伪造(CSRF / XSRF)攻击。你不必编写任何其他代码。Razor页面中自动包含防伪令牌生成和验证。这里请求失败,是因为POST没有提交AntiForgeryToken。

解决方法:

1.增加"XSRF-TOKEN"标识到框架中

//增加了"XSRF-TOKEN"标识,值为表单自动生成的防伪标记
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

2.页面*.cshtml头部加上 

@Html.AntiForgeryToken()

3.ajax引入

SP.Net Core Razor+AdminLTE  应用详解
        function uploadfile() {
            var file = $("#input-userimg")[0].files[0];
            var data = new FormData();
            data.append(‘file‘, file);
            $.ajax({
                url: "/Account/UserList?handler=Upload",
                type: ‘POST‘,
                data: data,
                contentType: false,
                processData: false,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $(‘input:hidden[name="__RequestVerificationToken"]‘).val());
                },
                success: function (returndata) {
                    $("#user-img").attr(‘src‘, returndata.path); 
                },
                error: function (a, b, c) {
                    alert(‘上传失败‘)
                }
            });
        };
SP.Net Core Razor+AdminLTE  应用详解

然后既可以正常访问Handler

SP.Net Core Razor+AdminLTE  应用详解

二、DataTables参数实例加说明

SP.Net Core Razor+AdminLTE  应用详解 View Code

 

Last

附上这些天来的成果,发现,我并不适合写前端,太丑了,哈哈。

SP.Net Core Razor+AdminLTE  应用详解

最后,Show me the code。

SP.Net Core Razor+AdminLTE  应用详解 

Banana

SP.Net Core Razor+AdminLTE  应用详解 

SP.Net Core Razor+AdminLTE  应用详解 SP.Net Core Razor+AdminLTE  应用详解 SP.Net Core Razor+AdminLTE  应用详解

Demo中会使用到这两个个人封装的组件:

SP.Net Core Razor+AdminLTE  应用详解

Banana.Uow是基于Dapper封装的工作单元和仓储;

Banana.Utility是常用的工具类,有Redis,加解密,拼音等等;

欢迎大家在Issues中提出意见,大家共同进步。

 

SP.Net Core Razor+AdminLTE 应用详解

(0)
(0)
   
举报
评论 一句话评论(0
上一篇:js反爬原理


下一篇:php中代码执行&&命令执行函数