ASP.Net Core Razor 部署AdminLTE框架-程序员宅基地

技术标签: ui  json  数据库  

1、AdminLTE

一个基于 bootstrap 的轻量级后台模板

2、AdminLTE 文档

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

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

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

3、AdminLTE 布局

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

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

  • 包装.wrapper。包裹整个网站的div。

  • 主标题.main-header。包含徽标和导航栏。

  • 边栏.sidebar-wrapper。包含用户面板和侧边栏菜单。

  • 内容.content-wrapper。包含页眉和内容。

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

4、Asp.Net Core Razor

 

新建项目Asp.net Core Web应用程序,默认就是Razor Pages,然后添加相应的模块,

如图:本文使用的SDK版本为:dotNet Core 2.1

5、First

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

  • bower_components  基本组件。

  • dist  adminlte的主要文件。

  • plugins 其他插件。

6、Second

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

<!-- 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">

在body中,添加js:

 <!-- 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>

sidebarskins.js是个人汉化的侧边栏皮肤,框架包里不存在

7、Third

开始使用AdminLTE

 

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

 

 

移动端的效果:

 

需要注意的是,点击这个小图标可以实现左侧边栏收缩展开的功能,当只有侧边栏可以正常收缩展开但Logo无动于衷的时候,

你可能是少了【sidebar-mini】样式和【logo-mini】logo小图的引用

 

 

8、添加一个登陆

登录界面写得比较简约,在Pages文件夹中,添加一个Razor界面

@page
@model AdminLTE.Net.Web.Pages.LoginModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录 - AdminLTE.Net.Web</title>
    <meta name="developer" content="EminemJK">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="~/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" />
    <link href="~/css/login.css" rel="stylesheet" />
</head>
<body>
    <div>
        <div class="row">
            <div class="loginHeader">
                <img class="logo-img" src="~/images/banana_logo.ico" />
                <h1 class="logo-name">Banana</h1>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="row login-bg">
            <div class="loginInBox">
                @if (!string.IsNullOrEmpty(Model.Message))
                {
                    <p class="login-box-msg" style="color:red">@Model.Message</p>
                }
                else
                {
                    <p class="login-box-msg">Sign in to start your session</p>
                }

                <form method="post">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" asp-for="Login.UserName">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" asp-for="Login.Password">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-flat login-btn">Sign In</button>
                </form>
            </div>
        </div>
    </div>

    <footer class="footer">
        <strong>Copyright  2018 <a href="http://www.cnblogs.com/EminemJK/">EminemJK</a>.</strong> All rights reserved.
    </footer>
</body>
</html>

 

在Startup中引入Authentication身份验证:

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

 

Configure方法内调用

app.UseAuthentication();

 

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

[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();
        }
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特性即可:

namespace AdminLTE.Net.Web.Pages
{
    [Authorize(AuthenticationSchemes = CookieService.AuthenticationScheme)]
    public class IndexModel : BasePageModel
    {
         
        public void OnGet()
        {
             
        }
    }
}

 

9、踩坑

一、Ajax Post请求, 400 Bad Request

 

   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('上传失败')
                }
            });
        };

 

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

这里请求失败,是因为POST没有提交AntiForgeryToken。

解决方法:

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

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

2.页面*.cshtml头部加上 

@Html.AntiForgeryToken()

3.ajax引入

  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('上传失败')
                }
            });
        };

然后既可以正常访问Handler

 

二、DataTables参数实例加说明

 

var table = $('#userListTable').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": function (data, callback, settings) {

        //data的参数请参考: https://segmentfault.com/a/1190000004478726
        var param = {};
        param.draw = data.draw;
        param.pageNum = (data.start / data.length) + 1;
        param.pageSize = data.length;

        param.sex = $('#select-sex option:selected').val();
        param.phone = $('#input-phone').val();
        param.name = $('#input-name').val();
        $.ajax({
            type: "GET",
            data: param,
            url: "/Account/UserList?handler=UserPage",
            dataType: "json",
            success: function (data) {
                //成功后回调自动渲染
                callback(data);
            }
        });
    },
    'columns': [
        { 'data': 'id' },
        { 'data': 'name' },
        { 'data': 'userName' },
        { 'data': 'sexString' },
        { 'data': 'phone' },
        { 'data': 'createTime' },
        {
            'data': 'enableString',
            'render': function (data, type, row) {
                if (row.enable == 1)
                    return '<span style="color:#19be6b" >' + row.enableString + '</span>';
                else
                    return '<span style="color:#ed3f14" >' + row.enableString + '</span>';
            }
        },
        {
            'data': null,
            'render': function (data, type, row) {
                return '<a id="btn-edit" class="btn btn-success btn-xs"  title="编辑" onClick=btn_edit(' + row.id + ')><i class="fa fa-edit"></i>编辑</a>     ' +
                    '<a id="btn-edit" class="btn btn-danger btn-xs"  title="删除" onClick=btn_edit(' + row.id + ')><i class="fa fa-trash "  title="删除" style="cursor:pointer"></i>删除</a>';
            }
        },
    ],
    //datatable设置参数 http://www.datatables.club/reference/option/
    'paging': true,         //启用分页
    'lengthChange': true,   //设置每页数量
    'searching': false,
    'ordering': false,
    'info': true,
    'autoWidth': false,
    //设置中文
    'language': {
        "sProcessing": "玩命加载中...",
        "sLengthMenu": "每页显示显示 _MENU_",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "玩命加载中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});

 

 

 

 

10、Banana

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

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

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

 

转载于:https://www.cnblogs.com/zyg316/p/10953831.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30847865/article/details/97737272

智能推荐

【K210+micropython】学习总结_k210 mircpython原理-程序员宅基地

文章浏览阅读815次。【K210+micropython】学习总结这篇就不用模板了。K210+microPyhton五天学习圆满结束了!当然我学到的电控知识并不只前面的那几篇博客,我只是挑选了几个学习过程中比较“印象深刻”的几个知识,其他的什么串口通信、点灯、传感器读取等等都没写(其实是懒。。)。毕竟是比赛集训阶段,我现在算是在摸鱼。眼看电赛在即,也该多提高一下图像处理算法和机器学习方面的运用能力了,不多说了,学习matlab搞数模去了(bushi)。——————————————————————————我是分割线———_k210 mircpython原理

android studio ADB integration问题_enable adb integration没有-程序员宅基地

文章浏览阅读1k次。Error running app: Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled._enable adb integration没有

Android 增量编译总结-程序员宅基地

文章浏览阅读2.2k次。增量编译简介 增量编译是相对全量编译而言的。所谓增量编译,是指当源程序的局部发生变更后进重新编译的工作只限于修改的部分及与之相关部分的内容,而不需要对全部代码进行编译。增量编..._android studio 增量编译

html无法正常播放MP3格式的音频及解决方案_html mp3-程序员宅基地

文章浏览阅读1.1w次。问题描述:设计当鼠标悬停到标签上时,会播放对应的音频。报错如下:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.原因:在Chrome的现代版本中,您无法在默认情况下启用声音时自动播放视频。解决方案:在audio标签属性..._html mp3

css+html知识总结-程序员宅基地

文章浏览阅读96次。HTML一、概述 1、什么是 HTML:超文本标记语言,使用一对尖括号括起来,实现特殊的效果定义,用于编写网页(后缀为.html、.htm的文件) 2、编辑:文本编辑工具,都可以编写 HTML页面 记事本、editplus、ultraedit、DW、webstorm、apanta... 运行:浏览器 IE、firefox、chrome、opera、safari 3、HTML是一种解释..._css是文本编标记语言么

k8+容器热备-程序员宅基地

文章浏览阅读946次。安装docker准备nginx(nginx:v3)和keepalived镜像(osixia/keepalived)生成热备配置文件(docker-compose.yml Dockerfile nxinx.conf keepalived.conf check_nginx.conf)docker-compose.ymlversion: '2'services: keepalive...

随便推点

计算机专业学生对专业课的学习_计算机专业课学习-程序员宅基地

文章浏览阅读1.1k次。 从小一直到大一直都在上学,学习各种课程。作为一个计算机专业的学生,最近在想哪些课程需要学好,哪些没有学还需自己去学。不论什么专业,计算机基础、英语和数学(文科除外)是最基础的课程,在以后的工作中很可能用到,所以作为常识要学好。那么计算机专科课程呢?个人认为,根据你的研究方向和应用方向,专门学好那方向的。另外,作为计算机专业的大学生,有些课程是基础的,或者说是重要的,主要有c/c++程_计算机专业课学习

【情感识别】PNN概率神经网络语音情感识别【含Matlab源码 544期】-程序员宅基地

文章浏览阅读12次。PNN概率神经网络语音情感识别完整的代码,方可运行;可提供运行操作视频!适合小白!

bzoj2594 [Wc2006]水管局长数据加强版 离线+LCT维护边权-程序员宅基地

文章浏览阅读71次。LCT维护边权势把每条边都当成一个点赋予点权,原来的点当然也保留,如果求和点权赋为0,求max点权赋为-INF,如果都要求,那就弄两三个点权。需要注意的是,LCT的link操作必须换根,如果不把x设为根而直接pre[x]=y的话,结果并不是连接x和y而是连接x的splay的根和y。在弹飞绵羊的题中之所以不用换根是因为x本来就是根。#include<bits/stdc++.h&..._lct维护边权

167. 链表求和(add-two-numbers)(c++)----lintcode面试题之链表_add-two-numbers c++-程序员宅基地

文章浏览阅读329次,点赞2次,收藏2次。(一)题目要求:你有两个用链表代表的整数,其中每个节点包含一个数字。数字存储按照在原来整数中相反的顺序,使得第一个数字位于链表的开头。写出一个函数将两个整数相加,用链表形式返回和。(二)示例:给出两个链表 3-&gt;1-&gt;5-&gt;null 和 5-&gt;9-&gt;2-&gt;null,返回 8-&gt;0-&gt;8-&gt;null(三)题解:方法一:/** * Definit..._add-two-numbers c++

面试了一个 46 岁的程序员,我思绪万千_最近一直忙于面试,人事推给了我一份简历,职位是算法工程师,年龄是 46 岁-程序员宅基地

文章浏览阅读567次。转载提示:这是一篇旧文最近一直忙于面试,人事推给了我一份简历,职位是算法工程师,年龄是 46 岁,我揉了揉眼睛后再看看,确实是 46 岁。抱着忐忑的心,我电话面试一番后,还是不觉得他和我们的团队很适合。人都会有同理心,尤其是这么大岁数的程序员还是为了生计来找工作,心还是会隐隐触痛。年龄是多数程序员的天敌,之前没有概念因为生活中样本较少,现在来了一个鲜明的例子,并且还需要自己亲手关闭一扇..._最近一直忙于面试,人事推给了我一份简历,职位是算法工程师,年龄是 46 岁

linux 如何进入刚刚创建的文件夹_linux创建文件夹并进入-程序员宅基地

文章浏览阅读4.5k次。我们知道 linux 下创建文件夹命令是 mkdir一般情况下, 我们期望在创建文件夹后, 并进入该文件夹这里以创建 test 文件夹, 并进入 test 文件夹为例# 创建 test 文件夹, 并进入 test 文件夹mkdir test && cd $_总结: 通过 $_ 获取到上次命令的最后一个参数值即获取 mkdir 最后一个参数值 test, 作为 cd 的参数, 即可进入刚刚创建的文件夹中..._linux创建文件夹并进入